Bootstrap中的排版（1）-标题

bootstrap中的排版　　标题（h1~h6/.h1~.h6）

　　　　h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h6:12px;

　　副标题(small)

小练习（标题大小和副标题的使用）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 7         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 8         <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 9     </head>
10     <body>
11         <h1>标题一<small>小标题</small></h1>
12         <h2>标题二</h2>
13         <h3>标题三</h3>
14         <h4>标题四</h4>
15         <h5>标题五</h5>
16         <h6>标题六</h6>
17         <span class="h1">标题一</span>
18         <span class="h2">标题一</span>
19         <span class="h3">标题一</span>
20         <span class="h4">标题一</span>
21         <span class="h5">标题一</span>
22         <span class="h6">标题一</span>
23     </body>
24 </html>

示例代码

时间： 2024-12-28 01:18:40

Bootstrap中的排版（1）-标题的相关文章

Bootstrap中的排版（2）-文本

<P>标签: 默认:14px: 行高20px: 底部外边距:10px: 文本对齐: .text-left 左对齐 .text-right 右对齐 .text-center 居中 text-lowercase 大写变为小写 text-uppercase 小写变为大写 text-capitalize 首字母为大写 <mark></mark> 黄色底边 <del></del> 删除线 <ins></ins> 下划线 <u&

Bootstrap中的段落和强调内容

段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能). 3.颜色为深灰色(#333): 4.字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(fon

Bootstrap_排版_标题

Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示:  <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootst

bootstrap笔记之——全局，标题，正文文本，强调，文本对齐

一.全局样式 Bootstrap框架做了一定的变更,不再一味追求归零,而是更注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下: 移除body的margin声明设置body的背景色为白色为排版设置了基本的字体.字号和行高设置全局链接颜色,且当链接处于悬浮":hover"状态时才会显示下划线样式二.标题 1.重新设置了margin-top和margin-bottom的值, h

Bootstrap <基础二十三>页面标题（Page Header）

页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page Header),请把你的标题放置在带有 class .page-header的 <div> 中: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 页面标题</title> <

Bootstrap<基础三> 排版

Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式.请看下面的实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标题</title> &

Bootstrap中六种表格样式

表格表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格.在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用. 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本: ? LESS版本,对应的文件是 tables.less ? Sass版本,对应的文件是 _tables.scss 如果你不懂LESS

bootstrap(1)关于排版

关于标题我们在html中通过h1 h2,h3...h6来定义标题,同样,在bootstrap中也是通过h1到h6来定义标题,不同的是在bootstrap中重新定义了样式源码如下: h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } 1字体颜色和样式继承于父元素,字体粗细为500,行高为

bootstrap中popover.js(弹出框)使用总结+案例

bootstrap中popover.js(弹出框)使用总结+案例 *bootstrap官方说明:http://v3.bootcss.com/javascript/#popovers 一. popover常用配置参数: 1 //常用配置参数: 2 $(document).ready(function() { 3 $('#temp').popover( 4 { 5 trigger:'click', //触发方式 6 template: '', //你自定义的模板 7 title:"标题",