-
除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗查看全部
-
fade,增加过度效果查看全部
-
方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）。 方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性。查看全部
-
在添加modal-lg/sm的父元素上也要添加bs-example-modal-lg/sm，不然模态弹出窗将无法显示查看全部
-
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>查看全部
-
动画过渡（Transitions）:对应的插件文件“transition.js” 模态弹窗（Modal）:对应的插件文件“modal.js” 下拉菜单（Dropdown）：对应的插件文件“dropdown.js” 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js” 选项卡（Tab）：对应的插件文件“tab.js” 提示框（Tooltips）：对应的插件文件“tooltop.js” 弹出框（Popover）：对应的插件文件“popover.js” 警告框（Alert）：对应的插件文件“alert.js” 按钮（Buttons）：对应的插件文件“button.js” 折叠/手风琴（Collapse）：对应的插件文件“collapse.js” 图片轮播Carousel：对应的插件文件“carousel.js” 自动定位浮标Affix：对应的插件文件“affix.js”查看全部
-
Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分： 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮查看全部
-
动画过渡（Transitions）:对应的插件文件“transition.js” 模态弹窗（Modal）:对应的插件文件“modal.js” 下拉菜单（Dropdown）：对应的插件文件“dropdown.js” 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js” 选项卡（Tab）：对应的插件文件“tab.js” 提示框（Tooltips）：对应的插件文件“tooltop.js” 弹出框（Popover）：对应的插件文件“popover.js” 警告框（Alert）：对应的插件文件“alert.js” 按钮（Buttons）：对应的插件文件“button.js” 折叠/手风琴（Collapse）：对应的插件文件“collapse.js” 图片轮播Carousel：对应的插件文件“carousel.js” 自动定位浮标Affix：对应的插件文件“affix.js” 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式（未被操作) .btn-success 表示成功的动作 .btn-info 该样式可用于要弹出信息的按钮 .btn-warning 表示需要谨慎操作的按钮 .btn-danger 表示一个危险动作的按钮操作 .btn-link 让按钮看起来像个链接 (仍然保留按钮行为) .btn-lg 制作一个大按钮 .btn-sm 制作一个小按钮 .btn-xs 制作一个超小按钮 .btn-block 块级按钮(拉伸至父元素100%的宽度) .active 按钮被点击 .disabled查看全部
-
Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。 最简单的触发方式如下： $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如： $(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); });查看全部
-
因为 div.carousel-inner 设置了 width:100%，所以需要在 div.carousel 外用一个设置了宽度的 div 容器包裹。这个问题花了好长时间。。查看全部
-
自定义Bootstrap 使用 Bootstrap 框架的不方便： 很多时候在创建 Web 页面或应用的时，需要自己独立的 UI 界面效果，此时仅仅使用 Bootstrap 框架并不能满足我们自身 UI 的需求，也造成要写很多的样式代码来覆盖 Bootstrap 框架提供的样式代码。如此一来，这也失去使用 Bootstrap 框架的意义。 很多同学会问，我要使用Bootstrap框架，而且还要让其出来的 UI 界面效果能和满足自己的UI设计效果。 解决方法： 在 Bootstrap 框架中提供多种方式来自定义 Bootstrap，让 Bootstrap 框架适合自己的需求，接下来，简单的向大家介绍怎样自定义 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 框架。查看全部
-
<div class="col-xs-3" id="sidebarMenu"> 加了id="sidebarMenu"后就有了对应的选中状态查看全部
-
按钮插件--JavaScript用法 除了上面介绍的属性声明使用方法之外，按钮插件还可以通过调用button函数，然后给button函数传入具体的参数，实现不同的效果。而其中有两个参数是固定不变的，即toggle和reset。其他的都可以随意定义： 1、切换按钮状态（得到焦点）： $("#mybutton").button("toggle") 2、重新恢复按钮： $("#mybutton").button("reset") 如下代码： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); }); }); }); 3、任意参数： $("#mybutton").button("任意字符参数名") 上面代码作用：替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”。如下代码： html: <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >确认</button> js代码： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('complete'); }); }); });查看全部
-
注意，这里自定义属性是 data-toggle="button"，而不是 data-toggle="buttons"。查看全部
-
mark查看全部
举报
0/150
提交
取消