HTML5+CSS3+JavaScript+Bootstrap网站开发实用技术（第3版）课件 第9章 Bootstrap的组件和插件.pptx

Glyphicons字体图标1下拉菜单2导航和导航条3标签和徽章4列表组和分布5标签和提示框6第9章Bootstrap的组件和插件折叠和轮播7应用案例8

9.1Glyphicons字体图标Bootstrap可用的图标是来自GlyphiconsHalflings的字体图标Bootstrap中的Glyphicons包括超过260个的字体图标在安装目录的fonts文件夹内包含字体图标文件使用字体图标，需要在span元素中引用字体图标类

9.1Glyphicons字体图标spanclass=glyphiconglyphicon-search/span

9.2下拉菜单设计Bootstrap下拉菜单时，按钮和菜单项都要包含在代码divclass=dropdown……＜/div中要向按钮或链接添加.dropdown-toggle类和data-toggle=dropdown触发器。在放置菜单项的无序列表中，需要添加.dropdown-menu类。spanclass=caret/span用于添加向下的三角箭头。代码liclass=“divider”/li用于添加分隔线。

9.2下拉菜单

9.3导航和导航条9.3.1导航导航组件使用.nav类来实现为列表添加.nav-tabs类或.nav-pills类

9.3导航和导航条9.3.2导航条导航条（Navbar）是响应式布局的重要组件。导航条在移动设备的窗口中是可折叠的，随着窗口宽度的增加，导航条会呈现水平展开样式。①创建nav元素或div元素，作为导航条的容器，添加.navbar类和.navbar-default类。②创建div元素，添加标题类.navbar-header，包含了用.navbar-brand类描述的a元素，标题文本呈突出显示。③向导航栏添加链接，添加带有.nav类、.navbar-nav类的无序列表。

9.3导航和导航条9.3.2导航条

9.3导航和导航条9.3.2导航条实现响应式导航条当浏览器窗口缩小到一定程度时，将被折叠在导航条中添加表单和下拉菜单

9.4标签与徽章标签（Labels）多用于实现显示计数、消息提示等功能Bootstrap内置6种常用的标签类.label-default（默认）、.label-primary（主要）、.label-success（成功）、.label-info（消息）、.label-warning（警告）、.label-danger（危险）徽章与（Badges）的边角更加圆滑徽章主要用于突出显示页面上新消息或未读消息使用徽章时，只需要把代码spanclass=badge添加到链接、Bootstrap导航等元素上即可。

9.4标签与徽章

9.5列表组和分页9.5.1列表组列表组（Listgroup）用于以列表形式呈现复杂的或自定义的内容①向ul、ol、div等容器元素添加.list-group类；②向列表项添加.list-group-item类。

9.5列表组和分页9.5.2分页分页（Pagination）是一种无序列表.pagination类实现分页样式.pagination-lg类或.pagination-sm类得到更大或更小的分页组件

9.6标签页和提示框9.6.1标签页标签页（Tab）插件也叫选项卡，由Bootstrap提供的脚本文件tab.js实现。标签页由分别是标签页（导航）部分和与标签页对应的内容部分组成。

9.6标签页和提示框9.6.1标签页标签页部分用列表实现为ul元素或ol元素添加.nav类和.nav-tabs类，使其展现为标签页的样式，列表项中的a链接填加data-toggle=tab触发器，并且href属性值和内容部分的id值对应。内容部分在divclass=“tab-content”……/div内部，其中包括若干div元素。每个标签的内容在divclass=tab-paneid=tab1…/div内部，元素的id值用于与标签页的href属性值对应。

9.6标签页和提示框9.6.2提示框提示框用于在网页中显示不同形式的提示语提供了工具提示条、弹出框、警告框等3种不同形式的提示框工具提示由Bootstrap脚本文件tooltip.js实现

9.7折叠和轮播9.7.1折叠插件折叠（Collapse）插件用于内容的展开和收起由脚本文件collapse.js实现.panel-group、.panel-default.、panel-heading、.panel-title、.panel-collapse

9.7折叠和轮播9.7.2轮播插件轮播（Carousel）插件可用于响应式地向页面