-
滚动监控器--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以内的话，就高一片面前显示所对应的菜单项。查看全部
-
使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单。 $(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"); })查看全部
-
不错查看全部
-
通过示例，我们可以看出以下几点： 使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区； 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果； 每个 panel 里的触发元素都要指定data-parent属性； data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符； 触发元素需要指定 data-toggle，并且值为 collapse； 触发元素都要指定 data-target属性； data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。查看全部
-
使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区； 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果； 每个 panel 里的触发元素都要指定data-parent属性； data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符； 触发元素需要指定 data-toggle，并且值为 collapse； 触发元素都要指定 data-target属性； data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。查看全部
-
<button class="btn btn-primary" type="button">点击我</button> <div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -- [ 收起全文 ]查看全部
-
测试截图功能查看全部
-
<body> <button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); }); </script> </body>查看全部
-
<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> <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li> <li><a href="#security" role="tab" data-toggle="tab">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane active" id="bulletin">公告内容面板</div> <div class="tab-pane" id="rule">规则内容面板</div> <div class="tab-pane" id="forum">论坛内容面板</div> <div class="tab-pane" id="security">安全内容面板</div> <div class="tab-pane" id="welfare">公益内容面板</div> </div>查看全部
-
什么东西查看全部
-
JavaScript触发的弹出窗代码： <script> $(function(){ $(".btn").click(function(){ $("#themodal").modal(); }); }); </script>查看全部
-
@自定义Bootstrap，自定义Bootstrap框架主要有两种方式来实现： -使用 CSS 预处理器语言 -使用在线自定义设置 1.使用 CSS 预处理器语言 在学习 Bootstrap 框架的使用时，可以看到 Bootstrap 框架中很多组件的 UI 效果都有对应的 LESS 版本和 Sass 版本源码。其实需要自定义 Bootstrap 框架，完全可以在这些组件的 LESS 或 Sass 源码文件上进行修改，然后将修改好的源码重新编译出 bootstrap.css 文件，从而实现适合自己的 UI 界面风格。 使用 CSS 预处理器语言来重新定义 Bootstrap 框架有一个前提条件，那就是开发人员会使用 LESS 或 Sass 预处理器语言，否则要在此基础上实现 Bootstrap 框架自定义不是一件容易的事情。不过大家不用担心，就算你不懂 LESS 或 Sass 也不用怕，可以通过在线自定义设置来实现自定义 Bootstrap 框架。 2.使用在线自定义设置 在Bootstrap框架的官网为大家提供了一个在线自定义 Bootstrap 框架的配置页面 http://getbootstrap.com/customize/ ，可以通过这里进行配置。 在线自定义设置主要包括三个部分： -Bootstrap 组件 -Bootstrap 插件 -Bootstrap 的 LESS 版本变量设置 我们只需要根据自己的需求设置完成之后，点击最底部的下载按钮就可以得到自定义后的 Bootstrap 框架。 @在线自定义设置--Bootstrap组件 在 Bootstrap 组件设置这一部分，提供了公共样式（Common CSS），UI 组件(Components)和 JavaScript 组件(JavaScript components)三个部分。 每个部分都有对应的列表清单，在自定义配置时候，可以根据自己需求进行选择，比如，我自己的 Bootstrap 框架中，不需要打印样式、code、Glyphicons、等等，那么只需要不选中它们。 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@固定定位--声明式触发固定定位，Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数： 1、data-spy：取值 affix，表示元素固定不变的。 2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。 data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。 data-offset-bottom 刚好与 data-offset-top 相反。 具体使用如下： <div data-spy="affix" data-offset="90">affix元素</div> 分开设置 data-offset 值方式： <div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div> 简单的示例： <nav class="navbar navbar-default" role="navigation"> … </nav> <div class="container"> <div class="row"> <div class="col-md-3" id="sidebarMenu"> <ul class="navnav-pills nav-stacked" data-spy="affix" data-offset-top="20"> … </ul> </div> <div class="col-md-9"> … </div> </div> </div> 注意，在 body 要声明滚动监控： <body data-spy="scroll" data-target="sidebarMenu">查看全部
-
@固定定位（Affix），插件文件：源文件 affix.js。Affix 一词不好翻译，根据其效果，我将其译为固定定位。Affix 插件是从 Bootstrap V2.1 版本新增的一个插件，其主要功能就是通过插件给某个元素（需要固定的元素）添加或删除 affix 类名，实现元素在浏览器窗口中固定（元素带有 affix 类名固定）和不固定（元素不带有 affix 类名）的效果。 Affix 效果常见的有以下三种： -顶部固定 -侧边栏固定 -底部固定 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@图片轮播--JavaScript触发方法（四） 默认情况之下，如果 carousel 容器上定义了 data-ride="carousel" 属性，页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下： $(".carousel").carousel(); 也可以通过容器的 ID 来指定： $("#slidershow").carousel(); 在 carousel() 方法中可以设置具体的参数，如： 属性名称——类型——默认值——描述 interval——number——5000——幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环 pause——string——hover——默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放 wrap——布尔值——true——轮播是否持续循环 实际上，当我们给carousel()方法配置参数之后，轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下： .carousel("cycle")：从左向右循环播放； .carousel("pause")：停止循环播放； .carousel("number")：循环到指定的帧，下标从0开始，类似数组； .carousel("prev")：返回到上一帧； .carousel("next")：下一帧 代码： $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); }); 【温馨提示：Java、Jsp、Android、JS等编程爱好者可以联系Q：********，互相学习，共同进步！】查看全部
举报
0/150
提交
取消