Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，Bootstrap提供了优雅的HTML和CSS规范，使得 Web 开发更加方便快捷。
Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中比较经典的有6个，包括：模式对话框、标签页、滚动条、弹出框、图片轮播、工具提示。下面我们来一一介绍。
1. 模态框
概念： 模态框也叫模式对话框，是一种不支持嵌套的大型弹窗，模态框容器默认隐藏，我们设计时，可以通过 .show 将它显示出来，并作为 <body> 的直接子元素进行布局，以避免与其他组件互相影响：
1）父容器：模态框有三层父容器，形成固定搭配：
- modal：模态框容器，最外层容器。
- modal-dialog：对话框容器，内嵌于 .modal 容器。
- modal-content：内容框容器，内嵌于 .modal-dialog 容器。
2）子容器：模态框有三个同级子容器：
- modal-header：头容器，内嵌 .modal-title 标题容器。
- modal-body：体容器。
- modal-footer：脚容器。
3）开启模态框：
- 将.show 去掉，替换为 .fade 添加淡入淡出效果。
- 为模态框容器添加ID，如 id="my-modal-1"。
- 设计触发器，可以是一个 <a> 或者 <button> 等。
- 为触发器添加 data-target="#my-modal-1" 以绑定模态框ID。
- 为触发器添加 data-toggle="modal" 以添加展示模态框功能。
- 为触发器添加 href 可以将url指定的内容加载到 .modal-content 中，注意此时原 .modal-content 中的内容如关闭按钮代码等会被覆盖，此时建议将关闭按钮的代码移至远程加载的内容中。
4）关闭模态框：
建议在内容头容器首行布局一个拥有 data-dismiss="modal" 属性的关闭按钮。
2. 标签页
概念： 标签页也叫选项卡，由选项列表和对应内容两部分组成：
1）选项列表：由有序或无序列表配合 <a> 来完成布局：
- 为 <ol> 添加 nav nav-tabs/pills 以设置水平/胶囊导航。
- 为 <a> 以锚链接的方式设置 href 属性值以关联对应内容的ID。
- 为 <a> 添加 data-toggle="tab" 属性以设置选项切换功能。
2）对应内容：由 .tab-content 容器内嵌多个 .tab-pane 容器来完成布局：
- 子元素必须设置ID值，以关联选项列表中 <a> 的 href 属性。
- 子元素可以添加 active 来设置首选项。
- 子元素可以添加 fade 来设置切换时的淡入淡出效果。
- 子元素可以添加 in 来设置默认显示效果。
3. 工具提示
概念： 工具提示用来设置当鼠标经过元素时显示的小提示条：
1）使用bootstrap设置工具提示：
- 为元素添加 data-toggle="tooltip" 以添加显示工具提示的功能。
- 为元素添加 data-placement="right" 设置工具提示出现的位置。
- 为元素添加 title="xxx"：设置工具提示的内容。
2）JQ激活鼠标触发：$(() => $('[data-toggle="tooltip"]').tooltip());
- 使用jquery设置工具提示：对元素调用 tooltip() 方法，参数是一个JSON：
- animation：默认为 true，表示使用工具提示。
- placement：默认为 "top"，表示工具提示默认出现在元素正上方。
- trigger：默认为 focus hover，表示获取焦点和鼠标经过都触发工具提示。
- delay：默认无延迟，值为JSON，可设置 show 和 hide 效果的延迟毫秒数。
- title：设置提示内容。
4. 弹出框
概念： 弹出框是一个小浮层，用于存放非主要信息：
1）使用bootstrap设置工具提示：
- 为元素添加 data-toggle="popover" 以添加显示弹出框的功能。
- 为元素添加 data-placement="right" 设置弹出框出现的位置。
- 为元素添加 data-content="xxx"：设置弹出框的内容。
2）JQ激活：$(() => $('[data-toggle="popover"]').popover());
- 使用jquery设置工具提示：对元素调用 popover() 方法，参数是一个JSON：
- animation：默认为 true，表示使用弹出框。
- placement：默认为 "top"，表示弹出框默认出现在元素正上方。
- trigger：默认为 click，表示点击元素时候触发弹出框。
- delay：默认无延迟，值为JSON，可设置 show 和 hide 效果的延迟毫秒数。
- title：设置弹出框内容的标题。
- content：设置弹出框内容的正文。
5. 折叠
概念： 折叠由触发器和内容容器两部分组成：
1)触发器：建议使用 <a> 或 <button> 布局：
- 为触发器添加 data-toggle="collapse" 以设置折叠功能。
- 为触发器添加 data-target 绑定折叠内容ID（<a> 标签使用 href 绑定）。
2)折叠内容容器：由 .collapse 修饰，其ID值要对应触发器。
3)面板组折叠：允许在面板组中使用折叠效果：
- 将多个面板放入 .panel-group 面板组容器中，并设置ID，如 items。
- 在每个面板标题中设置触发器，额外使用 data-parent="#items" 绑定面板组容器。
- 在每个面板中设置对应的折叠内容容器，额外添加 panel-collapse 以适配。
- 首选面板的折叠内容若想默认展开，添加 in 即可。
6. 图片轮播
概念： 图片轮播插件由轮播容器，圆点标记，轮播内容和左右按钮组成：
1)轮播容器：由 carousel slide 修饰。
2)圆点标记容器：每个圆点指向一张图片，由有序或无序列表布局：
- <ol> / <ul> 由 carousel-indicators 修饰。
- <li> 使用 data-target 属性来绑定轮播容器。
- <li> 使用 data-slide-to 属性来绑定对应的轮播图片，值从0开始。
- <li> 添加 active 可以设置为首选项。
3)轮播内容容器：包含轮播图片和文字描述的内容项列表：
- .carousel-inner 容器是最外层容器，内嵌多个 .item 子容器。
- .item 子容器内嵌轮播图片对象和 .carousel-caption 文字描述容器。
4)左右控制按钮：均由 .carousel-control 修饰，并使用 href 属性绑定轮播容器：
- 左箭头添加 .left 和 data-slide="prev" 属性完成上翻功能。
- 右箭头添加 .right 和 data-slide="next" 属性完成下翻功能。
以上就是动力节点在线为大家带来的6大Bootstrap框架简介，想要使用Bootstrap框架并安装插件的小伙伴可以去动力节点在线官网下载相关插件和免费学习视频课程。
微信登录
手机号登录
代码小兵652
京公网安备 11030102010736号