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 > 
         < 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 > 
         < 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 > 
       </ 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 > 
         < 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 > 
         < 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 > 
         < 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 > 
       </ div >

同时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 > 
       </ div >
     </ div > 
   </ div > 
         </ 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 ="#" > « </ 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 ="#" > » </ a ></ li >
         </ ul >
       </ div >
       < div class ="pagination" >
         < ul >
           < li >< a href ="#" > « </ 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 ="#" > » </ a ></ li >
         </ ul >
       </ div >
       < div class ="pagination" >
         < ul >
           < li >< a href ="#" > « </ 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 ="#" > » </ 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 ="#" > ← Older </ a ></ li >
         < li class ="next" >< a href ="#" > Newer → </ 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 > < span class="label" > Default < /span > </ code >
         </ td >
       </ tr >
       < tr >
         < td >
           < span class ="label label-success" > Success </ span >
         </ td >
         < td >
           < code > < span class="label label-success" > Success < /span > </ code >
         </ td >
       </ tr >
       < tr >
         < td >
           < span class ="label label-warning" > Warning </ span >
         </ td >
         < td >
           < code > < span class="label label-warning" > Warning < /span > </ code >
         </ td >
       </ tr >
       < tr >
         < td >
           < span class ="label label-important" > Important </ span >
         </ td >
         < td >
           < code > < span class="label label-important" > Important < /span > </ code >
         </ td >
       </ tr >
       < tr >
         < td >
           < span class ="label label-info" > Info </ span >
         </ td >
         < td >
           < code > < span class="label label-info" > Info < /span > </ code >
         </ td >
       </ tr >
       < tr >
         < td >
           < span class ="label label-inverse" > Inverse </ span >
         </ td >
         < td >
           < code > < span class="label label-inverse" > Inverse < /span > </ 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 > < span class="badge" > 1 < /span > </ code >
             </ td >
           </ tr >
           < tr >
             < td >
              Success
             </ td >
             < td >
               < span class ="badge badge-success" > 2 </ span >
             </ td >
             < td >
               < code > < span class="badge badge-success" > 2 < /span > </ code >
             </ td >
           </ tr >
           < tr >
             < td >
              Warning
             </ td >
             < td >
               < span class ="badge badge-warning" > 4 </ span >
             </ td >
             < td >
               < code > < span class="badge badge-warning" > 4 < /span > </ code >
             </ td >
           </ tr >
           < tr >
             < td >
              Important
             </ td >
             < td >
               < span class ="badge badge-important" > 6 </ span >
             </ td >
             < td >
               < code > < span class="badge badge-important" > 6 < /span > </ code >
             </ td >
           </ tr >
           < tr >
             < td >
              Info
             </ td >
             < td >
               < span class ="badge badge-info" > 8 </ span >
             </ td >
             < td >
               < code > < span class="badge badge-info" > 8 < /span > </ code >
             </ td >
           </ tr >
           < tr >
             < td >
              Inverse
             </ td >
             < td >
               < span class ="badge badge-inverse" > 10 </ span >
             </ td >
             < td >
               < code > < span class="badge badge-inverse" > 10 < /span > </ 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" > × </ 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" > × </ 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" > × </ 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;" > × </ button ></ p >
</ div >

参考文献与延伸阅读：

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

posted on 2013-01-31 10:16 礼物阅读(6239) 评论(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 回复更多评论

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问
相关文章: BootStrap入门教程 (四) BootStrap入门教程 (三) BootStrap入门教程 (二) BootStrap入门教程 (一)

Terry.Li-彬

常用链接

留言簿(19)

随笔分类(107)

随笔档案(141)

文章分类(284)

文章档案(342)

相册

收藏夹(58)

家装

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

1. 按钮(Button)

1.1 按钮组(button group)

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

2.导航(Navigation)

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

2.2 导航条(Navbar)

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

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

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

3.2 排版(Typographic)

3.3 缩略图(Thumbnails)

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

4.1 提醒区域(Alerts)

4.3 杂项(Miscellaneous)

评论