2-1 标题(一)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

标题(一)

Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示:

通过比较可以发现,Bootstrap标题样式进行了以下显著的优化重置:

1、重新设置了margin-topmargin-bottom的值,  h1~h3重置后的值都是20pxh4~h6重置后的值都是10px。
2、所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14pxh6=12px。

标题的具体运用非常简单,和我们平时运用是一样的,使用<h1>~<h6>标签,分别表示标题一至标题六,h 后面的数字越大,表示级别越小,文本也越小。来看一个简单的效果:右侧代码编辑器中的10-16行的代码。

在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。如右侧代码编辑器中   18-23行代码所示:

对比两个示例的效果图,可以说他们的效果是一模一样的。

 

任务

我也来试一试:在右侧代码编辑器中输入:

<h1>我的第一个bootstrap标题</h1>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>标题(一)</title>
  6. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10. <!--Bootstrap中的标题-->
  11. <h1>Bootstrap标题一</h1>
  12. <h2>Bootstrap标题二</h2>
  13. <h3>Bootstrap标题三</h3>
  14. <h4>Bootstrap标题四</h4>
  15. <h5>Bootstrap标题五</h5>
  16. <h6>Bootstrap标题六</h6>
  17.  
  18. <!--Bootstrap中让非标题元素和标题使用相同的样式-->
  19. <div class="h1">Bootstrap标题一</div>
  20. <div class="h2">Bootstrap标题二</div>
  21. <div class="h3">Bootstrap标题三</div>
  22. <div class="h4">Bootstrap标题四</div>
  23. <div class="h5">Bootstrap标题五</div>
  24. <div class="h6">Bootstrap标题六</div>
  25.  
  26. <!--任务填写下方-->
  27.  
  28.  
  29. </body>
  30. </html>
  1. h1,
  2. h2,
  3. h3,
  4. h4,
  5. h5,
  6. h6,
  7. .h1,
  8. .h2,
  9. .h3,
  10. .h4,
  11. .h5,
  12. .h6 {
  13. font-family: inherit;
  14. font-weight: 500;
  15. line-height: 1.1;
  16. color: inherit;
  17. }
  18. h1 small,
  19. h2 small,
  20. h3 small,
  21. h4 small,
  22. h5 small,
  23. h6 small,
  24. .h1 small,
  25. .h2 small,
  26. .h3 small,
  27. .h4 small,
  28. .h5 small,
  29. .h6 small,
  30. h1 .small,
  31. h2 .small,
  32. h3 .small,
  33. h4 .small,
  34. h5 .small,
  35. h6 .small,
  36. .h1 .small,
  37. .h2 .small,
  38. .h3 .small,
  39. .h4 .small,
  40. .h5 .small,
  41. .h6 .small {
  42. font-weight: normal;
  43. line-height: 1;
  44. color: #999;
  45. }
  46. h1,
  47. .h1,
  48. h2,
  49. .h2,
  50. h3,
  51. .h3 {
  52. margin-top: 20px;
  53. margin-bottom: 10px;
  54. }
  55. h1 small,
  56. .h1 small,
  57. h2 small,
  58. .h2 small,
  59. h3 small,
  60. .h3 small,
  61. h1 .small,
  62. .h1 .small,
  63. h2 .small,
  64. .h2 .small,
  65. h3 .small,
  66. .h3 .small {
  67. font-size: 65%;
  68. }
  69. h4,
  70. .h4,
  71. h5,
  72. .h5,
  73. h6,
  74. .h6 {
  75. margin-top: 10px;
  76. margin-bottom: 10px;
  77. }
  78. h4 small,
  79. .h4 small,
  80. h5 small,
  81. .h5 small,
  82. h6 small,
  83. .h6 small,
  84. h4 .small,
  85. .h4 .small,
  86. h5 .small,
  87. .h5 .small,
  88. h6 .small,
  89. .h6 .small {
  90. font-size: 75%;
  91. }
  92. h1,
  93. .h1 {
  94. font-size: 36px;
  95. }
  96. h2,
  97. .h2 {
  98. font-size: 30px;
  99. }
  100. h3,
  101. .h3 {
  102. font-size: 24px;
  103. }
  104. h4,
  105. .h4 {
  106. font-size: 18px;
  107. }
  108. h5,
  109. .h5 {
  110. font-size: 14px;
  111. }
  112. h6,
  113. .h6 {
  114. font-size: 12px;
  115. }
  116. p {
  117. margin: 0 0 10px;
  118. }
  119. .lead {
  120. margin-bottom: 20px;
  121. font-size: 16px;
  122. font-weight: 200;
  123. line-height: 1.4;
  124. }
  125. @media (min-width: 768px) {
  126. .lead {
  127. font-size: 21px;
  128. }
  129. }
  130. small,
  131. .small {
  132. font-size: 85%;
  133. }
  134. cite {
  135. font-style: normal;
  136. }
  137. .text-left {
  138. text-align: left;
  139. }
  140. .text-right {
  141. text-align: right;
  142. }
  143. .text-center {
  144. text-align: center;
  145. }
  146. .text-justify {
  147. text-align: justify;
  148. }
  149. .text-muted {
  150. color: #999;
  151. }
  152. .text-primary {
  153. color: #428bca;
  154. }
  155. a.text-primary:hover {
  156. color: #3071a9;
  157. }
  158. .text-success {
  159. color: #3c763d;
  160. }
  161. a.text-success:hover {
  162. color: #2b542c;
  163. }
  164. .text-info {
  165. color: #31708f;
  166. }
  167. a.text-info:hover {
  168. color: #245269;
  169. }
  170. .text-warning {
  171. color: #8a6d3b;
  172. }
  173. a.text-warning:hover {
  174. color: #66512c;
  175. }
  176. .text-danger {
  177. color: #a94442;
  178. }
  179. a.text-danger:hover {
  180. color: #843534;
  181. }
  182. .bg-primary {
  183. color: #fff;
  184. background-color: #428bca;
  185. }
  186. a.bg-primary:hover {
  187. background-color: #3071a9;
  188. }
  189. .bg-success {
  190. background-color: #dff0d8;
  191. }
  192. a.bg-success:hover {
  193. background-color: #c1e2b3;
  194. }
  195. .bg-info {
  196. background-color: #d9edf7;
  197. }
  198. a.bg-info:hover {
  199. background-color: #afd9ee;
  200. }
  201. .bg-warning {
  202. background-color: #fcf8e3;
  203. }
  204. a.bg-warning:hover {
  205. background-color: #f7ecb5;
  206. }
  207. .bg-danger {
  208. background-color: #f2dede;
  209. }
  210. a.bg-danger:hover {
  211. background-color: #e4b9b9;
  212. }
  213. .page-header {
  214. padding-bottom: 9px;
  215. margin: 40px 0 20px;
  216. border-bottom: 1px solid #eee;
  217. }
  218. ul,
  219. ol {
  220. margin-top: 0;
  221. margin-bottom: 10px;
  222. }
  223. ul ul,
  224. ol ul,
  225. ul ol,
  226. ol ol {
  227. margin-bottom: 0;
  228. }
  229. .list-unstyled {
  230. padding-left: 0;
  231. list-style: none;
  232. }
  233. .list-inline {
  234. padding-left: 0;
  235. margin-left: -5px;
  236. list-style: none;
  237. }
  238. .list-inline > li {
  239. display: inline-block;
  240. padding-right: 5px;
  241. padding-left: 5px;
  242. }
  243. dl {
  244. margin-top: 0;
  245. margin-bottom: 20px;
  246. }
  247. dt,
  248. dd {
  249. line-height: 1.42857143;
  250. }
  251. dt {
  252. font-weight: bold;
  253. }
  254. dd {
  255. margin-left: 0;
  256. }
  257. @media (min-width: 768px) {
  258. .dl-horizontal dt {
  259. float: left;
  260. width: 160px;
  261. overflow: hidden;
  262. clear: left;
  263. text-align: right;
  264. text-overflow: ellipsis;
  265. white-space: nowrap;
  266. }
  267. .dl-horizontal dd {
  268. margin-left: 180px;
  269. }
  270. }
  271. abbr[title],
  272. abbr[data-original-title] {
  273. cursor: help;
  274. border-bottom: 1px dotted #999;
  275. }
  276. .initialism {
  277. font-size: 90%;
  278. text-transform: uppercase;
  279. }
  280. blockquote {
  281. padding: 10px 20px;
  282. margin: 0 0 20px;
  283. font-size: 17.5px;
  284. border-left: 5px solid #eee;
  285. }
  286. blockquote p:last-child,
  287. blockquote ul:last-child,
  288. blockquote ol:last-child {
  289. margin-bottom: 0;
  290. }
  291. blockquote footer,
  292. blockquote small,
  293. blockquote .small {
  294. display: block;
  295. font-size: 80%;
  296. line-height: 1.42857143;
  297. color: #999;
  298. }
  299. blockquote footer:before,
  300. blockquote small:before,
  301. blockquote .small:before {
  302. content: '\2014 \00A0';
  303. }
  304. .blockquote-reverse,
  305. blockquote.pull-right {
  306. padding-right: 15px;
  307. padding-left: 0;
  308. text-align: right;
  309. border-right: 5px solid #eee;
  310. border-left: 0;
  311. }
  312. .blockquote-reverse footer:before,
  313. blockquote.pull-right footer:before,
  314. .blockquote-reverse small:before,
  315. blockquote.pull-right small:before,
  316. .blockquote-reverse .small:before,
  317. blockquote.pull-right .small:before {
  318. content: '';
  319. }
  320. .blockquote-reverse footer:after,
  321. blockquote.pull-right footer:after,
  322. .blockquote-reverse small:after,
  323. blockquote.pull-right small:after,
  324. .blockquote-reverse .small:after,
  325. blockquote.pull-right .small:after {
  326. content: '\00A0 \2014';
  327. }
  328. blockquote:before,
  329. blockquote:after {
  330. content: "";
  331. }
  332. address {
  333. margin-bottom: 20px;
  334. font-style: normal;
  335. line-height: 1.42857143;
  336. }
  337. code,
  338. kbd,
  339. pre,
  340. samp {
  341. font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  342. }
  343. code {
  344. padding: 2px 4px;
  345. font-size: 90%;
  346. color: #c7254e;
  347. white-space: nowrap;
  348. background-color: #f9f2f4;
  349. border-radius: 4px;
  350. }
  351. kbd {
  352. padding: 2px 4px;
  353. font-size: 90%;
  354. color: #fff;
  355. background-color: #333;
  356. border-radius: 3px;
  357. box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
  358. }
  359. pre {
  360. display: block;
  361. padding: 9.5px;
  362. margin: 0 0 10px;
  363. font-size: 13px;
  364. line-height: 1.42857143;
  365. color: #333;
  366. word-break: break-all;
  367. word-wrap: break-word;
  368. background-color: #f5f5f5;
  369. border: 1px solid #ccc;
  370. border-radius: 4px;
  371. }
  372. pre code {
  373. padding: 0;
  374. font-size: inherit;
  375. color: inherit;
  376. white-space: pre-wrap;
  377. background-color: transparent;
  378. border-radius: 0;
  379. }
  380. .pre-scrollable {
  381. max-height: 340px;
  382. overflow-y: scroll;
  383. }
下一节