bootstrap学习之二-组件
一、bootstrap字体图标
以span的形式出现，通常可以用于一个button或者其他元素的内文本，
<span class="glyphicon glyphicon-sort-by-attributes"></span>
二、bootstrap下拉菜单
1.折叠后的菜单一般是个button（或li等其他块元素），为其添加class="btn dropdown-toggle",data属性 data-toggle="dropdown"；为提示下拉效果，一般结合结合<span class="caret"></span>
2,菜单项使用一个ul，li来呈现，为ul添加clss="dropdown-menu";对于li,如果为li添加class="divider"则呈现一条分割线；如果为其添加class=""dropdown-header"则样式为下拉菜单的标题。
3，用一个div包括上述button和ul，并为其添加class .dropdown或者.btn-group。不过如果创建的是分割式样的按钮，就只能添加.btn-group
4,如果想要创建一个上拉菜单，给父.btn-group容器添加.drop-up即可。
下拉菜单
三、bootstrap按钮组
给包围一组按钮的div包括类.btn-group;.btn-toolbar,.btn-group-vertical可以将一组按钮组织起来。并且可以嵌套组。
四、bootstrap导航元素
一般用一组ul来实现（如果有下拉菜单就用嵌套的两个ul）
1.为ul添加基本类.nav;如果是标签式的导航，就再添加.nav_tabs;如果是胶囊式的，就添加.nav_pills
2,在上述基础上如果同时使用.nav_stacked,.nav_justified可以使得导航元素垂直或者和父元素等宽。
五、bootstrap导航栏
1.为nav标签添加class:.navbar ,.navbar-default/.navbar-inverse;并添加role="navigation"
2.添加导航标题（用一个div嵌套a来实现），外层的div添加类 navbar-header;内层的a添加类 navbar-brand
3,导航的条目，使用ul和li来实现，为ul添加类nav navbar-nav
其他：
1，如果创建响应式的链接，需要更改两处
（1）修改导航栏标题的样式，增加小屏幕上显示的折叠按钮（一组span），并为导航栏标题所在的div添加类:navbar-toggle.以及两个data属性，data-toggle="dollapse"，data-target="目标id"
（2）为要折叠的导航元素ul的外围div（如果没有则增加一个），添加类：collapse navbar-collapse,以及和第一步对应的id
对应的代码如下：
<!doctype html> <html lang="zh-hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <title>宁浩网_模拟2</title> </head> <body> <header> <nav class="nav-bar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#nav_collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">ninghao.net</a> </div> <ul id="main_menu" class="nav navbar-nav navbar-left"> <li class="active"><a href="#">课程</a></li> <li><a href="#">博客</a></li> <li><a href="#">社区</a></li> </ul> <div class="collapse navbar-collapse" id="nav_collapse"> <ul id="secondary_menu" class="nav navbar-nav navbar-right"> <li><a href="#">登陆</a></li> <li><a href="#">注册</a></li> <li><button class="btn btn-primary btn-xs navbar-btn" href="#">订阅课程</button></li> </ul> </div> </div> </nav> </header> <script src="lib/jquery-2.1.4.min.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"></script> </body> </html>
2，导航栏中的表单，添加类：navbar-form
3, 导航栏中的按钮(非表单中的按钮)，添加类:navbar-btn
4，导航栏中的文本（<p>),添加类navbar-text
5,导航栏中的组件对齐（如ul，form），左对齐采用navbar-left,右对齐采用navbar-right.
6,将导航栏固定到顶部(.navbar-fixed-top),固定到底部(.navbar-fixed-bottom)
六、bootstrap面包屑导航
面包屑导航的实现很简单，为一个ul添加.breadcrumb即可
七、bootstrap分页和前后页
分页的实现，为一个ul添加.pagination
前后页的实现，为一个ul添加.pager
八、bootstrap标签和徽章
标签的是实现，为一个span赋予基本类.label 以及.label-default/.label-primary/.label-sucess 等来实现
标签的是实现，为一个span赋予类.badge。
九、bootstrap页面标题和缩略图
如果想要在标题下方有条横线，并且获得合适的间距，可以使用一个赋予.page-header类的div包围对应的h元素
缩略图的实现，为img的外围a标签添加.thumbnail;这样可以为图片获得一个边框和内边距
十、bootstrap警告
1.该组件通常需要结合jquery插件alerts使用；为一个div赋予.alert基本类以及.alert-success、.alert-info、.alert-warning、.alert-danger）之一
2.想要给警告框加一个关闭按钮，需要1）为外层div添加一个alert-dismissable类，2）html代码如下
<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 成功！很好地完成了提交。 </div>
十一、bootstrap进度条
1)利用两个嵌套的div（如果想形成堆叠的效果，可以在外层div中套多个）来实现，外围div添加类.progress;
2）内层div添加类基本类.progress-bar， 和 class progress-bar-* 的空的 <div>。其中，* 可以是success、info、warning、danger。并利用css为内层div设置宽度。
3）如果想要增加进度条的动画效果，需要在外围div同时增加类.progress-striped和.active
十二、bootstrap媒体对象，bootstrap列表组，bootstrap面板,bootstrap wells的实现都相对简单，可以参见对应的文档
http://www.w3cschool.cc/bootstrap/bootstrap-panels.html
