Bootstrap 组件
1.字体图标
Bootstrap3与Bootstrap2的最大差异在于使用了font文件来替代图片,用于显示图标,这些font图片称为Glyphicons--象形文字图标。
可以使用<i>或<span>标签来配合使用,具体如下:
//使用小图标
<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span>
//也可以结合按钮
<button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
注:可以对字体图标设置字体尺寸font-size、颜色color和应用文本阴影text-shadow。
2.按钮组
按钮组就是多个按钮集成在一个容器里形成独有的效果。
//基本格式
<div class="btn-group">
<button type="button"class="btn btn-default">左</button>
<button type="button"class="btn btn-default">中</button>
<button type="button"class="btn btn-default">右</button>
</div>
//将多个按钮组整合起来便于管理
<div class="btn-toolbar">
<div class="btn-group">
<button type="button"class="btn btn-default">左</button>
<button type="button"class="btn btn-default">中</button>
<button type="button"class="btn btn-default">右</button>
</div>
<div class="btn-group">
<button type="button"class="btn btn-default">1</button>
<button type="button"class="btn btn-default">2</button>
<button type="button"class="btn btn-default">3</button>
</div>
</div>
//设置按钮组大小
<div class="btn-group btn-group-lg">
<div class="btn-group>
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs">
3.下拉菜单
.dropdown { position:relatie; }
.dropdown-menu { position:absolute; top:100%; ... }
.dropdown-toggle 出现点击效果
data-toggle="dropdown" JS选择器用
使用:保证下拉菜单与触发(button或nav)在同一父元素下。
3.1按钮的下拉菜单
<div class="dropdown">
<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>
<li><a href="#">关于</a></li>
</ul>
</div>
//设置向上触发
<div class="dropup">
//菜单项居右对齐,默认值是dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right">
//设置菜单的标题,不要加超链接
<li class="dropdown-header">网站导航</li>
//设置菜单的分割线
<li class="divider"></li>
//设置菜单的禁用项
<li class="disabled"><a href="#">产品</a></li>
//让菜单默认显示
<div class="dropdown open">
3.2按钮组的下拉菜单
<div class="btn-group">
<button type="button"class="btn btn-default">左</button>
<button type="button"class="btn btn-default">中</button>
<button type="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>
注:没有class="dropdown",因为.btn-group有定位{ position:relatie; }
//分裂式按钮下拉菜单
<div class="btn-group">
<button type="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>
3.3导航栏的下拉菜单
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">iOS</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>
4.输入框
·向 <form> 元素添加 role="form"。
·把标签和控件放在一个带有 class .form-group 的<div> 中。这是获取最佳间距所必需的。
·向所有的文本元素 <input>、<textarea>和 <select>添加 class ="form-control" (焦点事件)
·<div class="input-group-addon">¥</div>或<span class="input-group-addon">¥</span>放置额外内容,二者是完全等效的。
4.1向input输入框添加文本或单复选框
//添加文本
<div class="input-group"> //为input添加边距
<span class="input-group-addon">¥</span>
<input type="text" class="form-control">
</div>
//添加复选框
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
4.2向input输入框添加按钮与下拉菜单
用 .input-group-btn代替 .input-group-addon
//添加按钮
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
//添加下拉菜单
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li> <a href="#">功能</a> </li>
<li> <a href="#">另一个功能</a> </li>
</ul>
</span>
</div>
4.3输入框组的大小
您可以通过向 .input-group 添加相对表单大小的class(比如 .input-group-lg、input-group-sm)来改变输入框组的大小。输入框中的内容会自动调整大小。
5.导航元素
5.1基本
对ul添加.nav .nav-tabs或.nav-pills
//标签式的导航菜单
<ul class="nav nav-tabs">
<li class="active"><a href="#"