Bootstrap

匯入

<link href="bootstrap-3.3.7/dist/css/bootstrap.min.css" type="text/css">

<script src="js/jquery-3.2.1.min.js"></script>

<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

柵格化（橫向分12等份）

<div class="container"> 隨視窗大小變動

   <div class="row">  一行

      <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>

      <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>

<div class="col-lg-3">     柵格巢狀

  <div class="row">

 <div class="col-sm-3"></div>×4  

  </div>  

      </div>

   </div>                   

</div>

col-lg-     >1170
col-md-    >970
col-sm-    >750
col-xs-     <750  100%

<!--偏移量 1/12 -->

<div class="container">

   <div class="row">

      <div class="col-lg-2 col-md-3"></div>

      <div class="col-lg-2 col-md-3 col-lg-offset-2 col-md-offset-1"></div>

      <div class="col-lg-2 col-md-3 col-lg-offset-3 col-md-offset-2"></div>      

   </div>

</div>

按鈕

<button>按鈕</button>

<input type="button" value="按鈕">

<a href="#">按鈕</a>

class="btn btn_default"   預設   btn-lg   大

class="btn btn-primary"   藍色   btn-sm  中

class="btn btn-success"   綠色   btn-xs   小

class="btn btn-info"      淺藍   btn-block通欄按鈕 (100%寬)

class="btn btn-warning"  橙色    btn-link  連結按鈕

class="btn btn-danger"   紅色    btn     宣告按鈕

按鈕組

<div class="btn-group">

<a href="#" class="btn btn-info">按鈕</a>

<a href="#" class="btn btn-warning">按鈕</a>

</div>

通欄按鈕組

<div class="btn-group btn-group-justified">

<a href="#" class="btn btn-warning">標籤按鈕</a>

<div class="btn-group">

<input type="button" class="btn btn-primary" value="按鈕">

</div>

</div>

下拉按鈕

表單class=

form         垂直表單
form-inline    一行表單
form-horizontal 水平表單
form-group    div新增  包裹標籤和控制元件
form-control 文字框、下拉列表<input> <textarea> <select> 新增
checkbox checkbox-inline 多選框樣式
radio radio-inline 單選框樣式
input-group     表單控制元件組  搜尋框+百度一下
nput-group-addon/input-group-btn 表單控制元件組物件/按鈕
form-group-lg 大尺寸表單
form-group-sm 小尺寸表單

圖片

<img src=”...” class=”img-responsive ”>  兩邊有內邊距

                              img-rounded  圓角

                              img-circle     園

                              img-thumbnail 方框

隱藏類

hidden-xs

hidden-sm

hidden-md

hidden-lg

字型圖示

<span class=”  ”></span>      圖示類  自定義顏色、大小

bootstrap 下拉選單

dropdown-toggle

dropdown-menu

bootstrap 選項卡

nav

nav-tabs

nav-pills

tab-content

bootstrap 導航條

navbar 宣告導航條

navbar-default  預設導航條樣式

navbar-inverse 宣告反白的導航條樣式

navbar-static-top 去掉導航條的圓角

navbar-fixed-top 固定到頂部的導航條

navbar-fixed-bottom 固定到底部的導航條

navbar-header 申明logo的容器

navbar-brand 針對logo等固定內容的樣式

nav navbar-nav 定義導航條中的選單

navbar-form 導航條中的表單     搜尋框

navbar-btn  導航條中按鈕 居中

navbar-text 定義導航條中的文字

navbar-left 選單靠左

navbar-right 選單靠右

bootstrap 模態框

1、modal 宣告一個模態框

2、modal-dialog 定義模態框尺寸

3、modal-lg 定義大尺寸模態框

4、modal-sm 定義小尺寸模態框

5、modal-header

6、modal-body

7、modal-footer

bootstrap 響應式專題網站例項