Terry.Li-彬

虚其心,可解天下之问;专其心,可治天下之学;静其心,可悟天下之理;恒其心,可成天下之业。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  143 随笔 :: 344 文章 :: 130 评论 :: 0 Trackbacks

回顾: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 >< href ="#" > Action </ a ></ li >
            
< li >< href ="#" > Another action </ a ></ li >
            
< li >< href ="#" > Something else here </ a ></ li >
            
< li  class ="divider" ></ li >
            
< li >< 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 >< href ="#" > Action </ a ></ li >
            
< li >< href ="#" > Another action </ a ></ li >
            
< li >< href ="#" > Something else here </ a ></ li >
            
< li  class ="divider" ></ li >
            
< li >< 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 >< href ="#" > Action </ a ></ li >
            
< li >< href ="#" > Another action </ a ></ li >
            
< li >< href ="#" > Something else here </ a ></ li >
            
< li  class ="divider" ></ li >
            
< li >< 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 >< href ="#" > Action </ a ></ li >
            
< li >< href ="#" > Another action </ a ></ li >
            
< li >< href ="#" > Something else here </ a ></ li >
            
< li  class ="divider" ></ li >
            
< li >< 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 >< href ="#" > Action </ a ></ li >
            
< li >< href ="#" > Another action </ a ></ li >
            
< li >< href ="#" > Something else here </ a ></ li >
            
< li  class ="divider" ></ li >
            
< li >< 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 >< href ="#" > Action </ a ></ li >
            
< li >< href ="#" > Another action </ a ></ li >
            
< li >< href ="#" > Something else here </ a ></ li >
            
< li  class ="divider" ></ li >
            
< li >< 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 >< href ="#" > Action </ a ></ li >
            
< li >< href ="#" > Another action </ a ></ li >
            
< li >< href ="#" > Something else here </ a ></ li >
            
< li  class ="divider" ></ li >
            
< li >< 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" >< href ="#" > Home </ a ></ li >
        
< li >< href ="#" > Profile </ a ></ li >
        
< li >< href ="#" > Messages </ a ></ li >
      
</ ul >
        
</ div >
 
< div  class ="span5 well pricehover" >
  
< h3 > 基础pills </ h3 >
      
< ul  class ="nav nav-pills" >
        
< li  class ="active" >< href ="#" > Home </ a ></ li >
        
< li >< href ="#" > Profile </ a ></ li >
        
< li >< 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" >< href ="#" > Home </ a ></ li >
        
< li >< href ="#" > Profile </ a ></ li >
        
< li >< href ="#" > Messages </ a ></ li >
      
</ ul >
        
</ div >
        
      
              
< div  class ="span5 well pricehover" >
      
< h3 > 竖排pills </ h3 >
      
< ul  class ="nav nav-pills nav-stacked" >
        
< li  class ="active" >< href ="#" > Home </ a ></ li >
        
< li >< href ="#" > Profile </ a ></ li >
        
< li >< 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" >< href ="#" > Home </ a ></ li >
          
< li >< href ="#" > Library </ a ></ li >
          
< li >< href ="#" > Applications </ a ></ li >
          
< li  class ="nav-header" > Another list header </ li >
          
< li >< href ="#" > Profile </ a ></ li >
          
< li >< href ="#" > Settings </ a ></ li >
          
< li  class ="divider" ></ li >
          
< li >< 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" >< href ="#" >< class ="icon-white icon-home" ></ i >  Home </ a ></ li >
          
< li >< href ="#" >< class ="icon-book" ></ i >  Library </ a ></ li >
          
< li >< href ="#" >< class ="icon-pencil" ></ i >  Applications </ a ></ li >
          
< li  class ="nav-header" > Another list header </ li >
          
< li >< href ="#" >< class ="icon-user" ></ i >  Profile </ a ></ li >
          
< li >< href ="#" >< class ="icon-cog" ></ i >  Settings </ a ></ li >
          
< li  class ="divider" ></ li >
          
< li >< href ="#" >< 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" >< href ="#" > Home </ a ></ li >
        
< li >< href ="#" > Help </ a ></ li >
        
< li  class ="dropdown" >
          
< class ="dropdown-toggle"  data-toggle ="dropdown"  href ="#" > Dropdown  < class ="caret" ></ b ></ a >
          
< ul  class ="dropdown-menu" >
            
< li >< href ="#" > Action </ a ></ li >
            
< li >< href ="#" > Another action </ a ></ li >
            
< li >< href ="#" > Something else here </ a ></ li >
            
< li  class ="divider" ></ li >
            
< li >< 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" >< href ="#" > Home </ a ></ li >
        
< li >< href ="#" > Help </ a ></ li >
        
< li  class ="dropdown" >
          
< class ="dropdown-toggle"  data-toggle ="dropdown"  href ="#" > Dropdown  < class ="caret" ></ b ></ a >
          
< ul  class ="dropdown-menu" >
            
< li >< href ="#" > Action </ a ></ li >
            
< li >< href ="#" > Another action </ a ></ li >
            
< li >< href ="#" > Something else here </ a ></ li >
            
< li  class ="divider" ></ li >
            
< li >< 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" >
        
< 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 >
        
< class ="brand"  href ="#" > Project name </ a >
        
< div  class ="nav-collapse" >
          
< ul  class ="nav" >
            
< li  class ="active" >< href ="#" > Home </ a ></ li >
            
< li >< href ="#" > Link </ a ></ li >
            
< li >< href ="#" > Link </ a ></ li >
            
< li >< href ="#" > Link </ a ></ li >
            
< li  class ="dropdown" >
              
< href ="#"  class ="dropdown-toggle"  data-toggle ="dropdown" > Dropdown  < class ="caret" ></ b ></ a >
              
< ul  class ="dropdown-menu" >
                
< li >< href ="#" > Action </ a ></ li >
                
< li >< href ="#" > Another action </ a ></ li >
                
< li >< href ="#" > Something else here </ a ></ li >
                
< li  class ="divider" ></ li >
                
< li  class ="nav-header" > Nav header </ li >
                
< li >< href ="#" > Separated link </ a ></ li >
                
< li >< 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 >< href ="#" > Link </ a ></ li >
            
< li  class ="divider-vertical" ></ li >
            
< li  class ="dropdown" >
              
< href ="#"  class ="dropdown-toggle"  data-toggle ="dropdown" > Dropdown  < class ="caret" ></ b ></ a >
              
< ul  class ="dropdown-menu" >
                
< li >< href ="#" > Action </ a ></ li >
                
< li >< href ="#" > Another action </ a ></ li >
                
< li >< href ="#" > Something else here </ a ></ li >
                
< li  class ="divider" ></ li >
                
< li >< 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 >< href ="#" > Home </ a >   < span  class ="divider" > / </ span ></ li >
        
< li  class ="active" > Library </ li >
      
</ ul >
      
< ul  class ="breadcrumb" >
        
< li >< href ="#" > Home </ a >   < span  class ="divider" > / </ span ></ li >
        
< li >< 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" >< href ="#" > &laquo; </ a ></ li >
          
< li  class ="active" >< href ="#" > 1 </ a ></ li >
          
< li >< href ="#" > 2 </ a ></ li >
          
< li >< href ="#" > 3 </ a ></ li >
          
< li >< href ="#" > 4 </ a ></ li >
          
< li >< href ="#" > &raquo; </ a ></ li >
        
</ ul >
      
</ div >
      
< div  class ="pagination" >
        
< ul >
          
< li >< href ="#" > &laquo; </ a ></ li >
          
< li >< href ="#" > 10 </ a ></ li >
          
< li  class ="active" >< href ="#" > 11 </ a ></ li >
          
< li >< href ="#" > 12 </ a ></ li >
          
< li >< href ="#" > &raquo; </ a ></ li >
        
</ ul >
      
</ div >
      
< div  class ="pagination" >
        
< ul >
          
< li >< href ="#" > &laquo; </ a ></ li >
          
< li  class ="active" >< href ="#" > 10 </ a ></ li >
          
< li  class ="disabled" >< href ="#" > </ a ></ li >
          
< li >< href ="#" > 20 </ a ></ li >
          
< li >< href ="#" > &raquo; </ a ></ li >
        
</ ul >
      
</ div >
      
< div  class ="pagination pagination-centered" >
        
< ul >
          
< li  class ="active" >< href ="#" > 1 </ a ></ li >
          
< li >< href ="#" > 2 </ a ></ li >
          
< li >< href ="#" > 3 </ a ></ li >
          
< li >< href ="#" > 4 </ a ></ li >
          
< li >< href ="#" > 5 </ a ></ li >
        
</ ul >
      
</ div >
      
</ div >

     
 
< div  class ="span5 well pricehover" >
      
< ul  class ="pager" >
        
< li >< href ="#" > Previous </ a ></ li >
        
< li >< href ="#" > Next </ a ></ li >
      
</ ul >
      
< ul  class ="pager" >
        
< li  class ="previous" >< href ="#" > &larr;  Older </ a ></ li >
        
< li  class ="next" >< 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" >
          
< href ="#"  class ="thumbnail" >
            
< img  src ="http://placehold.it/360x268"  alt ="" >
          
</ a >
        
</ li >
        
< li  class ="span2" >
          
< href ="#"  class ="thumbnail" >
            
< img  src ="http://placehold.it/160x120"  alt ="" >
          
</ a >
        
</ li >
        
< li  class ="span2" >
          
< href ="#"  class ="thumbnail" >
            
< img  src ="http://placehold.it/160x120"  alt ="" >
          
</ a >
        
</ li >
        
< li  class ="span2" >
          
< href ="#"  class ="thumbnail" >
            
< img  src ="http://placehold.it/160x120"  alt ="" >
          
</ a >
        
</ li >
        
< li  class ="span2" >
          
< href ="#"  class ="thumbnail" >
            
< img  src ="http://placehold.it/160x120"  alt ="" >
          
</ a >
        
</ li >
        
< li  class ="span2" >
          
< href ="#"  class ="thumbnail" >
            
< img  src ="http://placehold.it/160x120"  alt ="" >
          
</ a >
        
</ li >
      
</ ul >
< div  class ="span6 " >
                       
< h2 > 默认缩略图 </ h2 >
      
< ul  class ="thumbnails" >
        
< li  class ="span3" >
          
< href ="#"  class ="thumbnail" >
            
< img  src ="http://placehold.it/260x180"  alt ="" >
          
</ a >
        
</ li >
        
< li  class ="span3" >
          
< 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 >< href ="#"  class ="btn btn-primary" > Action </ 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 >< href ="#"  class ="btn btn-primary" > Action </ 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 ="width: 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 ="width: 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 ="width: 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 >

 参考文献与延伸阅读:

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

posted on 2013-01-31 10:16 礼物 阅读(6205) 评论(2)  编辑  收藏 所属分类: BootStrap

评论

# re: BootStrap入门教程 (三) 2014-07-30 12:23 zuidaima
bootstrap代码下载:http://zuidaima.com/share/search.htm?key=bootstrap  回复  更多评论
  

# re: BootStrap入门教程 (三) 2014-09-19 22:16 zuidaima
springmvc bootstrap整合demo教程源代码下载:http://zuidaima.com/share/kspringmvc-p1-s1.htm  回复  更多评论