-
选项卡--JavaScript触发方法 除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。 调用方法: 在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用： $(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })查看全部
-
选项卡--胶囊式选项卡（nav-pills） 在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。 下面的示例是将上面的 nav-tabs 换成 nav-pills： <!-- 选项卡组件（菜单项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> <li><a href="#forum" role="tab" data-toggle="pill">论坛</a></li> <li><a href="#security" role="tab" data-toggle="pill">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li> </ul>查看全部
-
项卡--为选择卡添加fade样式 为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。 在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。如下面的示例所示: <!-- 选项卡面板 --> <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 class="tab-pane fade" id="forum">论坛内容面板</div> <div class="tab-pane fade" id="security">安全内容面板</div> <div class="tab-pane fade" id="welfare">公益内容面板</div> </div>查看全部
-
选项卡--触发切换效果 同样的，选项卡也定义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">公告</a></li> <li><a href="#rule" role="tab">规则</a></li> <li><a href="#forum" role="tab">论坛</a></li> <li><a href="#security" role="tab">安全</a></li> <li><a href="#welfare" 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 class="tab-pane fade" id="forum">论坛内容面板</div> <div class="tab-pane fade" id="security">安全内容面板</div> <div class="tab-pane fade" id="welfare">公益内容面板</div> </div> 关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。查看全部
-
选项卡（Tabs） Bootstrap框架中的选项卡主要有两部分组成： 1.选项卡组件（也就是菜单组件），对应的是Bootstrap的nav-tabs。 2.底部可以切换到选项卡面板，在Bootstrap中通常tab-pane来表示。查看全部
-
滚动监听器 -- JavaScript方法触动滚动监听器 滚动监控器--JavaScript方法触发滚动监控器 在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可。比如下面的结构： <nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation"> … </nav> <div class="scrollspy" id="scrollspy"> … </div> JavaScript触发可以这样写： $(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以内的话，就高一片面前显示所对应的菜单项查看全部
-
滚动监控器--在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）。查看全部
-
滚动监控器 -- 声明属性触发滚动监控 为监控对象设置被监控的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>查看全部
-
滚动监控器--滚动监控器的设计: 第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的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大小（设置高度目的是为了产生垂直滚动条）。查看全部
-
滚动监控器 滚动监控器是Bootstrap提供的非常实用的JavaScript插件，被广泛应用到Web开发中。其表现形式是： 1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。 2、用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示。查看全部
-
下拉菜单--JavaScript触发方法 和模态弹出窗一样，Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式. <script> $(function(){ $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); }) }) </script>查看全部
-
下拉菜单--属性声明式方法（二) <!--代码任务部分--> <ul class="nav nav-pills"> <li><a href="##">教程</a></li> <li class="active"><a href="##">前端论坛</a></li> <li class="dropdown"><a href="##" data-toggle="dropdown" role="button" id="tutorial">关于我们<span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial"> <li><a href="##">团队成长</a></li> <li><a href="##">leader成员</a></li> <li><a href="##">活动</a></li> </ul> </li> </ul>查看全部
-
下拉菜单--属性声明式方法（一） 属性声明式方法： 1.一般下拉菜单都是出现在导航条中 2.在胶囊式导航中也具有下拉菜单查看全部
-
下拉菜单（Dropdown） 和模态弹出窗一样，触发下拉菜单方式有两种，一种是属性声明式，另一种是JavaScript方法。查看全部
举报
0/150
提交
取消