歪脖先生的博客

分享Web知识,交流Web经验

我的作品《揭秘 CSS》已经开源,欢迎阅读、交流、分享

    《揭秘 CSS》将整个 CSS 体系作为一个有机整体,系统介绍整个 CSS 体系,全面涵盖 CSS1、CSS2.1、CSS3。内容由浅入深,从基础讲起,逐步深入,让零基础的 web前端工程师从入门到完全精通CSS。        《揭秘 CSS》采用创意共享4.0许可证,只要保持原作者署...

2018-02-27 22:03:16

阅读数 241

评论数 0

Bootstrap3 模态对话框的事件

模态对话框的事件 Bootstrap为模态对话框插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应。这些事件及含义见表 4‑2。 表 4‑2 modal插件的事件及含义 事件 含义 show.bs.modal show方法调用之后,立即触发该事件。...

2019-05-26 15:44:14

阅读数 1

评论数 0

Bootstrap3 模态对话框的方法

模态对话框的方法 1、.modal(options) 使用一个可选的对象参数 options调用模态对话框。如: $('#myModal').modal({ backdrop:false, keyboard:false }) 2、.modal('toggle') 手动打开...

2019-05-26 15:43:35

阅读数 1

评论数 0

Bootstrap3 模态对话框的选项

模态对话框的选项 Bootstrap为模态对话框提供了 4 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。见表 4‑1: 表 4‑1 modal插件的选项 名称 类型 默认值 说明 backdrop boolean true ...

2019-05-26 15:43:01

阅读数 1

评论数 0

Bootstrap3 模态对话框的调用方式

模态对话框的调用方式 可以通过 data 属性或 JavaScript,让模态框动态显示或隐藏。Bootstrap会为<body>元素添加.modal-open类来覆盖页面默认的滚动行为,并且还会自动生成一个.modal-backdrop元素,用于在模态框的外面提供一...

2019-05-26 15:42:07

阅读数 1

评论数 0

Bootstrap3 模态对话框的尺寸

模态对话框的尺寸 Bootstrap为模态框提供了两个尺寸类 .modal-lg和.modal-sm,可以为.modal-dialog增加一个样式类,来调整模态框的尺寸。 如果模态框中的内容比较多,你希望比默认尺寸大一些,使用 .modal-lg 类;如果模态框中的内容比较少,你希望比默认尺寸...

2019-05-26 15:41:28

阅读数 1

评论数 0

Bootstrap3 动态模态对话框

动态模态对话框 如果你希望在页面初始状态时不显示模态框,只有在用户点击某个按钮时,再打开隐藏的模态对话框,这也很简单。 首先,在页面上添加一个触发按钮。如: <buttonclass="btn btn-primary"data-toggle=&quo...

2019-05-26 15:40:44

阅读数 1

评论数 0

Bootstrap3 静态模态对话框

模态对话框 JavaScript内置了 3 种对话框:alert()、prompt()、confirm()。alert() 只是一个简单的提示对话框,prompt() 可以接受用户输入的信息,confirm() 允许用户执行选择性操作。当弹出一个对话框时,浏览器会停止解析页面,并中断脚本执行,直...

2019-05-26 15:40:08

阅读数 1

评论数 0

Bootstrap3 过渡插件

使用过渡效果 Bootstrap默认给各个组件都提供了基本的过渡效果。如果你是使用bootstrap.js或bootstrap.min.js一次性引入所有插件,这些组件就已经默认拥有过渡效果。如果你是单个引入组件,则要先引入transition.js,再引入相应插件的 JS 文件。 Boots...

2019-05-26 15:37:18

阅读数 1

评论数 0

Bootstrap3 插件的版本号

插件的版本号 Bootstrap中每个插件的版本号,都可以通过插件的构造函数上的VERSION属性获取到。例如,获取工具提示框(tooltip)插件的版本号: $.fn.tooltip.Constructor.VERSION // => "3.3.7" 关于...

2019-05-25 17:52:52

阅读数 10

评论数 0

Bootstrap3 插件的事件

插件的事件 Bootstrap 为大部分插件所具有的动作提供了自定义事件,这些事件一般都有动词原形和过去分词两种命名形式。动词原形形式的事件(如,show)在事件开始时触发,过去分词形式的事件(如,shown)在动作执行完毕后触发。 所有动词原形形式的事件,都提供了preventDefault...

2019-05-25 17:52:20

阅读数 10

评论数 0

Bootstrap3 插件的选项

插件的选项 为了对插件提供更多的控制,Bootstrap为插件提供了一些选项。所有的插件的所有选项都可以通过 data 属性或JavaScript进行设置。 如果使用 data 属性,则要将选项名称放在 data- 的后面。比如,模态对话框的 keyboard 属性,就要写成类似于 data-...

2019-05-25 17:51:48

阅读数 11

评论数 0

Bootstrap3 如何防止插件冲突

插件防止冲突 某些时候,可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下,命名冲突随时可能发生。如果不幸发生了这种情况,你可以通过调用插件的.noConflict方法恢复其原始值,Bootstrap的所有插件均支持 noConflict 功能。 比如,在同一个页面中...

2019-05-25 17:51:15

阅读数 10

评论数 0

Bootstrap3 插件的调用方式

插件的调用方式 Bootstrap的所有插件都支持两种调用方式:一种是 data 属性API调用,一种是JavaScript API调用。可以根据需要选择任意一种调用方式。 1、data属性API调用 使用 data 属性API调用,你只需按照Bootstrap的约定,为HTML元素添加相应...

2019-05-25 17:50:26

阅读数 10

评论数 0

Bootstrap3 引入插件的方法

引入插件 Bootstrap 插件有两种引入方式: 一种是单个引入,一种是一次性全部引入。可以根据需要选择任意一种引入方式。 1)单个引入 Bootstrap为每个插件提供了一个独立的JavaScript 文件,你也可以有选择地只引入所需要的某个或某些插件。如,单独引入模态对话框插件: &...

2019-05-25 17:49:50

阅读数 10

评论数 0

Bootstrap3 插件的原理

插件的原理 在JavaScript中,在定义函数的时候,如果在函数体的后面加一对小括号,这个函数就会立即执行。如,以下代码定义了一个匿名函数,并立即执行: function(){/* code */}(); 由于它本身就是一个函数,因此可以接受参数。如,以下代码为匿名函数传入一个参数 ...

2019-05-25 17:48:34

阅读数 10

评论数 0

Bootstrap Well 组件

Well Well 就是一个类为 .well 的容器,其中的内容看起来像是陷入页面一样,常常用来显示博客的元信息,比如作者、日期和类别。如: <divclass="well"> Look, I'm in a well! &l...

2019-05-24 16:34:35

阅读数 15

评论数 0

Bootstrap响应式内嵌元素

响应式内嵌元素 想让你的<iframe>、<embed>、<video>和<object>等内嵌元素具有响应式特性吗?这也很简单。只需将你的内嵌元素放入一个.embed-respons...

2019-05-24 16:33:59

阅读数 15

评论数 0

Bootstrap3 带列表组的面板

带列表组的面板 你还可以在面板中加入列表组,面板中的列表组将会占满整个面板的宽度。如: <divclass="panel panel-default"> <!-- Default panel contents -->...

2019-05-24 16:33:24

阅读数 16

评论数 0

Bootstrap3 带表格的面板

带表格的面板 在使用面板组件时,往往可能需要在面板中放很多内容,如图片、表格等。如果在面板中添加表格,建议使用无边框的表格,这让整个面板看上去是一个整体。 如果是带有.panel-body的面板,我们还在表格的上方,添加了一个边框来将它们隔离开来。如: <divclas...

2019-05-24 16:32:45

阅读数 15

评论数 0

提示
确定要删除当前文章?
取消 删除