Bootstrap进阶
一、组件
无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能
1.1 图片使用Glyphicons 字体图标
<span class="glyphicon glyphicon-save-file"></span>
1.2 下拉菜单
<div class="dropdown">
<!-- 下拉框 触发按钮 -->
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
下拉框
<!--下拉框图片-->
<span class="glyphicon glyphicon-arrow-down"></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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
1.3 按钮组
// 把一系列的.btn按钮放入.btn-group。
// btn-group 内部嵌套 btn
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
1.4 toolbar 按钮工具栏
// 把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
1.5 尺寸
// 只要给 .btn-group 加上 .btn-group-* 类,就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
1.6 带分割线的下拉框
<div class="btn-group">
<button id="show" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="ul" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
点击切换button显示内容
var $arr=$("#ul li");
$.each($arr, function() {
$(this).click(function(){
var $t = $(this).text();
("#show").text(t);
});
});
1.7 标签式导航栏
<div class="tabbable tabs-below">
<div class="tab-content">
<div class="tab-pane active" id="A">
<p>I"m in Section A.</p>
</div>
<div class="tab-pane" id="B">
<p>Howdy, I"m in Section B.</p>
</div>
<div class="tab-pane" id="C">
<p>What up girl, this is Section C.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
<li><a href="#B" data-toggle="tab">Section 2</a></li>
<li><a href="#C" data-toggle="tab">Section 3</a></li>
</ul>
</div>
1.8 胶囊导航
<ul class="nav nav-pills ">
<li class="active"><a href="#h5" data-toggle="tab">HTML5</a></li>
<li><a href="#java" data-toggle="tab">JAVAEE</a></li>
<li><a href="#android" data-toggle="tab">ANDROID</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="h5">
<p>Html5最近比较火</p>
</div>
<div class="tab-pane fade" id="java">
<p>java是高级语言,是最好的语言</p>
</div>
<div class="tab-pane fade" id="android">
<p>android是最受大众欢迎的智能机品牌</p>
</div>
</div>
1.9 导航条
// data-toggle="tab" 倒航条自带响应效果 缩小显示成手机效果
<li role="presentation" class="active"><a href="#" data-toggle="tab">Home</a></li>
1.10 路径导航 面包屑导航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>
1.11 标签
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
1.12 徽章 提示消息数
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
1.13 巨幕
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
1.14 缩略图
<div class="container" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4">
<a href="#" class="thumbnail"> <img src="../img/005.jpg"></img></a>
<div class="caption">
<h4>HTML入门</h4>
<h6>html是最好的静态网页语言</h6>
</div>
</div>
</div>
</div>
1.15 进度条
<div class="progress">
<div id="progressbar" class="progress-bar progress-bar-success"
role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 10%;">
<span class="sr-only">90% 完成(成功)</span>
</div>
</div>
1.16 well
<div class="well well-lg">您好,我在大的 Well 中!</div>
<div class="well well-sm">您好,我在小的 Well 中!</div>