BootStrap（一）-全局CSS样式（前半部分）

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

liuyifei

概览

移动设备优先

bootstrap是移动设备优先的

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

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

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式并不推荐所有网站使用，还是要看情况而定！

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

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

1
2
3

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

1
2
3

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

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
内容放置于“列（column）”内；只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

demo：

<!-- 固定宽度的栅格布局 -->
<div class="container">
  <div class="row">
  	  <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">.col-xs-6 .col-sm-6 .col-md-4 .col-lg-4</div>
      <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">.col-xs-6 .col-sm-6 .col-md-4 .col-lg-4</div>
  </div>
</div>

<!-- 100%宽度的栅格布局 -->
<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

我也不太清除两者的区别，等我写个demo试试。

响应式列重置

在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和响应式工具类。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example.</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

列偏移嵌套列列排列

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
	</div>
</div>

嵌套列

被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排列

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div><!-- 向右push推移动3个栅格 -->
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div><!-- 向左pull拉移动9个栅格 -->
</div>

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

通过添加 .lead 类可以让段落突出显示。

内联文本元素

被删除的文字

~~对于被删除的文本使用 <del> 标签。~~

无用文本

~~对于没有用的文本使用 <s> 标签~~

插入文本

额外插入的文本使用 <ins> 标签。

带下划线的文本

为文本添加下划线，使用 <u> 标签。

小号文本smell、着重strong、斜体em

苍白如恶霸创建 文本粗不粗比较擦抹乘客我发你测我看曾经为成为金额vd而维持你问u

<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。

对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写

1
2
3

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

缩略语

1	<abbr title="attribute">attr</abbr>

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">luobo@tuzi.com</a>
</address>

引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用建议用 <p> 标签。

添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote-reverse">
  ...
</blockquote>

列表

<!-- 无样式列表：只针对直接子元素li -->
<ul class="list-unstyled">
  <li>...</li>
</ul>
<!--通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。 -->
<ul class="list-inline">
  <li>...</li>
</ul>
<!--带有描述的短语列表 -->
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
<!-- 水平排列的描述：.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。 -->
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自动截断

通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

表单

响应式工具辅助类表单详见bootstrap（二）

概览