简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > JS Tutorial > body text

全面解析Bootstrap排版使用方法（标题）_javascript技巧

WBOY
Release： 2016-05-16 15:28:51
Original
1468 people have browsed it

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

到

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

 

Bootstrap标题一


Bootstrap标题二


Bootstrap标题三


Bootstrap标题四


Bootstrap标题五


Bootstrap标题六




Bootstrap标题一


Bootstrap标题二


Bootstrap标题三


Bootstrap标题四


Bootstrap标题五


Bootstrap标题六
Copy after login

效果如下：

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

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

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



Bootstrap标题一我是副标题


Bootstrap标题二我是副标题


Bootstrap标题三我是副标题


Bootstrap标题四我是副标题


Bootstrap标题五我是副标题
 

Bootstrap标题六我是副标题
Copy after login

效果如下：

 

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

Related labels：
bootstrap typesetting
source：php.cn
Previous article：JavaScript基础篇（3)之Object、Function等引用类型_javascript技巧 Next article：浅析node连接数据库（express+mysql）_node.js
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Latest Articles by Author
Latest Issues
Steps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
From 2023-11-06 16:41:50
0
1
225
Laravel 9 still can't find App.css and App.js, even after running npm run dev Being fairly new to Laravel, I made sure I did check out the documentation for Laravel9 be...
From 2023-10-26 23:41:22
0
1
489
Customize Bootstrap 4's grid system breakpoints I have an application where the design requires 1280 breakpoints from desktop to tablet or...
From 2023-10-18 23:01:50
0
2
197
How to make header images, text and buttons responsive I'm making a website using Bootstrap5. In the header of the website I am using carousel fr...
From 2023-09-17 09:51:15
0
1
283
Why doesn't my Bootstrap navigation bar render correctly? I'm trying to make a navigation bar using Bootstrap4 but my code doesn't seem to work. My ...
From 2023-09-16 16:14:06
0
1
522
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！