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

Glyphicons字体图标1下拉菜单2导航和导航条3标签和徽章4列表组和分布5标签和提示框6第9章Bootstrap的组件和插件折叠和轮播7应用案例89.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-pane"id="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-collapse9.7折叠和轮播9.7.2轮播插件轮播（Carousel）插件可用于响应式地向页面添加滑块式的显示效果。轮播的内容可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容由Bootstrap提供的脚本文件carousel.js实现.carousel、.carousel-indecators、.carousel-inner、.carousel-control、.left、.right9.7折叠和轮播9.7.2轮播插件轮播插件的结构轮播的实现主要依靠4个部分（1）设计轮播容器（2）设计轮播计数器（3）设计轮播项目（4）设计轮播控制器（5）CSS样式定义9.8应用案例使用轮播插件、栅格系统、导航条等元素，结合媒体查询功能，设置一些元素的CSS样式，实现一个旅游轮播广告的效果。9.8应用案例设计过程1．页面结构描述页面的第一部分是导航条，第二部分即为轮播广告，每一个轮播项目由6张图片组成。当视口宽度为超小屏幕时，隐藏轮播广告；当视口宽度小于1200px时，轮播广告图片分2行显示2．导航部分的设计3．轮播广告部分的设计每个轮播项（item）由6幅图片构成，调整不同轮播项图片的出现位置，设置轮播项和其中每个图片的大小4．CSS代码小结Bootstrap可复用的组件，包括字体图标、下拉菜单、导航、导航条、列表组、分页等组件，这些组件是通过bootstrap.css中的类来定义的Bootstrap的标签页插件、提示框插件、折叠插件、轮播插件等。每个插件对应一个.js文件，用户可以单个引