BootStrap（二）

BootStrap（二）

下面是对BootStrap一些组件的介绍

1.定制的字体
常用的类是 glyphicon glyphicon-x 太多了具体的看菜鸟教程中

2.下拉菜单
下单菜单的使用：首先外层定义一个div class为dropdown
内层定义一个button button的class为dropdown-toggle 同时设置button的data-toggle=’dropdown’
button中还可设置下拉三角箭头 <span class='caret'/ >
然后 定义一个ul ul的class为dropdown-menu
下拉菜单中的分割线 class=’divider’
下拉菜单右对齐 class=’dropdown-menu-right’
向上拉的菜单 class=’dropup’
具体代码如下：

  <div class="dropdown">
       <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" >下拉<span class="caret"/></button>
       <ul class="dropdown-menu">
            <li><a href="#">1</a></li>
           <li><a href="#">2</a></li>
           <li><a href="#">3</a></li>
       </ul>
   </div>

3.按钮组
按钮组就是 将按钮放在一个组里面
最外层可以放一个 class=’btn-toolbar’
内层是一个 class=’btn-group’
按钮组的大小 class=btn-group-大小
按钮组垂直排列 class=’btn-group-vertical’
按钮组中的下拉菜单 其实最外层的btn-group 就相当于div class=’dropdown’ 其他正常

4.输入框组
输入框组 其实就是在input输入框的前后加一些东西 更加美观 好看
首先 在input外层加 class=’input-group’
在input标签前或者后 加<span class=input-group-addon>$</span>
即可。
输入框前后加按钮

<span class='input-group-btn'></span>

输入框组中加入下拉框 也一样 input-group-btn 相当于 class=’dropdown’

5.导航元素
导航元素分为标签tabs式和胶囊式pills nav-stacked 垂直排放
nav-justified 两端对齐 nav中的下拉菜单 只需要在li中添加class为dropdown即可
首先定义一个ul ul的class为nav nav-tabs 或者 nav nav-pills
同时 点击页夹切换内容 可如下操作
首先在<li></li>中的a标签中添加 data-toggle=’tab’或者data-toggle=’pill’
a标签的href为 跳转的div 的id
在ul的下方创建一个div class=’tab-content’ 用于存放点击页夹之后的内容
在这个div中 写页夹对应的div div的class为tab-pane fade
第一个的为tab-pane fade in active
具体代码如下:

 <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#s1" data-toggle="tab">aaa</a></li>
            <li><a href="#s2" data-toggle="tab">bbb</a></li>
            <li><a href="#s3" data-toggle="tab">ccc</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade active in " id="s1">
                首页
            </div>
            <div class="tab-pane fade" id="s2">
                第二页
            </div>
            <div class="tab-pane fade" id="s3">
                第三页
            </div>
        </div>
    </div>

6.导航栏
导航栏的使用如下：
先定义一个nav标签 nav标签的class=’navbar navbar-default’
这里也可以定义固定顶部navbar-fixed-top navbar-fixed-bottom
颜色反转 变黑 navbar-inverse
在第一层定义div class为container-fluid
这层div嵌套 div class为navbar-header
再往里嵌套一个a标签 class为navbar-brand

定义标签栏
在下侧定义ul ul的class = ‘nav navbar-nav’ 这里同样也可以定义位置
navbar-left navbar-right
然后定义li a标签 同样支持下拉框
具体代码如下：

  <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航栏标题</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">ios</a></li>
                <li><a href="#">iphone</a></li>
                <li><a href="#">ipad</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">iwatch</a></li>
                        <li><a href="#">mac</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    </nav>

导航栏中的表单 : 类为 navbar-form
导航栏中的按钮：类为navbar-btn
导航栏中的字体: 类为navbar-text

7.面包屑导航
定义一个列表 主要的类 class=’breadcrumb’

<ul class="breadcrumb">
        <li><a href="#">2017</a></li>
        <li><a href="#">08</a></li>
        <li><a href="#">27</a></li>
    </ul>

8.分页
定义一个列表 主要的类为pagination 还可以定义大小 pagination-lg pagination-sm
上一页 « 下一页 »

<ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>

9.标签和徽章
标签的类为label label有多种提示颜色 label-primary label-default label-success label-info label-warning label-danger

徽章的类为badge

<span class='badge'>20</span>

10.超大屏幕 ，缩略图
超大屏幕的类为 jumbotron
缩略图的类为thumbnail

11.警告框
警告框的类为alert alert-颜色 有alert-success alert-info alert-warning alert-danger 这几种
可关闭的警告框
首先外层div class肯定是alert alert-颜色 再添加一个alert-dissmissable
然后再里层添加button button的class为close，并添加属性 data-dismiss=’alert’ button中添加×
具体代码如下:

<div class="alert alert-success">
        <button class="close" data-dismiss="alert">&times;</button>
        成功的警示框
    </div>

12.进度条
进度条用到的类是progress progress-striped active progress-bar progress-bar-颜色
使用 ：在外层定义一个div class为progress 同时可以定义是条纹状的progress-striped 动态的 active

然后在内层定义一个div class为progress-bar 定义的width 为进度条的进度 同时可已定义颜色
具体代码：

  <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-danger" style="width: 20%">
        </div>
    </div>

13.列表组和well
列表组用到的类有
list-group list-group-item list-item-heading list-item-text

well 就是凹陷的一块
class =’well’

14面板 我比较喜欢的
面板用到的类是
panel panel-default panel-颜色 panel-heading panel-title panel-body panel-footer
具体代码如下：

    <div class="panel panel-primary" style="width: 500px">
        <div class="panel-heading">
            <h3 class="panel-title">
                面板的标题
            </h3>
        </div>
        <div class="panel-body">
                面板的主题内容
        </div>
        <div class="panel-footer">
                面板的底部
        </div>
    </div>