1-13. Bootstrap中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 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

 

响应式图像

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

<img src="..." class="img-responsive" alt="响应式图像">

类表明图像呈现为 inline-block。当把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。

 

基本的全局显示

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

排版

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

链接样式

通过属性 @link-color 设置全局链接的颜色

 

避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性（引入文件）

 

容器 container

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

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