起步
在IE中運(yùn)行最新的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
初始化移動(dòng)瀏覽顯示:讓視口的寬度=設(shè)備屏幕寬度薛匪，初始縮放比例為1
<meta name="viewport" content="width=device-width, initial-scale=1">
IE版本低于IE9

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
<!--IE8瀏覽器支持html5標(biāo)簽>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--IE8瀏覽器支持媒體查詢> 
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 
<![endif]-->

編譯css和js文件

• 在bootstrap目錄下，運(yùn)行npm install
• 執(zhí)行g(shù)runt dist

以后定制bootstrap時(shí)用友鼻。

柵格系統(tǒng)

如果給12個(gè)column設(shè)置.col-md-1。則在電腦上闺骚，它們會(huì)依次排開彩扔；而在手機(jī)和平板上，會(huì)從上往下堆疊僻爽。

==    

某些列可能會(huì)出現(xiàn)比別的列高的情況：如下所示

屏幕快照 2016-02-17 下午3.50.20.png

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- 添加.clearfix和響應(yīng)式工具類 -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

效果如下：

屏幕快照 2016-02-17 下午3.50.34.png

列排序

<div class="row"> 
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

列排序跟列偏移不同：列排序時(shí)虫碉，元素會(huì)脫離文檔流。

排版

在 HTML 4.01 中不贊成使用 u 標(biāo)簽胸梆。
在 HTML 5 中不支持 u 標(biāo)簽敦捧。

對(duì)齊

• .text-left
• .text-right
• .text-center
• .text-justify 段落中超出屏幕部分文字自動(dòng)換行
• .text-nowrap 段落中超出屏幕部分文字不換行

輔助類
sr-only:除了屏幕閱讀器外，其他設(shè)備上隱藏元素

三角符號(hào)

下三角變?yōu)樯先?/p>

.test-caret .caret{
  border-top:0;
  border-bottom:4px dashed;
}

導(dǎo)航條內(nèi)的浮動(dòng)
.navbar-left .navbar-right

內(nèi)容塊居中
.center-block

顯示或隱藏
.show .hidden 只對(duì)塊級(jí)元素起作用
.invisible 不改變display屬性

按鈕
.btn-lg .btn-sm .btn-xs 四種

表單

單選和多選框： 都有固定的樣式碰镜。
.checkbox .radio .checkbox-inline .radio-inline

禁用狀態(tài)

為input button添加disabled屬性兢卵，為a添加.disabled
fieldset設(shè)置disabled，里面的a鏈接功能不受影響

添加額外的圖標(biāo)

<div class="form-group has-success has-feedback">
    //這四個(gè)元素要放在同一級(jí) 
    <label class="control-label" for="inputSuccess2">Input with success</label> 
    <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">              
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 
    <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

表格
六種表格
條紋狀.table-striped,
邊框.table-bordered
鼠標(biāo)懸停.table-hover
緊縮.table-condensed
響應(yīng).table-responsive

響應(yīng)式工具
visible | block | inline | inline-block
xs
sm
md
lg
.hidden-xs .hidden-sm .hidden-md .hidden-lg

打印類先不看

使用less

學(xué)習(xí)less的相關(guān)知識(shí)

variables.less less變量
使用autoprefixer.js添加前綴

常用的mixin

• 清除浮動(dòng)
• 水平居中
• 尺寸助手
• 調(diào)整大小的文本域
• 截?cái)辔谋?/li>

現(xiàn)在還用不到customization绪颖，所以不用學(xué)會(huì)less的源碼

使用bootstrap中l(wèi)ess的方式：Less: Beyond Basics with the Bootstrap Mixins Library

目錄結(jié)構(gòu)

屏幕快照 2016-02-19 下午2.10.42.png

style.less文件夾

@import "less/mixins/center-block.less";
    
p {
  .center-block();
}

實(shí)例精選

入門級(jí)模板

組件

導(dǎo)航條

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

以上是最簡(jiǎn)形式：1秽荤、.navbar-header；2柠横、.navbar-collapse內(nèi)添加導(dǎo)航內(nèi)容
使用時(shí) 需要注意的地方：1窃款、修改#navbar；2牍氛、作為body的直接子元素

特殊情況

• 導(dǎo)航條內(nèi)所包含元素溢出：減少元素雁乡；通過(guò)響應(yīng)工具類隱藏；修改@grid-float-breakpoint糜俗，默認(rèn)值是768px踱稍；自己重寫相關(guān)媒體查詢曲饱，覆蓋原來(lái)的代碼
• 依賴 JavaScript ，collapse插件
• 必須使用<nav>

將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方替換為 img 元素即可展示自己的品牌圖標(biāo)

導(dǎo)航條內(nèi)包含表單

<form class="navbar-form" role="search"> 
    <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button>
</form>

導(dǎo)航條內(nèi)包含button珠月，需要添加.navbar-btn
導(dǎo)航條內(nèi)包含文本：

<p class="navbar-text">Signed in as Mark Otto</p>

非導(dǎo)航鏈接：.navbar-link

<p class="navbar-text navbar-right">Signed in as 
    <a href="#" class="navbar-link">Mark Otto</a>
</p>

組件排列：.navbar-left .navbar-right

不能向右對(duì)齊多個(gè)組件

固定在頂部：.navbar-fixed-top

需要為body設(shè)置padding-top

固定在底部
靜止在頂部：會(huì)隨著頁(yè)面向下滾動(dòng)而消失：.navbar-static-top
反色導(dǎo)航條：.navbar-inverse

巨幕

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
</div>

與瀏覽器寬度一致并且沒(méi)有圓角扩淀，請(qǐng)把此組件放在所有 .container
元素的外面，并在組件內(nèi)部添加一個(gè) .container
元素啤挎。

<div class="jumbotron"> 
  <div class="container"> 
    ... 
  </div>
</div>

頁(yè)頭
.page-header

支持 h1 標(biāo)簽內(nèi)內(nèi)嵌 small 元素的默認(rèn)效果`

縮略圖

<div class="row">
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="images/post.jpg" alt="...">
      </a>
    </div>
  </div>

自定義內(nèi)容:.caption

<div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <img src="..." alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>...</p>
          <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
        </div>
      </div>
    </div>
  </div>

標(biāo)簽

<span class="label label-default">New</span>

.label-primary等其他可用的變體

徽章

<span class="badge">4</span>

不包含任何內(nèi)容時(shí)驻谆，可自動(dòng)消失

下拉菜單

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

對(duì)齊: .dropdown-menu-left .dropdown-menu-right
在下拉菜單中添加標(biāo)題: <li class="dropdown-header">Dropdown header</li>
在下拉菜單中添加分割線: <li role="separator" class="divider"></li>
禁用的菜單項(xiàng):<li class="disabled"><a href="#">Disabled link</a></li>
方法：$('.dropdown-toggle').dropdown('toggle')
事件：跟modal一樣

bootstrap這種組件支持data和js兩種調(diào)用方式：一般情況下可以使用data，如果點(diǎn)擊之后又后續(xù)操作的話庆聘，需要使用js胜臊。

導(dǎo)航

<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" id="myTabs">
      <li role="presentation" class="active"><a href="#home" id="home-tab" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
      <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="home">1</div>
      <div role="tabpanel" class="tab-pane" id="profile">...</div>
      <div role="tabpanel" class="tab-pane" id="messages">...</div>
      <div role="tabpanel" class="tab-pane" id="settings">...</div>
    </div>

  </div>

膠囊：.nav-pills
堆疊：.nav-stacked
兩端對(duì)齊：.nav-justified
方法：$('#myTabs li:eq(2) a').tab('show')
事件：跟modal一樣

警告框

<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Warning!</strong> Better check yourself, you're not looking too <a href="#" class="alert-link">good</a>.
  </div>

可關(guān)閉的警告框
警告框中的鏈接
.success .info .warning .danger

進(jìn)度條

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
      <span class="">60% Complete</span>
    </div>
  </div>

不加提示數(shù)字：span.sr-only
在展示很低的百分比時(shí)，如果需要讓文本提示能夠清晰可見伙判，可以為進(jìn)度條設(shè)置 min-width 屬性
min-width: 2em;
min-width: 2em; width: 2%;
不同的情景：給div.progress-bar添加.progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger

列表組

加入徽章：<span class="badge">4</span>

在文字前后都行

全是鏈接的列表組

<div class="list-group">
    <a href="#" class="list-group-item active">
      Cras justo odio
    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
  </div>

全是按鈕的列表組

<div class="list-group">
    <button type="button" class="list-group-item">Cras justo odio</button>
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
    <button type="button" class="list-group-item">Morbi leo risus</button>
    <button type="button" class="list-group-item">Porta ac consectetur ac</button>
    <button type="button" class="list-group-item">Vestibulum at eros</button>
  </div>

被禁用的條目：給.list-group-item添加.disabled
不同情景：給.list-group-item添加.list-group-item-success .list-group-item-info .list-group-item-warning .list-group-item-danger
自定義內(nèi)容：有專門的header和text

<div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">List group item heading</h4>
      <p class="list-group-item-text">...</p>
    </a>
  </div>

面板

<div class="panel panel-success">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
    <div class="panel-footer">Panel footer</div>
  </div>

由三部分組成.heading .body .footer

有四種情景
面板內(nèi)可添加表格象对、列表組，作為.panel的直接子元素宴抚。
well

<div class="well">...</div>

調(diào)整大欣漳А：.well-lg .well-sm
輪播

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/post.jpg" alt="First slide">
        <div class="carousel-caption">
          <h3>h1</h3>
          <p>p1</p>
        </div>
      </div>
      <div class="item">
        <img src="images/post.jpg" alt="Second slide">
        <div class="carousel-caption">
          <h3>h2</h3>
          <p>p2</p>
        </div>
      </div>
      <div class="item">
        <img src="images/post.jpg" alt="Third slide">
        <div class="carousel-caption">
          <h3>h3</h3>
          <p>p3</p>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

要把fonts添加到css下
需要修改id

方法

.carousel({ interval: 2000})
.carousel('cycle')
.carousel('pause')
.carousel(number)
.carousel('prev')
.carousel('next')

事件

`slide.bs.carousel`當(dāng)調(diào)用 slide 實(shí)例方法時(shí)立即觸發(fā)該事件。
`slid.bs.carousel`當(dāng)輪播完成幻燈片過(guò)渡效果時(shí)觸發(fā)該事件菇曲。

頁(yè)腳

html

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

css

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.container .text-muted {
  margin: 20px 0;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}