全面解析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标题排版的详细介绍,之后还有更多内容会不断更新,希望大家继续关注。
相关推荐
-
BootStrap 标题设置跨行无效的解决方法
最近在使用BootStrap的表格做一个报表界面(不需要报表的功能,只需要预览并且行列定好无需根据数据量变化,如有更好的框架欢迎推荐.),发现标题设置跨行属性rowspan无效.html如下: <table class="table table-bordered"> <thead> <th colspan="2" rowspan="2">功能分类</th> <th>第二列</th&
-
Bootstrap页面标题Page Header的实现方法
本文实例为大家分享了Bootstrap页面标题展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>Bootstrap 页面标题(Page Header)</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css&
-
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
1.Bootstrap弹出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框&
-
全面解析Bootstrap排版使用方法(标题)
Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: <!--Bootstrap中的标题--> <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootst
-
全面解析Bootstrap排版使用方法(文字样式)
一.段落 段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能). 3.颜色为深灰色(#333): 二.文字样式 在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理.Bootstrap同样对
-
全面解析Bootstrap表单使用方法(表单样式)
一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <la
-
java简单解析xls文件的方法示例【读取和写入】
本文实例讲述了java简单解析xls文件的方法.分享给大家供大家参考,具体如下: 读取: import java.io.*; import jxl.*; import jxl.write.*; import jxl.format.*; class Aa{ public static void main(String args[]) { try{ Workbook workbook = null; try { workbook = Workbook.getWorkbook(new File("d:
-
第五篇Bootstrap 排版
使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素. 标题:bootstrap中定义了从h1-h6的六种标题样式. 内联子标题: 如果需要向任意一个标题添加一个子标题,只需要加上<small></small>例如: <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> <h2>我是标题2 h2. <small>我是副标题2 h2</small>&
-
Bootstrap面板使用方法
面板样式是在很多种情况下都可能会使用到的样式之一,例如博客的侧边栏.企业网站的公告栏.栏目列表等. 面板样式除了内容之外,还有一个面板头部可以添加标题,让我们通过这篇文章看看Bootstrap面板样式的使用方法. Bootstrap面板基本样式 直接调用面板样式也非常容易,只需要通过以下代码即可实现: <div class="panel panel-default"> <div class="panel-body"> Basic panel
-
Java解析Excel内容的方法
本文实例讲述了Java解析Excel内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.util.ArrayList; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.user
-
Delphi解析FTP地址的方法
本文实例讲述了Delphi解析FTP地址的方法.分享给大家供大家参考.具体实现方法如下: procedure TForm1.FTPAnalysis(S:string;var UserName,Password,IP,FileName:String;var DirList:TStringList); var i,j:integer; strAuthorization,strAddr,strDirFile:string; //授权信息 begin UserName:= 'anonymous'; Pa
-
Android pull解析xml的实现方法
Android pull解析xml的实现方法 资源文件: persons.xml <?xml version="1.0" encoding="utf-8" standalone="yes" ?> <persons> <person id="101"> <name>jame</name> <age>18</age> </person>
-
vue-cli如何引入bootstrap工具的方法
本文介绍了vue-cli如何引入bootstrap工具的方法,分享给大家,也给自己留个笔记. 以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快). 2.修改build目录下的webpack.base.conf.js配置文件: 1)加入webpack对象:var webpack=require('webpack'); 2)在mod
随机推荐
- Oracle客户端与plsql查询数据乱码修改成中文的快速解决方法
- 实例解析Ruby设计模式开发中对观察者模式的实现
- 详解Vue爬坑之vuex初识
- Python的面向对象编程方式学习笔记
- JS高级调试技巧:捕获和分析 JavaScript Error详解
- Visual Studio 2017安装心得总结
- PHP对象递归引用造成内存泄漏分析
- Python标准库sched模块使用指南
- C#使用UdpClient类进行简单通信的实例
- popupwindow焦点问题解决方案
- jQuery表单获取和失去焦点输入框提示效果的实例代码
- Flash+XML滚动新闻代码 无图片 附源码下载
- Windwos服务器远程桌面限制用户使用同一个会话的3种设置方法
- Android五种隐藏状态栏和标题栏的方法
- 模拟OICQ的实现思路和核心程序(二)
- Android UI设计与开发之ViewPager介绍和简单实现引导界面
- layer.open关闭父窗口 以及调用父页面的方法
- mysql聚簇索引的页分裂原理实例分析
- ubuntu下的虚拟环境中安装Django的操作方法
- 基于Laravel-admin 后台的自定义页面用法详解