全面解析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 相关文章推荐
javascript类型转换使用方法
Feb 08 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
基于jquery实现图片放大功能
May 07 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
JS验证字符串功能
Feb 22 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
jquery实现图片轮播器
May 23 jQuery
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
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
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
歌颂祖国的演讲稿
2014/05/04 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
java executor包参数处理功能 
2022/02/15 Java/Android
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android