Bootstrap CSS 概览

在这一章中,咱们将解说 Bootstrap 底层结构的要害部分,包括咱们让 web 开发变得更好、更快、更健壮的最佳实践。

HTML 5 文档类型(Doctype)

Bootstrap 运用了一些 HTML5 元素和 CSS 特点。为了让这些正常作业,您需求运用 HTML5 文档类型(Doctype)。 因而,请在运用 Bootstrap 项目的最初包括下面的代码段。

<!DOCTYPE html>
<html>
....
</html>

假如在 Bootstrap 创立的网页最初不运用 HTML5 的文档类型(Doctype),您或许会面对一些阅读器显现不一致的问题,乃至或许面对一些特定情境下的不一致,以致于您的代码不能经过 W3C 规范的验证。

移动设备优先

移动设备优先是 Bootstrap 3 的最明显的改变。

在之前的 Bootstrap 版别中(直到 2.x),您需求手动引证另一个 CSS,才能让整个项目友爱的支撑移动设备。

现在不一样了,Bootstrap 3 默许的 CSS 自身就对移动设备友爱支撑。

Bootstrap 3 的规划方针是移动设备优先,然后才是桌面设备。这实际上是一个十分及时的改变,因为现在越来越多的用户运用移动设备。

为了让 Bootstrap 开发的网站对移动设备友爱,保证恰当的制作和触屏缩放,需求在网页的 head 之中增加 viewport meta 标签,如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 特点操控设备的宽度。假定您的网站将被带有不同屏幕分辨率的设备阅读,那么将它设置为 device-width 能够保证它能正确出现在不同设备上。

initial-scale=1.0 保证网页加载时,以 1:1 的份额出现,不会有任何的缩放。

在移动设备阅读器上,经过为 viewport meta 标签增加 user-scalable=no 能够禁用其缩放(zooming)功用。

通常状况下,maximum-scale=1.0 与 user-scalable=no 一同运用。这样禁用缩放功用后,用户只能翻滚屏幕,就能让您的网站看上去更像原生运用的感觉。

留意,这种方法咱们并不引荐一切网站运用,仍是要看您自己的状况而定!

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

呼应式图画

<img src="..." class="img-responsive" alt="呼应式图画">

经过增加 img-responsive class 能够让 Bootstrap 3 中的图画对呼应式布局的支撑更友爱。

接下来让咱们看下这个 class 包括了哪些 css 特点。

鄙人面的代码中,能够看到img-responsive class 为图画赋予了 max-width: 100%; 和 height: auto; 特点,能够让图画按份额缩放,不超越其父元素的尺度。

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

这表明相关的图画出现为 inline-block。当您把元素的 display 特点设置为 inline-block,元素相关于它周围的内容以内联方式出现,但与内联不同的是,这种状况下咱们能够设置宽度和高度。

设置 height:auto,相关元素的高度取决于阅读器。

设置 max-width 为 100% 会重写任何经过 width 特点指定的宽度。这让图片对呼应式布局的支撑更友爱。

大局显现、排版和链接

根本的大局显现

Bootstrap 3 运用 body {margin: 0;} 来移除 body 的边距。

请看下面有关 body 的设置:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

第一条规矩设置 body 的默许字体款式为 "Helvetica Neue", Helvetica, Arial, sans-serif

第二条规矩设置文本的默许字体大小为 14 像素。

第三条规矩设置默许的行高度为 1.428571429。

第四条规矩设置默许的文本色彩为 #333333。

最终一条规矩设置默许的布景色彩为白色。

排版

运用 @font-family-base、 @font-size-base 和 @line-height-base 特点作为排版款式。

链接款式

经过特点 @link-color 设置大局链接的色彩。

关于链接的默许款式,如下设置:

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

所以,当鼠标悬停在链接上,或许点击过的链接,色彩会被设置为 #2a6496。一起,会出现一条下划线。

除此之外,点击过的链接,会出现一个色彩码为 #333 的细的虚线概括。另一条规矩是设置概括为 5 像素宽,且关于根据 webkit 阅读器有一个 -webkit-focus-ring-color 的阅读器扩展。概括偏移设置为 -2 像素。

以上一切这些款式都能够在 scaffolding.less 中找到。

避免跨阅读器的不一致

Bootstrap 运用 来树立跨阅读器的一致性。

Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默许款式中供给了更好的跨阅读器一致性。

容器(Container)

<div class="container">
  ...
</div>

Bootstrap 3 的 container class 用于包裹页面上的内容。让咱们一同来看看 bootstrap.css 文件中的这个 .container class。

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

经过上面的代码,把 container 的左右外边距(margin-right、margin-left)交由阅读器决议。

请留意,因为内边距(padding)是固定宽度,默许状况下容器是不行嵌套的。

.container:before,
.container:after {
  display: table;
  content: " ";
}

这会发生伪元素。设置 displaytable,会创立一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素避免上边距坍塌,:after 伪元素铲除起浮。

假如 conteneditable 特点出现在 HTML 中,因为一些 Opera bug,环绕上述元素创立一个空格。这能够经过运用 content: " " 来修正。

.container:after {
  clear: both;
}

它创立了一个伪元素,并保证了一切的容器包括一切的起浮元素。

Bootstrap 3 CSS 有一个请求呼应的媒体查询,在不同的媒体查询阈值范围内都为 container 设置了max-width,用以匹配网格体系。

@media (min-width: 768px) {
   .container {
      width: 750px;
}

Bootstrap 阅读器/设备支撑

Bootstrap 能够在最新的桌面体系和移动端阅读器中很好的作业。

旧的阅读器或许无法很好的支撑。

下表为 Bootstrap 支撑最新版别的阅读器和渠道:

  Chrome Firefox IE Opera Safari
Android YES YES 不适用 NO 不适用
iOS YES 不适用 不适用 NO YES
Mac OS X YES YES 不适用 YES YES
Windows YES YES YES* YES NO

* Bootstrap 支撑 Internet Explorer 8 及更高版别的 IE 阅读器。