學習筆記之Bootstrap基礎

 

一、標題

元素	字體大小	計算比例	其他
h1	36px	14px*2.60	margin-top:20px; margin-bottom:10px;
h2	30px	14px*2.15
h3	24px	14px*1.70
h4	18px	14px*1.25	margin-top:20px; margin-bottom:10px;
h5	14px	14px*1
h6	12px	14px*0.85
small		h1~h3*0.65	一般用作副標題，在標題標籤內使用
		h4~h6*0.75

 

 

二、代碼

類名	用法
code	顯示單行內聯代碼
pre	顯示多行塊代碼
kbd	顯示用戶輸入代碼

e.g.

 

 

三、文本對齊方式

類名	用法
text-left	左對齊
text-center	居中對齊
text-right	右對齊
text-justify	兩端對齊

 

 

四、表格

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

 

1. 斑馬線表格：table-striped

 

2. 帶邊框的表格：table-bordered

 

3. 鼠標懸停高亮的表格：table-hover

 

4. 緊湊型表格：table-condensed

 

5. 響應式表格：table-responsive

當瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。可視區域大於768px時，表格底部水平滾動條就會消失。

 

 

六、表單

類名	作用	用法
form-group		把標籤和控件放在一個帶有 class .form-group 的 <div> 中
form-control		向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
form-horizontal	垂直顯示錶單	加在form元素添加此class
form-inline	內聯表單	加在form元素添加此class
checkbox-inline	checkbox水平排列	在label標籤上添加類名“checkbox-inline”
radio-inline	radio水平排列	在label標籤上添加類名“radio-inline”
has-warning	警告狀態（黃色）	只需要在form-group容器上對應添加狀態類名
has-error	錯誤狀態（紅色）
has-success	成功狀態（綠色）
has-feedback	表單驗證時狀態icon	此類名要與“has-error”、“has-warning”和“has-success”在一起使用
help-block	提示信息

 

1. form-horizontal水平表單：

 

 

2. form-inline內聯表單

 

3. 表單控件狀態(驗證狀態)

 

4. 表單例子：

<form class="form-horizontal form" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="請輸入您的郵箱密碼">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> 記住密碼
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">進入郵箱</button>
    </div>
  </div>
</form>

 

 

七、圖像

類名	作用
img-responsive	響應式圖片，主要針對於響應式設計
img-rounded	圓角圖片
img-circle	圓形圖片
img-thumbnail	縮略圖片

 

 

八、 網格系統

類名	作用
col-**-*	網格
col-**-offset-*	偏移列
row	行, 必須包含在容器（.container）中，以便爲其賦予合適的對齊方式和內距(padding)
col-**-push-*	向右移動*個列的距離
col-**-pull-*	向左移動*個列的距離

 

1. 網格選項

	超小設備手機（<768px）	小型設備平板電腦（≥768px）	中型設備臺式電腦（≥992px）	大型設備臺式電腦（≥1200px）
網格行爲	一直是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的
最大容器寬度	None (auto)	750px	970px	1170px
Class 前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列數量和	12	12	12	12
最大列寬	Auto	60px	78px	95px
間隙寬度	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

 

2. 基本用法

<div class="container">
  <div class="row">
    <div class="col-md-8 col-xs-6">
        網格1
      <div class="row">
        <div class="col-md-8">8</div>
        <div class="col-md-4">4</div>
      </div>
    </div>
    <div class="col-md-4 col-xs-6">
        網格2
        <div class="row">
            <div class="col-md-9">9</div>
            <div class="col-md-3">3</div>
        </div>
    </div>
  </div>
</div>

 

3. 圖列：

 

 

九、下拉菜單

類名	作用
dropdown-toggle	下拉觸發器
divider	下拉菜單（下拉分隔線）
dropdown-header	菜單標題
dropdown-menu-right	下拉菜單（對齊方式）
pull-right	下拉菜單（對齊方式）

 

1. 示例代碼

<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" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
  </ul>
</div> 

 

2. 圖例：

 

 

十、按鈕

類名	作用
btn	基礎按鈕
btn-default	默認按鈕
btn-primary	主要按鈕
btn-group	按鈕（按鈕組）
btn-group-vertical	按鈕（垂直分組）
btn-group-justified	按鈕（等分按鈕）

 

1. 按鈕樣式：

 <div>
       <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>         
</div>

 

2.  按鈕嵌套分組：

<div class="btn-group">
  <button class="btn btn-default" type="button">首頁</button>
  <button class="btn btn-default" type="button">產品展示</button>
  <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">聯繫我們</button>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關於我們<span class="caret"></span></button>
    <ul class="dropdown-menu">
    	<li><a href="##">公司簡介</a></li>
    	<li><a href="##">企業文化</a></li>
    	<li><a href="##">組織結構</a></li>
    	<li><a href="##">客服服務</a></li>
    </ul>
  </div>
</div>

 

 

十一、 導航：

類名	作用	用法
nav-tabs	標籤形導航	在原導航“nav”上追加此類名
navbar-header	菜單前面都會有一個大標題
navbar-brand
navbar-fixed-top	導航條固定在瀏覽器窗口頂部
navbar-fixed-bottom	導航條固定在瀏覽器窗口底部
thumbnail	縮略圖
nav-pills	導航（膠囊形(pills)導航）	在原導航“nav”上追加此類名
nav-stacked	導航（垂直堆疊的導航）	在“nav-pills”的基礎上添加一個“nav-stacked”類
nav-justified	自適應導航（使用）	和“nav-tabs”或者“nav-pills”的基礎上添加
breadcrumb	麪包屑式導航

 

1. nav-tabs

<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
 	<li><a href="##">CSS3</a></li>
 	<li><a href="##">Sass</a></li>
 	<li><a href="##">jQuery</a></li>
 	<li><a href="##">Responsive</a></li>
</ul>

 

 2. nav-pills：

 

3. nav-stacked：

 

4. breadcrumb：

<ol class="breadcrumb">
  <li><a href="#">首頁</a></li>
  <li><a href="#">我的書</a></li>
  <li class="active">《圖解CSS3》</li>
</ol> 

 

5. btn-group-justified:

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

 

 

 

6. 響應式導航

<div class="navbar navbar-default">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <!--<span class="sr-only">Toggle Navigation</span>-->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">nav-bar</a>
    </div>

    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a>網站首頁</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名師介紹</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">關於我們</a></li>
            <li class="btn-group">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    下拉菜單
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-left">
                    <li class="dropdown-header">第一部分菜單頭部</li>
                    <li><a href="#">下拉菜單項</a></li>
                    <li><a href="#">下拉菜單項</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">第二部分菜單頭部</li>
                    <li><a href="#">下拉菜單項</a></li>
                    <li><a href="#">下拉菜單項</a></li>
                </ul>
            </li>
            <form action="##" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="請輸入關鍵詞" />
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </ul>
    </div>
</div>

 

 

十二、媒體對象

類名	作用
media	媒體對像的容器
media-object	媒體對像的對象
media-body	媒體對象的主體
media-heading	媒體對象的標題
pull-left或pull-right	控制媒體對象中的對象浮動方式
media-list	媒體對象列表

 

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="https://img4.sycdn.imooc.com/588471d20001809e07150715-140-140.jpg" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">media1</h4>
        <div>media1media1media1media1media1media1media1media1</div>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="https://img4.sycdn.imooc.com/588471d20001809e07150715-140-140.jpg"
                     alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">media2</h4>
                <div>media2media2media2media2media2media2media2media2</div>
            </div>
        </div>
    </div>
</div>

 

 

 

十三、 列表組

類名	作用
list-group	列表組容器
list-group-item	列表項
list-group-item-heading	列表項頭部樣式
list-group-item-text	列表項主要內容

 

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>多彩列表組</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>
        <h4 class="list-group-item-heading">圖解CSS3</h4>
        <p class="list-group-item-text">
            詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性...</p>
    </a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

 

 

 

十四、面板

類名	作用
panel	面板
panel-default	基礎面板
panel-heading	面板頭部樣式
panel-footer	面板尾部樣式
panel-primary	基礎樣式

 

<div class="panel panel-primary panel-default">
    <div class="panel-heading">panel-heading</div>
    <div class="panel-body">
        <p>panel-body panel-body panel-body panel-body panel-body panel-body panel-body panel-body panel-body panel-body
            panel-body panel-body panel-body panel-body </p>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>＃</th>
                <th>表格頭</th>
                <th>表格頭</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>表格項</td>
                <td>表格項</td>
            </tr>
            </tbody>
        </table>
        <br>
        <ul class="list-group">
            <li class="list-group-item">我是列表項</li>
            <li class="list-group-item">我是列表項</li>
            <li class="list-group-item">我是列表項</li>
        </ul>
    </div>
    <div class="panel-footer">panel-footer</div>
</div>

 

 

 

十五、 模態彈出框

類名	作用
modal	模態彈出框
modal-header	彈出框頭部
modal-body	彈出框主體
modal-footer	彈出框腳部
modal-dialog	模態彈出窗
modal-backdrop	蒙層樣式

 

1. 模態彈出框--觸發模態彈出窗2種方法

方法一：

1）data-toggle必須設置爲modal(toggle中文翻譯過來就是觸發器)；

2）data-target可以設置爲CSS的選擇符，也可以設置爲模態彈出窗的ID值，一般情況設置爲模態彈出窗的ID值，因爲ID值是唯一的值。

<!-- 觸發模態彈出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button>
<!-- 模態彈出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模態彈出窗內容 -->
        </div>
    </div>
</div>

 

方法二：

觸發模態彈出窗也可以是一個鏈接<a>元素，那麼可以使用鏈接元素自帶的href屬性替代data-target屬性，如：

<!-- 觸發模態彈出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊我會彈出模態彈出窗</a>
<!-- 模態彈出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模態彈出窗內容 -->
        </div>
    </div>
</div>

 

2. 參數設置：

參數	使用方法	描述
toggle	$(“#mymodal”).modal(“toggle”)	觸發時，反轉模態彈出窗的狀態。如果模態彈出窗是顯示的，則關閉；反之，如果模態彈出窗是關閉的，則顯示
show	$(“#mymodal”).modal(“show”)	觸發時，顯示模態彈出窗
hide	$(“#mymodal”).modal(“hide”)	觸發時，關閉模態彈出窗

 

3. 事件設置：

模態彈出窗還支持四種類型的事件，分別是模態彈出窗的彈出前、彈出後，關閉前、關閉後，具體描述如下：

事件類型	描述
show.bs.modal	在show方法調用時立即觸發（尚未顯示之前）；如果單擊了一個元素，那麼該元素將作爲事件的relatedTarget屬性
shown.bs.modal	該事件在模態彈出窗完全顯示給用戶之後（並且等CSS動畫完成之後）觸發；如果單擊了一個元素，那麼該元素將作爲事件的relatedTarget事件
hide.bs.modal	在hide方法調用時（但還未關閉隱藏）立即觸發
hidden.bs.modal	該事件在模態彈出窗完全隱藏之後（並且CSS動畫漂完成之後）觸發

 

十六、進度條

 

類名	作用
progress	進度條容器
progress-bar	限制進度條的進度
progress-striped	條紋進度條

 

1. 動態進度條

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:30%">30%</div>
</div>
progress-bar-striped：條紋
active：動態

 

 

2. 層疊進度條

 

<div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%">20%</div> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%">20%</div> <div class="progress-bar progress-bar-warning" style="width:30%">30%</div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%">15%</div> </div>

 

 

十七、 其它

類名	作用
thumbnail	縮略圖
caption	讓縮略圖配合標題、描述內容，按鈕等
alert	警示框
badge	徽章
pagination	頁碼

 

1. 縮略圖

<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="http://img1.sycdn.imooc.com/5434eba100014fe906000338.png"
             style="height: 180px; width: 100%; display: block;" alt="">
    </a>
    <div class="caption">
        <h3>Bootstrap框架系列教程</h3>
        <p>Bootstrap框架是一個優秀的前端框，就算您是一位後端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap製作做優美的網站...</p>
        <p>
            <a href="##" class="btn btn-primary">開始學習</a>
            <a href="##" class="btn btn-info">正在學習</a>
        </p>
    </div>
</div>

 

2. 可關閉的警示框

只需要在默認的警示框裏面添加一個關閉按鈕。然後進行三個步驟：

  1）需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。

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

  3）要確保關閉按鈕元素上設置了自定義屬性：“data-dismiss="alert"”（因爲可關閉警示框需要藉助於Javascript來檢測該屬性，從而控制警示框的關閉）。

 

<div class="alert alert-info" role="alert">
    <button class="close" type="button" data-dismiss="alert">×</button>
    請修改相應信息
</div>

 

 

3. 徽章

<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
    <li class="active">
        <a href="#">
            <span class="badge pull-right">42</span>
            Home
        </a>
    </li>
    <li><a href="#">Profile</a></li>
    <li>
        <a href="#">
            <span class="badge pull-right">3</span>
            Messages
        </a>
    </li>
</ul>

 

4. 頁碼

<ul class="pagination pagination-sm">
  <li><a href="#">第一頁</a></li>
  <li class="previous"><a href="#">«</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="next"><a href="#">»</a></li>
  <li class="disabled"><a href="#">最後一頁</a></li>
</ul>