一. Bootstrap标题

　　在Bootstrap中使用标题和Html本身没有太大的区别使用h1-h6, 而Bootstrap只是默认修改了H1-h6的样式,网上找到如下资料参考

　　

二. Bootstrap 标题的修改

　　1. 重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20px；h4~h6重置后的值都是10px

　   2. 所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。

　　3. 固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px.

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap</title>

    <link href="/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet" />

    <!--[if lt IE 9]>

        <script src="/bootstrap-3.3.4-dist/js/html5shiv.min.js"></script>

        <script src="/bootstrap-3.3.4-dist/js/respond.min.js"></script>

    <![endif]-->

    <script src="/bootstrap-3.3.4-dist/js/jquery-2.1.4.min.js"></script>

    <script src="/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>

</head>

<body>

    <h1>Bootstrap标题一</h1>

    <h2>Bootstrap标题二</h2>

    <h3>Bootstrap标题三</h3>

    <h4>Bootstrap标题四</h4>

    <h5>Bootstrap标题五</h5>

    <h6>Bootstrap标题六</h6>

</body>

</html>

预览效果图如下

三. 小标题

　　Bootstrap使用小标题<small> 标签, 如果大字号为h1-h3,小标题显示当前字号65%,如果大字号为h4-h6,小标题箱单当前字号的75%

<body>

    <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>

</body>

四. 标题另类写法

　　我们也可以使用div来代替H1-H6标签,而是class样式,具体代码如下

    <div class="h1">Bootstrap标题一<small>小标题</small></div>

    <div class="h2">Bootstrap标题一<small>小标题</small></div>

    <div class="h3">Bootstrap标题一<small>小标题</small></div>

    <div class="h4">Bootstrap标题一<small>小标题</small></div>

    <div class="h5">Bootstrap标题一<small>小标题</small></div>

    <div class="h6">Bootstrap标题一<small>小标题</small></div>

　　可以达到上图一样的效果

Bootstrap系列 -- 2. 标题的更多相关文章

  1. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  2. 反爬虫：利用ASP.NET MVC的Filter和缓存（入坑出坑） C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程

    反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)   背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...

  3. Bootstrap系列 -- 39. 导航条添加标题

    在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...

  4. Bootstrap系列 -- 26. 下拉菜单标题

    Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <but ...

  5. Bootstrap系列 -- 9. 表格

    一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式 1. .table:基础表格 2. .table-strip ...

  6. Bootstrap系列 -- 41. 带表单的导航条

    有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.navbar-left”让 ...

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

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

  8. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  9. Bootstrap系列 -- 1. 如何使用Bootstrap

    一. Bootstrap 简介 Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网:http://www.bootcss.com/ 二. Bootstrap核心 ...

随机推荐

  1. jquery最常用的几个方法。

    jquery使用手册:http://www.eduyo.com/doc/jquery/cheatsheet.html addClass 样式: <style> .textRed { col ...

  2. sql server ，sql语句，练习笔记

    一.删除冗余记录 DELETE [学生表] WHERE id NOT IN (SELECT MIN(id) FROM [学生表] GROUP BY [学号],[姓名],[课程编号],[课程],[分数] ...

  3. MSSQL OPTION语句详解

    一些联合表查询语句,这些表里都建立有索引.在没有加 option ( force order ) 前,整个查询费时40多秒,但 单独表 查询基本不到1秒.查看查询计划后发现查询过程是从table n开 ...

  4. Android ScrollView中的组件设置android:layout_height="fill_parent"不起作用的解决办法

    例子,在ScrollView下加入的组件,无论如何也不能自动扩展到屏幕高度. 布局文件. [html] <?xml version="1.0" encoding=" ...

  5. linux shell 之 crontab（定时任务）详解

    1.定义: crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行.该词来源于希 ...

  6. 优化SQL查询：如何写出高性能SQL语句

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条 ...

  7. Spring MVC @ResponseBody返回中文字符串乱码问题

    朋友做小项目练手的时候遇到的,着实让他郁闷够呛..这个问题的确很恶心.. 项目中引用的json包,直接用@ResponseBody注解返回json字符串..有关这个的乱码问题网上很多,各种花样各种转码 ...

  8. 在PYTHON中使用StringIO的性能提升实测（更新list-join对比）

    刚开始学习PYTHON,感觉到这个语言真的是很好用,可以快速完成功能实现. 最近试着用它完成工作中的一个任务:在Linux服务器中完成对.xml.gz文件的解析,生成.csv文件,以供SqlServe ...

  9. 【原创Android游戏】NinOne V2.3.1 --加载模式的学习，界面的重新设计

    上次更新后又发现了一些bug,而且是非常明显的bug,一一加以改正了过来. 猜数字游戏的功能已基本实现,不过我觉得一个应用单做一个游戏有点不太过瘾,略显单调,于是我打算基于这个,写一个n合1的游戏集成 ...

  10. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...