-
在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。查看全部
-
模态弹出框--模态弹出窗的使用（JavaScript触发） JavaScript触发方法 除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件，来触发。比如说给一个按钮一个单击事件，然后触发模态弹出窗。 JavaScript触发的弹出窗代码： $(function(){ $(".btn").click(function(){ $("#mymodal").modal(); }); });查看全部
-
模态弹出框--触发模态弹出窗2种方法 方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）。例如： <!-- 触发模态弹出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态弹出窗内容 --> </div> </div> </div> 注意以下事项： 1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)； 2、data-toggle可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。 方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性，如： <!-- 触发模态弹出窗的元素 --> <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模态弹出窗内容 --> </div> </div> </div>查看全部
-
模态弹出框--实现原理解析（一） 实现原理解析： bootstrap中的“模态弹出框”有以下几个特点： 1、模态弹出窗是固定在浏览器中的。 2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。 3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。查看全部
-
模态弹出框--结构分析 Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分： ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮 ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容 ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮查看全部
-
transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。 默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果： ☑ 模态弹出窗（Modal）的滑动和渐变效果； ☑ 选项卡（Tab）的渐变效果； ☑ 警告框（Alert）的渐变效果； ☑ 图片轮播（Carousel）的滑动效果。查看全部
-
Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。 一次性导入： Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。 具体使用如下（或见右侧代码编辑器28-29行）： <!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） --> <script src="js/bootstrap.min.js"></script> 特别声明：jQuery版本库也可以加载你本地的jQuery版本。 单独导入： 为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是： ☑ 动画过渡（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”查看全部
-
面板--彩色面板 在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板： ☑ panel-primary：重点蓝 ☑ panel-success：成功绿 ☑ panel-info:信息蓝 ☑ panel-warning：警告黄 ☑ panel-danger：危险红 使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名查看全部
-
面板--带有头和尾的面板 基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果： ☑ panel-heading：用来设置面板头部样式 ☑ panel-footer：用来设置面板尾部样式 <div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者：大漠</div> </div>查看全部
-
面板--基础面板 基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容： <div class="panel panel-default"> <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div> </div>查看全部
-
列表组--多彩列表组 列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项。 ☑ list-group-item-success：成功，背景色绿色 ☑ list-group-item-info：信息，背景色蓝色 ☑ list-group-item-warning：警告，背景色为黄色 ☑ list-group-item-danger：错误，背景色为红色 如果你想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名查看全部
-
列表组--列表项的状态设置 Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似，在列表组中只需要在对应的列表项中添加类名： ☑ active：表示当前状态 ☑ disabled：表示禁用状态查看全部
-
列表组--自定义列表组 Bootstrap框加在链接列表组的基础上新增了两个样式： ☑ list-group-item-heading：用来定义列表项头部样式 ☑ list-group-item-text：用来定义列表项主要内容 这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容查看全部
-
列表组--带链接的列表组 在Bootstrap框架中，还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果查看全部
-
列表组--带徽章的列表组 带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”查看全部
举报
0/150
提交
取消