[关闭]
@EncyKe 2016-04-29T02:01:55.000000Z 字数 25625 阅读 7855

Bootstrap【基础篇】

前端 CSS

一、简介

1. 官网

2. 特点

3. 方法

4. 注意

5. 模板

1) html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         <title>Bootstrap的HTML标准模板</title>   
  8.         <!-- Bootstrap -->
  9.         <link href="css/bootstrap.min.css" rel="stylesheet">
  10.         <!--你自己的样式文件 -->
  11.         <link href="css/your-style.css" rel="stylesheet">        
  12.         <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
  13.         <!--[if lt IE 9]>
  14.         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15.         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  16.         <![endif]-->
  17.     </head>
  18.     <body>
  19.         <h1>Hello, world!</h1>
  21.         <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
  22.         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  23.         <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
  24.         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  25.     </body>
  26. </html>

2) normalize.css

  1. html {
  2.   font-family: sans-serif;
  3.   -webkit-text-size-adjust: 100%;
  4.       -ms-text-size-adjust: 100%;
  5. }
  6. body {
  7.   margin: 0;
  8. }
  9. article,
  10. aside,
  11. details,
  12. figcaption,
  13. figure,
  14. footer,
  15. header,
  16. hgroup,
  17. main,
  18. nav,
  19. section,
  20. summary {
  21.   display: block;
  22. }
  23. audio,
  24. canvas,
  25. progress,
  26. video {
  27.   display: inline-block;
  28.   vertical-align: baseline;
  29. }
  30. audio:not([controls]) {
  31.   display: none;
  32.   height: 0;
  33. }
  34. [hidden],
  35. template {
  36.   display: none;
  37. }
  38. a {
  39.   background: transparent;
  40. }
  41. a:active,
  42. a:hover {
  43.   outline: 0;
  44. }
  45. abbr[title] {
  46.   border-bottom: 1px dotted;
  47. }
  48. b,
  49. strong {
  50.   font-weight: bold;
  51. }
  52. dfn {
  53.   font-style: italic;
  54. }
  55. h1 {
  56.   margin: .67em 0;
  57.   font-size: 2em;
  58. }
  59. mark {
  60.   color: #000;
  61.   background: #ff0;
  62. }
  63. small {
  64.   font-size: 80%;
  65. }
  66. sub,
  67. sup {
  68.   position: relative;
  69.   font-size: 75%;
  70.   line-height: 0;
  71.   vertical-align: baseline;
  72. }
  73. sup {
  74.   top: -.5em;
  75. }
  76. sub {
  77.   bottom: -.25em;
  78. }
  79. img {
  80.   border: 0;
  81. }
  82. svg:not(:root) {
  83.   overflow: hidden;
  84. }
  85. figure {
  86.   margin: 1em 40px;
  87. }
  88. hr {
  89.   height: 0;
  90.   -moz-box-sizing: content-box;
  91.        box-sizing: content-box;
  92. }
  93. pre {
  94.   overflow: auto;
  95. }
  96. code,
  97. kbd,
  98. pre,
  99. samp {
  100.   font-family: monospace, monospace;
  101.   font-size: 1em;
  102. }
  103. button,
  104. input,
  105. optgroup,
  106. select,
  107. textarea {
  108.   margin: 0;
  109.   font: inherit;
  110.   color: inherit;
  111. }
  112. button {
  113.   overflow: visible;
  114. }
  115. button,
  116. select {
  117.   text-transform: none;
  118. }
  119. button,
  120. html input[type="button"],
  121. input[type="reset"],
  122. input[type="submit"] {
  123.   -webkit-appearance: button;
  124.   cursor: pointer;
  125. }
  126. button[disabled],
  127. html input[disabled] {
  128.   cursor: default;
  129. }
  130. button::-moz-focus-inner,
  131. input::-moz-focus-inner {
  132.   padding: 0;
  133.   border: 0;
  134. }
  135. input {
  136.   line-height: normal;
  137. }
  138. input[type="checkbox"],
  139. input[type="radio"] {
  140.   box-sizing: border-box;
  141.   padding: 0;
  142. }
  143. input[type="number"]::-webkit-inner-spin-button,
  144. input[type="number"]::-webkit-outer-spin-button {
  145.   height: auto;
  146. }
  147. input[type="search"] {
  148.   -webkit-box-sizing: content-box;
  149.      -moz-box-sizing: content-box;
  150.           box-sizing: content-box;
  151.   -webkit-appearance: textfield;
  152. }
  153. input[type="search"]::-webkit-search-cancel-button,
  154. input[type="search"]::-webkit-search-decoration {
  155.   -webkit-appearance: none;
  156. }
  157. fieldset {
  158.   padding: .35em .625em .75em;
  159.   margin: 0 2px;
  160.   border: 1px solid #c0c0c0;
  161. }
  162. legend {
  163.   padding: 0;
  164.   border: 0;
  165. }
  166. textarea {
  167.   overflow: auto;
  168. }
  169. optgroup {
  170.   font-weight: bold;
  171. }
  172. table {
  173.   border-spacing: 0;
  174.   border-collapse: collapse;
  175. }
  176. td,
  177. th {
  178.   padding: 0;
  179. }
  180. @media print {
  181.   * {
  182.     color: #000 !important;
  183.     text-shadow: none !important;
  184.     background: transparent !important;
  185.     box-shadow: none !important;
  186.   }
  187.   a,
  188.   a:visited {
  189.     text-decoration: underline;
  190.   }
  191.   a[href]:after {
  192.     content: " (" attr(href) ")";
  193.   }
  194.   abbr[title]:after {
  195.     content: " (" attr(title) ")";
  196.   }
  197.   a[href^="javascript:"]:after,
  198.   a[href^="#"]:after {
  199.     content: "";
  200.   }
  201.   pre,
  202.   blockquote {
  203.     border: 1px solid #999;
  205.     page-break-inside: avoid;
  206.   }
  207.   thead {
  208.     display: table-header-group;
  209.   }
  210.   tr,
  211.   img {
  212.     page-break-inside: avoid;
  213.   }
  214.   img {
  215.     max-width: 100% !important;
  216.   }
  217.   p,
  218.   h2,
  219.   h3 {
  220.     orphans: 3;
  221.     widows: 3;
  222.   }
  223.   h2,
  224.   h3 {
  225.     page-break-after: avoid;
  226.   }
  227.   select {
  228.     background: #fff !important;
  229.   }
  230.   .navbar {
  231.     display: none;
  232.   }
  233.   .table td,
  234.   .table th {
  235.     background-color: #fff !important;
  236.   }
  237.   .btn > .caret,
  238.   .dropup > .btn > .caret {
  239.     border-top-color: #000 !important;
  240.   }
  241.   .label {
  242.     border: 1px solid #000;
  243.   }
  244.   .table {
  245.     border-collapse: collapse !important;
  246.   }
  247.   .table-bordered th,
  248.   .table-bordered td {
  249.     border: 1px solid #ddd !important;
  250.   }
  251. }

二、排版

1. 文本

1) 标题

A 标题

Bootstrap：<h1>~<h6>。

Bootstrap标题格式一览

a. 重置margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px；
b. 所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体；
c. 固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px；

B 非标题元素

Bootstrap：定义了.h1~.h6六个类名，为了让非标题元素和标题使用相同的样式。
使用方法：<div class="h1">Bootstrap标题一</div>

C 副标题

Bootstrap：使用了<small>标签来制作副标题。

a. 行高都是1，而且设置了font-weight: normal成常规效果（不加粗），同时颜色被设置为灰色（#999）。
b. 由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%。

使用方法：<h1>Bootstrap标题一<small>我是副标题</small></h1>

2) 段落

Bootstrap：为正文文本设置了一个全局的文本样式。

a. 全局文本字号为14px；
b. 行高为1.42857143，大约是20px；
c. 颜色为深灰色（#333）；
d. 字体为"Helvetica Neue", Helvetica, Arial, sans-serif。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

  • 为了让段落p元素之间具有一定的间距，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度），即段后间距。

3) 强调

Bootstrap：对一些重要的希望突出强调的部分文本做了一些轻量级的处理。

A 强调块状段落

其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

使用方法：由p.lead实现：
<p class="lead">突出段落。</p>

B 颜色强调内联文本

Bootstrap：除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性。还定义了一套通过颜色来表示强调类名：

4) 粗体

Bootstrap：使用<b>和<strong>标签让文本直接加粗。

5) 斜体

Bootstrap：除了给元素设置样式font-style: italic实现之外，还可以通过使用标签<em>或<i>来实现。

6) 对齐

Bootstrap：通过定义四个类名来控制文本的对齐风格：

2. 列表

Bootstrap根据平时的使用情形提供了六种形式的列表，对于无序和有序列表，只是在margin上做了一些调整。

1) 无序列表

2) 有序列表

3) 去点列表

去除默认的列表样式的风格。同时，列表默认的左边内距也清零了。

使用方法：ul.list-unstyled

4) 内联列表

把垂直列表换成水平列表，去掉项目符号（编号），保持水平显示。可以说内联列表就是为制作水平导航而生。

使用方法：ul.list-inline

5) 定义列表

Bootstrap只是调整了定义列表的行距，外边距和字体加粗效果。

6) 水平定义列表（响应式）

水平定义列表就像内联列表一样，给定义列表实现水平显示效果。
此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，.dl-horizontal才具有水平定义列表效果。其实现主要方式：
a. 将dt设置了一个左浮动，并且设置宽度为160px；
b. 将dd设置一个margin-left: 180px，达到水平的效果；
c. 当标题宽度超过160px时，将会显示三个省略号；

使用方法：dl.dl-horizontal

3. 代码

Bootstrap：提供了三种代码风格：
a. <code>：一般是针对于单个单词或单个句子的代码；
b. <pre>：一般是针对于多行代码（也就是成块的代码）；
c. <kbd>:一般是表示用户要通过键盘输入的内容。

注意：
a. 不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码&lt;来替代，大于号(>)使用&gt;来替代。
b. 对<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。在编写HTML标签时就该控制好。
c. 有时候<pre>代码太多，不想让其占有太大的页面篇幅，就要控制代码块的大小，只需要使用pre.pre-scrollable，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

4. 表格

Bootstrap：提供1种基础样式和4种附加样式以及1个支持响应式的表格。

HTML：表格结构

  1. <table>
  2.     <thead>
  3.         <tr>
  4.             <th>表格标题</th>
  5.             …
  6.         </tr>
  7.     </thead>
  9.     <tbody>
  10.         <tr>
  11.             <td>表格单元格</td>
  12.             …
  13.         </tr>
  14.          …
  15.     </tbody>
  16. </table>

0) 行元素tr

Bootstrap：为<tr>提供了五种不同的行元素类名，每种类名控制了行的不同背景颜色。
此处输入图片的描述
使用方法：

  1. <tr class="active">
  2.     <td>…</td>
  3. </tr>

1) 基础表格

a. 给表格设置了margin-bottom: 20px以及设置单元内距；
b. 在thead底部设置了一个2px的浅灰实线；
c. 每个单元格顶部设置了一个1px的浅灰实线；

示例：基础表格

使用方法：<table class="table table-striped"></table>

2) 斑马线表格

与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色。对于IE8以及其以下浏览器，没有背景条纹效果。

示例：斑马线表格

使用方法：<table class="table table-striped"></table>

3) 带边框的表格；

这种表格效果使所有单元格具有一条1px的边框。

示例：带边框表格

使用方法：<table class="table table-bordered"></table>

4) 鼠标悬停高亮的表格

当鼠标悬停在表格的行上面有一个高亮的背景色，当你鼠标悬浮在某一单元格上时，单元格所在行的背景色都会变成浅灰色。

示例：鼠标悬停高亮表格

使用方法：<table class="table table-hover"></table>

5) 紧凑型表格

单元格没内距或者内距较其他表格的内距更小。Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。

示例：紧凑型表格

使用方法：<table class="table table-condensed"></table>

6) 响应式表格

响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。

示例：响应式表格宽
（宽屏效果）
响应式表格窄
（窄屏效果）

使用方法：<table class="table table-responsive"></table>

特别提示：
a. 基础表格以外的5种表格均是在基础表格的基础上添加类名的；
b. 除了.active之外，其他四个类名和.table-hover配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在.table-hover表格中也要做相应的调整；

5. 表单

HTML：表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

Bootstrap：并未对表单做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border还有input、select、textarea等进行了细化设置。

Bootstrap定制组件效果：
a. 宽度变成了100%；
b. 设置了一个浅灰色（#ccc）的边框；
c. 具有4px的圆角；
d. 设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化；
e. 设置了placeholder的颜色为#999；

使用方法：
对组件添加类名.form-control

1) 水平表单

Bootstrap：默认表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）。

示例：此处输入图片的描述

form-horizontal主要有以下几个作用：
a. 设置表单控件padding和margin值；
b. 改变form-group的表现形式，类似于网格系统的row；

使用方法：
a. form.form-horizontal；
b. 配合Bootstrap框架的网格系统使用；

2) 内联表单

使用方法：
a. form.form-inline
b. 若要在input前面添加label时，会导致input换行显示。若必须添加这样的一个label且不想让input换行，需要将label标签也放在容器form-group中。
即form>div.form-group>(label.sr-only+input.form-control)。label.sr-only表示标签没显示就是这个样式将标签隐藏了。

示例：此处输入图片的描述

3) 控件：输入框input

使用方法：input.form-contol，type属性必须。

  1. <form role="form">
  2. <div class="form-group">
  3. <input type="email" class="form-control" placeholder="Enter email">
  4. </div>
  5. </form>

4) 控件：下拉选择框select

HTML：多行选择设置multiple属性的值为multiple。
使用方法：

  1. <select multiple class="form-control">
  2.     <option>1</option>
  3.     <option>2</option>
  4.     <option>3</option>
  5.     <option>4</option>
  6.     <option>5</option>
  7. </select>

5) 控件：文本域textarea

HTML：设置rows可定义其高度，设置cols可以设置其宽度。但若设置textarea.form-control，则无需设置cols属性。

因为Bootstrap框架中的form-control样式的表单控件宽度为100%或auto。

6) 控件：复选框checkbox和单选择按钮radio

Bootstrap：checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。
使用方法：

  1. <form role="form">
  2.     <div class="checkbox">
  3.         <label>
  4.             <input type="checkbox" value="">
  5.             记住密码
  6.         </label>
  7.     </div>
  8.     <div class="radio">
  9.         <label>
  10.             <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
  11.             喜欢
  12.         </label>
  13.     </div>
  14.     <div class="radio">
  15.         <label>
  16.             <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
  17.             不喜欢
  18.         </label>
  19.     </div>
  20. </form>
* 水平排列：

使用方法：

7) 控件

A 控件大小

Bootstrap：提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：

input-sm和input-lg仅对控件高度做了处理。但往往很多时候，我们需要控件宽度也要做一定的变化处理。这个时候就要借住Bootstrap框架的网格系统。

B 控件焦点状态

焦点状态：表示可以输入或选择东西；

使用方法：由伪类:focus来实现。需要给控件添加类名