BootStrap前端框架

原创 2017年11月14日 20:00:25
一.what
前端CSS框架,另一个前端框架Foundation

前端框架:使用HTML、CSS、JavaScript编写的组件工具集,拿来可以直接用,不用从造轮子.

二.why
最流行的前端框架、用的多

Twitter公司于2011年8月开源的整体式前端框架,由Twitter的设计师Mark Otto和Jacob
Thornton合作开发,短短几个月时间红遍全球,大量的Bootstrap风格的网站出现在互联网的浪潮中,而应用更为广泛的是它的后台管理页面.近两年的所有互联网项目的后台均采用了Bootstrap进行构建.

为什么如此流行
1.功能强大和样式美观
2.简单易用、文档丰富
3.高度可定制性
4.丰富的生态圈
5.布局兼容性好


三.how(第一个程序)
1.下载Bootstrap

http://getbootstrap.com

最新版本bootstrap-3.3.7


不同版本的区别: 最新版本已经发展到Bootstrap 3 但是不意味着 Bootstrap2已经淘汰了,Bootstrap3采用了扁平化的风格,Bootstrap2在按钮、工具栏等位置更多采用了立体的效果,它们之间没有谁好谁坏的区别,只是设计风格的不同. 应该根据自己项目的实际需求来决定使用哪一个版本


扁平化概念的核心意义是:去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上,则强调了抽象、极简和符号化。

关于扁平化可以参考
http://baike.baidu.com/link?url=8RakX7FRvO0H7FbVWc2mBOMcSpy-humjYXGQEYZTjrbPfcCM1JNZCPjk0Hf60TlY6ma0FYvn5a992RPpfpJVA_

2.在项目中引入Bootstrap
引入3个文件
bootstrap.css
jquery.js 
Bootstrap.js

Bootstrap要求的jquery在1.9.1版本或以上,jQuery3以下

演示代码如下:

<html>
  <head>
    <title>第一个Bootstrap程序</title>

    <link href="../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>

  </head>

  <body>
    <h1>Hello,Bootstrap!</h1>

    <script src="jquery-2.1.4.js"></script>
    <script src="cbootstrap.js"></script>
  </body>
</html>

需要注意的是因为bootstrap框架依赖于jquery,所以要先导入jquery.js再导入bootstrap.js
.另外以前我们导入 js都是在head中导入,现在为什么要把它放到body中导入呢?
因为如果放到head中导入,服务器给客户端浏览器传输该页面的时候从上到下传输,这样会先传输js文件,如果用户的网速比较慢,这样在传输js文件的过程中,body中的内容还没有传输过来,这样用户看到的是一片白,影响用户的体验,所以我们通常把js文件放到后面加载,这样用户可以先看到body中的内容,再下载js来改变页面的行为,提高用户了用户的体验.(否则用户看见一片白直接关闭网页了)





普通纯HTML效果如下



比较全的第一个程序
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!!!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>
</html>


代码解释1:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

页面宽度为设备宽度,初始缩放比例为1.0,调整比例对桌面浏览器并不起作用,只对移动端浏览器生效,比例值越大字越大

该语句是为了解决移动端浏览器显示问题


不加上面这句话,在web端访问没问题,在移动端浏览器中显示效果如下


加上这句话以后效果如下


具体详见:
http://davidbcalhoun.com/2010/viewport-metatag/


代码解释2:

   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->


条件注释  IE9以下 引入这两个文件,IE9以上(包括IE9)把它当做注释内容,不引入.
引入这两个文件为了让IE8支持HTML5元素和媒体查询.

四.基本样式
1.普通按钮
(1)按钮基本样式



演示代码:
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">危险</button>

(2)调节按钮的大小



<p>
            <button type="button" class="btn btn-primary btn-lg">主要</button>
            <button type="button" class="btn btn-default btn-lg">默认</button>
        </p>

        <p>
            <button type="button" class="btn btn-primary">主要</button>
            <button type="button" class="btn btn-default">默认</button>
        </p>
        <br/>

        <p>
            <button type="button" class="btn btn-primary btn-sm">主要</button>
            <button type="button" class="btn btn-default btn-sm">默认</button>
        </p>

        <p>
            <button type="button" class="btn btn-primary btn-xs">主要</button>
            <button type="button" class="btn btn-default btn-xs">默认</button>
        </p>
(3)块级按钮
<button><a> 默认都是行内元素(内联元素),而对于移动端来说一个占据一行的大按钮再正常不过了


演示代码:
<button type="button" class="btn btn-primary btn-block">主要</button>
<button type="button" class="btn btn-default btn-block">默认</button>

(4)不可点击的按钮

讲按钮的背景色做50%的褪色处理以呈现出无法点击的效果

<button type="button" class="btn btn-primary" disabled="disabled">主要</button>
<button type="button" class="btn btn-default" disabled="disabled">默认</button>
2.关闭按钮

对按钮元素应用.close类就可以显示一个关闭按钮,如图所示
<button type="button" class="close" aria-hidden="true">&times</button>

aria-hidden="true" 对屏幕阅读器来说这个按钮时隐藏的

屏幕阅读器,便于残障人士更方便阅读网页内容的工具

关于屏幕阅读器,可参见
http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/

3.下拉按钮

对span元素应用caret类就可以显示一个下拉符号

<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
</button>

4.图片


<img src="img/beer.jpg" />
<img src="img/beer.jpg" class="img-rounded" />
<img src="img/beer.jpg" class="img-circle" />
<img src="img/beer.jpg" class="img-thumbnail" />
5.表格

演示代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>bootstrap表格</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>

    <style type="text/css">
        tr.tableHead {
            background-color:#000000;
            color:#ffffff;
        }

tr.tableHead>th {
                text-align: center;
        }
    </style>
  </head>

  <body>
    <div class="text-center">


        <h1>商品信息</h1>

        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr class="tableHead">
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品描述</th>
                    <th>商品种类</th>
                    <th>操作</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>macbook air</td>
                    <td>苹果最新超薄笔记本</td>
                    <td>笔记本</td>
                    <td><a href="#">修改</a></td>
                    <td><a href="#">删除</a></td>
                </tr>

                <tr>
                    <td>2</td>
                    <td>ipad pro</td>
                    <td>苹果最新平板电脑</td>
                    <td>平板电脑</td>
                    <td><a href="#">修改</a></td>
                    <td><a href="#">删除</a></td>
                </tr>

                <tr>
                    <td>3</td>
                    <td>iphone6s plus</td>
                    <td>苹果最新大屏手机</td>
                    <td>手机</td>
                    <td><a href="#">修改</a></td>
                    <td><a href="#">删除</a></td>
                </tr>

            </tbody>

        </table>

    </div>

    <script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
    <script src="../../css/bootstrap/js/bootstrap.js"></script>
  </body>
</html>

6.工具类
(1)浮动工具

左浮动、右浮动: 为元素添加.pull-left、.pull-right类就可以设置左浮动和有浮动

演示代码如下:
<div class="pull-left">111</div>
<div class="pull-right">222</div>

内部的源代码如下:

.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}


!important; 设置该属性为最高优先级,即相当于把该属性定义在css文件最下面.


(2)显示/隐藏工具

使用.show类显示, .hidden类隐藏,这种隐藏是不占位的,相当于设置了display:none

<div class="show">333</div>
<div class="hidden">444</div>

(3)居中
使用.center-block 类将元素设为块级元素并居中


<div style="width:100px;background-color:yellowgreen;" class="center-block">555</div>

注意必须设置元素的宽度居中才有效

5.对除了屏幕阅读器的设备隐藏

使用.sr-only类

<a class="sr-only" href="#content">Skip to main content</a>
五.组件集

1.导航条
Bootstrap的导航主要分为胶囊式导航、面包屑导航、头部导航3类,可以满足大多数的开发需求.
胶囊式导航
水平胶囊导航




胶囊导航实质是一个无序列表,只需要给ul元素添加.nav和.nav-pills类即可

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>


垂直胶囊导航

如果需要纵向的胶囊导航, 只需要在水平胶囊导航的基础上加一个.nav-stacked 类即可 





<div style="width:140px;text-align:center;">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">iOS</a></li>
            <li><a href="#">VB.Net</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">PHP</a></li>
        </ul>

</div>

面包屑导航
面包屑导航一般用于有层次关系的选项,如果想实现面包屑导航,需要给ul加一个.breadcrumb类即可.


<ul class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">资料库</a></li>
    <li><a href="#">数据</a></li>
</ul>

头部导航


    <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="#">网站Logo</a>
    </div>

    <!—这里设置网站的链接 -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">链接<span class="sr-only">(current)</span></a></li>
        <li><a href="#">链接</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<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>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">链接</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<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>


具体分析头部导航主要分为两层结构,第一层是最外面的   <nav class="navbar navbar-default"></nav>,这一层用于设置导航的基本样式

将.navbar-default类替换为 .navbar-inverse类,则显示为反色的导航(黑底白字)


第二层有两个并列的元素: <div class="navbar-header"></div>内部用于设置标题内容.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">….</div>内部则用于编写具体的导航链接、搜索表单、下拉菜单等具体的导航内容。

Bootstrap提供了在小窗口下导航 收起/展开的功能


同学们可以把上面的窗口拖小的试一下

添加.navbar-fixed-top可以让导航条固定在顶部,不会随页面滚动而消失。为了防止固定在顶部后遮挡正常内容,需要设置:body{padding-top:50px;} 其中具体的值取决于导航条的高度



加了body的补白不会遮挡正常内容,不加会遮挡

2.下拉菜单


演示代码:

<div class="dropdown">

    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#">选项一</a></li>
        <li><a href="#">选项二</a></li>
        <li><a href="#">选项三</a></li>
        <li class="divider"></li>
        <li><a href="#">选项四</a></li>
    </ul>

</div>
按钮和下拉选择都要包裹在<div class="dropdown">….</div>内
按钮必须添加 data-toggle="dropdown" 触发器
放置下拉选项的无须列表需要添加 .dropdown-menu 类
添加一个空的<li class="divider"></li>来分割列表项


3.按钮组

上面一组是放到按钮组中的效果,下面一组是没有放到按钮组的效果

按钮组用于把一组按钮放在同一行里,按钮之间没有间隙.用法很简单,只需要将一组按钮
放在<div class="btn-group">..</div>中即可.

演示代码:

<div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>

        <input type="button" class="btn btn-default" value="点我" />
</div>

(1)垂直排列


<div class="btn-group-vertical">

</div>


(2)两端对齐(按钮组拉伸到100%宽度)


演示代码:
<div class="btn-group btn-group-justified">
    <a class="btn btn-default">Left</a>
    <a class="btn btn-default">Middle</a>
    <a class="btn btn-default">Right</a>
</div>

注意:两端对齐的用法只适用于<a>元素,因为按钮元素不能应用这些样式并将其所包含的内容两端对齐.

(3)嵌套,可以在 按钮组 内继续 嵌套 按钮组



演示代码:

    <div class="btn-group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>

            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>

                <ul class="dropdown-menu">
                    <li><a href="#">选项一</a></li>
                    <li><a href="#">选项二</a></li>
                    <li><a href="#">选项三</a></li>
                    <li class="divider"></li>
                    <li><a href="#">选项四</a></li>
                </ul>
            </div>

     </div> 

4.input控件组
多个input控件放到一组中配合使用,下面演示了几种常见的组合,最常见的input控件组
非搜索框莫属.

(1)搜索框

实质就是 文本框+按钮

演示代码:

    <div class="input-group" style="width:500px;margin:0px auto;">
            <input type="text" class="form-control"/>

<span class="input-group-btn">
<input type="button" name="search" value="search" class="btn btn-default"/>
            </span>
    </div>

如果需要带下拉菜单的按钮,只需要将按钮换成下拉菜单即可。


(2)搜索框+文字

搜索框后不是按钮,不可点击

演示代码:
<div class="input-group" style="width:500px;margin:0px auto;">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                输入完成后回车
            </span>

</div>

5.列表组


上图是未经美化的列表,下图是经过美化的列表

演示代码如下:
<div style="width:100px;">
    <ul class="list-group">
        <li class="list-group-item"><a href="">选项一</a></li>
        <li class="list-group-item"><a href="">选项二</a></li>
        <li class="list-group-item"><a href="">选项三</a></li>
        <li class="list-group-item"><a href="">选项四</a></li>
    </ul>
</div>

注意:列表组中使用有序列表时不会显示序号.

列表组不仅可以应用于列表,还可以将其他需要列表的元素展现为列表的样子.例如,


左图为不加样式的,右图为加上列表组样式的.

演示代码:
<div class="class="list-group" style="width:200px;">
             <a href="#" class="list-group-item active">
                <h4 class="list-group-item-heading">英格兰战胜威尔士</h4>
                <p>最新欧洲杯战况英格兰2:1战胜威尔士....</p>
             </a>

              <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">乌克兰对北爱尔兰</h4>
                <p>乌克兰对北爱尔兰....</p>
             </a>

              <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">德国对波兰</h4>
                <p>德国队波兰....</p>
             </a>
</div>

为列表组添加徽章也十分容易,Bootstrap会自动将徽章放置在右边




演示代码:
<div style="width:150px;">
            <ul class="list-group">
                <li class="list-group-item">
                    <!-- 即使将徽章放在前面,最终还是会居右放置-->
                    <span class="badge">52</span>
                    <a href="">中国队金牌</a>
                </li>

                <li class="list-group-item">
                    <span class="badge">48</span>
                    <a href="">美国队金牌</a>
                </li>

                <li class="list-group-item">
                    <span class="badge">41</span>
                    <a href="">俄罗斯队金牌</a>
                </li>
            </ul>
    </div>

6.分页
几乎所有的列表页面都需要分页, Bootstrap提供了一个较为美观的分页样式,如下图所示:

实现上述效果比较简单,只需给无序列表的ul元素添加pagination类即可

演示代码:
<ul class="pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><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="#">&raquo;</a></li>
</ul>






可以通过添加 .pagination-lg类或.pagination-sm类来获得比标准尺寸更大或更小的分页,例如:

<ul class="pagination  pagination-lg”>..</ul>
<ul class="pagination">..</ul>
<ul class="pagination  pagination-sm”>..</ul>



如果仅仅想使用上一页/下一页的功能怎么办?Bootstrap也内置了该功能,为ul添加.pager类即可,演示代码:

<ul class="pager">  
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>


注意:翻页元素默认居中对齐,如果为列表元素添加.previous和.next类,可以将上一页/下一页按钮设置为两端对齐.演示代码:
<div>
    <ul class="pager">  
        <li class="previous"><a href="#">上一页</a></li>
        <li class="next"><a href="#">下一页</a></li>
    </ul>
</div>


7.标签和Badge

标签一般用于对内容进行标记,例如可以用在京东的订单管理后台,标示订单的状态(”未发货”、”已发货”、”已完成”等)

Bootstrap内置了6种常用的标签类,分别为default(默认)、primary(主要)、success(成功)、info(消息)、warning(警告)、danger(危险操作)

演示代码:

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>


除了标签之外,还有一种提示信息很常用,很多网站都有消息系统来提示用户有未读的新闻、私信等内容,Bootstrap中称之为badge(徽章),如图所示



演示代码:
<button class="btn btn-primary">
        未读信息
        <span class="badge">4</span>
</button>

8.缩略图


有时候需要在网页中布局图像、文本等(例如商品展示),可以使用缩略图

演示代码如下:
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 缩略图</title>
   <link href="../../css/bootstrap/css/bootstrap.css" rel="stylesheet">

</head>
<body>

<div class="row">
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="../../img/cat.png"
         alt="通用的占位符缩略图">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="../../img/cat.png"
         alt="通用的占位符缩略图">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="../../img/cat.png"
         alt="通用的占位符缩略图">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="../../img/cat.png"
         alt="通用的占位符缩略图">
      </a>
   </div>
</div>


  <script src="../../js/jquery/jquery-2.1.4.js"></script>
   <script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>
9.面板
很多时候需要将某些内容放到一个容器里,此时可以使用Bootstrap的面板组件.



可以看到,面板的作用就是加上了容器的边框并设置了内容和容器间的边距,对应最简单面板样式的代码如下:
<div class="panel panel-default">
    <div class="panel-body">基础面板示例</div>
</div>

我们还可以为面板添加header和footer,如下图所示

演示代码如下:

<div class="panel panel-default" style="width:500px;">
    <div class="panel-heading">面板页头</div>
    <div class="panel-body">面板内容省略...</div>
    <div class="panel-footer">面板页脚</div>
</div>

面板代码的配色和之前介绍的标签是一致的,都是对应诸如success、warning、danger等颜色,例如
<div class="panel panel-default"></div>
<div class="panel panel-primary"></div>
<div class="panel panel-success"></div>
<div class="panel panel-info"></div>
<div class="panel panel-warning"></div>
<div class="panel panel-danger"></div>

10.进度条
进度条常用于文件的上传和下载、内容的加载等场景,Bootstrap提供了多种进度条样式供选择.
注意:Bootstrap以及其他前端组件只解决进度条的样式问题,追踪进度扔需依赖服务端程序.

Bootstrap中,一个标准的进度条如下图所示:

最简单的实现代码如下:
<div class="progress" style="width:500px;">
    <div class="progress-bar" style="width:60%;"></div>
</div>

为外层的div元素添加.progress类,为内层的div元素添加.progress-bar类,并控制内层div的宽度百分比,这样就得到一个基础的进度条了.
    进度条的颜色既可以自己根据需要用自定义的颜色进行覆盖,也可以调用Bootstrap内置的类来覆盖.
    为内层的div元素添加. progress-bar-success就可以获得如下图的颜色,其命名规律和Bootstrap的标签类是一致的.



<div class="progress" style="width:500px;">
    <div class="progress-bar progress-bar-success" style="width:60%;"></div>
</div>

我们还可以为进度条添加条纹效果,如下图所示.

实现条纹效果需要为外层的div添加.progress-striped类,演示代码:
<div class="progress progress-bar-striped" style="width:500px;">
    <div class="progress-bar progress-bar-info" style="width:60%;"></div>
</div>


六.Bootstrap中的JavaScript特效
Bootstrap的流行很大程度上得益于它大大降低了页面开发的学习成本,很多时候,JavaScript效果是一些非专业人士或美工出身的站长最头疼的问题,从零开始学习一门真正的编程语言,到能够在实战中实现足够好的效果,这个时间和学习成本是相当高的.而Bootstrap实现了从UI到JavaScript代码的一体化,只要在HTML代码中加入框架约定的触发器,就可以实现大多数的效果.即使用导官方没有提供的效果,开源社区的开发者也往往能提供现成的解决方案.
    下面就来看看Bootstrap提供的几种常用效果吧.

1.模态对话框 
如果想让用户在当前页面完成某种稍显复杂的操作,譬如登录、注册,或者是阅读一段用户说明,模态对话框是一个不错的选择。用户在操作或阅读完毕后可以很方便地返回原页面,免去了页面跳转带来的等待.



点击”开始演示模态框” 按钮后,弹出模态对话框



演示代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>演示分页组件</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>

    </head>

    <body>

        <h2>创建模模态对话框(Modal)</h2>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
        <div class="modalfade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
                        <h4 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h4>
                    </div>
                    <div class="modal-body">
                        模态对话框示例
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
                        <button type="button" class="btn btn-primary">
提交更改
</button>
                    </div>
                </div>
            </div>
        </div>

        <script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
        <script src="../../css/bootstrap/js/bootstrap.js"></script>
    </body>

</html>

根据代码分析,完整的模态对话框功能主要分为两个部分:出发按钮和对话框.出发按钮可以是一个button,也可以是一个链接,只需要加入两个元素:
data-toggle=” modal”触发器
data-target="#myModal",用于和相应的对话框id进行对应.

对话框部分主要分3层.
第一层:<div class=”modal” id=”myModal”></div>,这一层使用class=”modal”设置样式并设置模态对话框的触发类,提供id和触发按钮的data-target属性的值进行对应,还可以添加其他的配置属性.
第二层:<div class=”modal-dialog”></div>,设置一个居中的对话框.
第三层:<div class=”modal-content”></div>,设置具体的内容.

注意:不要在一个模态框上重叠另一个模态框.
开发中,选项参数可以通过data属性或JavaScript进行传递。对于data属性,需要将选项名称放到data-之后,例如data-backdrop=””,具体的参数可以参考官方文档.
2.标签页切换
如果有多个分类的内容,又不想全部直接展现在页面上,使用标签页进行切换是一个不错的选择.如下图所示

演示代码:

<ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#intro" data-toggle="tab">商品介绍</a></li>
        <li><a href="#parameter" data-toggle="tab">规格参数</a></li>
        <li><a href="#qingdan" data-toggle="tab">包装清单</a></li>
        <li><a href="#pingjia" data-toggle="tab">商品评价</a></li>
        <li><a href="#shouhou" data-toggle="tab">售后保障</a></li>
</ul>

<div class="tab-content">
        <div class="tab-pane active" id="intro">我是商品介绍</div>
        <div class="tab-pane" id="parameter">我是规格参数</div>
        <div class="tab-pane" id="qingdan">我是包装清单</div>
        <div class="tab-pane" id="pingjia">我是商品评价</div>
        <div class="tab-pane" id="shouhou">我是售后保障</div>
</div>      

标签页切换由两部分组成:标签页部分和与标签页对应的内容部分.
标签页部分本质是一个列表,为列表的ul/ol属性添加.nav和.nav-tabs类,使其展现为标签页的样式,列表项中的<a>链接需要加上data-toggle=”tab”这个触发器, 并且href的值要和对应内容部分的id进行对应.
    内容部分需要包裹在<div class=”tab-content”></div>内部,保证除了应该显示的内容外,其他是隐藏的.内容的各个单项需要包裹在<div class=”tab-pane”></div>内部,并且要为<div
class=”tab-pane”>标签设置一个id,用于与标签页的href属性的值对应.


3.Tooltip

Tooltip插件的效果是鼠标悬停在目标元素上时,显示额外的提示,如下图所示

演示代码:
<a href="#" id="myTooltip" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a>

其中data-toggle=”tooltip”是插件触发器,title的内容是提示文字,data-placement属性用于指定提示出现的位置。
要使该插件生效,需要在页面底部添加JavaScript代码完成初始化:
<script type="text/javascript">
    $("#myTooltip").tooltip();
</script>
开发者可以为tooltip()函数添加参数,或者在标签内添加”data-参数名”进行配置,比如上面例子中的data-placement=”right”.

4.弹出框
Tooltip采用的是hover进行触发,多用于简单的提示,弹出框则通过点击触发,一般用于显示更多的内容,如下图所示.

应用弹出框插件的代码结构和Tooltip差不多,演示代码如下:

<a href="javascript:void(0);" id="myPopover" class="btn btn-lg btn-danger" data-toggle="popover" data-content="采用了点击事件触发,相比Tooltip可以显示更多、更正式的内容,并且可以配置更多样式." data-original-title="弹出框的应用">点击了解更多</a>

需要添加data-toggle=”popover”触发器进行插法,主要有两个配置项: data-content配置弹出框内容,data-original-title配置弹出框的标题.
    弹出框对Tooltip存在依赖,因此插件中必须包含有Tooltip.和Tooltip一样,也需要添加初始化JavaScript代码:
<script type="text/javascript">
    $("#myPopover").popover();
</script>
和Tooltip一样,可以为popover()函数添加参数,或者在标签内添加”data-参数名”进行配置,比如上面Tooltip例子中的data-placement=”right”

5.提示信息

一般来说,任务执行成功或失败后,用户需要得到一个提示信息,这个信息可以出现在页面跳转后的新页面,也可以是Ajax执行成功后的回调。但它们都有一个共同的特点,需要在阅读完毕后消失.Bootstrap内置了警告框插件,使用户可以单击关闭按钮关掉提示信息。


演示代码如下:
<div id="my-alert" class="alert alert-danger fade in" style="width:400px;">
    警告,服务器挂了!
    <a href="#" class="close" data-dismiss="alert">X</a>
</div>
构造提示信息需要两个部分:提示信息和关闭信息按钮。提示信息这里使用了Bootstrap内置的alert类,关闭按钮则是在和提示信息文字并列的位置构造一个链接,为该链接添加data-dismiss=”alert”这个触发器来触发关闭事件.

Bootstrap为警告框的关闭动作暴露了事件,允许进行监听,可以再编写关闭警告框后执行的动作.
Close.bs.alert: 当close函数被调用之后,此事件被立即触发.
Closed.bs.alert: 当警告框被关闭之后(CSS过渡效果执行完毕),此事件被触发,演示代码如下:

<script type="text/javascript">
    $("#my-alert").bind('closed.bs.alert',function(){
        alert('关闭了!');
    })
</script>

8.幻灯片
Bootstrap集成了一个幻灯片组件,可以完成图片或内容的切换和自动播放。


幻灯片结构由3部分组成:控制器、内容部分、标识符.控制器负责控制幻灯的翻页,标识符告诉我们页码,内容部分负责展现内容。具体的代码如下:

演示代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>演示幻灯片组件</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>


    </head>

    <body>

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:730px;">
            <!--标识符:告诉我们页码-->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- 幻灯片内容 -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="../../img/1.jpg">

                </div>

                <div class="item">
                    <img src="../../img/2.jpg">

                </div>

                <div class="item">
                    <img src="../../img/3.jpg">

                </div>
            </div>

            <!-- 控制器: 负责上一页/下一页 -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>

            <script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
            <script src="../../css/bootstrap/js/bootstrap.js"></script>

    </body>

</html>

首先,所有内容都需要包裹在<div class=”carousel slide”>..</div>内部,如果需要开启轮播,则需要加入data-ride=”carousel”触发器.

标识符部分是一个列表,需要为ol/ul添加class="carousel-indicators"类.
内容部分需要整体包裹在<div class="carousel-inner”>..</div>内部,每一页的内容需要包裹在<div class="item"></div>内部.
控制器部分实际就是一个<a>链接,需要为这个链接加上carousel-control类,并添加一个.left或.right类指明向前翻页还是向后翻页.翻页的图标可以使用Bootstrap内置的图标:
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

也可以自定义图标样式.

注意:Bootstrap的幻灯片插件是基于CSS3实现的动画效果,但是IE9及IE9以下的浏览器不支持这些必要的CSS属性,因此在IE下回丢失过渡动画效果.

和其他插件的参数配置一样,可以通过data属性或JavaScript传递选项参数,对于data属性,将选项名称放到data-之后,例如data-interval=”3000”来调整轮播的时间。

这里写图片描述

相关文章推荐

bootstrap前端框架

  • 2015年06月29日 09:18
  • 2.27MB
  • 下载

BootStrap之H-ui前端框架篇

H-ui:实则为BootStrap的中文翻译版                地址:http://www.h-ui.net/...

bootstrap前端框架

  • 2017年09月22日 09:04
  • 3.86MB
  • 下载

前端框架之bootstrap主要部件

转自immoc,便于前端框架bootstrap开发

类似Bootstrap热门前端框架大集合

Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我...

H+ 前端框架最新版本 bootstrap

  • 2017年11月01日 10:33
  • 4.17MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:BootStrap前端框架
举报原因:
原因补充:

(最多只允许输入30个字)