BootStrap入门教程(5)

补充。如图3-4所示：

图3-4 列表与下拉导航

代码依然简单，片段如下：

View Code

基础Nav List

图标List

Home

Library

Applications

Profile Settings

Help

pills式的下拉菜单

tab式的下拉菜单

data-toggle=\

href=\Dropdown

data-toggle=\

href=\Dropdown

2.2 导航条(Navbar)

最最重要的页面要素，莫过于页面头部的导航条，这是几乎任何页面都会使用到的。Bootstrap提供的基础样式的导航条，是目前互联网的流行的“硬又黑”，当然你可以用Less来定制它。我们要注意到导航条的基础类不再是.nav而是navbar。

，至于顶部或者底部，用navbar-fixed-top与navbar-fixed-bottom来置顶/底.同时可以在navbar中使用form要素，比如.navbar-form。同时支持响应式操作，通过.nav-collapse或者直接是.collapse类实现。如图3-5所示：

图3-5 导航条

代码片段如下：

View Code

class=\

data-toggle=\Dropdown

class=\

data-toggle=\Dropdown

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

? 面包屑导航(BreadCrumbs)导航用作显示用户在网站或者App的位置，关于Breadcrumbs 面包屑导航的优点与对SEO的作用，请参考这个页面。Bootstrap的“面包”用在代码仓库式的页面很优雅，具体实现如图3-6所示：

图3-6 面包屑导航(BreadCrumbs)

? 页码(Pagination)也是非常常用的页面要素，Bootstrap提供两种风格的翻页组件。 一个是多页面导航，用于多个页码的跳转，它具有极简主义风格的翻页提示，能够很好应用在结果搜索页面；另一种则是Pager，是轻量级组件，可以快速翻动上下页，适用于个人博客或者杂志。如图3-7所示：

图3-7 页码(Pagination)

以上两种导航，代码片段如下：

View Code