BootStrap入门教程 (三)

标签： bootstrap | 发表时间：2012-06-05 11:23 | 作者：林场
出处：http://www.cnblogs.com/

      上讲回顾：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="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

               

                                                                                         

 

本文链接

相关 [bootstrap] 推荐：

[原]Bootstrap，Bagging，Boosting

- - 狮子座明仔知识集散场
Bootstrap(自助法). Bootstrap，即“自助法”，是用小样本来估计大样本的统计方法. 子样本之于样本，可以类比样本之于总体. 你要统计你们小区里男女比例，可是你全部知道整个小区的人分别是男还是女很麻烦对吧. 于是你搬了个板凳坐在小区门口，花了十五分钟去数，准备了200张小纸条，有一个男的走过去，你就拿出一个小纸条写上“M”，有一个女的过去你就写一个“S”.

Bootstrap,网站模板,bootstrap模板

- - CSDN博客Web前端推荐文章
日期：2013-3-31  来源： GBin1.com. Charisma是一套全功能的，免费，会员质量的响应式HTML5管理员界面模板，基于 "Bootstrap"，拥有了9套不同的主题颜色内容，可以满足你的不同需要. 完全响应式，针对了移动设备和触摸设备优化. 基于bootstrap，同时也支持jQuery UI.

向Twitter Bootstrap 学习什么？

- junyu - 知乎的博客
什么是 Twitter Bootstrap. Twitter 有一位风格清新的设计师 Mark Otto（此人之前在 Zurb）[1]，他负责了很多 Twitter 非前台的页面设计，比如 Dev、Support 和 Promoted Products 的设计. 去年，Mark 在自己网站发布了一套基于 Less [2] 框架的工具合集（mixins）—— Bootstrap.less [3]，方便前端开发（静态部分）.

BootStrap入门教程 (三)

- - 博客园_首页
      上讲回顾：Bootstrap的基础CSS(Base CSS)提供了优雅，一致的多种基础Html页面要素，包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求.       Bootstrap作为完整的前端工具集，内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels)，徽章(Badges)，排版(Typography)，缩略图( thumbnails),提醒(Alert)，进度条(progress bar)，杂项(Miscellaneous).

BootStrap入门教程 (二)

- - 博客园_首页
        上讲回顾：Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局，它同时建立了一个宽达940px和12列的格网系统.       基于手脚架(Scaffolding)之上，Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素，旨在为用户提供新鲜、一致的页面外观和感觉.

BootStrap入门教程 (一)

- - 博客园_首页
     2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集-- BootStrap. Bootstrap由 MARK OTTO和 Jacob Thornton所设计和建立，在 github上开源之后，迅速成为该站上最多人 watch& fork的项目.

【外刊IT评论网】Twitter Bootstrap

- - 外刊IT评论网
Bootstrap是一个基于HTML，CSS，JAVASCRIPT的简洁灵活的. 它目前是GitHub 上最火的一个项目. 美国国家航空航天局和美国MSNBC有线新闻频道都使用了它. 本文的作者是Bootstrap的创始人之一. 我并不认为从开发Bootstrap框架中学到了任何东西. 事实上，我非常确信，我不会学到任何东西.

这正在 Bootstrap 化的世界

- - 萝卜网
一、无处不在的 Bootstrap. 你是否见过这样蓝色的光泽效果的文本框. 如果你对以上任何一个问题的回答是「是」的话，或者，或者你见过这种风格的其他元素的话，那么，恭喜您，你也见过 Bootstrap 了. 二、伟大的 Bootstrap. 来自 Twitter 的 Bootstrap 项目是 Twitter 开发的一套设计框架.

免费的响应式Bootstrap模板 - Codester

- - CSDN博客推荐文章
日期：2013-3-3  来源： GBin1.com. Codester是一个基本的个人作品集 Bootstrap模板，帮助设计师，摄影师，图形艺术工作者搭建高度可定制的网站. 拥有自定义包和相关的javascript，css和组件，相信大家肯定喜欢. 兼容各种移动和触摸设备屏幕尺寸. 拥有来自 Template Monster的add-on.

Twitter Bootstrap生态系统持续增长

- - InfoQ cn
Bootstrap Hero最近针对 Twitter Bootstrap发布了 一个超过200多个资源的列表. 文章列出了各种UI部件，从 accordions到 address pickers再到 pagination tools和一些 更强大的模型窗口. 当然，它同时也列出了很多其他的资源，展示了整个生态系统目前的丰富程度.