这篇文章将为大家详细讲解有关引导中有哪些内置插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
引导内置插件有:1,过渡效果插件;2、模态框插件;3,下拉菜单插件;4、滚动监听插件;5、标签页插件;6、提示工具插件;7、弹出框插件;8日警告框插件;9日按钮插件;10折叠插件;11轮播插件;12日附加导航插件。
引用>本教程操作环境:Windows7多系统,bootsrap3.3.7版,戴尔G3电脑
<强>引导内置插件有:强>
<李>
引导过渡效果
李> <李>引导模态框
李> <李>引导下拉菜单
李> <李>引导滚动监听
李> <李>引导标签页
李> <李>引导提示工具
李> <李>引导弹出框
李> <李>引导警告框
李> <李>引导按钮
李> <李>引导折叠
李> <李>引导轮播
李> <李>引导附加导航
李>
![]()
<强>引导过渡效果(过渡)插件强>
过渡效果(过渡)插件提供了简单的过渡效果。
如果您想要单独引用该插件的功能,那么除了其他的JS文件,您还需要引用过渡。js。或者,可以引用引导。js或压缩版的bootstrap.min.js。
引用>过渡。js是transitionEnd事件和CSS过渡效果模拟器的基本帮助器类。它被其他插件用来检查CSS过渡效果支持,并用来获取过渡效果。
<>强引导模态框(模态)插件强>
模态框(模态)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息,交互等。
![]()
如果您想要单独引用该插件的功能,那么您需要引用模态。js。或者,可以引用引导。js或压缩版的bootstrap.min。js .
引用><强>用法:强>
您可以切换模态框(模态)插件的隐藏内容:
<李>
通过数据属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle=癿odal",同时设置数据目标=? identifier"或https://www.yisu.com/zixun/href=" #标识符”来指定要切换的特定的模态框(带有id=氨晔斗?。
李> <李>通过JavaScript:使用这种技术,您可以通过简单的一行JavaScript来调用带有id=癷dentifier"的模态框:
李>美元(& # 39;#标识符# 39;).modal(选项)<强>引导下拉菜单(下拉)插件强>
使用下拉菜单(下拉)插件,您可以向任何组件(比如导航栏,标签页,胶囊式导航菜单,按钮等)添加下拉菜单。
如果您想要单独引用该插件的功能,那么您需要引用下拉。js。或者引用引导。js或压缩版的bootstrap.min。js .
![]()
<强>引导滚动监听(Scrollspy)插件强>
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加.active类。
<强>用法强>
您可以向顶部导航添加滚动监听行为:
通过数据属性:向您想要监听的元素(通常是身体)添加data-spy=皊croll",然后添加带有引导.nav组件的父元素的ID或类的属性数据目标。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的ID的元素存在。
& lt; body data-spy=皊croll",数据目标=?navbar-example"比; … & lt; div 类=皀avbar-example"祝辞 ,,,& lt; ul 类=皀av nav-tabs"比; ,,,,,,,… ,,,& lt;/ul> & lt;/div> … & lt;/body>通过JavaScript:您可以通过JavaScript调用滚动监听,选取要监听的元素,然后调用.scrollspy()函数:
美元(& # 39;身体# 39;).scrollspy({,目标:& # 39;.navbar-example& # 39;,})<强>引导标签页(选项卡)插件强>
通过结合一些数据属性,您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
![]()
引导中有哪些内置插件