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即可。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
三、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
对应的代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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代码如下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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