这一节我们来介绍组件的使用。组件主要包括:图标,下拉菜单,按钮组,输入框,警告框,进度条,分页使用,徽章,巨幕等等。在我们说的上一节的全局CSS样式,我们只需要引入Bootstrap的css文件就可以了。但是在这个组件使用中,需要引入JQ和Bootstrap.js文件,因为组件有些需要JavaScript的代码,来实现动态效果。好啦,闲话不说,开始组件介绍。关于Bootstrap3.3.7所有的代码,在001中有地址下载。欢迎一起交流学习。
㈠图标的使用:
图标的代码是放在Bootstrap3.3.7的fonts里面的,如图:
如果想要修改图标的位置,Bootstrap3.3.7中给出了解释和方法
我们一般使用图标是放在i标签和span标签上面的。代码如下:
<!--无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能-->
<h1>图标:</h1>
<p>一共提供了260多个图标。一般用于span和i标签上面,只需要加入class样式即可</p>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<i class="glyphicon glyphicon-menu-left"></i>
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
结果:
㈡菜单的使用:
这个功能实现是动态的,所以我上面说为什么需要引入JQ和Bootstrap.js的原因。代码如下:所有的介绍我都放在了代码里面:
<h1>下拉菜单:</h1>
<!--将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,
或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码.
这里需要引入js文件,因为他需要JavaScript的下拉功能
-->
<div class="dropdown">
<!--通过为下拉菜单的父元素设置 .dropup 类,可以让菜单向上弹出(默认是向下弹出的)-->
<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 role="separator" class="divider"><a href="#">拥有下划线</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
结果如下:点击按钮,会出现下拉菜单。菜单中有分割线。
㈢按钮组的实现:
在标签中加入样式.btn-group,包裹住具有.btn的标签。当然,按钮也是有大小的。
<h1>按钮组:</h1>
<!-- Split button -->
<div class="btn-group">
<button 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 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>
结果如下:
㈣输入框的实现:
通过在文本输入框 <input>
前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group
赋予 .input-group-addon
或 .input-group-btn
类,可以给 .form-control
的前面或后面添加额外的元素。这是Bootstrap的介绍。代码如下:
<h1>输入框:</h1>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div><br />
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div><br />
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
结果如图:
这里顺便介绍一个警告框的实现,主要是添加不同的颜色样式alert-xxx实现。
<h1>警告框:</h1>
<div class="alert alert-success" role="alert">警告框</div>
<div class="alert alert-info" role="alert">警告框</div>
<div class="alert alert-warning" role="alert">警告框</div>
<div class="alert alert-danger" role="alert">警告框</div>
<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> 可以关闭的警告框
</div>
如图所示:
㈤进度条,分页,徽章,巨幕的实现:
这些看似内容很多,其实主要是都是机械的复制粘贴,添加样式,对bootstrap的规定熟知就好。
<h1>进度条:</h1>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<h1>分页的使用:</h1>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2 <span class="sr-only">(current)</span></a></li>
<li><a href="#">3 <span class="sr-only">(current)</span></a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<h1>徽章</h1>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
徽章的使用
</li>
</ul>
<h1>巨幕的实现:</h1>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>你想说点什么呢,不需要说什么,这就是巨幕的力量</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
结果如图:
如果我们想用好bootstrop主要就是多看看,多用用。其实它的定位决定了它的使用不会太复杂。主要是多看看它的规定,剩下的就是在实践中,大量使用。下一节讲述,JavaScript插件这一部分内容。