Bootstrap基本知识

 

什么是Bootstrap?

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

1. bootstrap如何禁止响应式布局？
   1. 1. 移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>。
      2. 通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 !important 。
      3. 如果使用了导航条，需要移除所有导航条的折叠和展开行为。
      4. 对于栅格布局，额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
      5. 针对 IE8 仍然需要额外引入 Respond.js 文件（由于仍然利用了浏览器对媒体查询（media query）的支持，因此还需要做处理）。这样就禁用了 Bootstrap 对移动设备的响应式支持。

 

1. Bootstrap 栅格系统的工作原理

1. “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2. 通过“行（row）”在水平方向创建一组“列（column）”。
3. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
4. 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
5. 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
6. 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
7. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
8. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
9. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

1. bootstrap的栅格系统为什么是12列，而不是其他的，比如18列，24列等等。采用12列有什么好处？

因为12是1，2，3，4，6的最小公倍数，所以12列栅格系统相对较灵活，支持将一行分成1列，2列，3列，4列，6列。若是想要支持5列，那1，2，3，4，5的最小公倍数是60，而60这个数对于栅格系统来说显然太大了。18能均分4列不？24能做的12都能做，所以12是最好的选择。

1. container 和 container-fluid的区别？

container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。

container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

1. 说明Bootstrap包结构？

1. Dist：包含了预编译包内的所有文件
2. Docs：参考文档
3. Fonts：存储字体图标文件
4. Js：存储各种jQuery插件和交互行为所需要的js脚本文件
5. Less：存储所有CSS动态脚本文件

 

1. Bootstrap栅格系统？

1. Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
2. 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
3. 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
4. 在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。

1. 使用bootstrap如何在手机端隐藏一个模块？

visible-md-8 hidden-xs

中屏（>=992px）显示，超小屏幕（<768px）隐藏

9、 为什么使用 Bootstrap?

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。Internet Explorer Firefox Opera Google Chrome Safari

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

10、bootstrap3.x使用哪四种栅格选项来形成栅格系统，并说明四种栅格选项之间的区别

就是适合不同尺寸的屏幕设备。以class前缀命名这四种栅格选项，分别是col-xs、col-sm、col-md、col-lg:

lg是large的缩写，大屏幕：桌面 (≥1200px)

md是mid的缩写，中等屏幕：桌面 (≥992px)

sm是small的缩写，小屏幕：平板 (≥768px)

xs是extremely small的缩写，超小屏幕：手机 (<768px)

 

11、      Bootstrap UI 编辑器有哪些？

1）Bootstrap Magic

这是一个 Bootstrap 主题生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一个鲜活的用户修改预览。它包括了各种各样的导入，一个颜色选择器和智能的预先输入。更神奇的是，Bootstrap 会根据用户的每个选择来重新建立框架，方便用户的下载和使用。

       2）BootSwatchr

BootSwatchr 是由 Drew Strickiand 独立开发和维护的，是唯一支持从右到左语言显示的 Bootstrap 自定义构建工具，这也是它的特色之一。BootSwatchr 是个可视化的工具，可以从底层开始创建 Bootstrap 主题。

       3）Bootstrap Live Editor

Bootstrap Live Editor 是个所见即所得的构建 Bootstrap 的编辑器。在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html，也因此它是个明智的选择。除此之外，它还包括高级的选项比如按钮配置，自定义标签和为用户做最明智最有益的选择。

       4）4Fancy Boot

Fancyboot 是个非常有用的 Bootstrap 自定义工具，允许用户编辑 Bootstrap 的配置，自动预览他们的修改结果。通过滑动菜单可以选择需要使用的插件和组件。当用户做好了相应的修改，可以下载一个包含用户所使用的 jQuery 插件的编译好的和简化后的 CSS 文件。

       5）Style Bootstrap

Style Bootstrap 是个非常棒的内置浏览器的 GUI 实用工具，帮助用户自定义 Twitter Bootstrap 外观。它非常容易进行自定义操作。从 body 风格，字体排版，按钮，导航，格式，通知提示和其他用户很容易根据自己的意愿自定义的元素。除了强大的自定义功能，它还可以很容易生成可下载的 CSS 文件

       6）Lavish

       7）Bootstrap ThemeRoller

8）Pingendo

12、      Bootstrap CSS编码规范

1. 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
2. 为选择器分组时，将单独的选择器单独放在一行。
3. 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
4. 声明块的右花括号应当单独成行。
5. 每条声明语句的 : 后应该插入一个空格。
6. 为了获得更准确的错误报告，每条声明都应该独占一行。
7. 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
8. 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
9. 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
10. 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
11. 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
12. 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
13. 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
14. 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

 

13、    Bootstrap HTML编码规范

1. 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
2. 嵌套元素应当缩进一次（即两个空格）。
3. 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
4. 不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
5. 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

 

14、      Bootstrap的按钮有哪些风格？

  

 

15、      使用bootstrap的文字图标需要注意什么？

1）出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

2）不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。

3）只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

 

16、      如何改变图标字体文件的位置

      Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置，那么，你需要通过下面列出的任何一种方式来更新 CSS 文件：

1. 在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。
2. 利用 Less 编译器提供的 相对 URL 地址选项。
3. 修改预编译 CSS 文件中的 url() 地址。

根据你自身的情况选择一种方式即可。

 

17、      如何选择bootstrap中javaScript插件的单个引入和全部引入？

      JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。

1）建议使用压缩版的 JavaScript 文件

bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。

2）插件之间的依赖关系

某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

 

 

18、如何解决bootstrap导航条内所包含元素溢出问题

1. 减少导航条内所有元素所占据的宽度。
2. 在某些尺寸的屏幕上（利用 响应式工具类）隐藏导航条内的一些元素。
3. 修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。可以通过修改 @grid-float-breakpoint 变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。

 

19、navbar-fixed-bottom和navbar-static-top的区别？

      添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

      添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding）。

      .navbar-fixed-bottom需要为 body 元素设置内补（padding）这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px。如：body { padding-bottom: 70px; }

 

20、bootstrap有哪些状态类可以为行或单元格设置颜色