辅助类

文本

不同的类展示了不同的文本颜色。如果文本是链接鼠标移动到文本上会变暗:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
<div class="container">
    <h2>文本</h2>
    <p class="text-muted">该段落使用了样式 "text-muted"。</p>            
    <a class="text-muted" href="http://www.w3cschool.cc">链接使用了样式 "text-muted"。</a> 

        <p class="text-primary">该段落使用了样式 "text-primary"。</p>            
    <a class="text-primary" href="http://www.w3cschool.cc">链接使用了样式 "text-primary"。</a>

        <p class="text-success">该段落使用了样式 "text-success"。</p>            
        <a class="text-success" href="http://www.w3cschool.cc">链接使用了样式 "text-success"。</a>

        <p class="text-info">该段落使用了样式 "text-info"。</p>            
    <a class="text-info" href="http://www.w3cschool.cc">链接使用了样式 "text-info"。</a>

        <p class="text-warning">该段落使用了样式 "text-warning"。</p>            
    <a class="text-warning" href="http://www.w3cschool.cc">链接使用了样式 "text-warning"。</a>

        <p class="text-danger">该段落使用了样式 "text-danger"。</p>            
    <a class="text-danger" href="http://www.w3cschool.cc">链接使用了样式 "text-danger"。</a> 
</div>

背景

不同的类展示了不同的背景颜色。如果文本是个链接鼠标移动到文本上回变暗:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
<div class="container">
    <h2>背景</h2>
    <p class="bg-primary">该段落使用了类 "bg-primary"。</p>
    <a class="bg-primary" href="/index.php">该链接使用了类 "bg-primary"。</a>

        <p class="bg-success">该段落使用了类 "bg-success"。</p>
    <a class="bg-success" href="/index.php">该链接使用了类 "bg-success"。</a>

        <p class="bg-info">该段落使用了类 "bg-info"。</p>
    <a class="bg-info" href="/index.php">该链接使用了类 "bg-info"。</a>

        <p class="bg-warning">该段落使用了类 "bg-warning"。</p>
    <a class="bg-warning" href="/index.php">该链接使用了类 "bg-warning"。</a>

        <p class="bg-danger">该段落使用了类 "bg-danger"。</p>
    <a class="bg-danger" href="/index.php">该链接使用了类 "bg-danger"。</a>
</div>

其他

描述
.pull-left 元素浮动在左边
.pull-right 元素浮动在右边
.center-block 设置元素为display:block并居中显示
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外,其他设备上隐藏元素
.sr-only-focusable 与.sr-only类结合使用,在元素获取焦点时显示(如:键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮
.caret 显示下拉式功能
<div class="container">
    <h2>实例</h2>
    <div class="pull-left">元素浮动到左侧</div>
    <div class="pull-right">元素浮动到右侧</div>

        <div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>
</div>


<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-xs-6 col-sm-3" style="background-color:lavender;">
      列 1<br>
      重置窗口大小,查看效果。也尝试删除有 clearfix  的 div 查看效果。
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列 2</div>
    <!-- Add clearfix for only the required viewport -->
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列 3</div>
    <div class="col-xs-6 col-sm-3" style="background-color:lightgray;">列 4</div>
  </div>
</div>

<div class="container">
    <h2>实例</h2>
    <p> .show 类强制一个元素显示:</p>
    <p class="show">该段落强制显示</p>
    <p> .hidden 类强制一个元素隐藏 :</p>
    <p class="hidden">该段落强制隐藏</p>      
</div>

<div class="container">
    <h2>实例</h2>
    <p> .sr-only 类除了屏幕阅读器外,其他设备上都隐藏元素:</p>
    <a class="sr-only" href="#">跳转到主要内容</a>
    <p>与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户):</p>
    <a class="sr-only sr-only-focusable" href="#">跳转到主要内容</a>
</div>

<div class="container">
    <h2>实例</h2>
    <p> .text-hide 类将页面元素所包含的文本内容替换为背景图:</p>
    <div class="text-hide">在 div 元素中插入一些文本。</div>
</div>

<div class="container">
    <h2>实例</h2>
    <p> .close 类可以显示一个关闭按钮。</p>
    <button type="button" class="close"><span aria-hidden="true">x</span><span class="sr-only">关闭</span></button>
</div>

<div class="container">
    <h2>实例</h2>
    <p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p>
    <p> .caret 类在按钮中使用:</p>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">一个链接</a></li>
            <li><a href="#">另一个链接 link</a></li>
            <li><a href="#">其他功能</a></li>
        </ul>
    </div>        
</div>

更多实例

关闭图标

使用通用的关闭图标来关闭模态框和警告框。使用class close得到关闭图标。

<p>关闭图标实例
  <button type="button" class="close" aria-hidden="true">
    ×
  </button>
</p>

插入符

使用插入符表示下拉功能和方向。使用带class caret的<span>元素得到该功能。

<p>插入符实例<span class="caret"></span></p>

快速浮动

可以分别使用class pull-left或pull-right来把元素向左或向右浮动。

<div class="pull-left">
  向左快速浮动
</div>
<div class="pull-right">
  向右快速浮动
</div>

内容居中

使用class center-block来居中元素

<div class="row">
  <div class="center-block" style="width:200px;background-color:#ccc;">
    这是 center-block 实例
  </div>
</div>

清除浮动

如需清除元素的浮动,请使用.clearfix class。

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
  <div class="pull-left" style="background:#58D3F7;">
    向左快速浮动
  </div>
  <div class="pull-right" style="background: #DA81F5;">
    向右快速浮动
  </div>
</div>

显示和隐藏内容

通过使用class .show和.hidden来强行设置元素显示或隐藏(包括屏幕阅读器)。

<div class="row" style="padding: 91px 100px 19px 50px;">
  <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
    这是 show class 的实例
  </div>
  <div class="hidden" style="width:200px;background-color:#ccc;">
    这是 hide class 的实例
  </div>
</div>

屏幕阅读器

通过使用class .sr-only来把元素对所有设备隐藏,除了屏幕阅读器。

<div class="row" style="padding: 91px 100px 19px 50px;">
  <form class="form-inline" role="form">
    <div class="form-group">
      <label class="sr-only" for="email">Email 地址</label>
      <input type="email" class="form-control" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label class="sr-only" for="pass">密码</label>
      <input type="password" class="form-control" placeholder="Password">
    </div>
  </form>
</div>

图片

Bootstrap提供了三个可对图片应用简单样式的class:

  • .img-rounded:添加border-radius:6px来获得图片圆角。
  • .img-circle:添加border-radius:50%来让整个图片变成圆形。
  • .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。
<img src="/download.png" class="img-rounded">
<img src="/download.png" class="img-circle">
<img src="/download.png" class="img-thumbnail">

<img>类

描述
.img-rounded 为图片添加圆角(IE8不支持)
.img-circle 将图片变为圆形(IE8不支持)
.img-thumbnail 缩略图功能
。img-responsive 图片响应式(将很好地扩展到父元素)

响应式图片

通过在<img>标签添加.img-responsive类来让图片支持响应式设计。图片将很好地扩展到父元素。
.img-responsive类将max-width:100%和height:auto样式应用在图片上。

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

按钮

任何带有class .btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。

以下样式可用于<a>,<button>,<input>元素上:

描述
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的动作
.btn-info 该样式可以用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮
.btn-link 让按钮看起来像个链接(仍然保留按键行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

按钮大小

Class 描述
.btn-lg 这会让按钮看起来比较大。
.btn-sm 这会让按钮看起来比较小。
.btn-xs 这会让按钮看起来特别小。
.btn-sm 这会创建块级的按钮,会横跨父元素的全部宽度。
<p>
  <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
  <button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary">默认大小的原始按钮</button>
  <button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
  <button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
  <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
  <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>

按钮状态

Bootstrap提供了激活、禁用等按钮状态的class。

激活状态

按钮在激活时呈现为被按压的外观(深色的背景、深色的边框、阴影)。

| 元素 | Class |
| 按钮元素 | 添加.active class来显示它是激活的。 |
| 锚元素 | 添加.active class到<a>按钮来显示它是激活的。 |

<p>
  <button type="button" class="btn btn-default btn-lg ">默认按钮</button>
  <button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
  <button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p>

禁用状态

当禁用一个按钮时,它的颜色会变淡50%,并失去渐变。

元素 Class
按钮元素 添加disabled属性到<button>按钮。
锚元素 添加disabled class 到<a>按钮。
<p>
  <button type="button" class="btn btn-default btn-lg">默认按钮</button>
  <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
  <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p>
  <a href="#" class="btn btn-default btn-lg" role="button">链接</a>
  <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>
<p>
  <a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a>
  <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
</p>

按钮标签

可以在<a&gt、<button>或<input&元素上使用按钮class。但是建议在<button>元素上使用class,避免跨浏览器的不一致性问题。

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

支持的表单控件

Bootstrap支持最常见的表单控件,主要是input、textarea、checkbox、radio和select。

输入框(Input)

最常见的表单文本字段是输入框input。用户可以在其中输入大多数必要的表单数据。

Bootstrap提供了对所有原生的HTML5的input类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

适当的type声明是必需的,这样才能让input获得完整的样式。

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

文本框(Textarea)

当需要进行多行输入的时候,则可以使用文本框textarea。必要时可以改变rows属性。

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

复选框(Checkbox)和单选框(Radio)

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

  • 当创建表单时,如果想让用户从列表中选择若干个选项时,请使用checkbox。如果限制用户只能选择一个选项,请使用radio。
  • 对一系列复选框和单选按钮使用.checkbox-inline或.radio-inline class,控制他们显示在同一行上。
<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
  <label>
    <input type="checkbox" value="">选项 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" value="">选项 2
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>选项 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
  </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1">选项 1
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox2" value="option2">选项 2
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox3" value="option3">选项 3
  </label>
  <label class="checkbox-inline">
    <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>选项 1
  </label>
  <label class="checkbox-inline">
    <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">选项 2
  </label>
</div>

选择框(Select)

当想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。

  • 使用<select>展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。
  • 使用multiple=”multiple”允许用户选择多个选项。
<form role="form">
  <div class="form-group">
    <label for="name">选择列表</label>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <label for="name">可多选的选择列表</label>
    <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

静态控件

当需要在一个水平表单内的表单标签后放置纯文本时,请在<p>上使用class .form-control-static。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
    </div>
  </div>
</form>

表单控件状态

除了:focus状态(即用户input或使用tab键聚焦到input上),Bootstrap还为禁用的输入框定义了样式,并提供了表单验证的class。

输入框焦点

当输入框input接收到:focus时,输入框的轮廓会被移除,同时应用box-shadow。

禁用的输入框input

如果想要禁用一个输入框input,只需要简单地添加disabled属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集fieldset

对<fieldset>添加disabled属性来禁用<fieldset>内的所有控件。

验证状态

Bootstrap包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的class(.has-warning、.has-error或.has-success)即可使用验证状态。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">聚焦</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入(Fieldset disabled)</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单(Fieldset disabled)</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>禁止选择</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success">
    <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>
  </div>
  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="inputError">输入错误</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
    </div>
  </div>
</form>

表单控件大小

可以分别使用class .input-lg和.col-lg-*来设置表单的高度和宽度。

<form role="form">
  <div class="form-group">
    <input class="form-control input-lg" type="text" placeholder=".input-lg">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="默认输入">
  </div>
  <div class="form-group">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">
  </div>
  <div class="form-group"></div>
  <div class="form-group">
    <select class="form-control input-lg">
      <option value="">.input-lg</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control">
      <option value="">默认选择</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control input-sm">
      <option value="">.input-sm</option>
    </select>
  </div>
  <div class="row">
    <div class="col-lg-2">
      <input type="text" class="form-control" placeholder=".col-lg-2">
    </div>
    <div class="col-lg-3">
      <input type="text" class="form-control" placeholder=".col-lg-3">
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder=".col-lg-4">
    </div>
  </div>
</form>

表单帮助文本

Bootstrap表单控件可以在输入框input上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在<input>后使用.help-block。

<form role="form">
  <span>帮助文本实例</span>
  <input class="form-control" type="text" placeholder="">
  <span class="help-block">一个较长的帮助文本块,超过一行,
  需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

表单

表单布局

Bootstrap提供了下列类型的表单布局:

  • 垂直表单(默认)
  • 内联表单
  • 水平表单

垂直或基本表单

基本的表单结构是Bootstrap自带的,个别的表单控件自动接收一些全局样式。创建基本表单的步骤:

  • 向父<form>元素添加role=”form”。
  • 把标签和控件放在一个带有class .form-group的<div>中。这是获取最佳间距所必需的。
  • 向所有的文本元素<input>、<textarea>和<select>添加class=”form-control”。
<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
    <p class="help-block">这里是块级帮助文本的实例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

内联表单

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向<form>标签添加class .form-inline。

  • 默认情况下,Bootstrap中的input、select和textarea有100%宽度。在使用内联表单时,需要在表单控件上设置一个宽度。
  • 使用class .sr-only,可以隐藏内联表单的标签。
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

水平表单

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

  • 向父<form>元素添加class .form-horizontal。
  • 把标签和控件放在一个带有class .form-group的<div>中。
  • 向标签添加class .control-label。
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">姓</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox">请记住我
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登录</button>
    </div>
  </div>
</form>

表格

Bootstrap提供了一个清晰的创建表格的布局。

标签 描述
<table> 为表格添加基础样式
<thead> 表格标题行的容器元素(<tr>),用来标识表格列。
<tbody> 表格主体中的表格行的容器元素(<tr>)。
<tr> 一组出现在单行上的表格单元格的容器元素(<td>或<th>)。
<td> 默认的表格单元格。
<th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在<thead>内使用。
<caption> 关于表格存储内容的描述或总结。

表格类


.table

为任意<table>添加基本样式(只有横向分隔线)

<div class="container">
    <h2>表格</h2>
    <p> .table 为任意表格添加基本样式 (只有横向分隔线):</p>            
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

.table-striped

在<tbody>内添加斑马线形式的条纹(IE8不支持)

<div class="container">
    <h2>表格</h2>    
    <p> .table-striped 类在 tbody 内添加斑马线形式的条纹 ( IE8 不支持):</p>                  
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

.table-bordered

为表格的所有单元格添加边框

<div class="container">
    <h2>表格</h2>
    <p> .table-bordered 类为所有表格的单元格添加边框:</p>                        
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

.table-hover

在<tbody>内的任一行启用鼠标悬停状态

<div class="container">
    <h2>Table</h2>
    <p> .table-hover 类启用表格中 tbody 上的行的悬停效果:</p>                              
    <table class="table table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

.table-condensed

让表格更加紧凑

<div class="container">
    <h2>表格</h2>
    <p> .table-condensed 类让表格更加紧凑:</p>                                    
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="container">
    <h2>表格</h2>
    <p>联合使用所有表格类:</p>                                          
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

<tr>,<th>和<td>类


.active

将悬停的颜色应用在行或者单元格上

<div class="container">
    <h2>表格</h2>
    <p> .active 类将悬停的颜色应用在行或者单元格上:</p>                                        
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

.success

表示成功的操作

<div class="container">
    <h2>表格</h2>
    <p> .success 类表示执行成功的操作:</p>                                                  
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

.info

表示信息变化的操作

<div class="container">
    <h2>表格</h2>
    <p> .info 类表示信息变化的操作:</p>                                                            
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr class="info">
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

.warning

表示一个警告的操作

<div class="container">
    <h2>表格</h2>
    <p> .warning 类表示一个警告操作:</p>                                                                      
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr class="warning">
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

.danger

表示一个危险的操作

<div class="container">
    <h2>表格</h2>
    <p> .danger 类表示一个危险的操作:</p>                                                                                
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr class="danger">
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
    </table>
</div>

基本的表格

想要一个只带内边距(padding)和水平分割的基本表,请添加class .table,如下:

<table class="table">
  <caption>基本的表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
    </tr>
  </tbody>
</table>

可选的表格类

除了基本的表格标记和.table class,还有一些可以用来为标记定义样式的类。

条纹表格

通过添加.table-striped class,将在<tbody>内的行上看到条纹。

<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>

边框表格

通过添加.table-bordered class,将看到每个元素周围都有边框,且占整个表格是圆角的。

<table class="table table-bordered">
  <caption>边框表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>

悬停表格

通过添加.table-hover class,当指针悬停在行上时会出现浅灰色背景。

<table class="table table-hover">
  <caption>悬停表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>

精简表格

通过添加.table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑。

<table class="table table-condensed">
  <caption>精简表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody>
</table>

上下文类

.active、.success、.warning、.danger。这些类可以被应用到<tr>、<td>或<th>。

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody>
</table>

响应式表格

通过把任意的.table包在.table-responsive class内,可以让表格水平滚动以适应小型设备(小于768px)。当在大于768px宽的大型设备上查看时,将看不到任何的差别。

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table>
</div>

代码

Bootstrap允许以两种方式显示代码:

  • 第一种是<code>标签。如果想要内联显示代码,那么应该使用<code>标签。
  • 第二种是<pre>标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么应该使用<pre>标签。

请确保使用<pre>和<code>标签时,开始和结束使用了Unicode变体:&lt;和&gt;。

<p><code>
</code> 作为内联元素被包围。</p> <p>如果需要把代码显示为一个独立的块元素,请使用 <pre> 标签:</p> <pre> <article> <h1>Article Heading</h1> </article> </pre>

<var>

变量赋值:x=ab+y

<div class="container">
    <h2>代码</h2>   
    <p>使用 var 元素表示变量:</p>
    <p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
</div>

<kbd>

按键提示:CTRL + P

<div class="container">
    <h2>代码</h2>
    <p>使用 kbd 元素表示按键输入:</p>
    <p>使用 <kbd>ctrl + p</kbd> 来打开打印窗口。</p>
</div>

<pre>

多行代码

<div class="container">
    <h2>代码</h2>
    <p>使用 pre 元素输出多行:</p>
    <pre>在 pre 元素中的文本
    宽度的显示与文本的宽度一样,
    保留了  空  格 和

    换行。</pre>
    <p>如果你添加 .pre-scrollable 类,  pre 元素最大的高度 max-height 为 350px ,并生成一个 Y 轴的滚动条:</p>
    <pre class="pre-scrollable">在 pre 元素中的文本
    宽度的显示与文本的宽度一样,
    保留了  空  格 和

    换行。</pre>
</div>

<pre class=”pre-scrollable”>

多行代码带有滚动条

<div class="container">
    <h2>代码</h2>
    <p>使用 pre 元素输出多行:</p>
    <pre>在 pre 元素中的文本
    宽度的显示与文本的宽度一样,
    保留了  空  格 和

    换行。</pre>
    <p>如果你添加 .pre-scrollable 类,  pre 元素最大的高度 max-height 为 350px ,并生成一个 Y 轴的滚动条:</p>
    <pre class="pre-scrollable">在 pre 元素中的文本
    宽度的显示与文本的宽度一样,
    保留了  空  格 和

    换行。</pre>
</div>

<samp>

电脑程序输出:Sample output

<div class="container">
    <h2>代码</h2>
    <p>使用 samp 元素包含电脑输出的内容:</p>
    <p><samp>This text is output from a computer program....</samp></p>
</div>

<code>

同一行代码片段:span,div

<div class="container">
    <h2>代码</h2>
    <p>使用 code 元素来表示代码片段:</p>
    <p>以下是 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 。</p>
</div>

排版

Bootstrap使用Helvetica Neue、Helvetica、Arial和sans-serif作为其默认的字体栈。
使用Bootstrap的排版特性,可以创建标题、段落、列表以及其他内联元素。

标题

Bootstrap中定义了所有的HTML标题(h1到h6)的样式。

内联子标题

如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加<small>,后者添加.small class,这样子就能得到一个字号更小的颜色更浅的文本,如下:

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

引导主体副本

为了给断了添加强调文本,则可以添加class=”lead”,这将得到更大更粗、行高更高的文本,如下:

<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

强调

HTML的默认强调标签<small>(设置文本为父文本大小的85%)、<strong>(设置文本更粗的文本)、<em>(设置文本为斜体)。

Bootstrap提供了一些用于强调文本的类,如下:

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内,并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的,一般为淡灰</p>
<p class="text-primary">本行内容带有一个 primary class,主要一般为蓝色</p>
<p class="text-success">本行内容带有一个 success class,成功一般为绿色</p>
<p class="text-info">本行内容带有一个 info class,信息一般为蓝色</p>
<p class="text-warning">本行内容带有一个 warning class,警告一般为黄色</p>
<p class="text-danger">本行内容带有一个 danger class,危险一般为红色</p>

缩写

HTML元素提供了用于缩写的标记,比如WWW或HTTP。

Bootstrap定义<abbr>元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要为<abbr>title属性添加了文本)。为了得到一个更小字体的文本,请添加.initialism到<abbr>。

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

地址(Address)

使用<address>标签,可以在网页上显示联系信息。由于<address>默认为display:block;,您需要使用标签来为封闭的地址文本添加换行。

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a>
</address>

引用(Blockquote)

可以在任意的HTML文本旁边使用默认的<blockquote>。其他选项包括,添加一个<small>标签来标识引用的来源,使用class .pull-right向右对齐引用。如下:

<blockquote>
  <p>
  这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。
  </p>
</blockquote>
<blockquote>
  这是一个带有源标题的引用。
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<blockquote class="pull-right">
  这是一个向右对齐的引用。
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

列表

Bootstrap支持有序列表、无序列表和定义列表。

  • 有序列表:有序列表是指以数字或其他有序字符开头的列表。
  • 无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果不想显示着重号,可以使用class .list-unstyled来移除样式。也可以通过使用class .list-inline把所有的列表项放在同一行中。
  • 定义列表:在这种类型的列表中,每个列表项可以包含<dt>和<dd>元素。<dt>代表定义术语,就像字典,这是被定义的属于(或短语)。接着,<dd>是<dt>的描述。可以使用class dl-horizontal把<dl>行中的属于与描述并排显示。
<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

<h4>无序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<h4>未定义样式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<h4>内联列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<h4>定义列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

更多排版类

.lead

使段落突出显示

<div class="container">
    <h2>排版</h2>
    <p>这是一个普通的段落。</p>
    <p class="lead">这是个文字突出的段落。</p>
    <p>这是一个普通的段落。</p>
</div>

.small

设定小文本(设置为父文本的85%大小)

<div class="container">
    <h2>排版</h2>
    <p>这是一个普通的段落。</p>
    <p class="small">这是个文字更小。</p>
    <p>这是一个普通的段落。</p>
</div>

.text-left .text-center .text-right .text-justify .text-nowrap

设置文本的对其方式

<div class="container">
    <h2>排版</h2>
    <p class="text-left">左对齐文本</p>
    <p class="text-right">右对齐文本</p>      
    <p class="text-center">居中对齐文本</p>
    <p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>      
    <p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p>
    <p><strong>提示:</strong> 尝试重置浏览器大写查看 “text-justify” 和 “text-nowrap” 段落的效果。</p>      
</div>

.text-lowercase .text-uppercase .text-capitalize

设置文本的大小写

<div class="container">
    <h2>排版</h2>
    <p class="text-lowercase">Lowercased text(小写文本).</p>
    <p class="text-uppercase">Uppercased text(大写文本).</p>      
    <p class="text-capitalize">Capitalized text(首字母大写文本).</p>
</div>

.initialism

显示在<abbr>元素中的文本以小号字体展示,且可以将小写字母转换为大写字母

<div class="container">
    <h2>排版</h2>
    <p><abbr title="世界卫生组织:World Health Organization">WHO</abbr> 成立于 1948. (普通的 abbr)</p>      
    <p><abbr title="世界卫生组织:World Health Organization" class="initialism">WHO</abbr> 成立于 1948。(略小 abbr)</p>
    <p><abbr title="世界卫生组织:World Health Organization" class="initialism">who</abbr> 成立于 1948。(小写字母 who 转换为 WHO)</p>
</div>

.blockquote-reverse

设定引用右对齐

<div class="container">
    <h2>排版</h2>
    <p>右对齐引用内容:</p>
    <blockquote class="blockquote-reverse">
        <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
        <footer>From WWF's website</footer>
    </blockquote>
</div>

.list-unstyled

移除默认的列表样式,列表项中左对齐(<ul>和<ol>中)。这个类仅适用于直接子列表项(如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)

<div class="container">
    <h2>排版</h2>
    <p> .list-unstyled 类移除了默认的列表样式,列表项左对齐 (直接子元素):</p>
    <ul class="list-unstyled">
        <li>Coffee</li>
        <li>Tea
            <ul>
                <li>Black tea</li>
                <li>Green tea</li>
            </ul>
        </li>
        <li>Milk</li>
    </ul>
</div>

.list-inline

将所有列表项放置同一行

<div class="container">
    <h2>排版</h2>
    <p> .list-inline 类让所有的项显示在同一行:</p>
    <ul class="list-inline">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</div>

.dl-horizontal

该类设置了浮动和偏移,应用于<dl>元素和<dt>元素中

<div class="container">
    <h2>排版</h2>
    <p>使用 dl 元素设置描述列表:</p>
    <dl class="dl-horizontal">
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>     
</div>

.pre-scrollable

使<pre>元素可滚动scrollable

<div class="container">
    <h2>排版</h2>
    <p>设置 pre 元素可滚动:</p>
    <pre class="pre-scrollable">
        内容可滚动
        Text in a pre element
        is displayed in a fixed-width
        font, and it preserves
        both      spaces and
        line breaks.
        Text in a pre element
        is displayed in a fixed-width
        font, and it preserves
        both      spaces and
        line breaks.
    </pre>
</div>

响应式实用工具

Bootstrap提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备显示和隐藏。

需要谨慎使用这些工具,避免在同一个站点创建不同的版本。响应式实用工具目前只适用于块和表切换。

超小屏幕
手机 (<768px)
小屏幕
平板 (≥768px)
中等屏幕
桌面 (≥992px)
大屏幕
桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

从v3.2.0版本起,形如.visible-的类针对每种屏幕大小都有了三种变体,每个针对CSS中不同的display属性,列表如下:

类组 CSS display
.visible-*-block display:block;
.visible-*-inline display:inline;
.visible-*-inline-block display:inline-block;

因此,以超小屏幕(xs)为例,可用的.visible-类是:.visible-xs-block、.visibile-xs-inline和.visible-xs-inline-block。

.visibile-xs、.visible-sm、.visible-md和.visible-lg类也同时存在。但是从v3.2.0版本开始不再建议使用。除了<table>相关的元素的特殊情况外,它们与.visible-*-block大体相同。

打印类

下表列出了打印类。使用这些切换打印内容。

class 浏览器 打印机
.visible-print-block
.visible-print-inline
.visible-print-inline-block
隐藏 可见
.hidden-print 可见 隐藏

实例

下面的实例演示了上面所列举的帮助器类的用法。调整浏览器的窗口大小,或者在不同的设备上加载实例,测试响应式实用工具类。

<div class="container" style="padding: 40px;">
    <div class="row visible-on">
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-xs">特别小型</span>
            <span class="visible-xs">✔ 在特别小型设备上可见</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-sm">小型</span>
            <span class="visible-sm">✔ 在小型设备上可见</span>
        </div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-md">中型</span>
            <span class="visible-md">✔ 在中型设备上可见</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-lg">大型</span>
            <span class="visible-lg">✔ 在大型设备上可见</span>
        </div>
    </div>
</div>

网格系统 Grid System

什么是网格(Grid)?

在平面设计中,网格是一种由一系列用于组织内容的相交的直线组成的结构。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用HTML和CSS的方法。

简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。

什么是Bootstrap网格系统(Grid System)?

Bootstrap官方文档中有关网格系统的描述:

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3是移动设备优先的,在这个意义上,Bootstrap代码从小屏幕设备开始,然后扩展到大屏设备上的组件和网格。

移动设备优先策略

  1. 内容
    • 决定什么是最重要的。
  2. 布局
    • 优先设计更小的宽度
    • 基础的CSS是移动设备优先,媒体查询是针对于平板电脑和台式电脑。
  3. 渐进增强
    • 随着屏幕大小的增加而添加元素

响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

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

Bootstrap网格系统(Grid System)的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了Bootstrap网格系统是如何工作的:

  • 行必须放置在.container class内,以便获得适当的对齐(alignment)和内边距(padding)。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内,且唯有列可以是行的直接子元素。
  • 预定义的网格类,比如.row和.col-xs-4,可用于快速创建网格布局。LESS混合类可用于更多语义布局。
  • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过.rows上的外边距(margin)取负,表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的12个可用的列来创建的。例如,要创建三个相等的列,则使用三个.col-xs-4。

媒体查询

媒体查询是非常别致的”有条件的CSS规则”。它只适用于一些基于某些规定条件的CSS。如果满足那些条件,则应用相应的样式。

Bootstrap中的媒体查询允许基于视口大小移动、显示并隐藏内容。下面的媒体查询在LESS文件中使用,用来创建Bootstrap网格系统中的关键的分界点阀值。

/* 超小设备( 手机,小于768px ) */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备( 平板电脑,768px起 ) */
@media(min-width: @screen-sm-min){...}

/* 中型设备( 台式电脑,992px起 ) */
@media(min-width: @screen-md-min){...}

/* 大型设备( 大台式电脑,1200px起 ) */
@media(min-width: @screen-lg-min){...}

有时候也会在媒体查询代码中包含max-width,从而将CSS的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max){...}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max){...}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max){...}
@media (min-width: @screen-lg-min){...}

媒体查询有两个部分,先是一个设备规范,然后是一个大小规则。在上面的案例中,设置了下列规则:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max){...}

对于所有带有min-width: @screen-sm-min的设备,如果屏幕宽度小于@screen-sm-max,则会进行一些处理。

网格选项

下表总结了Bootstrap网格系统如何跨多个设备工作:

超小设备手机(<768px) 小型设备平板电脑(>=768px) 中型设备台式电脑(>=992px) 大型设备台式电脑(>=1200px)
网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
最大容器 None(auto) 750px 970px 1170px
Class前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px(一个列的每边分别15px) 30px(一个列的每边分别15px) 30px(一个列的每边分别15px) 30px(一个列的每边分别15px)
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

基本的网格结构

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>

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

<div class="container">...

响应式的列重置

以下实例包含了4个网格,但是在小设备浏览时无法确定网格显示的位置。
为了解决这个问题,可以使用.clearfix class和响应式实用工具来解决,如下面实例所示:

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-3"
      style="background-color: #dedef8;
      box-shadow: inset 1px -1px #444, inset -1px 1px 1px #444;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>

    <div class="col-xs-6 col-sm-3"
      style="background-color: #dedef8;
      box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut.</p>
    </div>

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

    <div class="col-xs-6 col-sm-3"
      style="background-color: #dedef8;
      box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col-xs-6 col-sm-3"
      style="background-color: #dedef8;
      box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
    </div>
  </div>
</div>

浏览器上调整窗口大小查看变化,或在手机上查看效果。

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列 腾出更多的空间。例如,.col-xs-*类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移,请使用.col-md-offset-类。这些类会把一个列的左外边距(margin)增加列,其中*范围是从1到11。

在下面的实例中,我们有<div class=”col-md-6″>..</div>,我们将使用.col-md-offset-3 class来居中这个div。

<div class="container">
  <h1>Hello, ShiJiuSui!</h1>

  <div class="row">
    <div class="col-xs-6 col-md-offset-3"
      style="background-color: #dedef8;
      box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

嵌套列

为了在内容中嵌套默认的网格,请添加一个新的.row,并在一个已有的.col-md-列内添加一组.col-md-列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

在下面的实例中,布局有两个列,第二列被分为两行四个盒子。

<div class="container">
    <h1>Hello, ShiJiuSui!</h1>
    <div class="row">
        <div class="col-md-3" style="...">
            <h4>第一列</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
        <div class="col-md-9" style="...">
            <h4>第二列 - 分为四个盒子</h4>
            <div class="row">
                <div class="col-md-6" style="...">
                    <p>
                        Consectetur art party Tonx culpa semiotics. Pinterest 
        assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6" style="...">
                    <p>
                         sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style="...">
                    <p>
                        quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6" style="...">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

:style都为

style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"

列排序

Bootstrap 网格系统另一个完美的特性,就是可以很容易地以一种顺序编写列,然后以另一种顺序显示列。

可以很轻易地改变带有.col-md-push-和.col-md-pull-类的内置网格列的顺序,其中*范围是从1到11。

在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用.col-md-push-和.col-md-pull-类来互换这两列的顺序。

<div class="container">
    <h1>Hello, ShiJiuSui!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="...">
         我在左边
        </div>
        <div class="col-md-8" style="...">
         我在右边
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序后
        </p>
        <div class="col-md-4 col-md-push-8" style="...">
         我在左边
        </div>
        <div class="col-md-8 col-md-pull-4" style="...">
         我在右边
        </div>
    </div>
</div>

:style都为

style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"

Bootstrap 1

HTML5文档类型(Doctype)

Bootstrap使用了一些HTML5元素和CSS属性,为了能让这些正常工作,需要使用HTML5文档类型。

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

移动设备优先

移动设备优先是Bootstrap 3的最显著的变化。
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来建立跨浏览器的一致性。
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:" ";
}

这会产生伪元素。
设置display为table,会创建一个匿名的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;
}

html 关于背景的属性 意义和设置

背景

background              背景
background-color        背景色 
background-image        背景图片
background-repeat       背景图片是否重复
background-position     背景图片的位置
background-attachment 背景图片是否滚动
  1. 背景色会铺满整个容器
  2. 背景不会占用容器的宽高(颜色和图片都不会)
    如果div没有宽高,内容可以把容器的宽高撑开
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-color:green;
background-color:rgba(255,107,35,1);
background-color:#008800; /* #080 */
background-color:transparece;
}
</style>

<div>

</div>
  1. 背景图片
    url(图片的地址)
    none:没有背景图(默认)
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-image:url(images/img.jpg);
background-image:none;
}
</style>

<div>

</div>
  1. 背景图平铺
no-repeat       不重复平铺
repeat-x        横向平铺
repeat-y        纵向平铺 
repeat          全部平铺 (默认)
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:repeat;`
  1. 背景图片位置
传数值 :       背景图片离左上角的距离
x           正值/负值
y           正值/负值

传关键字:   
x           left/right/center
y           top/bottom/center

如果只传一个值得话,那另一个值默认为center
如果两个值都不写的话,那默认为0, 0点,左上角
background-position: 50px 50px;
background-position: center 50px;
  1. 背景是否滚动
scroll      背景图片跟随滚动条滚动(默认)
fixed       背景图片不会跟随滚动条滚动
background-attachment:fixed;
  1. 背景复合样式
<style>
div{
background-image:url(images/img.jpg);
background-position:left top;
background-repeat:no-repeat;
background-attachment:scroll;

background:green url(images/img.jpg) no-repeat center top;
}
</style>

边框

边框

Border

Code示例1:

div{
border:10px dotted rgha(255,0,0,0);
}
  1. 粗细
    1px
  2. 样子
    solid 实线
    dashed 虚线
    dotted 点画线(不同浏览器显示的不一样)
  3. 颜色
    red 颜色的英文单词
    #f00 16进制
    rgb(255,0,0) rgb的表示
    rgba(255,0,0,0.5) rgba的表示(CSS3内容)
  4. 设置样式
    • 复合样式(三个值合起来) border:10px dotted rgha(255,0,0,0);
    • 单一 样式

一个值:

div{
<!-- width style color -->
border-width:1px;
border-style:solid;
border-color:red;
}

四个值:

div{
<!-- 上 右 下 左 -->
border-width:1px 2px 3px 4px;
border-style:solid dashed dotted solid;
border-color:red green blue black;
}

两个值:

div{
<!-- 上下 左右 -->
border-width:1px 2px;
border-style:solid dashed;
border-color:red green;
}

三个值:

div{
<!-- 上 左右 下 -->
border-width:1px 2px 3px;
border-style:solid dashed dotted;
border-color:red green black;
}
div{
<!-- top right bottom left -->
border:1px solid red;
border-top:3px solid green;<!-- 覆盖以前的效果 -->
border-bottom-width:10px;<!-- 覆盖一个属性 -->
}
  1. 特征
    边框是一个非矩形
div{
<!-- 实现倒三角 -->
width:0px;
height:0px;
border:20px solid #fff;
border-top-color:blue;
}

CSS三种样式

三种样式

行间样式表

内部样式表

  • 出现位置:出现在html里,通常放在head里面
  • 作用范围:当前页面

外部样式表

  • 出现位置:出现在外部文件
  • 引用方式:link标签

index.css文件:

div {
width:200px;
height:300px;
}

html文件

<link rel="stylesheet" href="index.css" /> 

行为,结构,样式相分离

  • HTML 结构
  • CSS 样式
  • JS 行为

WEB(二)–PS

PS简单操作

  1. 清除参考线

    视图菜单下,清除参考线

  2. 面板显示

    窗口菜单下,各种面板如:信息面板、历史记录面板
    Tab键可以隐藏窗口

  3. 图层的概念

  4. 移动工具

    自动选择
    配合图层选择,只能移动当前现在图层内容

  5. 选区工具

    蚂蚁线
    可以在信息面板中,看到选区大小
    在信息面板中,下拉菜单中,选择“面板选择”,可以切换单位
    选择区域,并选择对应的图层,可以通过Ctrl+C进行复制内容
    通过Ctrl+R调出标尺来,可以拖拽冲辅助线,按住Ctrl键,进行选择区域会自动贴合辅助线

  6. 裁切工具

    可以调整区域,也可以旋转选区
    使用Ctrl+D来取消选区
    选择好了后,按Enter键完成裁剪

  7. 吸管工具

    拾色器,前景色

  8. 文字工具

    选择文字后,可以显示字体,字号,颜色等
    也可以通过字符面板查看属性
    ESC退出

  9. 抓手工具

    用来移动画布的
    可以进行实际像素,合适像素等切换
    快捷键为空格键

  10. 放大镜工具

    快捷键为Ctrl+ +/-
    配合抓手工具快捷键Space键一起操作很好

  11. 切图

    选择对应的图层,使用选区工具,选择对应内容,Ctrl+C,Ctrl+N,Ctrl+V
    可以存储图片,文件菜单,存储为Web格式,有四种格式gif,jpeg,png-8,png-24

    • gif 只支持全透明,动图
    • jpeg 大图清晰
    • png-8 只支持全透明,文件比gif小
    • png-24 支持全透明和半透明
  12. 截图

    Windows下用PrtSc键
    Mac下用Command+Shift+3/4
    QQ截图,百度测网速

  13. 清除按钮上文字(抠图技巧)

    选区工具,选择背景区域
    Ctrl+T切换,拖动选区,覆盖文字后,按Enter确认,Ctrl+D清除