好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Bootstrap入门笔记之(一)排版_html/css_WEB-ITnose

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标题六

Bootstrap标题一

查看更多关于Bootstrap入门笔记之(一)排版_html/css_WEB-ITnose的详细内容...

  阅读:29次