一、Bootstrop
●按钮大小
各种大小按钮的 class:
.btn-lg 让按钮看起来比较大。
.btn-sm 让按钮看起来比较小。
.btn-xs 让按钮看起来特别小。
.btn-block 创建块级的按钮，会横跨父元素的全部宽度。
●可作为按钮使用的标签或元系
为<a>、<button>或<input>元素添加按钮类(button class)即可使用Bootstrap提供的样式。
•针对组件的注意事项
虽然按钮类可以应用到<a>和<button>元素上，但是，导航和导航条组件只支持<button>元素。
•链接被作为按钮使用时的注意事项
如果<a>元素被作为按钮使用--并用于在当前页面触发某些功能--而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button”属性。
•跨浏览器展现
建议尽可能使用<button>元素来获得在各个浏览器上获得相匹配的绘制效果。
为按钮添加不同的颜色只是一种视觉上的信息表达方式，但是，对于使用辅助技术，例如屏幕阅读器-的用户来说，颜色是不可见的。建议，确保通过颜色表达的信息或者通过内容自身表达出来(按钮上的文字)，或者通过其他方式，例如通过.sr-only类隐藏的额外文本--表达出来。
●尺寸
需要让按钮具有不同尺寸吗？使用.btn-1g、.btn-sm或，btn-xs 就可以获得不同尺寸的按钮。
•激活状态
当按钮处于激活状态时，其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于<button>元素，是通过：active状态实现的。对于<a>元素，是通过，active 类实现的。然而，可以将.active 应用到<button>上(包含 aria-pressed="true”属性))，并通过编程的方式使其处于激活状态。
•button 元素
由于：active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加.active类。
•链接(<a>)元素
可以为基于<a>元素创建的按钮添加.active类。
●Bootstrap组件
•面板组件
在引入了Bootstrap资源的页面代码中，使用div标签并给其添加面板组件的样式即可实现,样式以class属性的方式添加，但是注意添加的样式是Bootstrap中内置的css类样式，面板组件将其内部区域分为了三部分：标题部分，主体部分，以及脚注部分，不同的部分以子div以及其添加的class样式来声明。其中标题部分和脚注部分为可选部分，需要使用的使用再添加，不需要使用的使用可以下用声明，很灵活。
注意：面板组件的class样式是官方给出的基础类样式，可以在此基础上使用css添加自己需要的其他样式效果。
•带语境色彩的面板
面板组件给出了五个主题样式;panel-primary、panel-success、panel-info、panel-warning.panel-danger只需要在创建面板的时候根据需求选择即可，注意主题样式以class的方式添加在面板组件最外层的div上。
●如何使用
所有图标都需要一个基类和对应每个图标的类。注意：为了设置正确的内、(padding)，务必在图标和文本之间添加一个空格。
•不要和其他组件混合使用
图标类不能和其它组件直接联合使用。不能在同一个元素上与其他类共同存在。应该创建一个嵌套的<span>标签，并将图标类应用到这个<span>标签上。
•只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
•改变图标字体文件的位置
Bootstrap假定所有的图标字体文件部位于../fonts/目录内，相对于预编译版CSS文件的目录。如果修改了图标字体文件的位置，那么，需要通过以下任何一种方式来更新CSS文件：
①在Less 源码文件中修改@icon-font-path 和/或@icon-font-name 变量。
②利用 Less 编译器提供的 相对URL地址参数。
③修改经过编译的CSS 文件中的 url()路径。
•图标的可访问性
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时)，为这些图标设置了 aria-hidden="true”属性。
如果使用图标是为了表达某些含义(不仅仅是为了装饰用)，确保所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。
如果所创建的组件不包含任何文本内容（例如，<button>内只包含了一个图标），应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，可以为控件添加aria-label属性。
●Bootstrap 插件
Bootstrap自带12种jQuery插件，扩展了功能，可以给站点添加更多的互动。利用 Bootstrap 数据API(Bootstrap Data API)，大部分的插件可以在不编写任何代码的情况下被触发。
•模态框插件
模态框(Modal)是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。使用起来也是非常的简单。
•用法：
可以切换模态框(Modal)插件的隐藏内容：
①通过data 属性：在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal”，同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框(带有id=”identifier")。
②通过 JavaScript：使用这种技术，您可以通过简单的一行JavaScript来调用带有id="identifier”的模态框：
$('#identifier').modal(options)
•在模态框中需要注意两点：
1.第一是.modal，用来把<div>的内容识别为模态框。
2.第二是.fade class。当模态框被切换时，它会引起内容淡入淡出。
•aria-labelledby="myModalLabel”，该属性引用模态框的标题。
•属性aria-hidden="true"用于保持模态窗口不可见，直到触发器被触发为止(比如点击在相关的按钮上)。
• modal-header是为模态窗口的头部定义样式的类。
•class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
•data-dismiss="modal”，是一个自定义的HTML5 data属性。在这里它被用于关闭模态窗口。
•class="modal-body"，是Bootstrap CSS的一个CSS class，用于为模态窗口的主体设置样式。•class="modal-footer"，是Bootstrap CSS的一个 CSS class，用于为模态窗口的底部设置样式。•data-toggle="modal"，HTML5自定义的 data属性 data-toggle用于打开模态窗口。
●模态框 modal.js
模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。
•不支持同时打开多个模态框
不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要写额外的代码来实现。
•模态框的HTML代码放置的位置
务必将模态框的 HTML代码放在文档的最高层级内(也就是说，尽量作为body标签的直接子元素)，以避免其他组件影响模态框的展现和/或功能。
•对于移动设备的附加说明
在移动设备上使用模态框有一些额外要注意的事项。
•增强模态框的可访问性
务必为 .modal 添加 role="dialog”和 aria-labelledby="...”属性，用于指向模态框的标题栏；为 .modal-dialog 添加aria-hidden="true”属性。
还应该通过 aria-describedby 属性为模态框，modal 添加描述性信息。
•用法
通过data属性或JavaScript调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为<body>元素添加.modal-open类，从而覆盖页面默认的滚动行为，并且还会自动生成一个.modal-backdrop元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。
•通过 data 属性
不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的元素(例如：按钮)上添加data-toggle="modal”属性，或者data-target="#foo”属性，再或者 href="#foo”属性，用于指向被控制的模态框。
•通过JavaScript调用
只需一行JavaScript 代码，即可通过元素的id myModal调用模态框：
$('#myModal').modal(options) Copy
•参数
可以将选项通过data 属性或JavaScript代码传递。对于data属性，需要将参数名称放到data-之后。
•方法
.modal(options)
将页面中的某块内容作为模态框激活。接受可选参数object。
.modal('toggle')
手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是，在触发 shown.bs.moda1或 hidden.bs.modal 事件之前)。
.modal('show')
手动打开模态框。在模态框显示之前返回到主调函数中(也就是，在触发 shown.bs.modal事件之前)。
.modal('hide')
手动隐藏模态框。在模态框隐藏之前返回到主调函数中(也就是，在触发hidden.bs.modal 事件之前)。
●弹出框popover.js
为任意元素添加一小块浮层，用于存放非主要信息。
弹出框的标题和内容的长度都是零的话将永远不会被显示出来。
•插件依赖
弹出框依赖 工具提示插件，注意将依赖的插件编译进去。
•初始化
由于性能的原因，工具提示和弹出框的data 编程接口(data api)是必须要手动初始化的。在一个页面上一次性初始化所有弹出框的方式是通过data-toggle 属性选中
●警告信息alert.js
当使用.close 按钮时，它必须是.alert-dismdssible 的第一个子元素，并且在它之前不能有任何文本内容。
•用法
为关闭按钮添加 data-dismiss-"alert”属性就可以使其自动为警告框赋予关闭功能。关闭警告框也就是将其从DOM中删除。
为了让警告框在关闭时表现出动画效果，请确保为其添加了，fade和，in类。
•方法
$().alert()
让警告框监听具有data-dismiss="alert”属性的后裔元素的点击(click)事件。(如果是通过data 属性进行的初始化则无需使用)
$().alert('close')
关闭警告框并从DOM中将其删除。如果警告框被赋予了.fade 和.in类，那么，警告框在淡出之后才会被删除。
事件
Bootstrap的警告框插件对外暴露了一些可以被监听的事件。
close.bs.alert 当 close 方法被调用后立即触发此事件。
closed.bs.alert 当警告框被关闭后（也即CSS 过渡效果完毕之后）立即触发此事件。
●栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下Bootstrap栅格系统的工作原理：
•“行(row)必须包含在.container(固定宽度) 或.container-fluid(100%宽度)中，以便为其赋予合适的排列(aligment)和内补(padding)。
•通过“行(row)“在水平方向创建一组“列(column)”。
•内容应当放置于“列(column)“内，并且，只有“列(column)”可以作为行(row)”的直接子元素。
•类似.row和.col-x5-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
•通过为“列(column)“设置 padding 属性，从而创建列与列之间的间隔(gutter)。通过为.row 元素设置负值 margin 从而抵消掉为.container 元素设置的 padding，也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
•负值的margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
•栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4 来创建。·如果一“行(row)”中包含了的“列(column)“大于12，多余的“列(column)”所在的元素将被作为一个整体另起一行排列。·
•栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何，col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-1g-*不存在，也影响大屏幕设备。
扫一扫
15万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
