Bootstrap —— 排版基础
排版前基础
使用HTML5文档类型
移动设备优先
指定内容宽度、高度、是否缩放及其比例
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport 语法介绍：
01 <!--html document-->
02 <meta name="viewport">
03 content=" <!--常用语法-->
height = [pixel_value | device-height], <!--缩放高度-->
width = [pixel_value | device-width], <!--缩放宽度-->
initial-scale = float_value, <!--初始缩放比-->
minimum-scale = float_value, <!--最小缩放比-->
maximum-scale = float_value, <!--最大缩放比-->
user-scalable = [yes | no], <!--是否缩放-->
target-densitydpi = [dpi_value | device-dpi | medium-dpi | low-dpi],
"响应式图片
<div class="container">
<div class="row">
<img src="img/glyphicons-halflings.png" class="img-responsive"/>
</div>
</div>其中的
.img-responsive就是响应式图片，其实就是为图片设置max-width 100%，height:auto；在图片上加载此样式，可以按比例缩放，但不超过父元素尺寸
排版与链接
bootstrap设置了一些全局样式
body背景为白，margin：0，字体、大小、行间距都进行了设置
所有默认样式都在normalize.less和scaffolding.less
Normalize.css
bootstrap合使用第三方库，Normalize，是一个专门用于将不同浏览器的默认CSS效果特征统一的css库
页面主题
body全局样式
可以在
bootstrap.css文件中查找预定义的全局样式，以便需求及更改。
p全局样式
定义的
.lead样式可以放大选中的文字，这是预定义的样式
对齐方式
强调文本
small
strong
em
cite
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Starter Template for Bootstrap</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <style type="text/css"> </style> <body> <div class="container"> <div class="row"> <div class="col-sm-8"> <small>small</small> <em>em</em> <cite>cite url</cite> <b>b</b> </div> </div> </div> </body> </html>
缩略语abbr
<div class="container">
<div class="row">
<div class="col-sm-8">
<abbr title="Bootstrap">abbr</abbr>
<abbr title="Bootstrap" class="initialism">abbr</abbr>
</div>
</div>
</div>
如果加入.initialism，则内部文本变为大写，缩略语样式不变
地址元素address
HTML中新增address标签，保存实际地理位置名等名词
<div class="container">
<div class="row">
<div class="col-sm-8">
<address>
<strong>Twitter,Inc.</strong><br />
795 Folsom Ave, Suite 600<br />
San Francisco, CA 94107<br />
<addr title="Phone">P：</addr>（123）456-7890
</address>
</div>
</div>
</div>
引用blockquote
<div class="container">
<div class="row">
<div class="col-sm-8">
<blockquote>
<p>引用的内容</p>
<cite>来自<em>www.xxx.com</em></cite>
</blockquote>
<blockquote class="pull-right">
<p>引用的内容</p>
<cite>来自<em>www.xxx.com</em></cite>
</blockquote>
<blockquote class="pull-left">
<p>引用的内容</p>
<small><cite>来自<em>www.xxx.com</em></cite></small>
</blockquote>
</div>
</div>
</div>
可以看到相应的区别，比如pull-left与pull-right
