Bootstrap研究.docx

1、Bootstrap研究Bootstrap使用研究第一章：综述1.1：简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。一般来说，使用Bootstrap来开发前端，能够使我们付出相对较少的工作而取得更好的效果。1.2：Bootstrap的文件形式如果需要在项目中使用Bootstrap，则第一步是下载它

2、。Bootstrap提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本，可以根据自己的需求选择下载。也可以下载源代码，一般来说，源代码包含了预先编译的CSS、JavaScript和图标字体文件，并且还有LESS、JavaScript和文档的源码。1.3：禁用响应式布局 Bootstrap会自动帮你针对不同的屏幕尺寸调整你的页面，使其在个尺寸屏幕上表现良好。但有的时候可能不需要这一特性，这就需要我们自己去禁用这一特性，下面列出操作步骤：1. 移除此处提到的（或者不要添加）viewport 。2. 通过为.cont

3、ainer设置一个width值从而覆盖框架的默认width设置，例如width: 970px !important;。请确保这些设置全部放在默认的Bootstrap CSS后面。注意，你也可以略去!important。3. 如果使用了导航条，需要移除所有导航条的折叠和展开行为。4. 对于栅格布局，额外增加.col-xs-* classe或替换掉.col-md-*和.col-lg-*。不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。其中若是针对IE8，则需要额外引入Respond.js文件方可以实现禁用响应式布局。范例代码：1.4：浏览器支持情况Bootstrap的目标是在最新

4、的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。它对Chrome (Mac、Windows、iOS和Android)、Safari (只支持Mac和iOS版)、Firefox (Mac、Windows)、Internet Explorer、Opera (Mac、Windows)等主流浏览器支持比较好。第二章：Bootstrap插件2.1：下拉菜单2.1.1：使用方法用于显示链接列表的可切换、有上下文的菜单。JavaScript 下拉菜单插件让它有交互性。可以实现具有一定特效的下拉菜单。1. 将下拉菜单触发器和下拉菜单都包裹

5、在.dropdown里，或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码。2. Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此 必须出现在项目的每个页面的开始部分。3. bootstrap-dropdown.js为下拉菜单插件，必须被引入。bootstrap.css为Bootstrap 样式库，这是必不可少的。引入jquery.js，因为Bootstrap插件是jquery插件，依赖于jquery。4. 要想使其真正成为下拉菜单有两种方法：data属性或者js调用。其中data属性方法只需要在激活元

6、件上设置data-toggle=dropdown即可，而js调用方法则如上述代码所写那样即可。 5. 给下拉菜单中的加上.disabled实现禁用，即无法再被点击。1.1.2：范例代码2.2：按钮组2.2.1：使用方法用按钮组把一组按钮放在同一行里。通过可以使按钮插件可以设置为单选框或多选框样式。 1. 按钮组中的工具提示和弹出框需要特别的设置：当为.btn-group中的元素应用工具提示或弹出框时，必须指定container: body选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。 2. 把一系列的.btn按钮放入.btn-group便可以形

7、成按钮组效果。3. 把一组组合进一个做成更复杂的组件，实现按钮工具栏。 4. 如果需要改变尺寸大小，只需给.btn-group加上.btn-group-*，而不是给组中每个按钮都应用大小类。 5. 如果希望把下拉菜单混合到一系列按钮中，就把.btn-group放入另一个.btn-group中便可以实现。 6. 让一组按钮竖直显示而不是水平显示，可以通过设置来实现。7. 两端对齐的链接排列：让一组按钮拉长为相同的尺寸，适应父元素的宽度。对于按钮组中的按钮下拉菜单也同样适用。2.2.2：范例代码 2.2.3：代码解释 1. 默认显示是横向排列，如果希望按钮组纵向排列，则需要将其改为。 2. 按钮组

8、里面可以包含下拉菜单，其实现方式与之前介绍的使用方式一致。2.3：按钮式下拉菜单2.3.1：使用方法实现按钮组的组成成分为下拉菜单，把任何按钮放入.btn-group然后加入正确的菜单标记，就可以做成下拉菜单触发器。 1. 插件需求：按钮下拉菜单需要你的版本的Bootstrap的下拉菜单插件。 2. 主要包括以下2种样式：单按钮下拉菜单（只要改变一些基本的标记，就能把按钮变成下拉菜单开关）和分裂式下拉菜单（分裂式按钮下拉菜单也需要同样的改变标记，但只要多一个分开的按钮）。 3. 下拉菜单按钮适用所有尺寸的按钮，同一个按钮组中的按钮可以拥有不同的大小，只要为每一个按钮项设置不同的尺寸即可。 4.

9、 给父元素添加.dropup就能使触发的下拉菜单在元素上方，即向上弹出式菜单。5.通过可以设置按钮的大小，其中btn-lg表示大、btn-sm表示小、btn-xs表示很小。6. 将最外层的div的class属性加上dropup后便可以实现向上弹出式菜单。2.3.2：范例代码2.4：输入框组2.4.1：使用方法通过在基于文本的输入框前面，后面或是两边加上文字或按钮，可以扩展对表单的控制。 1. 用带有.input-group-addon的.input-group，可以给.form-control前面或后面追加元素。 2. 最好避免使用 元素，因为 WebKit 浏览器不能完全支持它的样式。 3.

10、 不要直接将.input-group和.form-group混合使用，因为.input-group是一个独立的组件。 4. 给.input-group添加标明尺寸的class，它自己和其中的内容都会自动调整尺寸。一般来说没有必要给每个元素都重复添加尺寸class。 5. 可以把复选框或单选框放在输入组里而不是文本前。输入组的代码实现将在后面给出。6. 在输入组里使用附加按钮时，需要多加一层元素。要用 .input-group-btn 包住按钮而不是 .input-group-addon。这是因为默认的浏览器样式不能被覆盖。7. 也可以在此添加带下拉菜单的按钮等，这些组件已在前面介绍。2.4.2

11、：范例代码 2.5：导航2.5.1：使用方法可以实现导航栏，一般用于页面最上方，能够导航到其他链接。 1. Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。.nav-tabs类需要.nav基类 2. 相同的 HTML 标记，用.nav-pills代替.nav-tabs便可以实现胶囊式标签页。只要加上.nav-stacked便可以实现垂直排列。 3. 在大于768px的屏幕上，通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。 4. 对任何导航（包括标签页，pills，或列表，

12、加入.disabled使链接为灰色且没有鼠标悬停效果。 5. 添加一点额外HTML和 JavaScript下拉菜单插件可以实现带下拉菜单的导航和带下拉菜单的胶囊式标签页。2.5.2：范例代码 2.6：导航条2.6.1：使用方法 导航条是在您的应用或网站中作为导航标头的响应式元组件。它们在移动设备上可以折叠（并且可开可关），且在可用的视口宽度增加时变为水平展开模式。1. 根据你所放在导航条上的内容的长度，可以调整导航条进入折叠模式和水平模式的阈值。通过改变grid-float-breakpoint变量的值或加入相应的媒体查询CSS代码均可实现这个需求。2. 响应式导航栏需要当前版本的Bootst

13、rap的collapse插件。3. 如果要增强可访问性，一定要在每个导航条上加上role=navigation。4. 将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。5. 如果没有为输入框添加label标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过.sr-only class隐藏label标签。6. 对于不包含在中的元素，加上.navbar-btn这个class后可以让它在导航条里垂直居中。7. 把文本包裹在.navbar-text中时，为了有正确的行距和颜色，通常使用标签。8.

14、在标准的导航组件之外添加标准链接时，使用.navbar-link class可以让链接有正确的默认颜色和反色。9. 用.navbar-left或者.navbar-right工具类给导航链接、表单、按钮或文本对齐。两种类都用到在特定方向的CSS浮动样式。例如，要对齐导航链接，就要把它们放在一个分开的、应用了工具类的里。10. 添加.navbar-fixed-top可以让导航条固定在顶部。固定的导航条会遮住页面上的其它内容，这时要给给的上方设置padding。导航条的默认高度是50px。11. 添加.navbar-fixed-bottom可以让导航条固定在顶部。其余与顶部一致。12. 通过添加.n

15、avbar-static-top即可创建一个不与页面一起变化的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，不用给body添加padding。13. 通过添加.navbar-inverse类可以改变导航条的外观。2.6.2：范例代码 2.7：面包屑导航2.7.1：使用方法 所谓的面包屑导航即用一个带方向的层次表明当前页面的位置，使用中需要注意的是分隔符可以通过CSS的:before和content自动添加。2.7.2：范例代码 2.8：分页2.8.1：使用方法 可以为网站或应用提供多页的分页组件，或是用更简单的翻页代替。1. 链接在不同情况下可以定制。给不能点

16、击的链接用.disabled 并且用.active显示是当前页。2. 还可以将active或disabled应用于标签，这样就可以让其保持需要的样式并移除点击功能。3. 加上.pagination-lg或.pagination-sm可以控制分页显示的大小。4. 用轻便的标记和样式，就能做个上一页和下一页的简单翻页。在默认的翻页中，链接是居中的。也可以把把链接向两端对齐作为替代，只需要为它们加上.previous和.next这样的class即可。5. 在翻页处理中，也可以使用.disabled工具类。2.8.2：范例代码2.9：标签2.9.1：使用方法 1. 通过这一组件可以实现在页面上显示标签

17、。 2. 使用label-default、label-primary、label-success、label-info、label-warning和label-danger中的的任何一个class即可改变标签的外观。具体使用见范例代码。2.9.2：范例代码 2.10：徽章2.10.1：使用方法 1. 给之前介绍的链接或是Bootstrap导航等加入，可以容易地实现高亮显示新的或未读的条目。2. 当没有新的或未读的条目时，里面没有内容的徽章会消失（通过CSS的:empty选择器实现）。3. 胶囊式导航和列表式导航中的徽章有内置的样式。2.10.2：范例代码 2.11：大屏幕介绍2.11.1：使用

18、方法 1. 大屏幕介绍是一种轻量，灵活的可选组件，它能扩展整个视角，展示站点上的关键内容。如果要让大屏幕介绍的宽度是屏幕宽度，只需要将其放到.container外即可。 2. 如果需要让大屏幕介绍（jumbotron）占据全部宽度并且去掉圆角，只需将其放到所有.container外面，并在其内部添加一个.container。2.11.2：范例代码 2.12：缩略图2.12.1：使用方法 1. 用缩略图组件扩展Bootstrap的栅格系统，可以简单地显示栅格样式的图像，视频，文本，等等。 2. Boostrap的缩略图的默认设计仅需最小的标记，就能展示带链接的图片。 3. 添加一点额外的标记，可

19、以把任何种类的HTML内容像标题，段落或按钮加入缩略图。2.12.2：范例代码2.13：警告框2.13.1：使用方法 1. 通过警告框可以为典型的用户动作提供少数可用且灵活的反馈消息。2. 为了得到基本的警告信息，把任何文本和可选的关闭按钮放入.alert和四种有意义的类中（.alert-success、.alert-info、.alert-warning和. alert-danger）即可。3. 可以通过使用一个可选的.alert-dismissable和关闭按钮实现可关闭的警告框。4. 给的data-dismiss=alert这个属性设置上，才能确保警告框在所有设备上都能正确的表现。5.

20、用.alert-link工具类，可以快速提供在任何警告框中相符的颜色。2.13.2：范例代码2.14：进度条2.14.1：使用方法 1. 使用进度条可以提供工作或动作的实时反馈。 2. 进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。3. 为了一致的样式，进度条使用与按钮和警告框相同的类。 4. 用一个渐变可以创建条纹效果，在IE8中不可用。 5. 给.progress-striped加上.active使它由右向左运动

21、。在IE的所有版本不可用。 6. 把多个进度条放入同一个.progress，可以使它们堆叠在一起。2.14.2：范例代码2.15：媒体对象2.15.1：使用方法 1默认的媒体允许在一个内容块的左边或右边浮动一个媒体对象（图像，视频，音频）。 2. 添加少量额外的标记，就能在列表内使用媒体（对评论或文章列表很有用）。2.15.2：范例代码 2.16：列表组2.16.1：使用方法 1. 列表组是灵活又强大的组件，不仅仅用于显示简单的成列表的元素，还用于复杂的定制的内容。 2. 最简单的列表只是无顺序列表，只是列出列表条目和正确的类。 3. 给列表组加入徽章，它会自动地放在右面。 4. 用标签而不是

22、标签（也就是说父元素是而不是）。没必要给每个元素都加一个父元素。 5. 在定制内容里面可以加几乎任何HTML，包括带链接的列表组。2.16.2：范例代码2.17：面版2.17.1：使用方法 1. 有些时候你可能需要将某些内容放到一个盒子里。这个时候便用到了面板组件。 2. 默认的.panel所做的只是提供基本的边界和内部，来包含内容。 3. 用.panel-heading可以简单地加入一个标题容器。也可以用-和.panel-title类加入预定义样式的标题。 4. 把按钮或次要的文本放入.panel-footer。注意面版的脚注不会从带意义的替换中继承颜色，因为它不是在前面的内容。 5. 像其

23、它组件一样，可以简单地通过加入有意义的状态类，给特定的内容使用更有意义的面版。 6. 为了无缝的设计，在面版中加入.table。如果有.panel-body，就在表格的上方加上一个用于分割的边界。如果没有.panel-body，面版标题会和表格连接起来，没有空隙。 7. 可以简单地在任何面版中使用最大宽度的列表组。2.17.2：范例代码第三章：JavaScript插件 Bootstrap的JavaScript插件主要有过渡效果transition.js、模态框 modal.js、下拉菜单 dropdown.js、滚动监听 scrollspy.js、标签页tab.js、工具提示 tooltip.

24、js、弹出框 popover.js、警告框 alert.js、按钮 button.js、折叠 collapse.js、轮播 carousel.js和Affix affix.js等多个，以下内容将对其中较为常用的插件进行详细介绍。3.1：模态框 modal.js3.1.1：使用方法 1. Bootstrap的模态框插件经过了优化，所以更加灵活，它以弹出对话框的形式出现，具有最小和最实用的功能集。 2. 不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。 3. 常见的模态框包含模态框的头、体和一组放置于底部的按钮。 4. 可以通过一些触发事件来启动模态框，比如

25、点击一个按钮，同时通过设置可以控制模态框出现的特效。 5. 增加模态框的可访问性：为.modal添加role=dialog;aria-labelledby=myModalLabel属性指向模态框标题；aria-hidden=true告诉辅助性工具略过模态框的DOM元素。同时还可以为模态框添加描述性信息。为.modal添加aria-describedby属性用以指向描述信息。 6. 具体的使用方式有两种：通过data属性和通过JavaScript调用。前者不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素（如按钮）上设置data-toggle=modal，并使用dat

26、a-target=#foo或href=#foo指向特定的模态框即可。后者需一行JavaScript代码，即可通过id调用模态框，如js$(#myModal).modal(options)。 7. 可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-backdrop=。 8. 几个工具类的介绍：.modal(options)，将你指定的内容作为模态框启动，其接受一个可选的object类型的参数；.modal(toggle)，手动启动或隐藏模态框，在模态框真正显示或隐藏前返回到调用函数 (i.e. 在 shown.bs.modal

27、 或 hidden.bs.modal 事件发生之前)；.modal(show)，手动打开一个模态框，在模态框真正显示或隐藏前返回到调用函数 (i.e. 在 shown.bs.modal 事件发生之前)；.modal(hide)，手动隐藏一个模态框，在模态框真正显示或隐藏前返回到调用函数 (i.e. 在 hidden.bs.modal 事件发生之前)。 9. Bootstrap的模态框类暴露了一些事件用于截获并执行自己的代码。如show.bs.modal、shown.bs.modal、hide.bs.modal和hidden.bs.modal。3.1.2：范例代码3.2：滚动监听 scrolls

28、py.js3.2.1：使用方式 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。其使用方法也是两种。1. data属性：通过为需要监听的页面元素（一般是）添加data-spy=scroll就可很轻松的为顶部导航条添加滚动监听功能。然后为其添加data-target属性，此属性的值为任何Bootstrap中.nav组件的父元素的ID或class。2. 通过JavaScript启动滚动监听：$(body).scrollspy( target: .navbar-example )3. 导航条内的链接地址必须有对应的页面元素具有同样的ID值。例如，home必须对应DOM中例如4. 使用滚动监

29、听插件时，每当页面中从DOM中增加或删除页面元素时，都需要调用.scrollspy(refresh)方法。5. 可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-offset=。6. 当滚动监听插件将某个元素置为active时，会触发activate.bs.scrollspy事件。3.2.2：范例代码3.3：标签页tab.js3.3.1：使用方法 1. 通过添加标签页功能，可以让多个内容区域快速、动态切换。下拉菜单也可以在其中使用，作为一个标签页。 2. 通过JavaScript启动可切换标签页（每个标签页单独被激活）。可以

30、有以下几种方式单独激活标签页：$(#myTab ahref=#profile).tab(show)、$(#myTab a:first).tab(show)、$(#myTab a:last).tab(show)和$(#myTab li:eq(2) a).tab(show)。 3. 只需为页面元素简单的添加data-toggle=tab 或 data-toggle=pill就可以无需写任何JavaScript代码也能激活标签页或胶囊式导航。为ul添加.nav和.nav-tabs classe即可为其赋予Bootstrap标签页样式；而添加nav和nav-pills class可以为其赋予胶囊标签页样式。 4. 为每个.tab-pane添加.fade可