[关闭]
@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>
  20. <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
  21. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  22. <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
  23. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  24. </body>
  25. </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;
  204. page-break-inside: avoid;
  205. }
  206. thead {
  207. display: table-header-group;
  208. }
  209. tr,
  210. img {
  211. page-break-inside: avoid;
  212. }
  213. img {
  214. max-width: 100% !important;
  215. }
  216. p,
  217. h2,
  218. h3 {
  219. orphans: 3;
  220. widows: 3;
  221. }
  222. h2,
  223. h3 {
  224. page-break-after: avoid;
  225. }
  226. select {
  227. background: #fff !important;
  228. }
  229. .navbar {
  230. display: none;
  231. }
  232. .table td,
  233. .table th {
  234. background-color: #fff !important;
  235. }
  236. .btn > .caret,
  237. .dropup > .btn > .caret {
  238. border-top-color: #000 !important;
  239. }
  240. .label {
  241. border: 1px solid #000;
  242. }
  243. .table {
  244. border-collapse: collapse !important;
  245. }
  246. .table-bordered th,
  247. .table-bordered td {
  248. border: 1px solid #ddd !important;
  249. }
  250. }


二、排版

1. 文本

1) 标题

A 标题

Bootstrap:<h1>~<h6>

Bootstrap标题格式一览

a. 重置margin-topmargin-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. </tr>
  6. </thead>
  7. <tbody>
  8. <tr>
  9. <td>表格单元格</td>
  10. </tr>
  11. </tbody>
  12. </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:并未对表单做太多的定制性效果设计,仅仅对表单内的fieldsetlegendlabel标签进行了定制。主要将这些元素的marginpaddingborder还有inputselecttextarea等进行了细化设置。

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

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

1) 水平表单

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

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

form-horizontal主要有以下几个作用:
a. 设置表单控件paddingmargin值;
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:checkboxradio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkboxradiolabel标签配合使用会出现一些小问题(最头痛的是对齐问题)。
使用方法:

  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-sminput-lg仅对控件高度做了处理。但往往很多时候,我们需要控件宽度也要做一定的变化处理。这个时候就要借住Bootstrap框架的网格系统。

B 控件焦点状态

焦点状态:表示可以输入或选择东西;

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