Bootstrap学习日记——Bootstrap排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈
标题
Bootstrap中定义了所有HTML中的标题样式，这一点与我们HTML中的标题并无差别，但是这里面有一个很有趣的东西就是子标题
内联子标题
内联子标题顾名思义，就是在标题标签中生效的子标题，用法：①在<h1~6></h1~6>中加上<small>子标题内容</small>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap使用</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link href="css/bootstrap-theme.css" type="text/css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body margin="0">
<h1>这是主标题<small>这是子标题</small></h1>
</body>
</html>运行结果：
②通过添加.small类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap使用</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link href="css/bootstrap-theme.css" type="text/css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body margin="0">
<h1>这是主标题<p class="small">这是子标题</p></h1>
</body>
</html>强调
Bootstrap中有着很多强调文本的标签，比如<small>（设置为父文本大小的85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本斜体）、.text-left（左对齐）、text-center（居中）、text-right（有对齐）、text-muted（提示浅灰色）、text-success（成功浅绿色）、text-primary（主要蓝色）、text-info（通知信息蓝色）、text-waring（警告黄色）、text-danger（危险褐色）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap使用</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link href="css/bootstrap-theme.css" type="text/css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body margin="0">
<p>正常文本</p>
<small>副标题文本</small>
<strong>更粗的文本</strong>
<em>斜体文本</em>
<p class="text-left">左对齐文本</p>
<p class="text-center">居中文本</p>
<p class="text-right">右对齐文本</p>
<p class="text-muted">浅灰色提示文本</p>
<p class="text-primary">主要蓝色文本</p>
<p class="text-success">成功浅绿色文本</p>
<p class="text-danger">危险褐色文本</p>
<p class="text-info">通知信息浅蓝色</p>
<p class="text-warning">警告黄色</p>
</body>
</html>缩写
html中提供了缩写标签，但是Bootstrap将这个标签更为个性化了，缩写标签<abbr title="n1">n2</abbr>，当人们进入页面时只能看到n2，但是将鼠标移到n2上时又会出现完整的n1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap使用</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link href="css/bootstrap-theme.css" type="text/css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body margin="0">
<h1><abbr title="w1 w2 w3">www</abbr></h1>
</body>
</html> 此为Bootstrap的<abbr>
此为HTML下的<abbr>
地址
在Bootstrap中我们定义了<abbress>标签来添加你的联系方式，<address>中display:block是块级元素（因此不会自动换行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap使用</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link href="css/bootstrap-theme.css" type="text/css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body margin="0">
<h1>联系我：<br>
phone：1888888<br>
<address>邮箱：<a href="mailto:#">aaa@qq.com</a></address>
</h1>
</body>
</html>运行结果：
注意事项：<a>中mailto的妙用有很多，相关的用法：https://blog.csdn.net/zsj523/article/details/11567507
还有Bootstrap排版类，共我们学习和参考
下一篇： 生活逗比图片,生活把我给x了