BootStrap:进阶使用（其一）

今天我要讲述的是在BootStrap中进一步使用的方法与代码举例;

导航条

作为在应用或网站中作为导航页头的响应式基础组件。导航条在移动设备上可以折叠（且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式

注：两端对齐样式的导航条以及导航链接如今已经不太广泛使用了。

以下是作为导航条的经典框架展示：

<nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><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><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><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></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>

展示：

注：在一定程度上，导航条还是比较依赖JavaScript的；

移动端的显示尺寸：

若将移动端显示尺寸隐藏（注释）则出现以下效果：

导航条选中：

注：

   
                       <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                       <li><a href="#">成功案例</a></li>

搜索栏：

若将搜索栏隐藏，则为以下效果：

<!-- 表格 --><table class="table table-striped table-bordered table-hover "><thead><!-- 表头 --><tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr><tbody><!-- 内容 --><tr><td>1</td><td>弥娅</td><td>女</td><td>16</td><td><button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></td></tr><tr><td>1</td><td>弥娅</td><td>女</td><td>16</td><td><button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></td></tr><tr><td>1</td><td>弥娅</td><td>女</td><td>16</td><td><button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></td></tr><tr><td>1</td><td>弥娅</td><td>女</td><td>16</td><td><button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></td></tr><tr><td>1</td><td>弥娅</td><td>女</td><td>16</td><td><button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></td></tr></tbody></thead></table>

展示:

注:以上效果则涉及了表格的：条纹表格：.table-striped；边框表格：.table-bordered；悬停表格：.table-hover；

按钮图标：

<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>

效果显示：

重点：

注：图标大小对应要修改栅格类，其图片与基本样式是一体的，如==》glyphicon glyphicon-trash（这是图标中的删除样式图标）

注：若想将大小设置为极小则: .col-xs-
具体可见：

释义：其中图标颜色定义源==》：

"btn btn-primary"（首选项）Primary

"btn btn-danger"（危险）Danger

增设按钮组：

<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>

效果：

综合使用（按钮组与栅格的交互使用）：

<!-- 容器 --><div class="container"><!-- 按钮组 --><div class="row"><div class="col-xs-7"><div class="input-group"><input type="text"class="formcontrol"placeholder="Searchfor..."><span class="input-group-btn"><button class="btn btn-default" type="button">搜索</button></span></div></div><div class="col-xs-5 text-right"><div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增</button><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改</button><button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-danger" aria-hidden="true"></span> 删除</button></div></div></div>

效果：