脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap排版使用方法

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

 更新时间：2015年11月30日 10:48:50   作者：傻籽  
这篇文章全面解析了Bootstrap排版使用方法，本文重点介绍Bootstrap标题排版，感兴趣的小伙伴们可以参考一下

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过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>

效果如下：

除此之外，我们在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标题排版的详细介绍，之后还有更多内容会不断更新，希望大家继续关注。

您可能感兴趣的文章:

相关文章

  • easyui form validate总是返回false的原因及解决方法

    easyui form validate总是返回false的原因及解决方法

    下面小编就为大家带来一篇easyui form validate总是返回false的原因及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS字符串截取出现的bug以及解决方式

    JS字符串截取出现的bug以及解决方式

    之前在获取元素属性时,踩了个坑,记录一下,下面这篇文章主要给大家介绍了关于JS字符串截取出现的bug以及解决方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 微信小程序返回上一页传参并刷新过程解析

    微信小程序返回上一页传参并刷新过程解析

    这篇文章主要介绍了微信小程序返回上一页传参并刷新过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • JS实现根据URL批量下载文件并压缩成zip文件

    JS实现根据URL批量下载文件并压缩成zip文件

    这篇文章主要为大家学习介绍了JS如何实现根据URL批量下载文件并压缩成zip文件，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
    2023-08-08
  • js实现滑动进度条效果

    js实现滑动进度条效果

    这篇文章主要为大家详细介绍了js实现滑动进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JavaScript逆向分析instagram登入过程

    JavaScript逆向分析instagram登入过程

    这篇文章主要介绍了JavaScript逆向分析instagram登入过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-07-07
  • 获取元素距离浏览器周边的位置的方法getBoundingClientRect

    获取元素距离浏览器周边的位置的方法getBoundingClientRect

    本文为大家介绍下如何使用getBoundingClientRect()方法获取元素距离浏览器周边的位置，有类似问题的朋友可以参考下哈，希望对你学习js有所帮助
    2013-04-04
  • 基于JavaScript实现贪吃蛇游戏

    基于JavaScript实现贪吃蛇游戏

    这篇文章主要为大家详细介绍了基于JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • IE与Firefox在JavaScript上的7个不同写法小结

    IE与Firefox在JavaScript上的7个不同写法小结

    尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去，偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。
    2009-09-09
  • JavaScript实现鼠标滚轮控制页面图片切换功能示例

    JavaScript实现鼠标滚轮控制页面图片切换功能示例

    这篇文章主要介绍了JavaScript实现鼠标滚轮控制页面图片切换功能,涉及javascript事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2017-10-10

最新评论