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>按钮组</>
      ="btn-group" style="margin: 9px 0;">
          button ="btn btn-large btn-primary">Leftbutton="btn btn-large  btn-primary">Middle="btn   btn-large btn-primary">Right>
        div>

        >
 >
>按钮工具条>
    ="btn-toolbar"="btn-group"="btn">1>2>3>4>5>6>7>8>

="span8 well pricehover">

      h3>按钮下拉菜单p></="btn-toolbar" ="btn dropdown-toggle" data-toggle="dropdown">Action span ="caret"spanul ="dropdown-menu">
            li><a href="#">Actiona>Another action>Something else hereli ="divider">Separated linkul><!-- /btn-group -->
        ="btn btn-primary dropdown-toggle"="btn btn-danger dropdown-toggle">Danger -->
      ="btn btn-warning dropdown-toggle">Warning ="btn btn-success dropdown-toggle">Success ="btn btn-info dropdown-toggle">Info ="btn btn-inverse dropdown-toggle">Inverse  /btn-toolbar -->
    

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

??? ? 2.导航(Navigation) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

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

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

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

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

? ? ? ? 代码片段如下：

="row">

     
        ="span5 well pricehover">基础tabs="nav nav-tabs"="active">Home>Profile>Messages>
  >基础pills="nav nav-pills">
    
      >
       


      >竖排tabs="nav nav-tabs nav-stacked">
        
      
              >竖排pills="nav nav-pills nav-stacked">