Bootstrap 教程
全面介绍 Bootstrap 框架,包括 Bootstrap基本样式、Bootstrap组件、Bootstrap插件等
ixygj197875
十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、Sass、Less、JavaScript、jQuery、JSON、Python、PHP、Bootstrap、Django等,著有《HTML宝典》、《揭秘CSS》、《Sass简明教程》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,多个开源项目托管在 GitHub。
展开
-
Bootstrap CSS 编码规范之Class 命名规范
Class 命名规范Class 应该遵守以下命名规范:class 名称中只能出现小写字符和破折号(不是下划线,也不是驼峰命名法)。破折号应当用于相关 class 的命名(类似于命名空间)(如,.btn 和 .btn-danger)。避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。class 名称应当尽可能短,并且意义明确。使用有意义的名称。使用有组织的或目的明确的名...原创 2018-03-19 09:38:50 · 2354 阅读 · 1 评论 -
Bootstrap CSS编码规范之选择器使用规范
选择器选择器应该遵守以下规范:对于通用元素使用 class ,这样利于渲染性能的优化。对于经常出现的组件,避免使用属性选择器(如,[class^="..."])。浏览器的性能会受到这些因素的影响。选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 个。只有在必要的时候才将 class 限制在最近的父元素内(也就是后代选择器)(如,不使用带前缀的 class 时 -- 前缀类似于命...原创 2018-03-19 09:40:05 · 354 阅读 · 0 评论 -
Bootstrap CSS编码规范之代码组织规范
代码组织应该按照以下规范组织代码:以组件为单位组织代码段。制定一致的注释规范。使用一致的空白符将代码分隔成块,这样利于扫描较大的文档。如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。/* * Component section heading*/.element { ... }/* * Component section heading * * S...原创 2018-03-19 09:40:55 · 411 阅读 · 0 评论 -
Bootstrap 编码规范之编辑工具配置
编辑工具配置为了避免常见的代码不一致和差异,请按照下面的配置对你的代码编辑工具进行设置:用两个空格代替制表符(soft-tab 即用空格代表 tab 符)。保存文件时,删除尾部的空白符。设置文件编码为 UTF-8。在文件结尾添加一个空白行。参照文档并将这些配置信息添加到项目的 .editorconfig 文件中。如,Bootstrap 中的 .editorconfig 实例。版权声明:本文出自 歪...原创 2018-03-19 09:41:59 · 399 阅读 · 0 评论 -
Bootstrap CSS 编程规范之语法规范
语法规范CSS语法规范:用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致表现的方法。为选择器分组时,将单独的选择器单独放在一行。为了代码的易读性,在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应该插入一个空格。为了获得更准确的错误报告,每条声明都应该独占一行。所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是...原创 2018-03-18 21:20:10 · 665 阅读 · 0 评论 -
Bootstrap CSS 编码规范之属性声明顺序
声明顺序相关的属性声明应当归为一组,并按照下面的顺序排列:PositioningBox modelTypographicVisual由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。.decl...原创 2018-03-18 21:21:28 · 386 阅读 · 0 评论 -
Bootstrap CSS 编码规范之不要使用 @import
不要使用 @import与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。有以下几种替代方案:使用多个 <link> 元素通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能<!-- Use link e...原创 2018-03-18 21:22:21 · 784 阅读 · 0 评论 -
Bootstrap CSS 编码规范之媒体查询的位置
媒体查询的位置遵守就近原则,将媒体查询放在相关规则的附近,不要将他们打包放在一个单一样式文件中,或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。下面给出一个典型的实例:.element { ... }.element-avatar { ... }.element-selected { ... }@media (min-width: 480px) { .element { ...} ....原创 2018-03-18 21:23:20 · 680 阅读 · 0 评论 -
Bootstrap CSS 编码规范之带前缀的属性
带前缀的属性当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。/* Prefixed properties */.selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);}版权声明:本文出自 歪脖...原创 2018-03-18 21:24:10 · 834 阅读 · 0 评论 -
Bootstrap CSS 编码规范之单行规则声明
单行规则声明对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。对于带有多条声明的样式,还是应当将声明分为多行。这样做的关键因素是为了错误检测。如,CSS 校验器指出在 183 行有语法错误。如果是单行单条声明,你就不会忽略这个错误;如果是单行多条声明的话,你就要仔细分析避免漏掉错误了。/* Single declarations on one line */.span1 {...原创 2018-03-18 21:25:06 · 386 阅读 · 0 评论 -
Bootstrap CSS 编码规范之简写形式的属性声明
简写形式的属性声明在需要显式地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下:paddingmarginfontbackgroundborderborder-radius大部分情况下,我们不需要为简写形式的属性指定所有的值。如,HTML 的 heading 元素只需要设置上、下边距(margin)的值。因此,在必要的时候,只需覆盖这两个值就可以。过度使用简...原创 2018-03-18 21:26:07 · 540 阅读 · 0 评论 -
Bootstrap CSS 编码规范之Less 和 Sass 中的嵌套
Less 和 Sass 中的嵌套避免不必要的嵌套。这是因为虽然你可以使用嵌套,但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内(也就是后代选择器),并且存在多个需要嵌套的元素的时候,才使用嵌套。// Without nesting.table > thead > tr > th { … }.table > thead > tr > td { … }//...原创 2018-03-18 21:26:59 · 530 阅读 · 0 评论 -
Bootstrap CSS 编码规范之Less 和 Sass 中的操作符
Less 和 Sass 中的操作符为了提高可读性,在圆括号中的数学表达式的数值、变量和操作符之间,均添加一个空格。// Bad example.element { margin: 10px 0 @variable*2 10px;}// Good example.element { margin: 10px 0 (@variable * 2) 10px;}版权声明:本文出自 歪脖网 的《Boot...原创 2018-03-18 21:27:45 · 402 阅读 · 0 评论 -
Bootstrap CSS 编码规范之注释
注释代码是由人编写并维护的。请确保你的代码能够自描述、注释良好,且易于他人理解。好的代码注释能够传达上下文关系和代码意图。不要简单地重复组件或 class 的名称。对于较长的注释,务必书写完整的句子;对于一般性注解,可以书写简洁的短语。/* Bad example *//* Modal header */.modal-header { ...}/* Good example *//* Wrapp...原创 2018-03-18 21:29:28 · 926 阅读 · 0 评论 -
Bootstrap HTML编码规范之引入 CSS 和 JavaScript 文件
引入 CSS 和 JavaScript 文件根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值。实例:<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!...原创 2018-03-16 10:06:46 · 590 阅读 · 0 评论 -
Bootstrap 编码规范之HTML5 Doctype
HTML5 Doctype为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的表现。实例:<!DOCTYPE html><html> <head> </head></html>版权声明:本文出自 歪脖网 的《Bootstrap教程》,欢迎在线阅读,并提出宝贵意见。...原创 2018-03-16 10:02:44 · 353 阅读 · 0 评论 -
Bootstrap HTML 编码规范之语言属性
语言属性根据 HTML5 规范:强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。实例:<html lang="zh-CN"> <!-- ... --></html>版权声明:本文出自 歪脖网 的《Bootstrap教程》,欢迎在线阅读,并提出...原创 2018-03-16 10:04:16 · 278 阅读 · 0 评论 -
Bootstrap HTML 编码规范之字符编码
字符编码通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用 UTF-8 编码)。实例:<head> <meta charset="UTF-8"></head>版权声明:本文出自 歪脖网 的《Bootstrap教程》...原创 2018-03-16 10:05:00 · 540 阅读 · 0 评论 -
Bootstrap HTML 编码规范之IE兼容模式
IE兼容模式IE通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。实例:<meta http-equiv="X-UA-Compatible" content="IE=Edge">版权声明:本文出自 歪脖网 的《Bootstrap教程》,欢迎在线阅读,...原创 2018-03-16 10:05:55 · 488 阅读 · 0 评论 -
Bootstrap HTML 编码规范之实用为王
实用为王尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。版权声明:本文出自 歪脖网 的《Bootstrap教程》,欢迎在线阅读,并提出宝贵意见。...原创 2018-03-16 10:07:34 · 251 阅读 · 0 评论 -
Bootstrap HTML编码规范之属性顺序
属性顺序为了确保代码的易读性,HTML 属性应当按照以下顺序依次排列:classid, namedata-*src, for, type, href, valuetitle, altrole, aria-*class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。<a class="..." id="..." data-...原创 2018-03-16 10:08:29 · 622 阅读 · 0 评论 -
Bootstrap HTML 编码规范之布尔型属性
布尔型属性XHTML 规范要求为布尔型属性赋值,到了HTML5,一切化繁为简。HTML5 规范规定:元素的布尔型属性如果有值,就是 true,如果没有值,就是 false。因此,在声明布尔型属性时,不用赋值。实例:<input type="text" disabled><input type="checkbox" value="1" checked><select&g..原创 2018-03-16 10:09:21 · 420 阅读 · 0 评论 -
Bootstrap HTML编码规范之减少标签的数量
减少标签的数量编写 HTML 代码时,尽量避免多余的父元素。很多时候,这需要迭代和重构来实现。请看下面的案例:<!-- Not so great --><span class="avatar"> <img src="..."></span><!-- Better --><img class="avatar原创 2018-03-16 10:10:17 · 330 阅读 · 0 评论 -
Bootstrap HTML 编码规范之JavaScript生成的标签
JavaScript生成的标签通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。版权声明:本文出自 歪脖网 的《Bootstrap教程》,欢迎在线阅读,并提出宝贵意见。...原创 2018-03-16 10:11:28 · 261 阅读 · 0 评论 -
Bootstrap 标签页Tab插件的事件
事件Bootstrap标签页Tab插件有两个事件,分别是 show 和 shown,这两个事件的含义见表 5‑3。表 5‑3 标签页事件及含义事件含义show标签页显示之前,触发该事件。使用 event.target 和 event.relatedTarget 分别获取当前活动的标签页和上一次活动的标签页(如果有的话)shown标签页被显示,并且CSS动画也播放结束之后,触发该事件。使用 even...原创 2018-03-14 09:33:07 · 12599 阅读 · 0 评论 -
Bootstrap 工具提示插件
工具提示当鼠标移动到特定元素上时,显示相关的提示信息,比如给出链接说明或缩写词的全称等,是一个非常人性化的功能。HTML本身就支持这样的功能,只需给任何元素添加 title 属性,当鼠标悬停时,浏览器就会将 title 属性的值作为提示信息显示出来。由于原生的工具提示样式单调、功能单一,经常需要自己去开发相关的工具提示功能。鉴于此,Bootstrap提供了一个工具提示插件,它功能完善,使用简单、灵...原创 2018-03-14 09:34:26 · 695 阅读 · 0 评论 -
Bootstrap 工具提示插件Tooltip 的选项
选项Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。见表 5‑4:表 5‑4 tooltip插件的选项名称类型默认值说明animationbooleantrue为工具提示应用CSS淡入淡出过渡效果htmlbooleanfalse提示条支持插入 HTML。如果取值为 false,则使用 jQuery 的 text 方法插入文本。...原创 2018-03-14 09:35:42 · 2350 阅读 · 0 评论 -
Bootstrap 工具提示插件Tooltip的方法
方法1、.tooltip(options)使用一个可选的对象参数 options调用某个页面元素的工具提示。如:$('#element').tooltip ({ placement: right})2、.tooltip('show')手动工具某个页面元素的工具提示。如:$('#element').tooltip('show')3、.tooltip('hide')手动隐藏某个页面元素的工具提示。如...原创 2018-03-14 09:36:43 · 1539 阅读 · 1 评论 -
Bootstrap 弹出提示插件popover 的使用方法
弹出提示弹出提示是工具提示的子类,它比工具提示多了一个 content 参数,是工具提示插件的拓展。弹出提示插件需要 bootstrap-popover.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-popover.js 文件。使用方法你可以给任何元素添加弹出提示,并通过 title 属性定义提示的标题,通过 data-content 属性定义提示的内容。如:&...原创 2018-03-14 09:37:49 · 2743 阅读 · 2 评论 -
Bootstrap 弹出提示插件Popover 的选项
选项Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。见表 5‑5:表 5‑5 popover插件的选项名称类型默认值说明animationbooleantrue为弹出提示应用CSS淡入淡出过渡效果htmlbooleanfalse提示条支持插入 HTML。如果取值为 false,则使用 jQuery 的 text 方法插入文本。...原创 2018-03-14 09:39:23 · 1910 阅读 · 0 评论 -
Bootstrap 弹出提示插件Popover 的方法
方法1、.popover (options)使用一个可选的对象参数 options调用某个页面元素的弹出提示。如:$('#element').popover ({ placement: right})2、.popover('show')手动弹出某个页面元素的弹出提示。如:$('#element').popover('show')3、.popover('hide')手动隐藏某个页面元素的弹出提示。...原创 2018-03-14 09:40:18 · 692 阅读 · 0 评论 -
Bootstrap 警告框插件Alert
警告框Bootstrap警告框插件Alert需要 bootstrap-alert.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-alert.js 文件。使用方法Bootstrap仅仅为警告框提供了一个关闭功能,可以通过JavaScript为某个警告框添加关闭功能。如:<script>$(".alert").alert('close')</scr...原创 2018-03-14 09:41:14 · 1836 阅读 · 0 评论 -
Bootstrap 警告框插件Alert 的事件
事件Bootstrap警告框插件Alert有两个事件,一个是close,一个是closed,它们的含义见表 5‑6。表 5‑6 警告框的事件及含义事件含义close调用close方法时,立即触发该事件closed当警告框已经被关闭(会等待过渡效果执行结束)之后,触发该事件如,要在警告框关闭之后执行操作,代码可以这样写:<script>$('#my-alert').on('closed'...原创 2018-03-14 09:47:02 · 750 阅读 · 0 评论 -
Bootstrap 按钮状态提示
按钮Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件。Bootstrap中,按钮被赋予多种功能,如为工具条之类的组件赋予状态提示功能、状态切换功能、或者按钮组的功能。状态提示通过自定义属性和简单的JavaScript编程,就可以让按钮具有状态提示功能:没有点击按钮时,正常显示...原创 2018-03-14 09:48:02 · 4834 阅读 · 0 评论 -
Bootstrap 状态切换
状态切换将单个按钮的 data-toggle 属性设置 button,或通过简单的JavaScript编程,就可以激活按钮的行为状态,让它在未激活和激活状态之间进行切换。如:<button class="btn btn-primary" data-toggle="button">Single Toggle</button>当单击时,会激活按钮,激活状态以深色背景显示。效果如...原创 2018-03-15 10:34:07 · 3619 阅读 · 0 评论 -
Bootstrap 按钮组
按钮组将按钮组放在特定的容器中,不必编写JavaScript代码,就可以让按钮组具有HTML的复选框(checkbox)或单选框(radio)的效果。1)复选按钮组复选按钮组是类似于复选框的一组按钮,用户可以选择按钮组中的多个按钮。要添加这个功能,只需给 .btn-group 的按钮组容器添加 data-toggle="buttons-checkbox" 属性即可:<div class="b...原创 2018-03-15 10:34:54 · 1727 阅读 · 0 评论 -
Bootstrap 折叠插件
折叠当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单是不错的选择,因为它可以节约页面空间,方便用户浏览。折叠插件需要 bootstrap-collapse.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-collapse.js 文件。使用方法Bootstrap中折叠组件的基本结构,是在一个 class="accordion" 的包含框容器中,包...原创 2018-03-15 10:36:32 · 987 阅读 · 0 评论 -
Bootstrap 折叠插件Collapse 调用方式
调用方式Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用。1、data 属性调用要激活折叠插件的激活行为,首先为标题部分的链接定义 data-toggle="collapse" 属性,还要为包含框定义 id,并在标题中通过 data-parent 属性指向该 id,以便在同一个包含框中同时只能有一个内容部分被显示...原创 2018-03-15 10:37:52 · 5543 阅读 · 0 评论 -
Bootstrap 折叠插件Collapse 选项
选项Bootstrap折叠插件Collapse有2 个选项,一个是parent,一个是toggle,所有的选项都可以通过 data 属性或JavaScript进行设置。见表 5‑7。表 5‑7 Bootstrap折叠插件Collapse的选项名称类型默认值说明parent选择器false如果指定了选择器,则该选择器指定的父元素下,同一时刻只能显示一个折叠面板togglebooleantrue是否切...原创 2018-03-15 10:38:57 · 678 阅读 · 0 评论 -
Bootstrap 折叠插件Collapse 事件
事件Bootstrap还为折叠组件Collapse提供了一组事件,通过这些事件,可以监听用户的行为及折叠组件的状态。这些事件及含义见表 5‑8。表 5‑8 折叠插件的事件及含义事件含义show调用show方法时,立即触发该事件shown当可折叠元素对用户完全可见(会等待过渡效果执行结束)后,触发该事件hide调用hide方法时,立即触发该事件hidden当可折叠元素对用户完全不可见(而且过渡效果执...原创 2018-03-15 10:39:57 · 4067 阅读 · 0 评论