基础CSS

基本的HTML元素都应用了样式,保持清新,统一的感觉。

标题 & body 复制

文字排版样式规范

整个排版基于两个Less变量,在variables.less文件里,@baseFontSize@baseLineHeight。 基础的字号与行间隔。

我们使用这些变量与一些算术来创建外边距(margin),内边距(padding),还有行高( line-heights)。

主体文字示例

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. 标题一

h2. 标题二

h3. 标题三

h4. 标题四

h5. 标题五
h6. 标题六

强调,地址,缩写

元素 用途 可选
<strong> 用来突出重要的文字片断
<em> 用来突出重点的文字片断
<abbr> 包装缩略语,鼠标悬停时显示完整版。

为展开的文本包含可选的 title 属性,使用大写请用 .initialism 类。

<address> 联系方式的信息 每行结束后使用 <br>

使用强调

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

提示: HTML5 请使用 <b><i> ,但他们的用法有些区别, <b> 用来突显单词与短语,不输送额外的重点。 <i> 用在技术词汇等。

地址示例

使用 <address> 标签的两个示例:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
全名
first.last@gmail.com

缩写示例

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.

Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.

HTML is the best thing since sliced bread.

An abbreviation of the word attribute is attr.

引用

元素 用途 可选
<blockquote> Block-level element for quoting content from another source

Add cite attribute for source URL

Use .pull-left and .pull-right classes for floated options
<small> Optional element for adding a user-facing citation, typically an author with title of work Place the <cite> around the title or name of source

To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Include an optional <small> element to cite your source and you'll get an em dash &mdash; before it for styling purposes.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
  <small>Someone famous</small>
</blockquote>

引用示例

默认的 blockquotes 样式:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

浮动 blockquote 到右边,添加 class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

列表

无序列表

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

无样式列表

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

有序列表

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

描述

<dl>

描述列表
一个描述列表显示适合定义术语。
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

横向描述

<dl class="dl-horizontal">

描述列表
一个描述列表显示适合定义术语。
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

行内

包装行内代码片断,请使用: <code>.

例如: <code>section</code> should be wrapped as inline.

基本区块

为多行代码使用 <pre>,确定不要在代码片断中包含尖括号。

<p>Sample text here...</p>
<pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

注意: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

你可以添加 .pre-scrollable 类,会设置 max-height 为 350px ,还提供一个上下滚动条。

Google Prettify

同样使用 <pre> 元素,两个可选类可以增强显示。

<p>Sample text here...</p>
<pre class="prettyprint
     linenums">
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

下载 google-code-prettify ,阅读如何使用

Table 标签

标签 描述
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels
Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers
<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</table>

Table 选项

名称 类名 描述
默认 无样式,只有栏与行
基本 .table 只有行与行之间的水平线
边框 .table-bordered 圆角并添加外边线
斑马纹 .table-striped 在奇数行 (1, 3, 5, ...),添加亮灰背景颜色
简明 .table-condensed 垂直内边距从 8px 减小到 4px

表格示例

1. 默认的表格样式

表格会自动应用样式,添加点边线,为了保持结构跟确定可读性。2.0需要在table标签上使用 .table 类。

<table class="table">
  …
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

2. 条纹表格

只需要添加一个 .table-striped 类,你的表格立马应用斑马条纹样式。

注: 条纹表格使用 :nth-child CSS 选择器,IE7-IE8里面不能用这个选择器。

<table class="table table-striped">
  …
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

3. 边线表格

在整个表格周围添加连线,而且是圆角地。

<table class="table table-bordered">
  …
</table>
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

4. 简明表格

让表格更紧凑,添加 .table-condensed 类缩小一半内边距 (从8px 缩减到 4px)。

<table class="table table-condensed">
  …
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

5. 混合样式

你可以混合使用表格的样式。

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
Full name
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

灵活的HTML与CSS

Bootstrap里的表单不管怎么样看起来都很漂亮,不需要多余的HTML,不过我们也为需要的人提供了几个组合。

更多复杂的布局使用了简洁可扩展的类,你可以很简单添加样式或捆绑事件。

4种布局

Bootstrap 支持四种表单布局:

  • 垂直 (默认)
  • 搜索
  • 行内
  • 水平

不同类型的表单布局需要不同的标签,不过控制本身保持不变。

控制状态与更多选项

Bootstrap 包含几乎所有表单控件的样式,比如input,textarea,select... 另外还有一些组件可以使用 ,像前置与后置等等。

还有错误,警告,成功状态,同时还支持禁用时的样式。

4种类型的表单

Bootstrap 提供四种常见 web 表单样式。

名称 类名 描述
垂直(默认) .form-vertical (可以不加这个类名) 堆栈在一起,标签在控件之上左对齐显示。
行内 .form-inline 标签左对齐,行内区块显示控件,比较紧凑。
搜索 .form-search 圆角的text input。
横向 .form-horizontal 向左浮动,标签右对齐。

表单示例 只用表单控制,不用额外的标签

基本表单

在2.0上,默认的表单样式更简洁,没有多余的标签,只是单纯的控件。

来点辅助的帮助文本!

这里是区块级别的帮助文本。

<form class="well">
  <label>Label name</label>
  <input type="text" class="span3" placeholder="Type something…">
  <span class="help-inline">Associated help text!</span>
  <label class="checkbox">
    <input type="checkbox"> 点这里
  </label>
  <button type="submit" class="btn">提交</button>
</form>

搜索表单

添加.form-search 在搜索字段上使用圆角。

<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">搜索</button>
</form>

行内表单

Inputs 是区块级别的元素,使用 .form-inline.form-horizontal, 可以转化成行内元素。

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> 记住我
  </label>
  <button type="submit" class="btn">登陆</button>
</form>

横向表单

Bootstrap 支持的控件

帮助提示的文字可以在这里~~

标签示例

下面是表单布局,.control-group, .control-label, 和 .controls 类都是必须的。

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Text input</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

都包含什么东西

左边这些都是支持的表单控件,这里是个列表

  • 文本域(text, password, email, 等)
  • 复选框(checkbox)
  • 单选按钮(radio)
  • 选择(select)
  • 多重选择(multiple select)
  • 文件域(file input)
  • 文本区域(textarea)

v2.0默认

v1.4, Bootstrap默认表单样式使用水平布局,在Bootstrap 2里面我们使用更聪明,扩展性更强的默认布局。


表单控制状态
一些值在这里
在哪里不大对劲儿了
请修正错误
Woohoo!
Woohoo!

重新设计了浏览器状态

Bootstrap 重新设计了聚集与禁用disabled 状态,移除了Webkit核心(如:Google Chrome)outline 并为:focus添加了box-shadow


表单验证

Bootstrap包含验证样式:错误,警告,成功。使用的话在 .control-group 添加error类。

<fieldset
  class="control-group error">
  …
</fieldset>

扩展表单控制

使用来自网格系统的同样的 .span* 类规范表单的尺寸

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

@

帮助文本

.00
在这里!在这里!更多的帮助文本
$.00

Note: Labels surround all the options for much larger click areas and a more usable form.

前置与后置

Input 群组带有前置或后置文本,为input适应不同的环境提供了简单的方式,比如在Twitter用户名前加个 @ 标记,或在财务数据表加个 $ 标记。


复选框与单选按钮

现在,只需要简单的重复:<label class="checkbox"> 包装<input type="checkbox">.

同样支持行内复选框与单选按钮,添加.inline到任何的.checkbox.radio a就可以了。


行内表单与前置/后置

在行内表单使用前置与后置input,确定.add-oninput 在同一行,而且中间不能有没有空格。


表单帮助文本

为表单添加帮助文本,包含行内帮助文本,使用 <span class="help-inline"> 或在input元素后面使用帮助文本区块 <p class="help-block">

按钮 class="" 描述
btn 标准的灰色渐变按钮
btn btn-primary 比较显眼
btn btn-info 作为默认的替代样式
btn btn-success 提示成功的动作
btn btn-warning 提示执行动作时要谨慎
btn btn-danger 提示动作很危险哦,要小心操作
btn btn-inverse 暗灰按钮

执行动作的按钮

按照惯例,按钮一般只用来执行动作,链接用来链接对象,例如:”下载”需要使用按钮(button),“最近动作“就应该是一个链接。

按钮的样式只要在元素上使用 .btn 类就可以,不过一般我们只用在<a><button> 元素上。

跨浏览器

IE9 不支持圆角的背景渐变,所以我们干脆移除了。 IE9 jankifies 禁用了 button 元素, 显示文本灰带有埋汰的文本阴影,这个我们实在搞不定。

多种尺寸

喜欢大号或小号的按钮吗?添加 .btn-large, .btn-small, 或是 .btn-mini


禁用状态

为禁用的按钮,添加 .disabled 类到链接,还有为 <button>元素添加上 disabled 属性

主要链接 链接

注意! 我们使用 .disabled 类就像使用 .active 类一样。

同一类名,不同的标签

使用 .btn 类在 <a>, <button>, 或 <input> 元素上。

链接
<a class="btn" href="">链接</a>
<button class="btn" type="submit">
  按钮
</button>
<input class="btn" type="button"
         value="文本域">
<input class="btn" type="submit"
         value="提交">

按不同情境使用不同的元素,还要注意跨浏览器,比如你有一个 input, 那么就使用 <input type="submit"> 作为你的按钮。

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal

一个背景图片

我们把所有的图标都放在了同一个文件里面,然后使用CSS的定位background-position 来切换不同的图标背景。我们在 Twitter.com 上也使用同样的方法,效果非常好。

所有的图标类都使用 .icon- 作为前缀,这样是为了避免跟其它组件混淆。

Glyphicons 授权我们使用这个图标集,只要我们在这个文档里说明这些图标的出处。

如何使用

Bootstrap 为所有图标使用 <i> 标签,想用的话请把下面的代码,放在任何你想出现图标的地方。

<i class="icon-search"></i>

还有一个反白版本,添加一个额外的类就可以:

<i class="icon-search icon-white"></i>

一共有 120 个类你可以选择,只需要添加个 <i> 标签就行了。你可以在 sprites.less 或下面的文档里找到具体的CSS类。

注意! 如果图标后面有文字,比如在按钮或导航链接文字,最好在 <i> 标签的后面添加一个空格,这样看起来更好一些。

使用案例

图标很棒,不过在哪里使用他们呢?这是一些灵感:

  • 边栏导航样式上
  • 纯图标的导航菜单
  • 帮助理解按钮的意思
  • 帮助用户区分链接的目标

在任何地方,使用一个 <i> 标签,你就可以添加一个图标了。

示例

在按钮,按钮群组工具栏,导航菜单,或前置文本域上使用。