BootStrap：基礎知識

BootStrap基礎知識

1、 .lead //突出

.text-left //文字居左

.text-right //文字居右

.text-center //文字居中

.text-justify //文字兩端對齊

.text-nowrap //文字不換行

.text-uppercase //大寫

.text-lowercase //小寫

.text-capitalize //首字母大寫

.text-muted //柔和灰

.text-primary //主要藍

.text-success //成功藍

.text-info //信息藍

.text-warning //警告黃

.text-danger //危險紅

.blockquote-reverse //blockquote左側引用

.list-unstyled //ul移出樣式

.list-inline //ul設置內聯

.dl-horizontal //dl水平展示

<kbd> //用戶輸入

2、表格設置

整個表格：table

.table //基本表格

.table .table-striped //斑馬狀表格

.table .table-bordered //帶內邊框の表格

.table-hover //懸停有背景

單行：tr

.active //設置活動

.success、.info、.warning、.danger //設置顏色

.sr-only //隱藏行

3、按鈕設置 (.btn必須有，有默認尺寸)

.btn .btn-default //默認樣式

.btn .btn-success //成功樣式

.btn .btn-info //信息樣式

.btn .btn-warning //警告樣式

.btn .btn-danger //危險模式

.btn .btn-primary //重要模式

.btn .btn-link //鏈接樣式

.btn .btn-lg //大尺寸

.btn .btn-sm //中尺寸

.btn .btn-xs //小尺寸

.btn .btn-block //轉成區塊

.btn .active //設置活動

.btn .disabled //禁用

4、表單設置(form)

.form-group //實現表單樣式(所有標籤可用)

.form-group .has-error //錯誤狀態

.form-group .has-success //成功狀態

.form-group .has-warning //錯誤狀態

.form-group .form-group-lg //大圖標

.form-group .form-group-sm //小圖標

.form-inline //表單內聯(小於768px會獨佔)

.form-horizontal //水平排列

5、表單元素input設置

.checkbox-inline //設置複選框內聯

.checkbox //設置複選框

.radio //設置單選框

select .form-control //設置下拉框

.input-lg //大尺寸

.input-sm //小尺寸

6、 </div>圖片設置(img)

.img-rounded //帶border-radius的圖片

.img-circle //把圖片設置圓形

.img-thumbnail //帶border-radius和邊框的圖片

.img-responsive //添加響應式

7、輸入框內設置圖片

<div class="form-group has-success has-feedback">

<label class="control-label">电子邮件</label>

<input type="email" class="form-control" placeholder="请输入您的电子邮件">

<span class="glyphicon glyphicon-ok form-control-feedback"></span>

<div>

.glyphicon .glyphicon-remove //錯誤×圖標

.glyphicon .glyphicon-ok //成功√圖標

.glyphicon .glyphicon-sign //警告！圖標

8、

<div class="input-group">

<div class="input-group-addon"> <input type=’checkbox’> </div>

<input type="text" class="form-control" placeholder="请输入您的价格">

<div class="input-group-addon">元</div>

</div>

9、 .container //固定寬度

.container-fluid //100%寬度

div .container >div .row >div .col-md-4*3

全列共12格

.col-md-4 : 中屏時佔4格

lg : 大屏(>1200px)

md : 中屏(992px-1200px)

sm : 小屏(768px-991px)

xs : 超小屏(<768px)

四屏全激活 ：div .col-lg-2 .col-md-3 .col-sm-4 .col-xs-6

設置間隔(隔一格) ：div .col-md-3 .col-md-offset-1

左移三格：div .col-md-9 .col-md-push-3

右移九格：div .col-md-3 .col-md-pull-9

10、背景色

.bg-primary //主要藍

.bg-success //成功綠

.bg-info //信息青

.bg-warning //警告黃

.bg-danger //危險紅

11、.pull-right //強制右浮

.pull-left //強制左浮

.center-block //塊級居中

.show //顯示

.hidden //隱藏

.visible-xs-block //超小屏時顯示

.hidden-xs //超小屏時隱藏

.glyphicon .glyphicon-star //

.glyphicon .glyphicon-home //

圖標地址：http://v3.bootcss.com/components/#glyphicons

12、關閉×

<button class="close">×</button>

下拉倒三角

<span class="caret"></span>

下拉菜單：

<div class="dropdown"> //向下顯示數據；dropup 向上顯示數據

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> //數據引用

下拉菜单

<span class="caret"></span>

</button>

分開： <button class="btn btn-default">下拉菜单</button>

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

</button>

<ul class="dropdown-menu"> //數據源

<li><a href="#">首页</a></li><li><a href="#">资讯</a></li><li><a href="#">关于</a></li>

</ul>

</div>

設置數據：

li.dropdown-header //設置頭，不加超鏈接

li.divider //設置分割線(下方)

li.disabled //禁用

div .dropdown .open //菜單默認顯示

13、按鈕組

.btn-group //按鈕組

.btn-group-lg //大型號按鈕組

.btn-group-sm //中型號按鈕組

.btn-group-xs //小型號按鈕組

.btn-group-vertical //垂直按鈕組

.btn-group-justified //兩端對齊按鈕組

.btn-group .dropup //向上彈出

多個按鈕組整合：

div.btn-toolbar>div.btn-group*3>div .btn .btn-default *3

14、導航

.nav .nav-tabs //基本導航

.nav .nav-pills //膠囊式導航

.nav .nav-pills .nav-stacked //垂直膠囊

.nav .nav-tabs .nav-justified //兩端對齊

.navbar .navbar-default //基本導航條

.navbar .navbar-inverse //反色導航條

導航條標題(div .navbar .navbar-default 下使用)

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a>

</div>

其他導航條

ul .nav .navbar-nav

導航條中用form

窗体顶端

form .navbar-form .navbar-right

導航條中用button

button .btn .btn-default .navbar-btn

導航條中用文本

p .navbar-text

非導航鏈接(在文本區域中使用)

a .navbar-link

導航條始終在頂部

.navbar .navbar-default .navbar-fixes-top

導航條始終在底部

.navbar .navbar-default .navbar-fixes-bottom

靜態導航條

.navbar .navbar-default .navbar-static-top

導航中對齊方式

.navbar-right

.navbar-left

15、分頁標籤

分頁：

<ul class="pagination">

<li><a href="#">«</a></li>

<li class=’active’><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li><a href="#">»</a></li>

</ul>

尺寸：

ul .pagination .pagination-lg //大呎寸

其他尺寸：.pagination-sm 和 .pagination-xs

翻頁效果：

<ul class="pager">

<li><a href="#">上一页</a></li>

<li><a href="#">下一页</a></li>

</ul>

靠左右兩邊の翻頁：

<ul class="pager">

<li class="previous disabled"><a href="#">上一页</a></li>

<li class="next"><a href="#">下一页</a></li>

</ul>

16、標籤顏色（.label必須有）

.label-primary、.label-success、.label-info、.label-warning、.label-danger

alert警告框の顏色（.alert必須有）

.alert-primary、.alert-success、.alert-info、.alert-warning、.alert-danger

徽章：

提交<span class="badge">3</span>

巨幕組件：

div.jumbotron>div.container

div.container>div.jumbotron

頁頭組件：

div.page-header

可縮略の圖塊

div .thumbnail

嵌入效果

div .well

div .well .well-lg

17、進度條

div.progress

<div class="progress">

<div class="progress-bar progress-bar-success progress-bar-striped active" style="min-20px;60%">60%</div>

</div>

.progress和.progress-bar必須加上

.progress-bar-success : 成功綠

.progress-bar-striped : 斑馬紋

18、媒體對象

左媒右文：

<div class=’media>

div .media-left>img

div .media-body>h4 .media-heading +p

</div>

左文右媒：

<div class=’media’>

div .media-body>h4 .media-heading +p

div .media-right>img

</div>

媒體對象列表：將文媒放在此下面

ul .media-list>list .media

嵌套：

div .media-body下再次嵌套div .media

19、列表組件

ul .list-group>li .list-group-item

div .list-group>a .list-group-item

div .list-group>button .list-group-item

.list-group : 列表(list)組

.list-group-item : 列表(list)項

列表顏色：

.list-group-item-success : 成功綠

.list-group-item-info : 信息藍

.list-group-item-danger : 危險紅

列表內嵌文本(標題+文本)：

div .list-group>a .list-group-item>h4+p.list-group-item-text

20、面板組件

div .panel .panel-default

>div .panel-heading

+div .panel-body

+div .panel-footer

面板情景：

panel-default、panel-success、panel-info、panel-warning、panel-danger、panel-primary

21、視頻響應式

16：9顯示視頻，4：3則改成4by3

<div class="embed-responsive embed-responsive-16by9">

<embed width="100%" height="100%" src="*.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>

</div>

22、模態框(自釋：同jQueryの帶modalの對話框)

簡寫：div .modal .show>div .modal-content

>div .modal-header+div .modal-body+div .modal-footer

<!-- 模态框声明 -->

<div class="modal fade" id="myModal" tabindex="-1">

<!-- 窗口声明 -->

<div class="modal-dialog">

<!-- 内容声明 -->

<div class="modal-content">

<div class="modal-header">

<button class="close" data-dismiss="modal"><span>×</span></button>

<h4 class="modal-title">会员登陆</h4>

</div>

<div class="modal-body">

<div class="container-fluid">

<div class="row">

<div class="col-md-4">1</div>

<div class="col-md-4">2</div>

<div class="col-md-4">3</div>

</div>

</div>

</div>

<div class="modal-footer">

<button class="btn btn-default">注册</button>

<button class="btn btn-primary">登录</button>

</div>

</div>

</div>

</div>

關閉按鈕：data-dismiss=’modal’，關閉model就將此屬性值設為’modal’

<button type=’button’ class=’close’ data-dismiss=’modal’><span>×</span></button>

div .modalのclass效果

div .modal.show //模態框默認顯示

div .modal .fade //模態框淡入淡出

div .modal .modal-lg //大模態框

div .modal .modal-sm //小模態框

點擊觸發：

<button class=’btn’ data-toggle=’modal’ data-target=’#myModal’>按鈕</button>

div .modalの屬性

data-toggle=’modal’ //觸發類型

data-target=’#my’ //引用のID

data-backdrop=’true’ //默認，黑灰半透明遮罩，點擊空白可關閉

false無黑灰遮罩，空白不可關閉，static有黑灰遮罩，空白不可關閉

data-keyboard=’ture’ //默認，按Esc可關閉，false按Esc不可關閉

data-show=’true’ //初始化時顯示，false不顯示

href=’*.html’ //若非#號開頭，即url，將url内容加載到modal-content容器里，且只加載一次。若是#號，則取代data-target 的方法。

div .modal在JS中設置屬性

$('#myModal').modal({

show : true,

backdrop : false,

keyboard : false,

remote : 'index.html'

 });

div .modalのID方法

$(‘#My’).modal(‘show’);

$(‘#My’).modal(‘hide’);

$(‘#My’).modal(‘toggle’);

div .modalのID事件

$('#myModal').on('show.bs.modal', fn);

show.bs.modal //在 show 方法調用時立即觸發。

shown.bs.modal //在模態框完全顯示出來，并且等CSS動畫完成之後觸發。

hide.bs.modal //在 hide 方法調用時，但還未關閉隱藏時觸發。

hidden.bs.modal //在模態框完全隱藏之後，并且等CSS動畫完成之後觸發。

23、下拉菜單

外部引用：用data-toggle="dropdown" data-target="#dropdown"(內部不用加這句)

內部引用：用data-toggle="dropdown"

<div class="dropdown">

<button class="btn btn-primary" data-toggle="dropdown">

下拉菜单<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">关于</a></li>

</ul>

</div>

div .dropdownの事件

show.bs.dropdown //在 show 方法調用時立即觸發。

shown.bs.dropdown //在下拉菜單完全顯示出來，并且等CSS動畫完成之後觸發。

hide.bs.dropdown //在 hide 方法調用時，但還未關閉隱藏時觸發。

hidden.bs.dropdown //在下拉菜單完全隱藏之後，并且等CSS動畫完成之後觸發。

24、滾動監聽

滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目，顯示导航项目高亮顯示。

<div data-offset="0" data-target="#nav" data-spy="scroll"><h4 id=’a’></h4><p></p></div>

data-spy="scroll" //滾動監聽

data-target=’#nav’ //監聽對象，指向一個navbar或者dropdown

data-offset="0" //默认值为 10，内容距滾動容器10像素以内，高亮所有對應的菜單。

外部navbarのdropdown

需要中間添加<a href=”#a”></a>

監聽事件：

activate.bs.scrollspy //每當一個新條目被激活後都將由滾動監聽插件觸發此事件。

function removeSec(e) {

$(e).parents('.sec').remove(); //刪除

$('#content').scrollspy('refresh'); //更新DOM(更新#content)

}

25、標籤頁

<ul class=’nav nav-tabs’>

<li><a href=’#h5” data-toggle=’tab’>h5</a></li>

</ul>

<div class=’tab-content’ style=’padding:10px;’>

<div class=’tab-pane fade in active’ active id=”h5”></div>

</div>

備註：fade : 淡入淡出；in : 默認顯示

JS中用tab：

$('#nav a').on('click', function (e) {

e.preventDefault();

$(this).tab('show');

});

tab事件：

show.bs.tab //在調用 tab 方法時觸發

shown.bs.tab //在顯示整個標籤時觸發

26、工具提示：工具提示就是通过鼠标移动选定在特定的元素上時，顯示相关的提示语。

<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符"

data-animation="false" //是否允許fade動畫

data-html="true" //是否可設置帶HTML格式的提示<含標籤>

data-placement="auto" //顯示方位有top、left、right、bottom，top為默認

data-selector="a[rel=tooltip]" //綁定的選擇器

data-trigger="click" //如何觸發。有click、hover、focus、manual

data-delay="500" //延時時間

data-template="<b>123</b>" //提示內容

data-container=’body’ //附著到的容器

>HTML5</a>

JavaScript 方式

$('#section a').tooltip({

delay : {

show : 500,

hide : 100,

},

container : 'body'

});

JavaScript 有四個方法：show、hide、toggle 和 destroy 。

JS四個事件：

show.bs.tooltip //在 show 方法調用時立即触發

shown.bs.tooltip //在提示框完全顯示給用户之後触發

hide.bs.tooltip //在 hide 方法調用時立即触發

hidden.bs.tooltip //在提示框完全隐藏之後触發

27、彈出框

<button class="btn btn-lg btn-danger" type="button"  title="弹出框"

data-animation=’true’ //是否允許fade動畫

data-toggle="popover" //對象類型

data-html=’false’ //是否允許HTML形式的內容

data-placement=’auto’ //顯示方位

data-selector=’false’ //選擇綁定的選擇器，不選時用false

data-original-title=’這是標題’ //彈出框的標題，優先級比title低

data-content="这是个弹出框插件" //彈出框內容

data-trigger=’click’ //觸發事件類型，hover、focus、manual

data-delay=’300’ //彈出延時

data-container=’false’ //不綁定容器

data-template=’’ //提示框模板

data-viewport=’’ //設置外圍容器的邊際

>

点击弹出/隐藏弹出框

</button>

事件：show.bs.popover、shown.bs.popover、hide.bs.popover、hidden.bs.popover

方法：show、hide、toggle、destroy[用法：$(‘#c’).popover(destroy)]

28、警告框

<div class="alert alert-warning fade in">

<button class="close" type="button" data-dismiss="alert"><span>×</span></button>

<p>警告：您的浏览器不支持！</p>

</div>

事件：

close.bs.alert //当 close 方法被调用後立即觸發

closed.bs.alert //当警告框被完全关闭後立即触

方法：close[用法：$(‘#cl’).alert(close)]

29、按鈕
<div class="btn-group" data-toggle="buttons">

<label for="" class="btn btn-primary active">

<input type="radio" name="sex" autocomplete="off" checked> 男

</label>

<label for="" class="btn btn-primary">

<input type="radio" name="sex" autocomplete="off"> 女

</label>

</div>
.btn-group 會讓兩個元素無縫連接

.buttons 會去掉 radioの點

.btn 會讓label變成一個整體，不帶radio點

<button id="myButton" type="button" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">

加载状态</button>

$('#myButton').on('click', function () {

var btn = $(this).button('loading');

setTimeout(function () {

btn.button('reset'); //還可是btn.button(‘toggle’)

}, 1000);

});

button有三個參數：toggle、reset、string(比如 loading、complete)。

30、折疊效果

手風琴效果のHtml：

<div class="panel-group" id="accordion">

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">点击展示，再点折叠</a>

</h4>

</div>

<div id="collapseOne" class="panel-collapse collapse in">

<div class="panel-body">

这里是第一部分。

</div>

</div>

</div>

div.panel.panel-default>div .panel-heading+div.panel-collapse.collapse

</div>

data-toggle="collapse" 表示實現折疊

.collapse 將其隱藏

.in 將其顯示

合用防止點擊同類的標籤時，此標籤不合上。

手風琴のJS：

$(‘#collapseOne’).collapse({

parent:’#accordion’,//選擇父元素，也就是折疊區

toggle:false //true為默認，初始打開1st，false不打開1st,打開last。特注：此與data-toggle不同

})

三個方法：show、hide、toggle [用法：$(‘#c’).collapse(toggle)]

四個事件：show.bs.collapse、shown.bs.collapse、hide.bs.collapse、hidden.bs.collapse

31、輪播效果

<div id="myCarousel" class="carousel slide">

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

</ol>

<div class="carousel-inner">

<div class="item active">

<img src="img/slide1.png" alt="第一张">

</div>

<div class="item">

<img src="img/slide2.png" alt="第二张">

</div>

<div class="item">

<img src="img/slide3.png" alt="第三张">

</div>

</div>

<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>

<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>

</div>

簡寫：

div#m.carousel.slide>ol.carousel-indicators+div.carouel-inner

屬性：

data-interva=300 //默認 5000，幻燈片停留時間。false，不會自動開始循環。

data-pause=’hover’ //默認鼠標停留在幻燈片區域(hover)即暫停輪播，鼠標離開開始輪播。

data-wrap=’true’ //默認 true，輪播是否持續。

data-ride="carousel" //頁面加載時開始播放動畫

data-slide=’prev’ //或next,上/下一張

data-slide-to=’0’ //跳到指定圖片，從0開始

方法(JS中使用)：

cycle //循環播放(默認從左到右)

pause //停止

number //跳到指定圖片(從0開始)

prev //上一個

next //下一個

用法：$(‘#m’).carousel(‘cycle’)

事件：

slide.bs.carousel //當調用slide時觸發。

slid.bs.carousel //當輪播完一張幻燈片時觸發。

32、附加導航

附加導航即粘貼在屏幕某處實現錨點功能。類似百度百科

<div class="container">

<div class="jumbotron" style="height: 150px">

<h2>Bootstrap Affix</h2>

</div>

<div class="row">

<div class="col-xs-3" id="myScrollspy">

<ul id="myAffix" class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="150">

<li class="active"><a href="#section-1">第一部分</a></li>

<li><a href="#section-2">第二部分</a></li>

<li><a href="#section-3">第三部分</a></li>

<li><a href="#section-4">第四部分</a></li>

<li><a href="#section-5">第五部分</a></li>

</ul>

</div>

<div class="col-xs-9">

<h2 id="section-1">第一部分</h2>

<p style="line-height:2"></p>

<h2 id="section-2">第二部分</h2>

<p style="line-height:2"></p>

<h2 id="section-3">第三部分</h2>

<p style="line-height:2"></p>

<h2 id="section-4">第四部分</h2>

<p style="line-height:2"></p>

<h2 id="section-5">第五部分</h2>

<p style="line-height:2"></p>

</div>

</div>

</div>

data-spy="affix" //監聽類型

data-offset-top="150" //距離頂部の距離

此二者的替代在JS中

$(‘#m’).affix({

offset:{top:150}

});

此二者的替代在css中(優先級最高)

.nav-pills.affix {

bottom : 10px;

}

事件：

affix.bs.affix //在定位結束之前立即觸發

affixed.bs.affix //在定位結束之後立即觸發

affix-top.bs.affix //在定位元素應用 affixed-top 效果之前觸發

affixed-top.bs.affix //在定位元素應用 affixed-top 效果之後觸發

affix-bottom.bs.affix //在定位元素應用 affixed-bottom 效果之前觸發

affixed-bottom.bs.affix //在定位元素應用 affixed-bottom 效果之後觸發