转自:http://www.cnblogs.com/ventlam/archive/2012/06/05/2524966.html
上讲回顾: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 按钮下拉菜单
以上两种按钮组件,代码片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
同时bootstrap还有分隔符的下拉菜单和上拉菜单按钮,可以参考文档。
2.导航(Navigation)
2.1 轻量导航(Nav,tabs,and pills)
bootstrap的导航非常多样和灵活,允许使用同样的标签,不同的CSS类,带来不同风格的导航条,具有非常高的可定制性。所有的导航组件,包括tabs,pills,lists标签,都必须使用.nav的类实现基础的导航标签。除了我们常见的导航,还可以利用.nav-stacked类来实现堆叠式(stacked)--竖式的导航条。
如图3-3所示,展示了多种基础风格的导航。
图3-3 多种基础风格导航
代码片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
下拉菜单的导航条和列表式(Nav list)的导航条都是页面常用要素,Nav list 类似于OSX的Finder,可以带有图标。它们同样可以用.nav 作为基础类,来实现这些组件。同时还有各种tab风格的导航条,在下讲再补充。如图3-4所示:
图3-4 列表与下拉导航
代码依然简单,片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
2.2 导航条(Navbar)
最最重要的页面要素,莫过于页面头部的导航条,这是几乎任何页面都会使用到的。Bootstrap提供的基础样式的导航条,是目前互联网的流行的“硬又黑”,当然你可以用Less来定制它。我们要注意到导航条的基础类不再是.nav而是navbar。
,至于顶部或者底部,用navbar-fixed-top与navbar-fixed-bottom来置顶/底.同时可以在navbar中使用form要素,比如.navbar-form。同时支持响应式操作,通过.nav-collapse或者直接是.collapse类实现。如图3-5所示:
图3-5 导航条
代码片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
2.3 面包屑导航(Breadcrumbs)与页码(Pagination)
- 面包屑导航(BreadCrumbs)导航用作显示用户在网站或者App的位置,关于Breadcrumbs 面包屑导航的优点与对SEO的作用,请参考这个页面。Bootstrap的“面包”用在代码仓库式的页面很优雅,具体实现如图3-6所示:
图3-6 面包屑导航(BreadCrumbs)
- 页码(Pagination)也是非常常用的页面要素,Bootstrap提供两种风格的翻页组件。 一个是多页面导航,用于多个页码的跳转,它具有极简主义风格的翻页提示,能够很好应用在结果搜索页面;另一种则是Pager,是轻量级组件,可以快速翻动上下页,适用于个人博客或者杂志。如图3-7所示:
图3-7 页码(Pagination)
以上两种导航,代码片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
3.标签(Label)、徽章(Badges)、排版(Typographic)与缩略图(Thumbnails)
3.1 标签(Label)与徽章(Badges)
标签是一个很好用的页面小要素,bootstrap具有多种颜色标签,表达不同的页面信息。只需要简单使用label标签即可。徽章是细小而简单的组件,用于指示或者计算某种类别的要素,在在email客户端很常见,实际上在一些签到式的网站(LBS)上也常常用到。如图3-8所示:
图3-8 标签(Label)与徽章(Badges)
代码片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
3.2 排版(Typographic)
我们在第一讲就提及到排版(Typographic),这里主要是涉及到两个排版组件:Hero-unit,Page-header.Hero-unit是一个轻量级的可扩展的组件,主要用于市场推广网站显示它们大量的要素。而Page-header则是简单为页面段落的头部设置一个合适的空间和排版形式。如图3-9所示:
图3-9 排版(Typographic)
代码片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
3.3 缩略图(Thumbnails)
缩略图,可以作为图片,视频,文字的格网结构展示。实现默认形式的bootstrap缩略图,只需要简单的thumbnails标签。Thumbnails多应用于图片、视屏的搜索结果等页面,还可以链接到其他页面。同样的它具有很好的可定制性,可以将文章片段,按钮等标签融入缩略图,同时可以混合与匹配不同大小的缩略图。如图3-10,3-11所示:
图3-10 缩略图1(thumbnails)
图3-11 缩略图2(thumbnails)
代码片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
4.提醒区域(Alerts),进度条(Progressing Bar),杂项(Miscellaneous)
4.1提醒区域(Alerts)
在Bootstrap 2中重写了提醒区域的基础类,使用.alert简化了原有的.alert-message 类。为了使得组件更为简洁与耐用,Bootstrap去除了不同的alert block的外观,内容具有更多padding边距和可以显示更多文字。如图3-12所示:
图3-12 提醒区域(Alert)
代码片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
4.2 进度条(Processing Bar)
进度条,这也是不可缺少的页面要素,在重定向,载入等页面都经常用到,Bootstrap提供多种漂亮、简单、多种颜色的进度条。不过其中条纹和动画效果的进度条不支持IE浏览器,原因是进度条使用了CSS3的渐变(gradients)、透明度(transitions)、动画效果(animations)来实现它们的效果。IE7-9和旧版的Firefox都不支持这些特性,所以在实现进度条的时候请注意浏览器支持程度。如图3-13所示,
图3-13 进度条(Processing Bar)
代码片段如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
4.3 杂项(Miscellaneous)
Bootstrap的杂项包括两个轻量级的组件,一个是well,用于表达插入效果。另一个是关闭图标,可以用于提醒区域,模式窗口(Modal)的关闭。Modal将会在下讲的javascript pluging中讲解到。如图3-14所示:
图3-14 杂项(Miscellaneous)
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
参考文献与延伸阅读:
1.CSS3 Tutorials http://www.w3schools.com/css3/default.asp