Bootstrap 彻底教程笔记

时间 2020-05-16 标签 bootstrap 彻底教程笔记

Bootstrap CSS

Bootstrap 排版

引导主体副本
为了给段落添增强调文本，则能够添加 class=”lead”，这将获得更大更粗、行高更高的文本，以下面实例所示：css

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

引导主体副本

这是一个演示引导主体副本用法的实例。ios

强调web

HTML 的默认强调标签 :bootstrap

<small>（设置文本为父文本大小的 85%）、
<strong>（设置文本为更粗的文本）、
<em>（设置文本为斜体）。app

Bootstrap 提供了一些用于强调文本的类，以下面实例所示：dom

<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>

本行内容是在标签内
本行内容是在标签内
本行内容是在标签内，并呈现为斜体
ide

向左对齐文本svg

居中对齐文本布局

向右对齐文本学习

本行内容是减弱的

本行内容带有一个 primary class

本行内容带有一个 success class

本行内容带有一个 info class

本行内容带有一个 warning class

本行内容带有一个 danger class

缩写

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>

WWW
RSS

地址（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>

Some Company, Inc.
007 street
Some City, State XXXXX
P: (123) 456-7890

Full Name
mailto@somedomain.com

引用（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>

这是一个默认的引用实例。

这是一个带有源标题的引用。 Someone famous in Source Title

这是一个向右对齐的引用。 Someone famous in Source Title

.
.
.

列表

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

有序列表：有序列表是指以数字或其余有序字符开头的列表。
无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。
定义列表：在这种类型的列表中，每一个列表项能够包含 <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>

有序列表

Item 1
Item 2
Item 3
Item 4

无序列表

Item 1
Item 2
Item 3
Item 4

未定义样式列表

Item 1
Item 2
Item 3
Item 4

内联列表

Item 1
Item 2
Item 3
Item 4

定义列表

Description 1: Item 1
Description 2: Item 2

水平的定义列表

Description 1: Item 1
Description 2: Item 2

更多排版类

下表提供了 Bootstrap 更多排版类的实例：

Bootstrap 代码

Bootstrap 容许您以两种方式显示代码：

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

请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： &lt; 和 &gt;。

实例

<p><code>&lt;header&gt;</code> 做为内联元素被包围。</p>
<p>若是须要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
<pre>
    &lt;article&gt;
        &lt;h1&gt;Article Heading&lt;/h1&gt;
    &lt;/article&gt;
</pre>

<header> 做为内联元素被包围。

若是须要把代码显示为一个独立的块元素，请使用 <pre> 标签：

    <article>
        <h1>Article Heading</h1>
    </article>

更多实例

Bootstrap 表格

Bootstrap 提供了一个清晰的建立表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

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

表格类

下表样式可用于表格中：

类	描述
.table	为任意 `<table>` 添加基本样式 (只有横向分隔线)(包含大小尺寸等)
.table-striped	在 `<tbody>` 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为全部表格的单元格添加边框
.table-hover	在 `<tbody>` 内的任一行启用鼠标悬停状态(颜色改变)
.table-condensed	让表格更加紧凑

联合使用全部表格类:

<table class="table table-striped table-bordered table-hover table-condensed">
        <caption>联合使用全部表格类:</caption>  
        <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>

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

下表的类可用于表格的行或者单元格：

类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操做
.info	表示信息变化的操做
.warning	表示一个警告的操做
.danger	表示一个危险的操做

响应式表格

经过把任意的 .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 表单

在本章中，咱们将学习如何使用 Bootstrap 建立表单。Bootstrap 经过一些简单的 HTML 标签和扩展的类便可建立出不一样样式的表单。

表单布局

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>

内联表单

若是须要建立一个表单，它的全部元素是内联的，向左对齐的，标签是并排的，请向标签添加 class .form-inline。

<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>

默认状况下，Bootstrap 中的 input、select 和 textarea 有 100%宽度。在使用内联表单时，您须要在表单控件上设置一个宽度。
使用 class .sr-only，您能够隐藏内联表单的标签。

水平表单

水平表单与其余表单不只标记的数量上不一样，并且表单的呈现形式也不一样。如需建立一个水平布局的表单，请按下面的几个步骤进行：

向父 <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 支持最多见的表单控件，主要是 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” 容许用户选择多个选项。

下面的实例演示了这两种类型（select 和 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>