全面解析Bootstrap排版使用方法(标题)

发布时间:2020-01-18 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了全面解析Bootstrap排版使用方法(标题)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

Bootstrap和普通的HTML页面一样,定义标题都是使用标签

,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示:

全面解析Bootstrap排版使用方法(标题)

Bootstrap标题一

Bootstrap标题二

Bootstrap标题三

Bootstrap标题四

Bootstrap标题五
Bootstrap标题六

<div class="h1">Bootstrap标题一


<div class="h2">Bootstrap标题二

<div class="h3">Bootstrap标题三

<div class="h4">Bootstrap标题四

<div class="h5">Bootstrap标题五

<div class="h6">Bootstrap标题六

效果如下:

全面解析Bootstrap排版使用方法(标题)

除此之外,我们在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果,使用了标签来制作副标题。这个副标题具有其自己的一些独特样式:

1、行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)。

2、由于内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;

标签来制作副标题-->

Bootstrap标题一我是副标题

Bootstrap标题二我是副标题

Bootstrap标题三我是副标题

Bootstrap标题四我是副标题

Bootstrap标题五我是副标题
Bootstrap标题六我是副标题

效果如下:

全面解析Bootstrap排版使用方法(标题)

如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

以上就是针对Bootstrap标题排版的详细介绍,之后还有更多内容会不断更新,希望大家继续关注。

大佬总结

以上是大佬教程为你收集整理的全面解析Bootstrap排版使用方法(标题)全部内容,希望文章能够帮你解决全面解析Bootstrap排版使用方法(标题)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。