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


Posted in Javascript onNovember 30, 2015

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

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

<!--Bootstrap中的标题--> 
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

效果如下:

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

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

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

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

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5> 
<h6>Bootstrap标题六<small>我是副标题</small></h6>

效果如下:

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

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

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

Javascript 相关文章推荐
Bootstrap中CSS的使用方法
Feb 17 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
javascript作用域链(Scope Chain)用法实例解析
Nov 30 #Javascript
Bootstrap每天必学之js插件
Nov 30 #Javascript
Bootstrap每天必学之面板
Nov 30 #Javascript
Bootstrap每天必学之媒体对象
Nov 30 #Javascript
javascript针对cookie的基本操作实例详解
Nov 30 #Javascript
javascript闭包(Closure)用法实例简析
Nov 30 #Javascript
详解JavaScript的流程控制语句
Nov 30 #Javascript
You might like
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jQuery 技巧小结
2010/04/02 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
单链表反转python实现代码示例
2018/02/08 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python变量命名的7条建议
2019/07/04 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python计算n的阶乘的方法代码
2019/10/25 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Python实现像awk一样分割字符串
2020/09/15 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
银行内勤岗位职责
2014/04/09 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
个人自查自纠材料
2014/10/14 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技