今天继续组件设计的学习
导航条表单
可以在导航条中通过"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得到的