• (转帖)BootStrap入门教程 (三)


     

         上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求。

          Bootstrap作为完整的前端工具集,内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels),徽章(Badges),排版(Typography),缩略图( thumbnails),提醒(Alert),进度条(progress bar),杂项(Miscellaneous)。本讲将深入讲解这些内容。

       1. 按钮(Button)                                                                                                                

           上讲最后提及到button的多种简单样式,然而在bootstrap中可以通过组合button,从而获得更多类似于工具条的功能,组件中的按钮可以组合成按钮组(button group)和按钮式下拉菜单(button drown menu).

    (下一讲的Javascript Plugin会提及到更多的按钮的应用).

          1.1 按钮组(button group)

             按钮组顾名思义是将多个按钮集合成一个页面部件。只需要使用btn-group类和一系列的<a>或者<button>标签,就可以轻易地生成一个按钮组或者按钮工具条。关于btn-group的编程实践上:

    • 建议在单一的按钮组中不要混合使用<a>和<button>标签,只用它们其中一个。
    • 同一按钮组最好使用单一色
    • 使用图标的时候要确保正确的引用位置

            按钮组和按钮工具条都非常容易实现,如图3-1所示:

    图3-1 按钮组(button group)

            1.2 按钮式下拉菜单(button drown menu)

             Bootstrap允许使用任意的按钮标签来触发一个下拉菜单,只需要将正确的菜单内容并置于在.btn-group类标签内。如图3-2所示:

    图3-2 按钮下拉菜单

            以上两种按钮组件,代码片段如下:

    复制代码
      <div class="span4 well pricehover">
                           <h2>按钮组</h2>
          <div class="btn-group" style="margin: 9px 0;">
              <button class="btn btn-large btn-primary">Left</button>
              <button class="btn btn-large  btn-primary">Middle</button>
              <button class="btn   btn-large btn-primary">Right</button>
            </div>
    
            </div>
     <div class="span4 well pricehover">
    <h2>按钮工具条</h2>
        <div class="btn-toolbar">
            <div class="btn-group">
              <button class="btn">1</button>
              <button class="btn">2</button>
              <button class="btn">3</button>
              <button class="btn">4</button>
            </div>
            <div class="btn-group">
              <button class="btn">5</button>
              <button class="btn">6</button>
              <button class="btn">7</button>
            </div>
            <div class="btn-group">
              <button class="btn">8</button>
            </div>
          </div>
            </div>
    
    <div class="span8 well pricehover">
    
          <h3>按钮下拉菜单</h3>
          <p></p>
          <div class="btn-toolbar" >
            <div class="btn-group">
              <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
              <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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div><!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
              <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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div><!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
              <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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div><!-- /btn-group -->
          </div>
          <div class="btn-toolbar">
            <div class="btn-group">
              <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
              <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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div><!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
              <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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div><!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
              <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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div><!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
              <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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div><!-- /btn-group -->
          </div><!-- /btn-toolbar -->
        
    复制代码

       同时bootstrap还有分隔符的下拉菜单和上拉菜单按钮,可以参考文档。

          2.导航(Navigation)                                                                                                        

          2.1 轻量导航(Nav,tabs,and pills)

             bootstrap的导航非常多样和灵活,允许使用同样的标签,不同的CSS类,带来不同风格的导航条,具有非常高的可定制性。所有的导航组件,包括tabs,pills,lists标签,都必须使用.nav的类实现基础的导航标签。除了我们常见的导航,还可以利用.nav-stacked类来实现堆叠式(stacked)--竖式的导航条。

              如图3-3所示,展示了多种基础风格的导航。

      图3-3 多种基础风格导航

            代码片段如下:

    复制代码
    <div class="row">
    
         
            <div class="span5 well pricehover">
                           <h2>基础tabs</h2>
          <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
          </ul>
            </div>
     <div class="span5 well pricehover">
      <h3>基础pills</h3>
          <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
          </ul>
            </div>
        
          </div>
           
    
    
          <div class="row">
            <div class="span5 well pricehover">
          <h3>竖排tabs</h3>
          <ul class="nav nav-tabs nav-stacked">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
          </ul>
            </div>
            
          
                  <div class="span5 well pricehover">
          <h3>竖排pills</h3>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
          </ul>
            </div>
    
          </div>
    复制代码

           下拉菜单的导航条和列表式(Nav list)的导航条都是页面常用要素,Nav list 类似于OSX的Finder,可以带有图标。它们同样可以用.nav 作为基础类,来实现这些组件。同时还有各种tab风格的导航条,在下讲再补充。如图3-4所示:

    图3-4 列表与下拉导航

              代码依然简单,片段如下:

    复制代码
      <div class="span5 well pricehover">
                           <h2>基础Nav List</h2>
          <ul class="nav nav-list">
              <li class="nav-header">List header</li>
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Library</a></li>
              <li><a href="#">Applications</a></li>
              <li class="nav-header">Another list header</li>
              <li><a href="#">Profile</a></li>
              <li><a href="#">Settings</a></li>
              <li class="divider"></li>
              <li><a href="#">Help</a></li>
            </ul>
            </div>
            
     <div class="span5 well pricehover">
      <h3>图标List</h3>
      
        <ul class="nav nav-list">
              <li class="nav-header">List header</li>
              <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
              <li><a href="#"><i class="icon-book"></i> Library</a></li>
              <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
              <li class="nav-header">Another list header</li>
              <li><a href="#"><i class="icon-user"></i> Profile</a></li>
              <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
              <li class="divider"></li>
              <li><a href="#"><i class="icon-flag"></i> Help</a></li>
            </ul>
          
            </div>
        
          </div>
           
    
    
          <div class="row">
            <div class="span5 well pricehover">
          <h3>pills式的下拉菜单</h3>
          <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Help</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
            </div>
            
          
                  <div class="span5 well pricehover">
          <h3>tab式的下拉菜单</h3>
         <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Help</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
            </div>
    复制代码

      

       2.2 导航条(Navbar)

             最最重要的页面要素,莫过于页面头部的导航条,这是几乎任何页面都会使用到的。Bootstrap提供的基础样式的导航条,是目前互联网的流行的“硬又黑”,当然你可以用Less来定制它。我们要注意到导航条的基础类不再是.nav而是navbar。

    ,至于顶部或者底部,用navbar-fixed-top与navbar-fixed-bottom来置顶/底.同时可以在navbar中使用form要素,比如.navbar-form。同时支持响应式操作,通过.nav-collapse或者直接是.collapse类实现。如图3-5所示:

    图3-5 导航条

                代码片段如下:

    复制代码
       <div class="span10 well pricehover">
         <div class="navbar">
        <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Project name</a>
            <div class="nav-collapse">
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 class="divider"></li>
                    <li class="nav-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-search pull-left" action="">
                <input type="text" class="search-query span2" placeholder="Search">
              </form>
              <ul class="nav pull-right">
                <li><a href="#">Link</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.nav-collapse -->
          </div>
        </div><!-- /navbar-inner -->
      </div><!-- /navbar -->
            </div>
    复制代码

        2.3 面包屑导航(Breadcrumbs)与页码(Pagination)

    • 面包屑导航(BreadCrumbs)导航用作显示用户在网站或者App的位置,关于Breadcrumbs 面包屑导航的优点与对SEO的作用,请参考这个页面。Bootstrap的“面包”用在代码仓库式的页面很优雅,具体实现如图3-6所示:

    图3-6 面包屑导航(BreadCrumbs)

     

      

    • 页码(Pagination)也是非常常用的页面要素,Bootstrap提供两种风格的翻页组件。 一个是多页面导航,用于多个页码的跳转,它具有极简主义风格的翻页提示,能够很好应用在结果搜索页面;另一种则是Pager,是轻量级组件,可以快速翻动上下页,适用于个人博客或者杂志。如图3-7所示:

      图3-7 页码(Pagination)

            以上两种导航,代码片段如下:

    复制代码
            <div class="span10 well pricehover">
        <ul class="breadcrumb">
            <li class="active">Home</li>
          </ul>
          <ul class="breadcrumb">
            <li><a href="#">Home</a> <span class="divider">/</span></li>
            <li class="active">Library</li>
          </ul>
          <ul class="breadcrumb">
            <li><a href="#">Home</a> <span class="divider">/</span></li>
            <li><a href="#">Library</a> <span class="divider">/</span></li>
            <li class="active">Data</li>
          </ul>
            </div>
            
     <div class="span5 well pricehover">
    <div class="pagination">
            <ul>
              <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="#">&raquo;</a></li>
            </ul>
          </div>
          <div class="pagination">
            <ul>
              <li><a href="#">&laquo;</a></li>
              <li><a href="#">10</a></li>
              <li class="active"><a href="#">11</a></li>
              <li><a href="#">12</a></li>
              <li><a href="#">&raquo;</a></li>
            </ul>
          </div>
          <div class="pagination">
            <ul>
              <li><a href="#">&laquo;</a></li>
              <li class="active"><a href="#">10</a></li>
              <li class="disabled"><a href="#">...</a></li>
              <li><a href="#">20</a></li>
              <li><a href="#">&raquo;</a></li>
            </ul>
          </div>
          <div class="pagination pagination-centered">
            <ul>
              <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>
            </ul>
          </div>
          </div>
    
         
     <div class="span5 well pricehover">
          
    <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
          </ul>
          <ul class="pager">
            <li class="previous"><a href="#">&larr; Older</a></li>
            <li class="next"><a href="#">Newer &rarr;</a></li>
          </ul>
        </div>
        </div>
    复制代码

         3.标签(Label)、徽章(Badges)、排版(Typographic)与缩略图(Thumbnails)                         

          3.1 标签(Label)与徽章(Badges)

          标签是一个很好用的页面小要素,bootstrap具有多种颜色标签,表达不同的页面信息。只需要简单使用label标签即可。徽章是细小而简单的组件,用于指示或者计算某种类别的要素,在在email客户端很常见,实际上在一些签到式的网站(LBS)上也常常用到。如图3-8所示:

    图3-8 标签(Label)与徽章(Badges)

            代码片段如下:

    复制代码
        <div class="span5 well pricehover">
        <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Labels</th>
            <th>Markup</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <span class="label">Default</span>
            </td>
            <td>
              <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              <span class="label label-success">Success</span>
            </td>
            <td>
              <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              <span class="label label-warning">Warning</span>
            </td>
            <td>
              <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              <span class="label label-important">Important</span>
            </td>
            <td>
              <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              <span class="label label-info">Info</span>
            </td>
            <td>
              <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              <span class="label label-inverse">Inverse</span>
            </td>
            <td>
              <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
            </td>
          </tr>
        </tbody>
      </table>
            </div>
            
     <div class="span5 well pricehover">
     <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Name</th>
                <th>Example</th>
                <th>Markup</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  Default
                </td>
                <td>
                  <span class="badge">1</span>
                </td>
                <td>
                  <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  Success
                </td>
                <td>
                  <span class="badge badge-success">2</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  Warning
                </td>
                <td>
                  <span class="badge badge-warning">4</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  Important
                </td>
                <td>
                  <span class="badge badge-important">6</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  Info
                </td>
                <td>
                  <span class="badge badge-info">8</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  Inverse
                </td>
                <td>
                  <span class="badge badge-inverse">10</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
                </td>
              </tr>
            </tbody>
          </table>
          </div>
    复制代码

       

          3.2 排版(Typographic)

           我们在第一讲就提及到排版(Typographic),这里主要是涉及到两个排版组件:Hero-unit,Page-header.Hero-unit是一个轻量级的可扩展的组件,主要用于市场推广网站显示它们大量的要素。而Page-header则是简单为页面段落的头部设置一个合适的空间和排版形式。如图3-9所示:

    图3-9 排版(Typographic)

          代码片段如下:

    复制代码
    <div class="container-fliud">
    
       
    
          
    
          <div class="row-fliud">
    
         
            <div class="span5 pricehover hero-unit">
        
            <h1>Hello, world!</h1>
            <p>简单的hero unit.</p>
           
          </div>
    
            </div>
            <div class="row-fliud">
     <div class="span5well pricehover">
     <div class="page-header">
            <h1>  page header 例子   <small>Subtext for header</small></h1>    
          </div>
          半小时左右,每25分钟集中精力工作,然后休息5分钟。哪怕工作没有
          完成,也要定时休息,然后再进入下一个番茄时间。 
      
          </div>
    </div>
    复制代码

        

        3.3 缩略图(Thumbnails)

           缩略图,可以作为图片,视频,文字的格网结构展示。实现默认形式的bootstrap缩略图,只需要简单的thumbnails标签。Thumbnails多应用于图片、视屏的搜索结果等页面,还可以链接到其他页面。同样的它具有很好的可定制性,可以将文章片段,按钮等标签融入缩略图,同时可以混合与匹配不同大小的缩略图。如图3-10,3-11所示:

    图3-10 缩略图1(thumbnails)

            

    图3-11 缩略图2(thumbnails)

              代码片段如下:

    复制代码
    <div class="span6">
                           <h2>环绕式缩略图</h2>
          <ul class="thumbnails">
            <li class="span4">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/360x268" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/160x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/160x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/160x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/160x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/160x120" alt="">
              </a>
            </li>
          </ul>
    <div class="span6 ">
                           <h2>默认缩略图</h2>
          <ul class="thumbnails">
            <li class="span3">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </a>
            </li>
            <li class="span3">
              <a href="#" class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </a>
            </li>
          
          </ul>
            </div>
            
     <div class="span6 ">
    <h2>可定制</h2>
       <ul class="thumbnails">
            <li class="span3">
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
                <div class="caption">
                  <h5>Thumbnail label</h5>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
              </div>
            </li>
            <li class="span3">
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
                <div class="caption">
                  <h5>Thumbnail label</h5>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
              </div>
            </li>
          </ul>
            </div>
            
    复制代码

     

          4.提醒区域(Alerts),进度条(Progressing Bar),杂项(Miscellaneous)                                            

            4.1提醒区域(Alerts)

               在Bootstrap 2中重写了提醒区域的基础类,使用.alert简化了原有的.alert-message 类。为了使得组件更为简洁与耐用,Bootstrap去除了不同的alert block的外观,内容具有更多padding边距和可以显示更多文字。如图3-12所示:

    图3-12  提醒区域(Alert)

               代码片段如下:

    复制代码
      <div class="span3 well pricehover">
                            <h3>alert例子</h3>
          <div class="alert">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>测试</strong>这是alert info提醒区域.
            </div>
            </div>
     
    
    <div class="span4 well pricehover">
              <h3>alert例子</h3>
          <div class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>测试</strong>这是alert error提醒区域.
            </div>
            </div>
    
    <div class="span3 well pricehover">
              <h3>alert例子</h3>
          <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>测试</strong>这是alert success提醒区域.
            </div>
            </div>
    复制代码

         4.2 进度条(Processing Bar)

            进度条,这也是不可缺少的页面要素,在重定向,载入等页面都经常用到,Bootstrap提供多种漂亮、简单、多种颜色的进度条。不过其中条纹和动画效果的进度条不支持IE浏览器,原因是进度条使用了CSS3的渐变(gradients)、透明度(transitions)、动画效果(animations)来实现它们的效果。IE7-9和旧版的Firefox都不支持这些特性,所以在实现进度条的时候请注意浏览器支持程度。如图3-13所示,

    图3-13 进度条(Processing Bar)

               代码片段如下:

    复制代码
            <div class="span3 well pricehover">
                         <h3>基础</h3>
          <p>默认的进度条 </p>
          <div class="progress">
            <div class="bar" style=" 60%;"></div>
          </div>
            </div>
            
     <div class="span3 well pricehover">
           <h3>动画效果</h3>
          <p>带有条纹的动画效果进度条 (no IE).</p>
          <div class="progress progress-striped active">
            <div class="bar" style=" 45%">
            </div>
    </div>
    </div>
    <div class="span4 well pricehover">
             <h3>Striped</h3>
          <p>使用透明度来生成条纹效果 (no IE).</p>
          <div class="progress progress-striped">
            <div class="bar" style=" 20%;"></div>
            </div>
    
    
            </div>
    复制代码

           

           4.3 杂项(Miscellaneous)

                  Bootstrap的杂项包括两个轻量级的组件,一个是well,用于表达插入效果。另一个是关闭图标,可以用于提醒区域,模式窗口(Modal)的关闭。Modal将会在下讲的javascript pluging中讲解到。如图3-14所示:

    图3-14 杂项(Miscellaneous)

             代码如下:

    复制代码
      <div class="span4  pricehover">
                          <h2>Wells</h2>
          <p>使用Well来显示插入效果</p>
          <div class="well">
            看!我是Well!
          </div>
            </div>
            
     <div class="span3 well pricehover">
          <h2>关闭图标</h2>
          <p>用于提醒区域,模式窗口(Modal)的关闭.</p>
          <p><button class="close" style="float: none;">&times;</button></p>
    </div>
    复制代码

    Bootstrap 教程(四)  :  http://www.cnblogs.com/ventlam/archive/2012/06/17/2536728.html

    参考文献与延伸阅读:

              1.CSS3 Tutorials http://www.w3schools.com/css3/default.asp

     

  • 相关阅读:
    一个体验好的Windows 任务栏缩略图开发心得
    扫脸动画
    ShimmerTextView
    201512-2 消除类游戏 (水题,暴力)
    CCF 201512-1 数位之和 (水题)
    UVa 557 Burger (概率+递推)
    CCF 201604-2 俄罗斯方块 (模拟)
    CCF 201604-1 折点计数 (水题,暴力)
    UVa 10213 How Many Pieces of Land ? (计算几何+大数)
    UVa 1641 ASCII Area (计算几何,水题)
  • 原文地址:https://www.cnblogs.com/lonelywolfmoutain/p/4166324.html
Copyright © 2020-2023  润新知