Bootstrap

脚手架

Bootstrap 的布局基于响应式的12栏网格，拥有固定与流动两种宽度类型。

全局样式 CSS 重置，文字排版样式，还有链接。

需要 HTML5 doctype

使用的HTML元素与CSS属性需要使用HTML5的文档类型，确定在每个页面的顶部使用HTML的文档类型。

<!DOCTYPE html>
<html lang="en">
  ...
</html>

文字排版样式与链接

使用 scaffolding.less 文件，我们设计基本的全局显示，文字排版样式，还有链接样式。特别是：

  • 在body上去掉外边距
  • 设置 body 的 background-color: white;
  • 使用 @baseFontFamily, @baseFontSize, 还有 @baseLineHeight 属性做为文字排版样式基础。
  • 通过 @linkColor 设置全局链接颜色，在 :hover 上使用下划线

通过Normalize重置

Bootstrap 2 使用了传统的CSS重置，使用的是 Nicolas Gallagher 的 Normalize.css，他还维护着 HTML5 Boilerplate 项目。

新的重置仍然可以在 reset.less 中找到，不过为了简洁与准备移除了很多元素。

默认的网格系统 带响应的12栏网格

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Bootstrap 提供的默认的网格系统是 940px宽的12栏网络。

为不同的上网设备带有4种响应式变化：电话，平板电脑水平，平板电脑简直，小屏幕桌面电脑，和大的宽屏桌面电脑。

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

左边这几行代码可以创建一个基本的两栏布局，分别占用4个网格的宽度与8个网格的宽度。


偏移栏

4
4 偏移 4
3 偏移 3
3 偏移 3
8 偏移 4
<div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>

嵌套栏

在Bootstrap中使用静止(non-fluid) 网络系统，嵌套很简单，嵌套内容只需要添加一个新的 .row and set of .span* columns within an existing .span* column.

示例

Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.

第一级别的栏
第二级别
第二级别 
<div class="row">
  <div class="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

流动网格系统 12个响应式的基于百分比的栏

流动栏

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

不是像素，是百分比

流动网格系统的栏使用的是百分比，而不是固定的宽度。不过固定宽度的网格系统我们也有同样的响应变化。

Fluid rows

让任意行流动，只需要简单的把 .row 改为 .row-fluid 。栏可以保持不变，这让在固定宽度与流动宽度之间切换，变得非常地简单。

标记

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

流动嵌套

嵌套流动网格有点不同，被嵌套的栏数总和不需要与父元素使用的栏数相同，因为每一行都会使用100%的宽度。

流动 12
流动 6
流动 6 
<div class="row-fluid">
  <div class="span12">
    Level 1 of column
    <div class="row-fluid">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

自定义网格

变量 默认值 描述
@gridColumns 12 栏数
@gridColumnWidth 60px 每栏的宽度
@gridGutterWidth 20px 栏间距
@siteWidth 计算所有栏宽与间隔的总和 计算栏数与间隔来设置.container-fixed() mixin 的宽度。

LESS里的变量

用来定制 940px 网格系统的变量， 所有网格使用的变量都保存在 variables.less 里面。

如何定制

修改网格意味着修改3个 @grid* 变量并且要重新编译 Bootstrap。在 variables.less 文件里修改网格变量，然后使用 四种重新编译的方法 ，确定你在 grid.less 里添加了相关的CSS。

保持响应式设计

定制网格只影响默认级别的940px网格上，如果想保持响应式设计 ，你还需要去定制 responsive.less 。

布局 创建网页的基本模板

固定布局

默认是简单的居中的 940px 宽的布局，使用一行<div class="container"> 。

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

流动布局

<div class="container-fluid"> 灵活页面结构，最小与最大宽度，还有左边栏，非常适合应用与文档。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

响应式设计 不同上网设备与分辨率的媒体查询

Responsive devices

这是干啥的？

媒体查询允许定制CSS基于不同的条件，比例，宽度，显示类型等等。不过一般时候只专注两个东西， min-width （最小宽度）和 max-width（最大宽度）

  • 修改我们网格里面的栏的宽度
  • 必要时使用堆栈元素代替浮动元素
  • 更好地适应设备来缩放标题与文字

使用媒体查询的响应当做为移动用户的开始，如果是比较大的项目，考虑专门的设计。

支持的设备

Bootstrap 支持媒体查询，帮助你的项目在不同的上网设备与屏幕分辨率下看起来更友好。下面是包含的东西：

标签 布局宽度 栏宽 栏间距
智能手机 480px 和以下 流动栏，不固定宽度。
智能手机到平板电脑 767px 和以下 流动栏，不固定宽度。
垂直的平板电脑 768px 和以上 42px 20px
默认 980px 和以上 60px 20px
大宽度显示 1200px 和以上 70px 30px

需要 meta 标签

确定设备正确显示响应页面，需要包含viewport meta 标签 。

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

使用媒体查询

Bootstrap 并不自动支持媒体查询，不过添加他们很容易做到，你可以使用以下几个方法来让Bootstrap支持媒体查询：

  1. 使用编译好的 bootstrap-responsive.css
  2. 添加 @import "responsive.less" 并重新编译Bootstrap
  3. 做为单独文件修改并重新编译 responsive.less

为啥不直接包含他？ 并不是所有的项目都需要响应式的设计。

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

响应式设计实用类

他们是啥玩意

更快的移动友好开发，使用这些实用类做为基础去显示或隐藏内容。

啥时候用他们

悠着点用，使用他们来辅助不同设备的展示。

例如，你可能要在导航栏上显示一个<select> 元素，但不想在桌面电脑与平板电脑上显示。

支持 classes

在这里显示的是我们支持的类，还有起作用的媒体查询布局（用设备名称标注）responsive.less 中找到。

Class 手机 480px 和以下 平板电脑 767px 和以上 桌面电脑 768px 和以上
.visible-phone 显示
.visible-tablet 显示
.visible-desktop 显示
.hidden-phone 显示 显示
.hidden-tablet 显示 显示
.hidden-desktop 显示 显示

测试

缩放你的浏览器或在不同设备上测试。

显示在...

  • 手机✔ 手机
  • 平板电脑✔平板电脑
  • 桌面电脑✔桌面电脑

隐藏在...

  • 手机✔手机
  • 平板电脑✔平板电脑
  • 桌面电脑✔桌面电脑