bootstrap学习之二-组件

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">
      &times;
   </button>
   成功!很好地完成了提交。
</div>
带有关闭按钮的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