-
通过示例，我们可以看出以下几点： 使用 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：********，互相学习，共同进步！】查看全部
-
@图片轮播--声明式触轮播图的播放（三） 除了data-ride="carousel"、data-slide、data-slide-to 以外，轮播组件还支持其他三个自定义属性： 属性名称——类型——默认值——描述 data-interval——number——5000——幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环。 data-pause——string——hover——默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放。 data-wrap——布尔值——true——轮播是否持续循环（从最后一张到第一张）。 如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。 <div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000"> ... </div> 注意：上面三个属性可以在容器元素上定义，也可以在标示符（或左右控制链接）上定义，但是后者定义的优先级比较高。 【温馨提示：Java、Jsp、Android、JS等编程爱好者可以联系Q：********，互相学习，共同进步！】查看全部
-
@图片轮播--声明式触轮播图的播放（二） 代码： <div id="slidershow" class="carousel" data-ride="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> ... </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> … </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> 在这里需要注意可以为 #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。 <div id="slidershow" class="carousel slide" data-ride="carousel"> ... </div> 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@图片轮播--声明式触轮播图的播放（一） 触发轮播图的播放方法也有两种，一种是声明式，另外一种是JavaScript方式。首先来看声明式方法。 声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。其主要包括以下几种： .data-ride 属性：取值 carousel，并且将其定义在 carousel 上。（自动播放） .data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。 .data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。 .data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。 代码： ... 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
举报
0/150
提交
取消