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_排版_标题的更多相关文章

  1. Bootstrap_排版_表格

    一.基础表格 <table class="table"> <thead> <tr> <th>表格标题</th> < ...

  2. Bootstrap_排版_文字样式

    一.段落 段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.428 ...

  3. Bootstrap_排版_代码

    不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代 一.单行内联代码 <code>:一般是针对于单个单词或单个句子 ...

  4. Bootstrap_排版_列表

    一.基本列表 <h5>普通列表</h5> <ul> <li>列表项目</li> <li>列表项目</li> < ...

  5. Bootstrap_排版

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

  6. word中公式的排版及标题列表

    1.首先建好你的标题,如标题1,标题2等等,你能够依次改变它们的字体,段落等格式,新建格式例如以下图所看到的 红圈处即建立新的格式,你能够建立不论什么你想要的格式,非常方便: 2.当你建立好了多个标题 ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:标题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. bootstrap入门-4.排版及其他固定样式

    本篇包括以下内容:排版.代码.表格.表单. 总结:超无聊,弃更. · 排版样式                                     标题 h1-h6 取消加粗,字体大小也有一定变化 ...

  9. css学习の第二弹—文字格式化排版

    1.css格式化排版 >>字体设计: etc:body{font-family:"Microsoft Yahei";} >>字号,颜色: etc:body{ ...

随机推荐

  1. PHP去除空白字符

    例子1: <?php $var = " This is a beautiful day!"; // 删除字符串中的所有空白字符(不包括全角空格) $var1 = preg_r ...

  2. HDU-1565 方格取数(1)

    http://acm.hdu.edu.cn/showproblem.php?pid=1565 方格取数(1) Time Limit: 10000/5000 MS (Java/Others)    Me ...

  3. ORA-01078:failure in processing system parameters

    一.使用环境操作系统:rhel 6.5 x64数据库:Oracle 11.2.0.1.0数据库主目录:/u01/app/oracle/product/11.2.0/ 二.问题描述用sys用户登录sql ...

  4. linux防火墙 基础知识

    转 http://drops.wooyun.org/tips/1424 iptables介绍 linux的包过滤功能,即linux防火墙,它由netfilter 和 iptables 两个组件组成. ...

  5. windows设置多长时间后自动关机 分类: windows常用小技巧 2014-04-15 09:35 230人阅读 评论(0) 收藏

    分二步: 第一步:点击windows键,在"搜索程序和文件"的文本框输入:cmd 第二步:输入:shutdown -s -t          (设置电脑一小时后自动关机) 备注: ...

  6. Android性能测试工具 Emmagee

    Emmagee是监控指定被测应用在使用过程中占用机器的CPU.内存.流量资源的性能测试小工具. 支持SDK:Android2.2以及以上版本 Emmagee功能介绍 1.检测当前时间被测应用占用的CP ...

  7. HDU--杭电--1241--Oil Deposits--广搜

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  8. SVN server的搭建

    当做大的项目是,svn是代码管理的好工具,假设是用自己的server,那么须要搭建SVNserver. Subversion是一款很优秀的svnserver工具,笔者採用VisualSVN serve ...

  9. 不可错过的手机APP常见8种界面导航样式

    前言:相信每个移动开发project师都会遇到,当一个项目开发启动时,须要考虑搭建怎么的框架.一个好的框架.也会决定着一个APP的前途与命运.框架的风格,如今常见的有八种:标签导航.舵式导航.抽屉导航 ...

  10. CSU1661: Query Mutiple

    Description One day,Little-Y saw many numbers standing in a row. A question suddenly appeared in her ...