UI设计师-UI设计模式与组件库-Bootstrap_Bootstrap组件学习：工具提示与弹出框.docx

PAGE1

PAGE1

Bootstrap组件学习：工具提示与弹出框

在前一节中，我们介绍了Bootstrap框架的重要性与分类，了解了Bootstrap是一个响应式前端框架，它包含了丰富的预定义组件，用于快速开发美观、一致的网页。现在，我们将深入到两个非常实用的Bootstrap组件——工具提示（Tooltips）与弹出框（Popovers）。这两个组件为网页提供信息展示的灵活性，使用户在不离开当前页面的情况下即可获得额外的信息或功能。

1工具提示（Tooltips）

工具提示在鼠标悬停于特定元素上时显示一段额外的文本信息，这对于不希望在页面上占据过多空间而需要为用户提供上下文信息或操作指导的情况非常有用。在Bootstrap中，工具提示的使用简单而直接，只需添加特定的数据属性即可。

1.1实例代码

!--引入Bootstrap核心CSS--

linkrel=stylesheethref=/bootstrap/4.0.0/css/bootstrap.min.css

!--引入JavaScript依赖--

scriptsrc=/jquery-3.2.1.slim.min.js/script

scriptsrc=/bootstrap/4.0.0/js/bootstrap.min.js/script

!--工具提示示例--

buttontype=buttonclass=btnbtn-secondarydata-toggle=tooltipdata-placement=toptitle=我是一段工具提示

点我显示工具提示

/button

!--初始化工具提示--

script

$(function(){

$([data-toggle=tooltip]).tooltip()

})

/script

1.2代码解析

引入依赖：首先，我们需要在页面中引入Bootstrap的CSS和JavaScript文件，以及jQuery，因为工具提示功能依赖于这些文件。

工具提示元素：为按钮添加data-toggle=tooltip属性，使之成为工具提示的目标元素。data-placement=top指定工具提示显示的位置，这里设置为顶部，也可以设置为底部、左侧或右侧。title属性则用于存储显示在工具提示中的文本信息。

初始化工具提示：使用jQuery选择器$([data-toggle=tooltip])来选择所有工具提示元素，然后调用tooltip()方法初始化它们。

2弹出框（Popovers）

弹出框是一种更复杂的工具提示，它能在用户触发某个动作时（如鼠标悬停、点击等），展示一个包含标题和正文的弹出窗口。弹出框的灵活性更高，可以包含HTML内容，甚至可以包含图片、列表等。

2.1实例代码

!--引入Bootstrap核心CSS--

linkrel=stylesheethref=/bootstrap/4.0.0/css/bootstrap.min.css

!--引入JavaScript依赖--

scriptsrc=/jquery-3.2.1.slim.min.js/script

scriptsrc=/bootstrap/4.0.0/js/bootstrap.min.js/script

!--弹出框示例--

buttontype=buttonclass=btnbtn-secondarydata-toggle=popoverdata-placement=topdata-content=这是一段弹出框的内容title=弹出框标题

点我显示弹出框

/button

!--初始化弹出框--

script

$(function(){

$([data-toggle=popover]).popover()

})

/script

2.2代码解析

初始化弹出框：与工具提示类似，我们首先引入所需的CSS和JavaScript依赖。

弹出框元素：按钮上的data-toggle=popover使其成为弹出框元素。data-placement属性定义了弹出框的显示位置。data-content用于存储弹出框的内容文本，而title属性则用于存储弹出框的标题。

自定义内容：弹出框的内容可以通过data-content属性直接在HTML中定义，也可以通过JavaScript动态设置。例如：

script

$(function(){

$([data-toggle=popover]).popover({

content:function(){

return$(#popover-content).html();

}