Bootstrap文本排版基础--Bootsrap
1、排版前的基础
（1）移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">
（2）响应式图片
CSS：img-responsive
demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="images/river.jpg" height="768" width="1366"/>
</div>
</div>
</div>
</body>
</html>
Effect Picture:
2、标题
CSS：class="h1"、"h2"、"h3"、"h4"、"h5"、"h6"
h1 36px margin-top:20px margin-bottom:10px;
h2 30px margin-top:20px margin-bottom:10px;
h3 24px margin-top:20px margin-bottom:10px;
h4 18px margin-top:10px margin-bottom:10px;
h5 14px margin-top:10px margin-bottom:10px;
h6 12px margin-top:10px margin-bottom:10px;
demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="images/river.jpg" height="768" width="1366"/>
</div>
<div class="col-sm-8">
<h1>第一个标题样式<small>小字体</small></h1><!--h标签里可以使用small标签,small标签文字大小在h1~3占h标签的65%，4~6占h75%-->
<h2>第一个标题样式<small>小字体</small></h2>
<h3>第一个标题样式<small>小字体</small></h3>
<h4>第一个标题样式<small>小字体</small></h4>
<h5>第一个标题样式<small>小字体</small></h5>
<h6>第一个标题样式<small>小字体</small></h6>
<p class="h1">第一个标题样<small>小字体</small>式<small>小字体</small></p>
<p class="h2">第一个标题样式<small>小字体</small></p>
<p class="h3">第一个标题样式<small>小字体</small></p>
<p class="h4">第一个标题样式<small>小字体</small></p>
<p class="h5">第一个标题样式<small>小字体</small></p>
<p class="h6">第一个标题样式<small>小字体</small></p>
</div>
</div>
</div>
</body>
</html>
Effect Picture:
3、页面主题
body全局样式:Background-color:white;font-size:14px margin:0; 行间距：20px
p全局样式:font-size:14px
强调<p>标签里的内容，可以给p标签里加类选择器class="lead"
Before：
After:
对齐方式：class="text-center"
4、强调文本
small、em、cite（引用网址）、b、strong相关
5、缩略语abbr
<abbr title="Bootstrap">Bootstrap</abbr>
<abbr title="Bootstrap" class="initialism">Bootstrap</abbr>
initialism类选择器定义的字母是原来的90%，并且会使小写字母转换为大写字母
6、地址元素address
.address {
margin-bottom: 20px;
font-style: normal;
line-height: 1.42857143;
}
<address>
<strong>地址:</strong><br/>
<a href="mailto:#">qikeyishu123@163.com</a>
</address>
（7）引用 blockquote，引用里面最好设有p标签
<blockquote>
<p>Bootsrap</p>
<cite>来自<em>Bootstrap中文网</em></cite>
</blockquote>
<blockquote class="pull-right">
<p>Bootsrap</p>
<cite>来自<em>Bootstrap中文网</em></cite>
</blockquote>
