Boostrap入門級css樣式學習

1. 自適應網頁設計 
首先，在網頁代碼的頭部，加入一行 viewport元標籤。viewport是網頁默認的寬度和高度，

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

• 1

上面這行代碼的意思是，網頁寬度默認等於屏幕寬度(width=device-width)，原始縮放比例(initial-scale=1)爲1.0，即網頁初始大小佔屏幕面積的100%。 全部主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器(主要是IE六、七、8)，須要使用 css3-mediaqueries.js。

2. 輪播組件 carousel 
經過 javascript 初始化輪播組件，接受一個可選的object類型的options參數，並開始幻燈片循環。

$('.carousel').carousel({ interval: 2000 , //圖片輪換的等待時間 //還有其餘兩種： pause 類型String 默認值是"hover" 鼠標放上去暫停輪播，離開開始輪播 //wrap 類型boolean 默認值是true 是否持續輪播 });

• 1
• 2
• 3
• 4
• 5

直接放入參數值 
.carousel(‘cycle’) 從左到右循環各幀。 
.carousel(‘pause’) 中止輪播。 
.carousel(number) 將輪播定位到指定的幀上（幀下標以0開始，相似數組）。 
.carousel(‘prev’) 返回到上一幀。 
.carousel(‘next’) 轉到下一幀。

3. 響應式圖片

<img src="..." class="img-responsive" alt="Responsive image">

• 1

經過添加.img-responsive class可讓Bootstrap 3中的圖片對響應式佈局的支持更友好。其實質是爲圖片賦予了max-width: 100%;和height: auto;屬性，可讓圖片按比例縮放，不超過其父元素的尺寸。

4. 透明度設置：已經爲 ie8兼容

.opacity(@opacity) { opacity: @opacity; // IE8 filter @opacity-ie: (@opacity * 100); filter: ~"alpha(opacity=@{opacity-ie})"; }

1. 標題樣式 
除了有標籤 h1~h6 以外，bootstrap還提供了對應的六個類名：.h1~.h6

• 從新設置了margin-top和margin-bottom的值， h1~h3重置後的值都是20px；h4~h6重置後的值都是10px。
• 全部標題的行高都是1.1（也就是font-size的1.1倍）,並且文本顏色和字體都繼承父元素的顏色和字體。
• 固定不一樣級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

2.副標題 small標籤

• 行高都是1，並且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置爲灰色（#999）
• 內的文本字體在h1~h3內，其大小都設置爲當前字號的65%；而在h4~h6內的字號都設置爲當前字號的75%

3.段落P強調內容 lead類樣式 
若是想讓一個段落p突出顯示，能夠經過添加類名「.lead」實現，其做用就是增大文本字號，加粗文本，並且對行高和margin也作相應的處理。 
用法：

<p>我是普通文本，個人樣子長成這樣我是普通文本，個人樣子長成這樣我是普通文本，</p> <p class="lead">我是特地要突出的文本，個人樣子成這樣。我是特地要突出的文本，個人樣子長成這樣。</p>

• 1
• 2

4.粗體 
在Bootstrap中，可使用<b>和<strong>標籤讓文本直接加粗。

5. 斜體 
斜體相似於加粗同樣，除了能夠給元素設置樣式font-style值爲italic實現以外，在Bootstrap中還能夠經過使用標籤<em>或<i>來實現。

6.強調相關的類 
在Bootstrap中除了使用標籤<strong>、<em>等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這裏稱其爲強調類名（相似前面說的「.lead」）,這些強調類都是經過顏色來表示強調，具本說明以下：

.text-muted：提示，使用淺灰色（#999） .text-primary：主要，使用藍色（#428bca） .text-success：成功，使用淺綠色(#3c763d) .text-info：通知信息，使用淺藍色（#31708f） .text-warning：警告，使用黃色（#8a6d3b） .text-danger：危險，使用褐色（#a94442） 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

7.文本對齊風格

.text-left：左對齊 .text-center：居中對齊 .text-right：右對齊 .text-justify：兩端對齊

• 1
• 2
• 3
• 4

8.列表

• 去點列表：經過給無序列表添加一個類名「.list-unstyled」,這樣就能夠去除默認的列表樣式的風格。
• 內聯列表：經過添加類名「.list-inline」來實現內聯列表，簡單點說就是把垂直列表換成水平列表，並且去掉項目符號（編號），保持水平顯示。也能夠說內聯列表就是爲製做水平導航而生。
• 水平定義列表：Bootstrap能夠給

  添加類名「.dl-horizontal」給定義列表實現水平顯示效果。

9.代碼相關

• 使用<code></code>來顯示單行內聯代碼
• 使用<pre></pre>來顯示多行塊代碼
• 使用<kbd></kbd>來顯示用戶輸入代碼
• Y軸出現滾動條：在pre標籤上添加類名「.pre-scrollable」

10.表格

.table：基礎表格 .table-striped：斑馬線表格 .table-bordered：帶邊框的表格 .table-hover：鼠標懸停高亮的表格 .table-condensed：緊湊型表格 .table-responsive：響應式表格

• 1
• 2
• 3
• 4
• 5
• 6

10-1.表格行的類

類名	描述
.active	表示當前活動的信息
.success	表示成功或者正確的行爲
.info	表示中立的信息或行爲
.warning	表示警告，須要特別注意
.danger	er 表示危險或者多是錯誤的行爲

10-2.基礎表格 注意

• 在Bootstrap中，對於基礎表格是經過類名「.table」來控制。若是在元素中不添加任何類名，表格是無任何樣式效果的。

10-3.響應式表格

• 在Bootstrap中也爲表格提供了響應式的效果，將其稱爲響應式表格。 
  Bootstrap提供了一個容器，而且此容器設置類名「.table-responsive」,此容器就具備響應式效果，而後將置於這個容器當中，這樣表格也就具備響應式效果。 
  Bootstrap中響應式表格效果表現爲：當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，表格底部水平滾動條就會消失。

11. 基礎表單

• 類名form-control 
  一、寬度變成了100% 
  二、設置了一個淺灰色（#ccc）的邊框 
  三、具備4px的圓角 
  四、設置陰影效果，而且元素獲得焦點之時，陰影和邊框效果會有所變化 
  五、設置了placeholder的顏色爲#999

• 類名 form-horizontal 
  水平表單風格（標籤居左，表單控件居右）

• 類名form-inline 
  將表單的控件都在一行內顯示

• 表單控件(輸入框input) 
  單行輸入框，常見的文本輸入框，也就是input的type屬性值爲text。在Bootstrap中使用input時也必須添加type類型，若是沒有指定type類型，將沒法獲得正確的樣式，由於Bootstrap框架都是經過input[type=「?」](其中?號表明type類型，好比說text類型，對應的是input[type=「text」])的形式來定義樣式的。爲了讓控件在各類表單風格中樣式不出錯，須要添加類名「form-control」

• 表單控件(下拉選擇框select) 
  多行選擇設置multiple屬性的值爲multiple<select multiple class="form-control">

• 表單控件(文本域textarea) 
  文本域和原始使用方法同樣，設置rows可定義其高度，設置cols能夠設置其寬度。但若是textarea元素中添加了類名「form-control」類名，則無需設置cols屬性。由於Bootstrap框架中的「form-control」樣式的表單控件寬度爲100%或auto。

<form role="form"> <div class="form-group"> <textarea class="form-control" rows="3"></textarea> </div> </form>

• 1
• 2
• 3
• 4
• 5

• 表單控件(複選框checkbox和單選擇按鈕radio) 
  一、不論是checkbox仍是radio都使用label包起來了 
  二、checkbox連同label標籤放置在一個名爲「.checkbox」的容器內 
  三、radio連同label標籤放置在一個名爲「.radio」的容器內 
  在Bootstrap框架中，主要藉助「.checkbox」和「.radio」樣式，來處理複選框、單選按鈕與標籤的對齊方式。

• 表單控件(複選框和單選按鈕水平排列) 
  一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」 
  二、若是radio須要水平排列，只須要在label標籤上添加類名「radio-inline」

• 表單控件(按鈕) 
  

• 表單控件大小 
  一、input-sm:讓控件比正常大小更小 
  二、input-lg:讓控件比正常大小更大 
  這兩個類適用於表單中的input，textarea和select控件，具體使用以下：

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大"> <input class="form-control" type="text" placeholder="正常大小"> <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">

• 1
• 2
• 3

• 表單控件狀態(焦點狀態) 
  焦點狀態是經過僞類「:focus」來實現

• 表單控件狀態(禁用狀態) 
  只須要在須要禁用的表單控件上加上「disabled」便可

<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>

• 1

在Bootstrap框架中，若是fieldset設置了disabled屬性，整個域都將處於被禁用狀態。若是legend中有輸入框的話，這個輸入框是沒法被禁用的。

• 表單控件狀態(驗證狀態) 
  一、.has-warning:警告狀態（黃色） 
  二、.has-error：錯誤狀態（紅色） 
  三、.has-success：成功狀態（綠色） 
  使用的時候只須要在form-group容器上對應添加狀態類名。 
  不少時候，在表單驗證的時候，不一樣的狀態會提供不一樣的 icon，好比成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。若是你想讓表單在對應的狀態下顯示 icon 出來，只須要在對應的狀態下添加類名「has-feedback」。請注意，此類名要與「has-error」、「has-warning」和「has-success」在一塊兒：

<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功狀態</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning1">警告狀態</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">錯誤狀態</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">email地址</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </form>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

在 Bootstrap 的小圖標都是使用@font-face來製做（後面的內容中將會着重用一節內容來介紹）。並且必須在表單中添加了一個 span 元素

• 表單提示信息 
  日常在製做表單驗證時，要提供不一樣的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個help-block樣式，將提示信息以塊狀顯示，而且顯示在控件底部。help-inline讓提示信息顯示在控件的後面，也就是同一水平顯示

  12.按鈕

<button class="btn" type="button">基礎按鈕.btn</button> <button class="btn btn-default" type="button">默認按鈕.btn-default</button> <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button> <button class="btn btn-success" type="button">成功按鈕.btn-success</button> <button class="btn btn-info" type="button">信息按鈕.btn-info</button> <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button> <button class="btn btn-danger" type="button">危險按鈕.btn-danger</button> <button class="btn btn-link" type="button">連接按鈕.btn-link</button> 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

- 按鈕大小 

• 塊狀按鈕 
  Bootstrap框架中提供了一個類名「btn-block」。按鈕使用這個類名就可讓按鈕充滿整個容器，而且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱爲塊狀按鈕。

• 按鈕狀態——禁用狀態 
  方法1：在標籤中添加disabled屬性 
  方法2：在元素標籤中添加類名「disabled」

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">經過disabled屬性禁用按鈕</button> <button class="btnbtn-primary btn-block disabled" type="button">經過添加類名disabled禁用按鈕</button> <button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按鈕</button>

12. 圖像 
一、img-responsive：響應式圖片，主要針對於響應式設計 
二、img-rounded：圓角圖片 
三、img-circle：圓形圖片 
四、img-thumbnail：縮略圖片

• 因爲樣式沒有對圖片作大小上的樣式限制，因此在實際使用的時候，須要經過其餘的方式來處理圖片大小。好比說控制圖片容器大小。（注意不能夠經過css樣式直接修改img圖片的大小，這樣操做就不響應了）
• 對於圓角圖片和圓形圖片效果，由於是使用了CSS3的圓角樣式來實現的，因此注意對於IE8以及其如下版本不支持，是沒有圓角效果的。

13.網格系統 
一、數據行(.row)必須包含在容器（.container）中，以便爲其賦予合適的對齊方式和內距(padding)。 
二、在行(.row)中能夠添加列(.column)，但列數之和不能超過平分的總列數，好比12。 
三、具體內容應當放置在列容器（column）以內，並且只有列（column）才能夠做爲行容器(.row)的直接子元素 
四、經過設置內距（padding）從而建立列與列之間的間距。而後經過爲第一列和最後一列設置負值的外距（margin）來抵消內距(padding)的影響 
 
更詳細的用法，看官網

14.下拉菜單（基本用法） 
一、使用一個名爲「dropdown」的容器包裹了整個下拉菜單元素 
二、使用了一個按鈕作爲父菜單，而且定義類名「dropdown-toggle」和自定義「data-toggle」屬性，且值必須和最外容器類名一致， 
三、下拉菜單項使用一個ul列表，而且定義一個類名爲「dropdown-menu」

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> … <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 下拉菜單（對齊方式） 
  Bootstrap框架中下拉菜單默認是左對齊，若是你想讓下拉菜單相對於父容器右對齊時，能夠在「dropdown-menu」上添加一個「pull-right」或者「dropdown-menu-right」類名

15.按鈕（等分按鈕） 
等分按鈕也常被稱爲是自適應分組按鈕，其實現方法也很是的簡單，只須要在按鈕組「btn-group」上追加一個「btn-group-justified」類名

<div class="btn-wrap"> <div class="btn-group btn-group-justified"> <a class="btnbtn-default" href="#">首頁</a> <a class="btnbtn-default" href="#">產品展現</a> <a class="btnbtn-default" href="#">案例分析</a> <a class="btnbtn-default" href="#">聯繫咱們</a> </div> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 特別聲明：在製做等分按鈕組時，請儘可能使用<a>標籤元素來製做按鈕，由於使用<button>標籤元素時，使用display:table在部分瀏覽器下支持並不友好。

16.基礎導航條 
「.navbar」樣式的主要功能就是設置左右padding和圓角等效果，但他和顏色相關的樣式沒有進行任何的設置，而導航條的顏色都是經過「.navbar-default」來進行控制

• 加入導航條標題
• 經常在菜單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也爲你們作了這方面考慮，其經過「navbar-header」和「navbar-brand」來實現

17.警示框–默認警示框 
一、成功警示框：告訴用用戶操做成功，在「alert」樣式基礎上追加「alert-success」樣式，具體呈現的是背景、邊框和文本都是綠色；

二、信息警示框：給用戶提供提示信息，在「alert」樣式基礎上追加「alert-info」樣式，具體呈現的是背景、邊框和文本都是淺藍色；

三、警告警示框：提示用戶當心操做（提供警告信息），在「alert」樣式基礎上追加「alert-warning」樣式，具體呈現的是背景、邊框、文本都是淺黃色；

四、錯誤警示框：提示用戶操做錯誤，在「alert」樣式基礎上追加「alert-danger」樣式，具體呈現的是背景、邊框和文本都是淺紅色。

• 警示框–可關閉的警示框 
  一、須要在基本警示框「alert」的基礎上添加「alert-dismissable」樣式。

  二、在button標籤中加入class=」close」類，實現警示框關閉按鈕的樣式。

  三、要確保關閉按鈕元素上設置了自定義屬性：「data-dismiss=」alert」」（由於可關閉警示框須要藉助於Javascript來檢測該屬性，從而控制警示框的關閉）。

• 警示框–警示框的連接 
  Bootstrap框架是經過給警示框加的連接添加一個名爲「alert-link」的類名，經過「alert-link」樣式給連接提供高亮顯示。

18.媒體對象–默認媒體對象 
☑ 媒體對像的容器：常使用「media」類名錶示，用來容納媒體對象的全部內容

☑ 媒體對像的對象：常使用「media-object」表示，就是媒體對象中的對象，經常是圖片

☑ 媒體對象的主體：常使用「media-body」表示，就是媒體對像中的主體內容，能夠是任何元素，經常是圖片側邊內容

☑ 媒體對象的標題：常使用「media-heading」表示，就是用來描述對象的一個標題，此部分可選

• 除了上面四個部分以外，在Bootstrap框架中還經常使用「pull-left」或者「pull-right」來控制媒體對象中的對象浮動方式。

19.js插件引入

• 一次性引入 
  Bootstrap提供了一個單一的文件，這個文件包含了Bootstrap的全部JavaScript插件，即bootstrap.js（壓縮版本：bootstrap.min.js）。

• 單獨導入： 
  ☑ 動畫過渡（Transitions）:對應的插件文件「transition.js」

  ☑ 模態彈窗（Modal）:對應的插件文件「modal.js」

  ☑ 下拉菜單（Dropdown）：對應的插件文件「dropdown.js」

  ☑ 滾動偵測（Scrollspy）：對應的插件文件「scrollspy.js」

  ☑ 選項卡（Tab）：對應的插件文件「tab.js」

  ☑ 提示框（Tooltips）：對應的插件文件「tooltop.js」

  ☑ 彈出框（Popover）：對應的插件文件「popover.js」

  ☑ 警告框（Alert）：對應的插件文件「alert.js」

  ☑ 按鈕（Buttons）：對應的插件文件「button.js」

  ☑ 摺疊/手風琴（Collapse）：對應的插件文件「collapse.js」

  ☑ 圖片輪播Carousel：對應的插件文件「carousel.js」

  ☑ 自動定位浮標Affix：對應的插件文件「affix.js」

• 模態彈出框

• 模態彈出框–JavaScript觸發時的參數設置（一） 
  使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設置，主要包括屬性設置、參數設置和事件設置。 
  

• 模態彈出框–JavaScript觸發時的參數設置（二）