Bootstrap全局样式 - 排版与链接
2017-06-08 本文已影响137人
蝴蝶结199007
知识点
Bootstrap 3 中，移动设备优先。
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。注意，这种方式应视情况去使用，并不是所有的网站都适用。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
排版与链接
- 为 body 元素设置 background-color: #fff;
- 使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数
- 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线
布局容器
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
注意：这两种容器类不能互相嵌套。
标题
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式；
标题中还包含small标签和small类，用来标记副标题；
<h1>h1. 36px <small>副标</small></h1>
<h2>h2. 30px <small>副标</small></h2>
<h3>h3. 24px <small>副标</small></h3>
<h4>h4. 18px <small>副标</small></h4>
<h5>h5. 14px <small>副标</small></h5>
<h6>h6. 12px <span class="small">副标</span></h6>
页面主体
font-sie:!4px;line-height:1.428，这些属性直接赋予 <body> 元素和所有段落元素；
<p> 元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
.lead让文本突出。
内联文本元素
- mark：
<mark> - 删除：
<del> - 无用文本：
<s> - 插入文本：
<ins> - 带下划线的文本：
<u> - 小号文本：
<small>或.small - 着重：
<strong> - 斜体：
<em>
对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
大小写
<p class="text-lowercase">Lowercased text.</p><!--全部小写-->
<p class="text-uppercase">Uppercased text.</p><!--全部大写-->
<p class="text-capitalize">Capitalized text.</p><!--首字母大写-->
缩略语
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr><!--font-size:90%;-->
地址
<address>
引用
<blockquote>，来源的名称可以包裹进 <cite> 标签中；直接引用使用 <p>；
.blockquote-reverse可以用引用的文本呈现居右对齐；
实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>排版</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<!--容器-->
<div class="container-fluid">
<p>container-fluid：宽度100%</p>
</div>
<div class="container">
<p>固定宽度container</p>
<!--为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线-->
<a href="#">测试链接</a>
</div>
<!--排版-->
<div class="container">
<h1>h1. 36px <small>副标</small></h1>
<h2>h2. 30px <small>副标</small></h2>
<h3>h3. 24px <small>副标</small></h3>
<h4>h4. 18px <small>副标</small></h4>
<h5>h5. 14px <small>副标</small></h5>
<h6>h6. 12px <span class="small">副标</span></h6>
<div class="line"></div>
<p>验证段落p，一般文本</p>
<p class="lead">添加了lead类的文本</p>
<div class="line"></div>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
<div class="line"></div>
<p class="text-lowercase">Lowercased text.</p><!--全部小写-->
<p class="text-uppercase">Uppercased text.</p><!--全部大写-->
<p class="text-capitalize">Capitalized text.</p><!--首字母大写-->
<div class="line"></div>
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr><!--font-size:90%;-->
</div>
</body>
</html>
