学习bootstrap 总结（1）

今天开始学习bootstrap，目前计划从项目需要先开始做的模块涉及到bootstrap知识点先了解，记录一些要点，比较容易记得住。

1、布局（还未了解仔细）

2、导航

3、标签页

4、表格

导航：导航元素（分为：标签式的导航菜单、基本胶囊导航菜单）

标签式的导航菜单：只需要在无序列表父元素添加class：nav nav-tabs

基本胶囊的导航菜单：只需要在无序列表父元素添加class：nav nav-pills

默认是水平排列，可设置class：nav-stacked来垂直排列

两端对齐：.nav-justified

禁止链接显示样式：.disabled（功能不禁止，需使用js控制）

例如： <p>导航栏两端对齐</p>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">SVN</a></li>
<li class="disabled"><a href="#">iOS</a></li>
<li><a href="#">JAVA</a></li>
</ul>

导航元素结合下拉菜单：（本文中所讲的父级子元素等为相对的级别）

在导航元素中带有下拉菜单的列表项（父级）添加：.dropdown

导航元素中带有下拉菜单的列表项中的子元素（子元素）的上级（a标签）.dropdown-toggle、data-toggle="dropdown"，下级下拉列表 ul.dropdown-menu

例如： <p>带有下拉列表的导航栏</p>
<ul class="nav nav-pills">
<li class="dropdown">

<a href="" class="dropdown-toggle" data-toggle="dropdown">HOME</a>
<ul class="dropdown-menu">
<li class="divider"><a href="">aaaaaaa</a></li>
<li></li>
<li><a href="">dfdsgdfshg</a></li>
<li><a href="">dfdsgdfshg</a></li>
<li><a href="">dfdsgdfshg</a></li>
</ul>
</li>
<li class="active"><a href="">IOS</a></li>
<li><a href="">JAVA</a></li>
<li><a href="">CSS</a></li>
</ul>

导航：导航栏

导航栏需使用nav标签，添加class：navbar navbar-defalut（navbar-defalut为默认的导航栏样式，navbar-inverse：黑色背景白色文本的倒置）， role="navigation"增强可访问性，如果是屏幕阅读器，可以了解这是为导航栏

class="container-fluid"，表示100%充满视口

接下来分为导航栏的头部与导航列表，导航栏列表项中添加下拉菜单与上面所讲的一样

<div class="container">
<p>默认的导航栏</p>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a href="" class="navbar-brand">计算机</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="">IOS</a></li>
<li><a href="">SVN</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="">JAVA</a>
<ul class="dropdown-menu">
<li><a href="">aaa</a></li>
<li class="divider"></li>
<li><a href="">dfgf</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>

导航栏可动态定位，根据不同的需求设置静止或者固定（ 固定：class .navbar-fixed-top）（静止：class .navbar-static-top）

响应式导航栏：响应式的导航栏与上面讲的导航栏不同之处是在当视口小于一定的宽度时候，导航栏为折叠状态，主要是添加btn的class与自定义属性

<div class="container">
<p>响应式导航栏</p>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!--切换导航栏的按钮设置-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span><!--增强阅读性，屏幕阅读中显示，但是其他设备隐藏-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">计算机</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="active" href="">iOS</a></li>
<li><a href="">SVN</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="">JAVA</a>
<ul class="dropdown-menu">
<li><a href="">aaa</a></li>
<li><a href="">ssd</a></li>
<li class="divider"></li>
<li><a href="">ffgg</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>

标签页：主要注意的是每个显示的页面设置id，在导航列表中进行锚链接

<div class="container">
<p>标签页tab插件</p>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">计算机</a></li>
<li><a href="#ios" data-toggle="tab">IOS</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">JAVA
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#aaa" data-toggle="tab">aaa</a></li>
<li><a href="#bbb" data-toggle="tab">cccc</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div id="home" class="tab-pane fade in active"><p>aaaaaaaaaaagsdgfdhf</p></div>
<div id="ios" class="tab-pane fade"><p>vvvvvvvvvvvhjgdfd</p></div>
<div id="aaa" class="tab-pane fade"><p>sasssssssssssss</p></div>
<div id="bbb" class="tab-pane fade"><p>fghhhhhhhhhhhhhhhhhhhh</p></div>
</div>


</div>

表格：

<table class="table table-bordered table-hover">
<thead>
<tr class="info">
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>DEF</td>
</tr>
<tr class="success">
<td>2</td>
<td>GF </td>
</tr>
<tr class="warning">
<td>3</td>
<td>FRT</td>
</tr>
<tr class="danger">
<td>3</td>
<td>FRT</td>
</tr>
</tbody>
</table>

响应式表格：

<!--响应式表格，< 768px显示效果-->
<div class="table-responsive">
<table class="table">
<caption>响应式表格布局</caption>
<thead>
<tr class="info">
<th>产品</th>
<th>日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr  class="success">
<td>产品</td>
<td>20170101</td>
<td>待发货</td>
</tr>
<tr class="active">
<td>产品</td>
<td>20170101</td>
<td>发货</td>
</tr>
<tr class="warning">
<td>产品</td>
<td>20170101</td>
<td>发货中</td>
</tr>
<tr class="danger">
<td>产品</td>
<td>20170101</td>
<td>待确认</td>
</tr>
</tbody>
</table>
</div>