页面排版
1.页面主体
Bootstrap将全局:
- font-size 设置为14px;
- line-height 设置为1.428(20px);
- p标签 设置为1/2行高(10px);
创建包含段落突出的文本:
添加 class=”lead”,得到更大更粗、行高更高的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<p>Bootstrap</p>
<!--添加class = "lead"-->
<p class="lead">Bootstrap</p>
<p>Bootstrap</p>
<p>Bootstrap</p>
</body>
</html>
运行结果:
2.标题
Bootstrap 定义了所有的 HTML 标题(h1 到 h6)的样式,i可以嵌入一个small元素作为副标题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
</body>
</html>
运行结果:
3.内联文本元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--添加标记-->
<p><mark>标记1</mark></p>
<p class="mark">标记2</p>
<!--加线条的文本-->
<del> Boostrap del; </del>
<s> Bootstrap s; </s>
<ins> Bootstrap ins; </ins>
<!--强调-->
<br />
<small>small 标准字号的85%; </small>
<strong> 加粗 700; </strong>
<em> em 设置为斜体 ;</em>
</body>
</html>
运行结果:
4.对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
</body>
</html>
运行结果:
5.大小写及缩写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--设置英文大小写-->
<p class="text-lowercase">Bootstrap 小写;</p>
<p class="text-uppercase">Bootstrap 大写;</p>
<!--设置单词首字母大写-->
<p class="text-capitalize">bootstrap 大写;</p>
<!--设置缩写-->
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
</body>
</html>
运行结果:
6.地址address
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--去掉了倾斜,设置了行高,底部20px-->
<address>
<strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
</body>
</html>
运行结果:
7.引用文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--默认:增加了边线,设定了字体大小和内外边距-->
<blockquote>默认Bootstrap 引用</blockquote>
<!--反向引用-->
<blockquote class="blockquote-reverse">反向引用</blockquote>
</body>
</html>
运行结果:
8.列表排版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 列表</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!--有序列表和无序列表-->
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<!--移出默认样式-->
<ul class="list-unstyled">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<!--设置成内联-->
<ul class="list-inline">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<!--定义列表-->
<dl>
<dt>描述1</dt>
<dd>列表1</dd>
<dt>描述2</dt>
<dd>列表2</dd>
</dl>
<!--水平排列定义列表-->
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
</body>
</html>
运行结果:
9.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--内联代码-->
<code><section></code>
<!--用户输入-->
press <kbd>ctrl +</kbd>
<!--代码块-->
<pre><p>Please input...</p></pre>
</body>
</html>
运行结果: