bootstrap常用知识点总结

栅格参数：

bootstrap 其实是把网页等分为了 12分，bootstrap把根据屏幕大小把屏幕分为了 4个层级，小于 768 像素的为超小屏幕，大于等于 768 像素的为小屏幕，大于等于992像素的为中等屏幕，大于等于1200像素的则为大屏幕，相应的类前缀见图或查看官方文档。

栅格：
超小屏幕手机 (<768px) .col-xs-
小屏幕平板 (≥768px) .col-sm-
中等屏幕桌面显示器 (≥992px) .col-md-
大屏幕大桌面显示器 (≥1200px) .col-lg-

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<h1>h1\. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2\. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3\. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4\. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5\. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6\. Bootstrap heading <small>Secondary text</small></h6>

页面主体

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

<p>...</p>

中心内容

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

<p class="lead">...</p>

内联文本元素

Marked text

You can use the mark tag to <mark>highlight</mark> text.

被删除的文本

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

<del>This line of text is meant to be treated as deleted text.</del>

无用文本

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

<s>This line of text is meant to be treated as no longer accurate.</s>

插入文本

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

<ins>This line of text is meant to be treated as an addition to the document.</ins>

带下划线的文本

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

<u>This line of text will render as underlined</u>

小号文本

对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。

<small>This line of text is meant to be treated as fine print.</small>

着重

通过增加 font-weight 值强调一段文本。

<strong>rendered as bold text</strong>

斜体

用斜体强调一段文本。

<em>rendered as italicized text</em>

对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

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

改变大小写

通过这几个类可以改变文本的大小写。

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

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

基本缩略语

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

首字母缩略语

为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

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

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

引用

在你的文档中引用其他来源的内容。

默认样式的引用

将任何 <abbr title="HyperText Markup Language" style="margin: 0px; padding: 0px;">HTML</abbr> 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。

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

列表

无序列表

排列顺序无关紧要的一列元素。

<ul>
  <li>...</li>
</ul>

有序列表

顺序至关重要的一组元素。

<ol>
  <li>...</li>
</ol>

内联列表

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

<ul class="list-inline">
  <li>...</li>
</ul>

描述

带有描述的短语列表。

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

代码

内联代码

通过 <code> 标签包裹内联样式的代码片段。

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用户输入

通过 <kbd> 标签标记用户通过键盘输入的内容。

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

代码块

多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

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

变量

通过 <var> 标签标记变量。

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

表格

基本实例

<table class="table">
  ...
</table>

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

<table class="table table-striped">
  ...
</table>

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
  ...
</table>

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

<table class="table table-hover">
  ...
</table>

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<table class="table table-condensed">
  ...
</table>

状态类

通过这些状态类可以为行或单元格设置颜色。

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

其他的看api吧，

几个单个的例子：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- <div class=""> --><!-- col-md-4是左浮动，清除浮动加overflow:hidden就可以了 -->
        <div class="col-md-4">
          <div class="panel panel-default">
            <div class="panel-body">
              <table class="table">
              <caption>Optional table caption.</caption>
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <!-- <th scope="row">1</th> -->
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
            </div>
          </div>
      </div>
      <div class="col-md-4">
           <div class="panel panel-default">
            <div class="panel-body">
              <table class="table">
              <caption>Optional table caption.</caption>
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
            </div>
          </div>
      </div>
   <!-- </div> -->
    <!-- 表格，面板，栅格 -->
    <!-- <div> -->
      <h1>h1\. Bootstrap heading <small>Secondary text</small></h1>
      <h2>h2\. Bootstrap heading <small>Secondary text</small></h2>
      <h3>h3\. Bootstrap heading <small>Secondary text</small></h3>
      <h4>h4\. Bootstrap heading <small>Secondary text</small></h4>
      <h5>h5\. Bootstrap heading <small>Secondary text</small></h5>
      <h6>h6\. Bootstrap heading <small>Secondary text</small></h6>
    <!-- </div> -->
    <div>测试一下浮动结束</div>
    <div>
      <a class="btn btn-default" style="outline: none;" href="#" role="button">Link</a>
      <button class="btn btn-default" type="submit">Button</button>
      <input class="btn btn-default" type="button" value="Input">
      <input class="btn btn-default" type="submit" value="Submit">
      <!-- Standard button -->
      <button type="button" class="btn btn-default">（默认样式）Default</button>

      <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
      <button type="button" class="btn btn-primary">（首选项）Primary</button>

      <!-- Indicates a successful or positive action -->
      <button type="button" class="btn btn-success">（成功）Success</button>

      <!-- Contextual button for informational alert messages -->
      <button type="button" class="btn btn-info">（一般信息）Info</button>

      <!-- Indicates caution should be taken with this action -->
      <button type="button" class="btn btn-warning">（警告）Warning</button>

      <!-- Indicates a dangerous or potentially negative action -->
      <button type="button" class="btn btn-danger">（危险）Danger</button>

      <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
      <button type="button" class="btn btn-link">（链接）Link</button>
      <p>
      <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
      <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
        <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
        <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
        <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
      </p>
    </div>
    <div>
      <div class="center-block" style="background-color: #eee;width: 1200px;"> 左右居中 </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  </body>
</html></pre>

水平风格表单：标签在左，控件在右

1、在<form>元素是使用类名“form-horizontal”。

2、配合Bootstrap框架的网格系统。

内联表单：控件一行显示

在<form>元素中添加类名“form-inline”

表单控件

select：<select multiple class="form-control"> #选择多个

textarea： <textarea class="form-control" rows="3"></textarea>

radio，checkbox：div包着label包着input

<pre name="code" class="prettyprint xml" style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word;"><div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div></pre>

radio，checkbox：水平排列

div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input

禁用控件：在控件上添加disabled属性

验证状态：form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback，最后加一个span存放icon

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,723评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,003评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,512评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,825评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,874评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,841评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,812评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,582评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,033评论 1赞 308
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,309评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,450评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,158评论 5赞 341
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,789评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,409评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,609评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,440评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,357评论 2赞 352