使用Bootstrap框架创建响应式网页,为什么一标题和段落要用3个div包裹。

2025-05-21 04:25:57
推荐回答(1个)
回答1:

推荐阅读:Bootstrap入门书籍之(零)Bootstrap简介
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。
使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。
1. 标题
在Bootstrap中使用标题的方式和常规html一样:从

分别从大到小安排标题元素,只不过在Bootstrap中重新设置了其默认样式,从源码中可以看到有如下共性:
字体颜色与字体样式继承自父元素,字体粗细为500,且行高全部设为1.1(也就是font-size的1.1倍)
{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }
在不同大小的标题中有着如下区别:
在Bootstrap中对于不同级别标题字体大小设置为: h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。
重新设置了 margin-top 和 margin-bottom 的值, h1~h3 重置后的值都是 20px ; h4~h6 重置后的值都是 10px 。
除此之外在Bootstrap中为了 让非标题元素和标题使用相同的样式 ,还特意定义了 .h1~.h6 六个类名。如下所示:
在Bootstrap中,下面的代码,显示效果相同。

Bootstrap标题一

Bootstrap标题二

Bootstrap标题三

Bootstrap标题四

Bootstrap标题五
Bootstrap标题六