Bootstrap3.3.7全面解读和Bootstrap4.0全面分析----------002（组件的使用）

这一节我们来介绍组件的使用。组件主要包括：图标，下拉菜单，按钮组，输入框，警告框，进度条，分页使用，徽章，巨幕等等。在我们说的上一节的全局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插件这一部分内容。