1、第第6 6章章 BOOTSTRAPBOOTSTRAP组件设计组件设计1Bootstrap组件设计Bootstrap表单设计Bootstrap下拉菜单Bootstrap导航及分页Bootstrap消息提示Bootstrap内置组件本章实训：使用Bootstrap实现简单的响应式网页BootstrapBootstrap表单设计表单设计l使用使用BootstrapBootstrap，通过一些简单的，通过一些简单的 HTML HTML 标签和扩展的类，标签和扩展的类，即可创建出不同样式的表单。即可创建出不同样式的表单。lBootstrap Bootstrap 提供了提供了3 3种类型的表单布局：垂直表
2、单（默认）、种类型的表单布局：垂直表单（默认）、内联表单和内联表单和水平水平表单表单。l垂直表垂直表单是单是BootstrapBootstrap表单的默认形式。基本的表单结构是表单的默认形式。基本的表单结构是 Bootstrap Bootstrap 自带自带的的。创建创建基本表单的基本表单的步骤步骤：（1 1）向父）向父 元素添加元素添加 role=form role=form。（2 2）把标签和控件放在一个带有）把标签和控件放在一个带有classclass为为form-groupform-group的的 中。中。.form-group.form-group设置了设置了15px15px的下边距
3、，因此这样可以的下边距，因此这样可以获取表单元素的最佳间距。获取表单元素的最佳间距。（3 3）向所有的文本元素）向所有的文本元素 、和和 添加添加 class=form-control class=form-control。l创建创建一个垂直表单（基本表单）的一个垂直表单（基本表单）的例子例子：【例例6-16-1】BootstrapBootstrap表单设计表单设计l内联表内联表单单：如果如果需要创建一个表单，它的所有元素是内联需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，可向的，向左对齐的，标签是并排的，可向标签添加标签添加class.form-inlineclass.f
4、orm-inline。l可以分别使用可以分别使用.input-.input-lglg/input-/input-smsm和和.col-.col-lglg-*类来分别类来分别设置表单的文字大小和宽度设置表单的文字大小和宽度。l【例例6-26-2】内联表】内联表单单示例示例l默认情况下（即垂直表单中），默认情况下（即垂直表单中），Bootstrap Bootstrap 中的中的inputinput、selectselect和和textareatextarea均为均为100%100%宽度。而使用内联表单时，可宽度。而使用内联表单时，可以对表单控件设置一个宽度。如果要隐藏内联表单的标签，以对表单控件设
5、置一个宽度。如果要隐藏内联表单的标签，可使用类可使用类srsr-only-onlyl【例例6-36-3】内联表单内联表单示例示例BootstrapBootstrap表单设计表单设计l水平表单与其他表单相比不仅标记的数量上不同，而且表水平表单与其他表单相比不仅标记的数量上不同，而且表单的呈现形式也不同。如果要创建一个水平布局的表单，单的呈现形式也不同。如果要创建一个水平布局的表单，可按下面的几个步骤进行。可按下面的几个步骤进行。（1 1）向父）向父元素添加对类元素添加对类.form-horizontal.form-horizontal的引用，即的引用，即class=form-horizontal
6、class=form-horizontal。（2 2）把标签和控件放在一个带有对类）把标签和控件放在一个带有对类.form-group.form-group引用的引用的 中。中。（3 3）向标签添加对类）向标签添加对类.control-label.control-label的引用。的引用。l在水平表单中，可以把标签在水平表单中，可以把标签labellabel和表单元素显示在同一行和表单元素显示在同一行。l水平水平表表单单示例示例【例【例6-46-4】BootstrapBootstrap表单设计表单设计l表单输入（表单输入（inputinput）lBootstrap Bootstrap 提供了对
7、所有原生的提供了对所有原生的 HTML 5 HTML 5的的inputinput类型的支类型的支持，包括持，包括texttext、passwordpassword、radioradio、checkboxcheckbox、imageimage、datetimedatetime、datetimedatetime-local-local、datedate、monthmonth、timetime、weekweek、numbernumber、emailemail、urlurl、searchsearch、teltel 和和 color color等。等。BootstrapBootstrap表单设计表单设计
8、l表单控件设置表单控件设置l在垂直表单中，在垂直表单中，Bootstrap Bootstrap 中的中的inputinput、selectselect和和textareatextarea均为均为100%100%宽度。对一系列复选框和单选框使用宽度。对一系列复选框和单选框使用“class=class=checkbox-inlinecheckbox-inline”或或“class=radio-inlineclass=radio-inline”，可控制它，可控制它们显示在同一行上。们显示在同一行上。l行内显示行内显示示例示例：【例【例6-56-5】lBootstrap Bootstrap 表单控件可
9、以在输入框表单控件可以在输入框 input input 上设置一个块级上设置一个块级帮助文本。为了添加一个占用整个宽度的内容块，可在帮助文本。为了添加一个占用整个宽度的内容块，可在 后插入一个后插入一个class=help-blockclass=help-block的块级元素的块级元素。l示例：示例：【例例6-66-6】l如果需要在一个表单标签后放置纯文本，可以对如果需要在一个表单标签后放置纯文本，可以对使用使用classclass=“form-control-static”=“form-control-static”。示例：示例：【例例6-76-7】BootstrapBootstrap表单设
10、计表单设计l表单验证状态表单验证状态lBootstrap Bootstrap 包含了错误、警告和成功消息的验证样式。只包含了错误、警告和成功消息的验证样式。只需要对父元素简单地调用需要对父元素简单地调用.has-warning.has-warning、.has-error.has-error 或或.has-success.has-success的类，即可使用验证状态的类，即可使用验证状态，l示例：示例：【例例6-86-8】BootstrapBootstrap表单设计表单设计l 按钮按钮组组l示例：示例：【例【例6-96-9】l使用使用类类.btnbtn-group-group-lglg、.bt
11、nbtn-group-group-smsm、.btnbtn-group-group-xsxs可以调整按钮可以调整按钮组的大小组的大小。示例：示例：【例【例6-106-10】class描述.btn-group该class用于形成基本的按钮组。在.btn-group中放置一系列带有class.btn的按钮.btn-toolbar该class有助于把几组结合到一个中，一般获得更复杂的组件.btn-group-lg.btn-group-sm.btn-group-xs这些class可应用到整个按钮组的大小调整.btn-default.btn-link.btn-primary.btn-success.bt
12、n-info.btn-warning.btn-danger不同的预定义按钮样式，分别是默认样式、保持链接样式、原始按钮样式、成功样式、一般信息样式、警告样式、危险样式.btn-block块级按钮（拉伸至父元素100%的宽度）.active.disabled按钮的激活及禁用状态.btn-group-vertical该class让一组按钮垂直堆叠显示BootstrapBootstrap表单设计表单设计l按钮组默认是水平显示的，也可以通过类按钮组默认是水平显示的，也可以通过类.btnbtn-group-group-verticalvertical使其垂直显示使其垂直显示。l【例例6-116-11】是
13、一个垂直显示按钮组的】是一个垂直显示按钮组的示例示例l在在DreamweaverCCDreamweaverCC中，可通过选择中，可通过选择“插入插入/Bootstrap/Bootstrap组件组件/Button Groups/Button Groups”等菜单等菜单，插入，插入各种形式的按钮组各种形式的按钮组。l示例：示例：【例例6-126-12】BootstrapBootstrap表单设计表单设计l输入框组输入框组l使用输入框组，可以向基于文本的输入框添加作为前缀和后缀使用输入框组，可以向基于文本的输入框添加作为前缀和后缀的文本或按钮。输入框组为表单前后增加的文本或按钮。输入框组为表单前后增
14、加“组组”，可以使用图，可以使用图标或文字。向标或文字。向.form-control.form-control元素添加前缀或后缀元素的步骤元素添加前缀或后缀元素的步骤如下。如下。（1 1）把前缀或后缀元素放在一个带有）把前缀或后缀元素放在一个带有class=input-groupclass=input-group的的 中。中。（2 2）在相同的）在相同的内，在内，在class=input-group-class=input-group-addonaddon 的的 或或 内放置额外的内容。内放置额外的内容。（3 3）把该）把该或或放置在放置在 元素的前面或者后面。元素的前面或者后面。l注意为了保
15、持跨浏览器的兼容性，应避免使用注意为了保持跨浏览器的兼容性，应避免使用 元素，元素，因为它们在因为它们在 WebKitWebKit 浏览器中不能完全渲染出效果。也不要直浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的接向表单组应用输入框组的classclass，因为输入框组是一个孤立的，因为输入框组是一个孤立的组件。组件。BootstrapBootstrap下拉菜单下拉菜单l下拉菜单示例下拉菜单示例l如如需使用下拉菜单，只需通过添加对类需使用下拉菜单，只需通过添加对类.dropdown-toggle.dropdown-toggle的调用并增的调用并增加加data-toggledat
16、a-toggle属性的设置，即可实现下拉菜单属性的设置，即可实现下拉菜单。l导航下导航下拉菜单示例拉菜单示例:【例【例6-146-14】l打开的每个下拉菜单其实都是一个列表，这个列表需要被指定打开的每个下拉菜单其实都是一个列表，这个列表需要被指定为为.dropdown-menu.dropdown-menu类，而每个菜单项是一个列表项，其中，类，而每个菜单项是一个列表项，其中，li class=divider可以设置下拉菜单中的分隔线。如果要给下拉可以设置下拉菜单中的分隔线。如果要给下拉菜单增加标题，可使用菜单增加标题，可使用.dropdown-header.dropdown-header。如果
17、要禁用下拉菜单的项，。如果要禁用下拉菜单的项，可以使用可以使用.disabled.disabled。类描述.dropdown指定下拉菜单，下拉菜单都包裹在.dropdown里.dropdown-menu创建下拉菜单.dropdown-menu-right下拉菜单右对齐.dropdown-header在下拉菜单中添加标题.dropup指定向上弹出的下拉菜单.disabled下拉菜单中的禁用项.divider下拉菜单中的分割线.pull-right下拉菜单右对齐BootstrapBootstrap下拉菜单下拉菜单l下拉菜单的对齐及弹出方向也可以改变。使用类下拉菜单的对齐及弹出方向也可以改变。使用类
18、.pull-.pull-rightright或或.dropdown-menu-right.dropdown-menu-right可以使得下拉菜单靠页面右可以使得下拉菜单靠页面右侧对齐，而使用侧对齐，而使用.dropupdropup则可以使得下拉菜单向上弹出则可以使得下拉菜单向上弹出。l示例：示例：【例【例6-156-15】BootstrapBootstrap下拉菜单下拉菜单l下拉菜单实现方法下拉菜单实现方法1 1按钮下拉菜单按钮下拉菜单l一一个默认类型的个默认类型的按钮按钮：div class=-group button type=button class=-default 按钮下拉菜按钮下拉
19、菜单单 （1 1）添加按钮属性。给按钮添加对类）添加按钮属性。给按钮添加对类dropdown-toggledropdown-toggle的调用，并添加的调用，并添加属性属性data-toggle=dropdowndata-toggle=dropdown。为了显示向下箭头，在按钮文本处添加。为了显示向下箭头，在按钮文本处添加。（2 2）添加下拉菜单所显示的列表）添加下拉菜单所显示的列表 ，并对此列表增加对类，并对此列表增加对类.dropdown-.dropdown-menumenu的调用，如果是靠右对齐或向上弹出的菜单，可调用表的调用，如果是靠右对齐或向上弹出的菜单，可调用表6-26-2给出的类
20、。给出的类。（3 3）设置列表项。每个列表项都需设置为超链接形式，并可参考表）设置列表项。每个列表项都需设置为超链接形式，并可参考表6-26-2，设置分割线、不可用的列表项、列表标题等特殊项目。设置分割线、不可用的列表项、列表标题等特殊项目。l简单按钮下拉简单按钮下拉菜单菜单示例：示例：【例例6-166-16】BootstrapBootstrap下拉菜单下拉菜单l2 2导航下拉菜单导航下拉菜单l以下代码所示的是一个导航，每个导航项都是一个超以下代码所示的是一个导航，每个导航项都是一个超链接链接:导航下拉菜单 其他导航项 （1 1）对需要增加下拉菜单的导航项，增加对类）对需要增加下拉菜单的导航项
21、，增加对类.dropdown.dropdown的调用，并对的调用，并对其对应的超链接增加对类其对应的超链接增加对类.dropdown-toggle.dropdown-toggle的调用，以及的调用，以及data-data-toggle=dropdowntoggle=dropdown的设置。为了显示向下箭头，可在文本后添加的设置。为了显示向下箭头，可在文本后添加span class=caret。（2 2）添加下拉菜单所显示的列表）添加下拉菜单所显示的列表 ，并对此列表增加对类，并对此列表增加对类.dropdown-.dropdown-menumenu的调用，如果是靠右对齐或向上弹出的菜单，可调用
22、表的调用，如果是靠右对齐或向上弹出的菜单，可调用表6-26-2给出的类。给出的类。（3 3）设置列表项。每个列表项都需设置为超链接形式，并可参考表）设置列表项。每个列表项都需设置为超链接形式，并可参考表6-26-2，设置分割线、不可用的列表项、列表标题等特殊项目。设置分割线、不可用的列表项、列表标题等特殊项目。l简单导航下拉菜单简单导航下拉菜单示例示例：【例例6-176-17】Bootstrap导航及分页l在在HTML 5HTML 5中，可使用中，可使用 创建导航栏。在创建导航栏。在BootstrapBootstrap中也提供中也提供了相应的类了相应的类.navnav，能方便地实现各种导航栏。
23、，能方便地实现各种导航栏。lBootstrapBootstrap导航基本样式导航基本样式l使用使用BootstrapBootstrap创建一个导航菜单主要包括以下创建一个导航菜单主要包括以下步骤步骤:（1 1）创建一个无序列表，对该列表添加）创建一个无序列表，对该列表添加class=class=navnav 调用类调用类.navnav。（2 2）添加具体要实现的导航类型）添加具体要实现的导航类型。示例：示例：【例【例6-186-18】类描述.nav默认垂直导航菜单.navnav-tabs标签页导航.navnav-pills胶囊式标签页导航.navnav-pillsnav-stacked胶囊式标
24、签页以垂直方向堆叠排列.nav-justified两端对齐的标签页，在大于768px的屏幕上，通过.nav-justified类可以很容易地让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式.disabled禁用的标签页.tab-content与.tab-pane和data-toggle=tab(data-toggle=pill)一同使用，设置标签页对应的内容随标签的切换而更改.tab-pane与.tab-content和data-toggle=tab(data-toggle=pill)一同使用，设置标签页对应的内容随标签的切换而更改Bootstrap导航及分页l标签页式导航
25、标签页式导航 ：标签标签页式导航只需对列表添加对类页式导航只需对列表添加对类.navnav navnav-tabs-tabs的调用即可的调用即可。l示例：示例：【例【例6-196-19】【例【例6-206-20】l胶囊式胶囊式导航导航：胶囊胶囊式导航对应的类是式导航对应的类是.navnav navnav-pills-pills，类，类似地，同时使用类似地，同时使用类.navnav-justified-justified，可以让导航菜单在显，可以让导航菜单在显示尺寸较大时与父元素等宽示尺寸较大时与父元素等宽。l胶囊式导航胶囊式导航的的示例：示例：【例例6-216-21】l在使用胶囊式导航的同时使
26、用类在使用胶囊式导航的同时使用类.navnav-stacked-stacked，可以让胶，可以让胶囊式导航项垂直堆叠囊式导航项垂直堆叠。l如如【例【例6-226-22】所示，在浏览器中可查看垂直堆叠的胶囊式】所示，在浏览器中可查看垂直堆叠的胶囊式导航导航效果效果l带下带下拉菜单的胶囊式导航代码拉菜单的胶囊式导航代码示例示例：【例例6-236-23】Bootstrap导航及分页l面包屑导航（面包屑导航（BreadcrumbsBreadcrumbs）：是是一种基于网站层次信息的一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、显示方式。以博客为例，面包屑导航可以显示发布日期、
27、类别或标签。它们表示当前页面在导航层次结构内的位置类别或标签。它们表示当前页面在导航层次结构内的位置。lBootstrap Bootstrap 中的面包屑导航是一个简单的带中的面包屑导航是一个简单的带有有.breadcrumb class .breadcrumb class 的列表，项目之间分隔符会被自动的列表，项目之间分隔符会被自动添加添加。l示例：示例：【例例6-246-24】Bootstrap导航及分页l导航栏及其组件导航栏及其组件l导航栏是导航栏是BootstrapBootstrap的一个的一个突出点突出点。导航栏具备响应式的特征，在移动。导航栏具备响应式的特征，在移动设备的视图中是折
28、叠的，随着可用视口宽度的增加，导航栏也会水平设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。展开。l创建一个默认的导航栏的简单步骤如下。创建一个默认的导航栏的简单步骤如下。（1 1）向）向 标签添加类标签添加类.navbarnavbar、.navbarnavbar-default-default的调用。的调用。（2 2）向）向 标签添加属性标签添加属性role=navigationrole=navigation，增加可访问性。，增加可访问性。（3 3）可向）可向 标签内的标签内的 元素添加一个类元素添加一个类.navbarnavbar-header-header的调的调用作为
29、标题，里面包含带有用作为标题，里面包含带有.navbarnavbar-brand-brand类的类的 元素，让文本更大元素，让文本更大一号。一号。（4 4）为了向导航栏添加链接，只需要简单地添加带有调用类）为了向导航栏添加链接，只需要简单地添加带有调用类.navnav及及.navbar-navnavbar-nav 的无序列表即可的无序列表即可。l最最简单的一个导航栏的代码简单的一个导航栏的代码示例示例：【例例6-256-25】l导航导航栏的对齐方向可以通过类栏的对齐方向可以通过类.navbarnavbar-left-left（向左）或（向左）或.navbarnavbar-right right
30、（向右）来设置。（向右）来设置。Bootstrap导航及分页l在导航栏中也可以使用表单，只需把这个表单定义在导航栏中也可以使用表单，只需把这个表单定义为为.navbarnavbar-form-form类类，就可就可确保确保表单适当地垂直对齐和在较表单适当地垂直对齐和在较窄的视口中的折叠窄的视口中的折叠。l导航导航栏中也可以使用类栏中也可以使用类.navbar-btnnavbar-btn 向不在向不在 中的中的 元素添加按钮，类元素添加按钮，类.navbar-btnnavbar-btn 可被使用在可被使用在 和和 元素上元素上。l可以可以通过类通过类.navbarnavbar-left-left
31、 或或.navbarnavbar-right-right 设置其对齐方设置其对齐方向向。l【例例6-266-26】是一个带有表单的向右对齐的导航栏示例】是一个带有表单的向右对齐的导航栏示例Bootstrap导航及分页l如果需要在导航中包含文本字符串，可使用如果需要在导航中包含文本字符串，可使用.navbarnavbar-text-text，这个类通，这个类通常与常与 标签一起使用，确保文本适当的前导和颜色。如果要在导航标签一起使用，确保文本适当的前导和颜色。如果要在导航栏导航组件内使用图标，也可以使用栏导航组件内使用图标，也可以使用glyphiconglyphicon相关的类。相关的类。lBo
32、otstrap Bootstrap 导航栏可以动态定位。默认情况下，导航栏是块级元素，导航栏可以动态定位。默认情况下，导航栏是块级元素，它是基于在它是基于在 HTML HTML 中放置的位置定位的。可以把它放置在页面的顶部中放置的位置定位的。可以把它放置在页面的顶部或者底部，也可以让它成为随着页面一起滚动的静态导航栏或者底部，也可以让它成为随着页面一起滚动的静态导航栏。l通过通过.navbarnavbar-fixed-top-fixed-top把导航栏始终固定在页面把导航栏始终固定在页面顶部顶部：【例例6-276-27】l通过通过类类.navbarnavbar-inverse-inverse创
33、建一个带有黑色背景白色文本的反色的导航创建一个带有黑色背景白色文本的反色的导航栏栏。示例：。示例：【例例6-286-28】类描述.navbar-fixed-top随着页面一起滚动，始终在页面顶部.navbar-fixed-bottom随着页面一起滚动，始终在页面底部.navbar-static-top在页面静态的顶部Bootstrap导航及分页l为了实现导航栏的响应式特性，在需要时可以把导航栏中为了实现导航栏的响应式特性，在需要时可以把导航栏中的内容进行折叠。实现导航栏折叠的主要步骤如下。的内容进行折叠。实现导航栏折叠的主要步骤如下。（1 1）把导航栏中要折叠的内容用一个）把导航栏中要折叠的内
34、容用一个元素包裹起来，元素包裹起来，并对这个并对这个元素调用类元素调用类.collapse.collapse和和.navbarnavbar-collapse-collapse。（2 2）添加一个按钮，并对这个按钮调用类）添加一个按钮，并对这个按钮调用类.navbarnavbar-toggle-toggle，增加属性增加属性 data-toggle data-toggle及及data-targetdata-target。其中，。其中，data-toggledata-toggle用于告诉用于告诉 JavaScript JavaScript 需要对按钮做什么，若是折叠则可定需要对按钮做什么，若是折叠
35、则可定义为义为data-toggle=collapsedata-toggle=collapse，而，而data-targetdata-target则指示要切换则指示要切换到哪一个元素，通常可用元素到哪一个元素，通常可用元素idid来设置。来设置。（3 3）在上述按钮元素）在上述按钮元素中添加中添加3 3个个span class=icon-bar，用于生成所谓的，用于生成所谓的“汉堡汉堡”按钮，按钮，单击这个按钮将切换到第（单击这个按钮将切换到第（1 1）步中定义的折叠部分。）步中定义的折叠部分。l一一个具有折叠效果的导航栏个具有折叠效果的导航栏示例示例：【例例6-296-29】Bootstra
36、p导航及分页l分页设计分页设计l分页（分页（PaginationPagination）实际上也是一种无序列表）实际上也是一种无序列表。l一一个简单的不同大小的分页显示设置的个简单的不同大小的分页显示设置的示例示例：【例例6-306-30】l使用分页首先要调用类使用分页首先要调用类.pagination.pagination，类，类.pagination-.pagination-lglg及及.pagination-.pagination-smsm分别用于设置加大或缩小的链接字体尺寸分别用于设置加大或缩小的链接字体尺寸。l如果要设置翻页，可使用如果要设置翻页，可使用.pager.pager类。往前
37、一页和往后一页可分别使类。往前一页和往后一页可分别使用用.previous.previous和和.next.next。l一一个使用翻页的个使用翻页的示例示例：【例例6-316-31】class描述.pagination分页链接.pager翻页链接，链接居中对齐.previous.pager中上一页的按钮样式，左对齐.next.pager中下一页的按钮样式，右对齐.pagination-lg更大尺寸的分页链接显示.pagination-sm更小尺寸的分页链接显示.disabled禁用当前链接.active当前访问页面链接样式Bootstrap导航及分页l滚动滚动监听（监听（ScrollspySc
38、rollspy）插件，即自动更新导航插件，会根）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现据滚动条的位置自动更新对应的导航目标。其基本的实现是随着页面的滚动，基于滚动条的位置向导航栏添是随着页面的滚动，基于滚动条的位置向导航栏添加加.active.active。l滚动滚动监听一般结合导航、分页等功能使用监听一般结合导航、分页等功能使用。l可以通过可以通过datadata属性或属性或JavaScriptJavaScript代码对页面添加滚动监听。代码对页面添加滚动监听。l如果是通过如果是通过datadata属性监听滚动，则可对监听的元素（通常属性监听滚动，则
39、可对监听的元素（通常是是 body body）添加属性）添加属性data-spy=scrolldata-spy=scroll，然后添加属性，然后添加属性data-targetdata-target指定滚动的目标，滚动的目标应为带有指定滚动的目标，滚动的目标应为带有Bootstrap.Bootstrap.navnav 组件的父元素的组件的父元素的 ID ID 或或 class class。为了保证。为了保证滚动监听的效果，必须确保页面主体中有匹配所要监听链滚动监听的效果，必须确保页面主体中有匹配所要监听链接的接的IDID的元素存在。的元素存在。l如果是通过如果是通过JavaScriptJavaS
40、cript调用滚动监听，则需选取要监听的调用滚动监听，则需选取要监听的元素，然后调用元素，然后调用.scrollspyscrollspy()()函数，例如以下代码所示：函数，例如以下代码所示：$(body).$(body).scrollspyscrollspy(target:.(target:.navbarnavbar-example)-example)Bootstrap导航及分页l附加导航（附加导航（AffixAffix）l附加导航（附加导航（AffixAffix）插件允许指定）插件允许指定 固定在页面的某固定在页面的某个位置。它们将在某个位置开始，但当在页面中点击某个个位置。它们将在某个位
41、置开始，但当在页面中点击某个标记，该标记，该 会锁定在某个位置，不会随着页面其他部会锁定在某个位置，不会随着页面其他部分一起滚动。分一起滚动。l可以通过可以通过datadata属性或者通过属性或者通过 JavaScript JavaScript 来使用附加导航来使用附加导航插件。插件。l如果是通过如果是通过data data 属性元素添加附加导航行为，只需要向需属性元素添加附加导航行为，只需要向需要监听的元素添加属性设置要监听的元素添加属性设置data-spy=affix data-spy=affix 即可，并使即可，并使用偏移来定义何时切换元素的锁定和移动。用偏移来定义何时切换元素的锁定和移
42、动。l如果是通过如果是通过 JavaScript JavaScript手动为某个元素添加附加导航，则手动为某个元素添加附加导航，则应通过脚本代码指定需要监听的元素及元素响应应通过脚本代码指定需要监听的元素及元素响应affixaffix事件事件时的操作。时的操作。Bootstrap导航及分页l以下代码就为以下代码就为idid为为myAffixmyAffix的元素定义了如何响应的元素定义了如何响应affixaffix事件的偏移事件的偏移（offsetoffset）：）：$(#myAffix).affix(offset:top:100,bottom:function()return(this.bot
43、tom=$(.bs-footer).outerHeight(true)l【例【例6-326-32】是一个滚动监听及附加导航的示例。首先对要滚动监听的】是一个滚动监听及附加导航的示例。首先对要滚动监听的元素元素使用使用data-spy=scrolldata-spy=scroll添加滚动监听，用来根据滚动条添加滚动监听，用来根据滚动条的位置自动更新对应的导航目标，并指定滚动的目标是页面导航元素的位置自动更新对应的导航目标，并指定滚动的目标是页面导航元素（.navnav）所在的）所在的divdiv容器容器#myScrollspymyScrollspy。接着对导航元素列表使用。接着对导航元素列表使用d
44、ata-spy=affixdata-spy=affix添加附加导航。添加附加导航。data-offsetdata-offset用于在计算滚动位置时，用于在计算滚动位置时，计算距离顶部的偏移像素。计算距离顶部的偏移像素。Bootstrap消息提示l工具工具提示（提示（tooltiptooltip）：可用可用于提示链接信息。在于提示链接信息。在BootstrapBootstrap中，工具中，工具提示改用提示改用 CSS CSS 实现动画效果，用实现动画效果，用 data data 属性存储标题信息。工具提示属性存储标题信息。工具提示根据需求生成内容和标记，默认情况下将置于触发元素后面根据需求生成内
45、容和标记，默认情况下将置于触发元素后面。l可以可以使用以下两种方式添加工具提示。使用以下两种方式添加工具提示。（1 1）通过）通过datadata属性。如需添加一个工具提示，只需向一个锚标签添加属性。如需添加一个工具提示，只需向一个锚标签添加 data-toggle=tooltip data-toggle=tooltip 即可。锚的即可。锚的titletitle即为工具提示的文本。默认情即为工具提示的文本。默认情况下，插件把工具提示设置在顶部。例如：况下，插件把工具提示设置在顶部。例如：a=#data-toggle=tooltip title=Example tooltip请悬请悬停在我的上面
46、停在我的上面（2 2）通过）通过 JavaScript JavaScript 触发工具提示。例如使用以下语句触发指定触发工具提示。例如使用以下语句触发指定IDID元元素的工具提示：素的工具提示：$(#identifier).tooltip(options)$(#identifier).tooltip(options)l需要注意，需要注意，工具提示插件不像之前所讨论的下拉菜单及其他插件那样，工具提示插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯它不是纯 CSS CSS 插件。如需使用该插件，必须使用插件。如需使用该插件，必须使用 jQuery jQuery 激活它。激活它。可可使用下面的脚
47、本来启用页面中的所有的工具提示：使用下面的脚本来启用页面中的所有的工具提示：$(function()$(data-toggle=tooltip).tooltip();$(function()$(data-toggle=tooltip).tooltip();););Bootstrap消息提示l工具提示中的一些设置可通过工具提示中的一些设置可通过Bootstrap Data APIBootstrap Data API添加或通过添加或通过 JavaScript JavaScript 调用调用。l【例例6-336-33】是一个使用工具提示的简单】是一个使用工具提示的简单示例示例l需要需要注意的是，定义
48、了工具提示后，如果要在页面中使用，必须在后注意的是，定义了工具提示后，如果要在页面中使用，必须在后面通过一个面通过一个jQueryjQuery触发触发data属性名称描述data-animation工具提示使用CSS渐变滤镜效果data-html向工具提示插入HTML。为true表示允许在工具提示中插入HTML代码；如果为false，jQuery的text方法将被用于向DOM插入内容data-placement规定如何定位工具提示，其值可以是top|bottom|left|right|autodata-selector如果提供了一个选择器，工具提示对象将被委派到指定的目标data-title提
49、示信息内容。如果未指定title属性，则title选项是默认的title值data-trigger定义如何触发工具提示，其值可以是click|hover|focus|manual。可以传递多个触发器，每个触发器之间用空格分隔data-delay延迟显示和隐藏工具提示的毫秒数，这个属性对manual手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，要设置其显示和隐藏的时间，其结构如下所示：delay:show:500,hide:100data-container向指定元素追加工具提示显示的位置Bootstrap消息提示方法描述实例.tooltip(opti
50、ons)向元素集合附加工具提示句柄$().tooltip(options).tooltip(toggle)切换显示/隐藏元素的工具提示$(#element).tooltip(toggle).tooltip(show)显示元素的工具提示$(#element).tooltip(show).tooltip(hide)隐藏元素的工具提示$(#element).tooltip(hide).tooltip(destroy)隐藏并销毁元素的工具提示$(#element).tooltip(destroy)事件描述实例show.bs.tooltip当调用show实例方法时立即触发该事件$(#myTooltip)
