-
@弹出框--提示框和弹出框的异同，从之前的学习可知，弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同，只不过在其基础上增加了一个 data-content 属性，用来设置弹出框的内容。其实两插件也有略微的不同： -提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click -提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content) *两个插件的显示模板不同： 提示框tooltip的模板： <div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div> 弹出框popover的模板： <div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div> 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@弹出框--自定义结构属性 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@弹出框--触发弹出框的方法，Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。 最简单的触发方式如下： html代码： <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="提示框居左" data-content="我是弹出框的内容"> 猛击我吧 </button> js代码： $(function(){ $('[data-toggle="popover"]').popover(); }); 注意：上面这种方法注意要使用 data- 设置弹出框的属性。 使用JS设置参数： html代码： <button type="button" class="btn btn-default" id="myPopover"> 猛击我吧 </button> 除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些data属性，如： $(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"我是弹出框的内容", placement:"top" }); }); 注意：调用popover的时候，options的参数与声明式选择里以data-开头的自定义属性一样。都可以在options里设置，以便制作出各式各样的效果。 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
Ps1：弹出框（Popover），插件源文件：popover.js。弹出框(Popover)仅从外表上看，和前面介绍的提示框（Tooltip）长得差不多；不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。 Ps2：弹出框--弹出框的结构，简单回忆一下，在制作提示框（tooltip）时，可以使用<button>或者<a>标签元素，而且通过 data- 属性来声明提示框的信息，如下所示： <button type="button" class="btnbtn-default" data-toggle="tooltip" data-placement="left" data-original-title="我是一个提示框tooltip"> 鼠标移上来 </button> 而弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用<button>或者<a>标签来制作，如下： <a href="#" class="btnbtn-default" data-container="body" data-placement="right" data-toggle="popover" title="Bootstrap弹出框标题" data-content="Bootstrap弹出框的内容"> 猛击我吧 </a> 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@提示框--JS设置参数方法 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@提示框--其他的自定义属性 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
Ps1：提示框(Tooltip)，插件源文件：tooltip.js。 Ps2：提示框--结构，BS框架中的tooltip的插件提供了四种不同的风格：提示框居左、顶部、底部、居右。 在BS框架中的提示框，结构非常简单，常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框，他们都有一个共性： -通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。 -通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。 -还有一个最重要的参数不可缺少，data-toggle="tooltip"。 代码： <button type="button" class="btnbtn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左"> 提示框居左 </button> 需要特别注意的是： 1、如果同时设置了 data-original-title 和 title 定义提示信息，那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时，才会取 title 的值做为提示信息的内容。 2、BS框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JS的代码触发。 Ps3：提示框--JS触发提示框方法，最简单的触发方式如下： $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如： $(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框", placement:'top' }); });查看全部
-
@选项卡--胶囊式选项卡（nav-pills），在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。 代码： <!-- 选项卡组件（菜单项nav-pills）--> <ul id="myTab" class="nav nav-pills" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li> <li><a href="#rule" role="tab" data-toggle="pill">规则</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告内容面板</div> <div class="tab-pane fade" id="rule">规则内容面板</div> </div> 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
Ps1：选项卡--为选择卡添加fade样式，为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。 <!-- 选项卡组件（菜单项nav-tabs）--> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告内容面板</div> <div class="tab-pane fade" id="rule">规则内容面板</div> </div> Ps2：选项卡--JavaScript触发方法，除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。 调用方法:在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用： $(function(){ $("#myTab a").click(function(e){ e.preventDefault();//除去“href=‘#’”的效果 $(this).tab("show"); }); }) 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@选项卡--触发切换效果，同样的，选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求： 1、选项卡导航链接中要设置 data-toggle="tab" 2、并且设置 data-target="对应内容面板的选择符(一般是ID)"; -如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)" -主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。 代码： <!-- 选项卡组件（菜单项nav-tabs）--> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告内容面板</div> <div class="tab-pane fade" id="rule">规则内容面板</div> </div> 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
Ps1：选项卡（Tabs），插件源文件：tab.js。Bootstrap框架中的选项卡主要有两部分内容组成： -选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs） -底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示 Ps2：选项卡--选项卡的结构，一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。拿下面的示例来做演示。其HTML结构如下： <!-- 选项卡组件（菜单项nav-tabs）--> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab">公告</a></li> <li><a href="#rule" role="tab">规则</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告内容面板</div> <div class="tab-pane fade" id="rule">规则内容面板</div> </div> 关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
Ps1：滚动监控器--在body中加监控，除了这种方法之外，还可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部。如下所示： <body data-spy="scroll" data-target="#navbar-menu"> <div class="navbar navbar-default navbar-fixed-top" id="navbar-menu"> </div> <h3 id="blog">Blog</h3> <p>…</p> </body> 注意：导航条必须设置为顶部固定样式（navbar-fixed-top）。 Ps2：滚动监控器--JavaScript方法触发滚动监控器，在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可。比如下面的结构： <nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation"> … </nav> <div class="scrollspy" id="scrollspy"> … </div> JS触发可以这样写： $(function(){ $("#scrollspy").scrollspy({ target: "#navbar-menu" }); }) Bootstrap的滚动监控还提供了一个方法scrollspy("refresh")。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法： $(function(){ $("[data-spy='scroll']").each(function(){ var $spy=$(this).scrollspy("refresh"); }) }) 需要注意的是，这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项。查看全部
-
Ps1：滚动监控器，插件源文件：scrollspy.js。 1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。 2、用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示。 分析：这是因为该插件可以自动检测滚动条到达哪个位置，然后在需要高亮的菜单元素上加了一个“active”样式。 Ps2：滚动监控器--滚动监控器的设计，使用步骤： 第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。 第二步：设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控。 第三步：设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target="#navbar-menu"”属性（这个属性值要与前面的nav标签的id名称保持一致） 第四步：为监控对象定义样式，设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）。 Ps3：滚动监控器--声明属性触发滚动监控，为监控对象设置被监控的data属性：data-spy="scroll"，指定监控的导航条：data-target="#navbar-menu"。同时定义监控过程中滚动条偏移位置data-offset="60"。代码如下： <div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60"> … </div> 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
Ps1：下拉菜单--属性声明式方法（二)，被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown"。 简单的说，要制作下拉菜单，其结构基本如下： <div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜单触发器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> 如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用data-target="#"来替代href="#"： <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> Ps2：下拉菜单--JavaScript触发方法，JS代码： $(function(){ $(".dropdown-toggle").dropdown(); }) 还可以使用参数“toggle”。当下拉菜单隐藏时，调用dropdown(“toggle”)方法可以显示下拉菜单，反之，如果下拉菜单显示时，调用dropdown(“toggle”)方法可以让下拉菜单隐藏。 $(function(){ $(".dropdown-toggle").dropdown("toggle"); }) 不过使用该参数，每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用示例中不带参数的方法。就算你需要使用参数“toggle”，也建议使用jQuery的one方法（推荐）： $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); })查看全部
-
Ps1：下拉菜单（Dropdown），插件对应的源文件：dropdown.js。 Ps2：下拉菜单--属性声明式方法（一），效果代码： -导航条： <div class="navbar navbar-default" id="navmenu"> <a href="##" class="navbar-brand">W3cplus</a> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial"> <li role="presentation"><a href="##">CSS3</a></li> </ul> </li> <li><a href="##">前端</a></li> </ul> </div> -胶囊式导航： <ul class="nav nav-pills"> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial"> <li role="presentation"><a href="##">CSS3</a></li> </ul> </li> <li class="active"><a href="##">前端</a></li> </ul>查看全部
举报
0/150
提交
取消