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-width:20px;width: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 效果之後觸發