Bootstrap前端框架

Bootstrap下載 

官方地址：https://getbootstrap.com

 

中文地址：http://www.bootcss.com/

咱們使用V3版本的Bootstrap，咱們下載的是用於生產環境的Bootstra

Bootstrap環境搭建

 

處理依賴

因爲Bootstrap的某些組件依賴於jQuery，因此請確保下載對應版本的jQuery文件，來保證Bootstrap相關組件運行正常。

 

Bootstrap全局樣式

• 排版、按鈕、表格、表單、圖片等咱們經常使用的HTML元素，Bootstrap中都提供了全局樣式。
• 咱們只要在基本的HTML元素上經過設置class就可以應用上Bootstrap的樣式，從而使咱們的頁面更美觀和諧。

標題相關

 1 <h1>一級標題36px</h1>
 2 <h2>二級標題30px</h2>
 3 <h3>三級標題24px</h3>
 4 <h4>四級標題18px</h4>
 5 <h5>五級標題14px</h5>
 6 <h6>六級標題12px</h6>
 7 
 8 <!--除了使用h標籤，Bootstrap內置了相應的全局樣式-->
 9 <!--內聯標籤應用標題樣式-->
10 <span class="h1">一級標題36px</span>
11 <span class="h2">二級標題30px</span>
12 <span class="h3">三級標題24px</span>
13 <span class="h4">四級標題18px</span>
14 <span class="h5">五級標題14px</span>
15 <span class="h6">六級標題12px</span>

副標題

<h1>一級標題<small>小標題</small></h1>

文本類

 1 經常使用對齊  2 
 3 <!--對齊-->
 4 <p class="text-left">文本左對齊</p>
 5 <p class="text-center">文本居中</p>
 6 <p class="text-right">文本右對齊</p>
 7 
 8 大小寫  9 <!--大小寫-->
10 <p class="text-lowercase">Lowercased text.</p>
11 <p class="text-uppercase">Uppercased text.</p>
12 <p class="text-capitalize">Capitalized text.</p>

文本顏色

<p class="text-muted">...</p> 灰 <p class="text-primary">...</p> 藍 <p class="text-success">...</p> 綠 <p class="text-info">...</p> 深藍 <p class="text-warning">...</p> 橘黃 <p class="text-danger">...</p> 紅

 背景色

 

1 <p class="bg-primary">...</p>
2 <p class="bg-success">...</p>
3 <p class="bg-info">...</p>
4 <p class="bg-warning">...</p>
5 <p class="bg-danger">...</p>

 

 

柵格系統

 1 row必須放到container和container-fluid裏面  2 內容應當放置於「列（column）」內，而且，只有「列（column）  3 」能夠做爲行（row）」的直接子元素。  4 
 5  列的樣式 .col-xx（lg md sm xs）-數字（1~12）  6  響應式應用：  7  - col-md-6  8  - col-xs-8  9         
10  container有一個padding是15px 11  row有一個margin是-15px 12         
13  列是支持嵌套的 14         
15  列偏移： col-xx-offset-數字（1~12） 16         
17  列排序： .col-md-pull-數字 .col-md-push-數字 18         

表格

1  條紋狀表格 .table-striped --> 斑馬線 2  帶邊框的表格 .table-bordered  --> 加上外邊框 3  鼠標懸停變色的表格 .table-hover --> 鼠標懸浮變色 4  緊縮型表格 .table-condensed --> padding減半 5     響應式表格. .table-responsive  --> 自適應
6     響應式表格：
      <div class="table-responsive">  // table外面包裹一層div
      <table class="table">
      ...
      </table>
      </div>
      當屏幕寬度太小的時候，表格自己會出來滾動

表單

全部設置了 .form-control 類的 <input>、<textarea> 和 <select> 
的元素都將被默認設置寬度屬性爲 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。 默認的 - label標籤放在input框上面 .form-inline - 橫着放一排 .form-horizontal - label標籤和input框左右分開放的 都會用到：.form-group --> label + input + span

表單狀態類

 1 <!-- On rows -->
 2 <tr class="active">...</tr>
 3 <tr class="success">...</tr>
 4 <tr class="warning">...</tr>
 5 <tr class="danger">...</tr>
 6 <tr class="info">...</tr>
 7 
 8 <!-- On cells (`td` or `th`) -->
 9 <tr>
10   <td class="active">...</td>
11   <td class="success">...</td>
12   <td class="warning">...</td>
13   <td class="danger">...</td>
14   <td class="info">...</td>
15 </tr>

按鈕類

 

 1 爲 <a>、<button> 或 <input> 元素添加按鈕類（button class） 便可使用 Bootstrap 提供的樣式。

.btn
        
        顏色：
        .btn-default
        .btn-success
        .btn-warning
        .btn-danger
        
        尺寸：
        .btn-lg
        .btn-sm
        .btn-xs

<p> <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button> </p>

        塊級btn:
        .btn-block







 4 <!-- Standard button -->
 5 <button type="button" class="btn btn-default">（默認樣式）Default</button>
 6 
 7 <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
 8 <button type="button" class="btn btn-primary">（首選項）Primary</button>
 9 
10 <!-- Indicates a successful or positive action -->
11 <button type="button" class="btn btn-success">（成功）Success</button>
12 
13 <!-- Contextual button for informational alert messages -->
14 <button type="button" class="btn btn-info">（通常信息）Info</button>
15 
16 <!-- Indicates caution should be taken with this action -->
17 <button type="button" class="btn btn-warning">（警告）Warning</button>
18 
19 <!-- Indicates a dangerous or potentially negative action -->
20 <button type="button" class="btn btn-danger">（危險）Danger</button>
21 
22 <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
23 <button type="button" class="btn btn-link">（連接）Link</button>

 圖片類

 1 響應式圖片  2 
 3 在 Bootstrap 版本 3 中，經過爲圖片添加 .img-responsive 類可讓圖片支持響應式佈局。
 其實質是爲圖片設置了 max-width: 100%;、 height: auto; 和 display: block; 
 屬性，從而讓圖片在其父元素中更好的縮放。  4 
 5 <img src="..." class="img-responsive" alt="Responsive image">
 6 
 7 圖片形狀  8 經過爲 <img> 元素添加如下相應的類，可讓圖片呈現不一樣的形狀。  9 
10 <img src="..." alt="..." class="img-rounded"> 圓角方 11 <img src="..." alt="..." class="img-circle"> 圓圖片 12 <img src="..." alt="..." class="img-thumbnail">方圖片

 

 實用雜類

 1 關閉按鈕:  2 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 3 
 4 下拉三角:<span class="caret"></span>
 5 
 6 快速浮動:  7 <div class="pull-left">...</div>
 8 <div class="pull-right">...</div>
 9 
10 內容塊居中:<div class="center-block">...</div>
11 快速浮動:
　　　　　 - .pull-left
        　- .pull-right
12 清除浮動: 13 <!-- Usage as a class -->
14 <div class="clearfix">...</div>
15 
16 顯示或隱藏: 17 <div class="show">...</div>
18 <div class="hidden">...</div>

 水平居中

 文本類或行內標籤居中

<div class="text-center">
  <p>這裏是一段文本。</p>
</div>

水平居中一個col-*的div

 1.使用col-*-offset-*

<div class="container">
    <div class="row">
    <div class="col-md-4 col-md-offset-4" style="border: 1px solid red">這是一個column div。</div>
  </div>
</div>

2.使用自定義樣式

.col-centered {
  float: none;
  margin: 0 auto;
}



<div class="container">
  <div class="row">
    <div class="col-centered col-md-4" style="border: 1px solid red">這是一個column div。</div>
  </div>
</div>

注意點:補充

Bootstrap3裏面有個.center-block樣式類，能夠用於不涉及float標籤的水平居中

<div class="container">
  <div class="center-block" style="border: 1px solid red">通常水平居中</div>
</div> ootstrap3.0.1版本新添加的.center-block樣式類其實就是咱們以前常常用到的margin: 0 auto。 Bootstrap4中： text-center仍是用來水平居中display:inline的元素 mx-auto取代center-block用來水平居中display:block的元素 offset-*或mx-auto用來水平居中柵格系統的列元素

 垂直居中

 

1 .vertical-align { 2  display: flex; 3  align-items: center; 4 } 5 
7 <div style="height: 200px;border: 1px solid black" class="vertical-align">
8   <div style="width: 100px;height: 100px;background-color: red"></div>
9 </div>