BootStrap基本樣式的使用方法

這篇文章主要介紹BootStrap基本樣式的使用方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家專業(yè)提供齊河企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為齊河眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

Bootstrap基本樣式的使用

一、準備工作

1，響應(yīng)式布局

Bootstrap是一種響應(yīng)式布局框架，可以自動適配不同設(shè)備大小的顯示模式，使用方式：在head標簽中引入以下代碼：

<meta name="viewport" content="width=device-width, initial-scale=1">

其中 initial-scale=1 表示縮放比例為1.

2，引入bootstrap.css

可以將bootstrap.css文件下載到本地進行本地導入，還可以使用cdn導入，其中CDN導入方法如下：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用CDN的優(yōu)缺點：1，必須在網(wǎng)絡(luò)環(huán)境下才可引入；2，如果在當?shù)氐?a title="服務(wù)器" target="_blank" >服務(wù)器上有文件，則加載速度會很快，比如CDN在青島的某個服務(wù)器上存在bootstrap.css文件，則青島地區(qū)的用戶引入該文件的速度會很快，反之速度較慢，加載的延遲較高；3，使用CDN加載css文件在Webstorm軟件中沒有代碼提示，如需要代碼提示，建議將bootstrap.css下載到本地再引入。

3，引入bootstrap.js和jQuery.js

可以將bootstrap.js和jQuery.js文件下載到本地進行本地導入，還可以使用CDN導入，其中CDN導入方法如下：

<!-- jQuery 某些bootstrap插件需要使用 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 所有的bootstrap插件都需要引入 -->
<script src="js/bootstrap.min.js"></script>

注意：盡量將js文件的引入放在body標簽的最后，提高瀏覽器渲染頁面的性能。

二、開發(fā)中常使用到的樣式

１，柵格系統(tǒng)

Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。

• “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補（padding）。流式布局容器（.container-fluid），將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉(zhuǎn)換為 100% 寬度的布局。與.container的區(qū)別就是將container的最大寬度始終設(shè)置為設(shè)備屏幕的100%。

• 柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創(chuàng)建。

• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。

代碼片段如下：

<p class="container">
//將一行按照8:4分成兩列
  <p class="row">
    <p class="col-md-8">.col-md-8</p>
    <p class="col-md-4">.col-md-4</p>
  </p>
//將一行三等分為三列
  <p class="row">
    <p class="col-md-4">.col-md-4</p>
    <p class="col-md-4">.col-md-4</p>
    <p class="col-md-4">.col-md-4</p>
  </p>
//將一行等分為兩列
  <p class="row">
    <p class="col-md-6">.col-md-6</p>
    <p class="col-md-6">.col-md-6</p>
  </p>
</p>

柵格參數(shù)

通過下表可以詳細查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的；

兼容模式是向后兼容，例如當時用.col-md-時，在大屏幕時依然按照中等屏幕的布局方式排列，在小屏幕或者超小屏幕時則按照堆疊的方式排列，同樣的原理，如果設(shè)置.col-xs-，則在所有的設(shè)備上都顯示為其設(shè)置的排版布局，因為柵格系統(tǒng)是向后兼容；

柵格布局采用的是左浮動的布局方式，可以通過定義class屬性值為.clearfix來清除浮動；

.col-md-offset-5來設(shè)置該柵格左邊空出的5格，.col-md-push-3,表示該柵格向右移動3格，.col-md-pull-3表示改柵格向左移動3格；

	超小屏幕 手機 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面顯示器 (≥992px)	大屏幕 大桌面顯示器 (≥1200px)
柵格系統(tǒng)行為	總是水平排列	開始是堆疊在一起的，當大于這些閾值時將變?yōu)樗脚帕蠧
.container 最大寬度	None （自動）	750px	970px	1170px
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）數(shù)	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

通過柵格系統(tǒng)的布局方式，可以很簡潔的設(shè)計出自己需要的響應(yīng)式布局排版，能夠在不同設(shè)備上達到不同的顯示效果。

通過下面的實例說明柵格布局在手機、平板、電腦設(shè)備上的動態(tài)布局的強大：

<p class="container">
 <p class="row">
   <p class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</p>
   <p class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</p>
 </p>
</p>

其中第三行的class屬性值表示的意思是，在超小屏幕（<768px）上顯示為12個柵格，在小屏幕（>768px）上顯示為6個柵格，在中等屏幕（>=992px）上顯示的為8個柵格，大屏幕上未定義，根據(jù)柵格的向后兼容，在大屏幕上顯示的為中等屏幕的布局。

媒體查詢

很容易理解，如下代碼：

-width: @screen-sm--width: @screen-md--width: @screen-lg-min) { ... }

e.g:
p{
/* 中等屏幕（桌面顯示器，大于等于 992px） 此時執(zhí)行{}里面的樣式*/

@media (min-width: @screen-md-min) { width:100% }

/* 大屏幕（大桌面顯示器，大于等于 1200px） 此時執(zhí)行{}里面的樣式*/

@media (min-width: @screen-lg-min) { width:80%}}

2、表格的常用樣式

基礎(chǔ)樣式.table

帶條紋區(qū)分行的表格.table-striped

帶邊框的表格.table-border

帶鼠標懸停是區(qū)分的表格.table-hover

表格行顯示的樣式，通過設(shè)置tr的class屬性值來控制，常用屬性值有.info/.success/.warning/.active/.danger

以上是“BootStrap基本樣式的使用方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：BootStrap基本樣式的使用方法
網(wǎng)頁網(wǎng)址：http://muchs.cn/article24/jchcje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站設(shè)計公司、Google、、虛擬主機、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)