文章分类 -  玩转Bootstrap（JS插件篇）

第1章 模态弹出框 --1.9模态弹出框--模态弹出窗的使用（data-参数说明）
摘要：除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示： 阅读全文
posted @ 2017-02-19 23:12 wolf child 阅读(154) 评论(0) 推荐(0)
第1章 模态弹出框 --1.7模态弹出框--触发模态弹出窗2种方法
摘要：众所周知，模态弹出窗在页面加载完成时，是被隐藏在页面中的，只有通过一定的动作（事件）才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种，接下来分别来介绍这2种触发模态弹出窗的使用方法。 声明式触发方法： 方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和da 阅读全文
posted @ 2017-02-19 22:55 wolf child 阅读(180) 评论(0) 推荐(0)
第1章 模态弹出框 --1.6模态弹出框--实现原理解析（二）
摘要：蒙板样式实现： 大家或许注意到了，在做模态弹出窗时，底部常常会有一个透明的黑色蒙层效果，如下图所示： 在Bootstrap框架中为模态弹出窗也添加了一个这样的蒙层样式“modal-backdrop”，只不过他默认情况下是全屏黑色的： 同样，给其添加了一个过渡动画，从fade到in，把opacity值 阅读全文
posted @ 2017-02-19 22:48 wolf child 阅读(213) 评论(0) 推荐(0)
第1章 模态弹出框 --1.5模态弹出框--实现原理解析（一）
摘要：实现原理解析： bootstrap中的“模态弹出框”有以下几个特点： 1、模态弹出窗是固定在浏览器中的。 2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。 3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。 固定在浏览器(源代码)实现 阅读全文
posted @ 2017-02-19 22:43 wolf child 阅读(105) 评论(0) 推荐(0)
第1章 模态弹出框 --1.4模态弹出框--结构分析
摘要：Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分： ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮 ☑  阅读全文
posted @ 2017-02-19 22:29 wolf child 阅读(158) 评论(0) 推荐(0)
第1章 模态弹出框 --1.3模态弹出框（Modals）
摘要：模态弹出框（Modals） 这一小节我们先来讲解一个“模态弹出框”，插件的源文件：modal.js。 右侧代码编辑器（30行）就是单独引入 bootstrap 中发布出的“modal.js”文件。 样式代码： ☑ LESS版本：modals.less ☑ Sass版本：_modals.scss ☑  阅读全文
posted @ 2017-02-19 22:26 wolf child 阅读(146) 评论(0) 推荐(0)
第1章 模态弹出框 ---1.2动画过渡（Transitions）
摘要：动画过渡（Transitions） 这一小节我们先来讲“动画过渡（Transitions）”这个插件的使用，源文件：transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法： ☑ 调用统一编译的bootstrap.js； ☑ 调用单一的过渡动画 阅读全文
posted @ 2017-02-19 22:15 wolf child 阅读(198) 评论(0) 推荐(0)
第1章 模态弹出框 --1.1导入JavaScript插件
摘要：导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScri 阅读全文
posted @ 2017-02-19 22:08 wolf child 阅读(102) 评论(0) 推荐(0)