一个页面要想正常访问,首先需要正常加载各种资源。
可是,我不得不说,这一点上就连BAT做的也有所欠缺。他们在专注于组件化,模块化,自动构建,他们天天在弄TDD,BDD,敏捷之道,可是我常常发现有时腾讯或百度的某些页面打开后样式全乱了,或是过长的等待,点击没有反应…
大公司都这样,更不用说一些没用心做的网站了。为什么会这样呢,因为我们强调把脚本和CSS做成外部文件引用,可是却加载失败了,我们崇尚CDN,但有些外链的CDN域名在某些地方访问不了….
所以有时把脚本,css放到页面所在的域名上也未必是坏事,至少只要你能访问到页面,就能访问到相关的资源,只是性能上差一些。
好了,言归正转,来看Bootstrap的一些常用组件,这些组件包括导航组件、菜单、进度条、列表组、面板等。
图标:
bootstrap使用字体图标,这个很好,只要字体文件加载成功了,所有小图标都可以正常显示了,不需要访问一个个图标文件了,可以有效减少HTTP请求数,并且字体图标是可以很容易改变颜色和大小的。它集成了40个Glyphicons图标,当然40个常常不够用,不够用时可以选用font-awesome,支持几百个图标,差不多了。
<i class="glyphicon glyphicon-shopping-cart"></i>
常用的标签一般是i或span。
下拉菜单:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
.dropdown实际上主要定义了position:relative,这样.dropdown-menu是absolute定位的,就可以把定位的原点设置在dropdown的起始坐标上,.dropdown-menu的top设置为100%,这样可以紧贴着dropdown>button内容的下边,形成下拉效果,至于小箭头,则是
<span class="caret"></span>
来实现的。那么下拉的响应是怎么实现的呢?我们注意到data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”true” 这几个扩展属性还有id=”dropdownMenu1”,指定了下拉菜单的元素,明白了吧,id指定了下拉的目录,data-toggle决定了动作方向。aria-haspopup :true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果。aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值:true表示元素是展开的;false表示元素不是展开的。
导航条
<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>
<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>
.sr-only里面的内容不可见,只是为了标识含义的。
navbar也是 position: relative;的,还有其他的一些默认样式,如最小高度。navbar-header是导航标题或图标,float: left;的,所以显示在最左边。里面的导航菜单则用nav .navbar-nav来实现,.navbar-nav中的li都是float:left,因此显示到一行上,很简单吧,所以没有bootstrap我们也可以自己做,只不过使用它会更方便一些。
分页
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
有了分页组件,以后做分页再也不用自己封装也,使用模板
缩略图:
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
</div>
</div>
进度条:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
缩略图和进度条其实也都比较简单,里面的样式可以自己分析一下。
列表组:
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
列表的样式不难做,只是我们自己做的话需要考虑给第一项和最后一项特殊设置圆角,而使用bootstrap组件,则不用考虑这些了。使用emmet编辑时,只用输入这么简单的一句:
ul.list-group>li.list-group-item*5
媒体对象:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
媒体对象特别适合博客里面的评论展示,甚至都可以什么不改直接使用,因为在普通了。
面板:
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
还有一些其他组件,这些组件大多是css,html来实现的,甚至不用引用bootstrap.min.js文件,所以我觉得bootstrap是一套UI库,很适合做门户,而EasyUI,jQueryUI则适合做后台的CMS。