今天继续组件设计的学习
导航条表单
可以在导航条中通过"form"标签添加表单，在该表单中可以添加输入框，按钮，搜索等元素
输入框通过添加类“navbar-form”建立
搜索框通过添加类“navbar-search”建立
他这里写两个表单的时候都是使用两层div包起来的，第一层是navbar，第二层是navbar-inner，我在网上搜索了这么做的原因，得到的解释是分开写两层比合写一层，代码上更加层次清晰
这个navbar-inner类的不像nav是有预设样式写在css中的，其实还是个空白类，实际应用的时候，还是需要根据自己的需求编写样式的
响应式导航条
响应式导航条可以实现交互功能，通过把导航条包含在类“.nav-collapse”和类".collapse"中，并在其中添加一个“.btn-navbar”的触发按钮
ps：这么久了我突然发现书上讲的导航条就是网上的导航栏
关于响应式的导航栏书上讲的不是很清楚，我还是决定看菜鸟教程
毕竟响应式是重点
首先菜鸟用的就是nav包括全部代码，我上网查了，nav标签和div差不多，就是有导航的意思在，方便区分自己写的代码内容吧
ps：菜鸟的代码有很多类似sr-only的增强可读性的属性，他们本身不会影响ui，但是提高代码可读
“<span class="sr-only">切换导航</span>”
这样一句话因为添加了类名sr-only，所以网页上是看不到的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 响应式的导航栏</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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 class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
以上是总代码，其实不复杂，把前面的内容结合在了一起而已
子菜单的部分还是老样子，分两层，第一层“dropdown”第二层“dropdown-menu”
不一样的是前面部分需要构造一组span，然后还通过id引用了后面的内容
bootstrap的分页
在框架中，使用“.pagination”类来实现分页，主要分为标准分页和翻页分页两种
标准分页方式
这种方式比较适合app应用搜索结果的展示，分页中点击区域比较大，方便用户操作，且易扩展
我敲了书上的代码，运行结果是竖的，是有问题的
类“pagination”应该直接添加在ul标签中，不能添加在div上
« 是<<的意思，一般用来代表上一页
&lsaquo 直接是第一页
首字母l换成r就是相反的后一页和尾页
翻页分页方式
就是直接用前一页和后一页的样式进行分页
使用的是“pager”类，和前面的一样，ul和li嵌套
bootstrap的标签和徽章
这些内容都是在span元素的基础上添加label，badge类和其他类生成的
其中label是标签，badge是徽章
除了默认样式还有以下一些样式
label-success
…-warning
…-important
…-info
…-inverse 这些，和之前按钮之类的样式有点类似
bootstrap的进度条
进度条用于展示加载，跳动或动作正在执行中的状态
默认样式
默认的进度条样式是带垂直颜色渐变效果的
<div class="progress">
<div class="progress-bar" style="width: 50%;"></div>
</div>
这样是一个最基本的进度条，添加的是“progress”，创建了进度条，又使用“progress-var”设置了进度条的初始值
斜条纹样式进度条
就是带45度斜条纹效果的
在外层的div额外添加了一个progress-striped类即可
我感觉好丑，这些都是bootstrap.css预设的样式，真正以后工作需要的时候应该会完全自己写进度条样式吧。反正目前为止bootstrap给我的感觉就是css中的beautiful soup，剪辑软件中的爱剪辑，方便新手，高手都是要自己设计才行
还有堆叠式，不怎么好吧
Glyphicons字体图标
这是一个字体图标库吧，一共有两百个，通过bootstrap可以免费使用
在使用这些字体图标的时候为了提高性能，需要对全部图标设定一个基类及对应每个图标设定单独的类，同时，为了正确内补，还需要在图标和文本之间加上一个空格
字体图标可以应用在各种地方，比如输入框，按钮，工具条等
<div class="btn-toolbar" role="toolbar" >
<div class="btn group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
</div>
</div>
<div class="btn-toolbar" role="toolbar">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star">555</span>
</button>
</div>
他的图标属性添加是通过添加类glyphicon + glyphicon-xxx得到的
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
