bootstrap基于h5开发。提倡移动先行（媒询声明是必须的），对浏览器支持面不是很广。
响应式图片：max-width:100% height:auto;
可以加上：.img-responsive类
排版方面的基本样式为：
body的margin为0，背景色为白色，行间距为20/14倍
使用normalize.css库，使各个浏览器差别最小化
居中容器container有一个最大范围。（最大左右margin为auto，和设备有关）
二. 文字基础排版（全局设置）
1.标题（h标记和small标记）
header1small标记的副标题 header2small标记的副标题 header3small标记的副标题 header4small标记的副标题 header5small标记的副标题 header6small标记的副标题
所有标题元素里的内容的字体颜色都是灰色（#999999），行间距都为1。
内的文本字体在h1、h2、h3内是当前元素所对应字体大小的65%；而在h4、h5、h6下则是75%。
a. 字体大小为14px，间距为20px。p元素的margin-bottom为行间距一半（10px）。
b. 突出显示
当你有一段文字，想高亮显示，又不想获得和h标记一样的权重时，可以class=lead
email me
如图.lead和h1的对比效果：
2. 强调文本
3. 缩略语abbr和.initialism
两者都可以实现下划虚线悬停手型效果 需要搭配title属性使用。
4. 地址address
用来包裹和联系方式有关的信息。样式差别是间距和底部样式稍微有点不同。
twitter, inc.
795 folsom ave, suite 600
san francisco, ca 94107
p:(123) 456-7890 汤姆大叔
tomxu@outlook.com
效果如图
5. 引用blockquote
引用的一般格式是
爱情不是你想买想买就能买
出自爱情买卖
当然，small换成footer也是一样的效果。
默认是左对齐的，想要右对齐可以对blockquote使用.pull-right类。整体飘到了右边。
6. 列表
（1）ul-li无序列表
bootstrap下，普通列表的ul-li框架和默认基本是一样的。
a. ul-li列表的样式是由list-style决定的。在bootstrap框架使用.list-unstyle类。源码样式无非是padding-left:0;list-style:none。
注意：如果是列表嵌套列表，对祖父级的ul应用.list-unstyle类，孙代li是不会继承的。
b. 内联列表：正常的ul-li是竖着显示的。在很多场合，最典型的就是导航，需要把li打横排列。这时可以使用内联列表的.list-inline类
home article about
（2）有序列表ol-li
更换了字体，显示更加柔和
（3）dl-dt-dd定义列表
定义列表包括了描述信息，bootstrap下的dl-dt-dd定义列表通常也是纵向排列的。
标题1 描述1 标题2 描述2 标题3 描述3
我想在横向展示一个商品列表，包括描述信息。如果给dl加上class=dl-horizontal
7. 代码
包括code单行代码，kbd用户输入代码和pre多行代码块。
代码样式的用法示例如下：
（1）code
code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色
（2）kbd
kbd表示需要用户输入，可以配合input元素使用。
请输入ctrl+c来复制代码，然后使用ctrl+v来粘贴代码
（3）多行代码块pre
pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。
粘贴进去会有空格。
类似还有可以格式化代码。用较为标准的字体和行间距显示
8.其它h5标记补充
（1）,也可以使用.mark
this is mark text
（2）del标记和s标记
i am delated.
（3）ins标记和u标记
下划线，ins定义已经被插入文档中的文本。u标记语义和ins不同，如果文本不是超链接，就不要对其使用u标记
（4）对齐相关
——text-left
——text-center
——text-right
文本居左中右。
——text-justify：自己判断——齐行定义单词间的间隔对齐，跟避头尾法则类似。注意css3中也有相应的属性。
——text-nowrap：浏览器缩小时始终保持1行
（5）大小写相关：
text-lowercase小写
text-uppercase大写
text-capitalize首字母大小
【例3.1】文本排版练习
i am afraid william shakespeare you say that you love rain, but you open your umbrella when it rains.you say that you love the sun, but you find a shadow spot when the sun shines.you say that you love the wind, but you close your windows when wind blows.
this is why i am afraid, you say that u love me too.
译文 你说烟雨微芒，兰亭远望；后来轻揽婆娑，深遮霓裳。你说春光烂漫，绿袖红香；后来内掩西楼，静立卿旁。你说软风轻拂，醉卧思量；后来紧掩门窗，漫帐成殇。
你说情丝柔肠，如何相忘；我却眼波微转，兀自成霜。
三. 表格相关css
表格实现是给table加上.table类
【例3.2】做一个5行5列的表格，记录信息
id title author pubdate price
1 西游记 吴承恩 10.99 2010-1-1
2 三国演义 罗贯中 20.99 2010-1-2
3 水浒传 施耐庵 30.99 2010-1-3
4 红楼梦 曹雪芹 40.99 2010-1-4
无任何class样式时显示：
1.table基础样式
（1） 给table标签加上class=table，效果就变为：
秒变高富帅了有木有？
（2）隔行变色.table-striped
table-striped：斑马线
使用css3的:nth-child实现。
（3）添加边框
使用.table-bordered可以为所有单元格添加1px的边框。
（4）悬停高亮
使用.table:hover可以让当前行悬停高亮
（5）紧凑型表格
table-condensed:压缩，稍微小一点——减少单元格的内边距。全部应用后是这样的。
代码清单
id title author pubdate price
1 西游记 吴承恩 10.99 2010-1-1
2 三国演义 罗贯中 20.99 2010-1-2
3 水浒传 施耐庵 30.99 2010-1-3
4 红楼梦 曹雪芹 40.99 2010-1-4
2.行级元素tr的样式
（1）.active
表示当前激活的信息。跟鼠标悬停.table-hover显示的样式一样（较深的灰色）
（2）.success
2 三国演义 罗贯中 20.99 2010-1-2
（3）.info
如果给table添加info的class
（4）.warning
warning显示为黄色
（5）.danger
小结：如果table应用了table-hover当鼠标悬停时相应的颜色也会加深一点，如果应用了table-striped，在高亮行使用tr样式，原来的浅灰色会被覆盖。
3.响应式的表格
表格过宽时，一味地自适应是不现实的。
把table标签用一个容器包装，容器class命名为.table-responsive
加了之后在大屏幕显示有了1px solid black的边框。在屏幕小于768时消失，在768px时出现滚动条.（注在四大名著表格中是直到330px才出现滚动条。）
【例3.3】一个超简单布局练习——第一个bootstrap网页
如图实现布局。
bootstrap css type link1 link2 link3 link4
book list
from bookstore id title author proce pubdate
1 红楼梦 曹雪芹 30 2014
2 西游记 吴承恩 25 2013
3 水浒传 施耐庵 24 2012
4 三国演义 罗贯中 35 2015
figure html hyper text markup language javascript ecmascript dom bom bootstrap basic css componment jsplugin from djtao form sublime
©djtao
【例3.4】进阶：购物单的模拟实现
任务描述：网站常见的购物车经常有删除操作。大于30元的货物以警告红显示，否则显示成功绿。网站根目录下一个json文件夹，里面的books.json文件包含下列信息：
[ { id: 1, title: 红楼梦, price: 10.0 }, { id: 2, title: 西游记, price: 20.0 }, { id: 3, title: 三国演义, price: 30.0 }, { id: 4, title: 水浒传, price: 40.0 } ]
从json读取数据，返回到表格中。制作一个如图所示的模拟删除效果。
先补充一点知识
query中的$.getjson( )方法函数主要用来从服务器加载json编码的数据，它使用的是get http请求。使用方法如下：
$.getjson( url ,[ data ] ,[ success(data, textstatus, jqxhr) ] )
url是必选参数，表示json数据的地址；
data是可选参数，用于请求数据时发送数据参数；
success是可选参数，这是一个回调函数，用于处理请求到的数据。
获取json数据举例：
$.getjson('test.json', function(data){ for (var i = 0; i =30){ $tr.append($().html(book.price).addclass(danger)); }else{ $tr.append($().html(book.price).addclass(success)); }//添加价格列
（6）接下来处理按钮
新创建的一列按钮需要加以下内容：
1.红色的button按钮，内容为remove；remove
2.为按钮绑定id
3.字体图标（class=glyphicon glyphicon-remove）
var $td=$(' '); var $btn=$().attr('data-id',book.id).addclass('btn btn-danger'); //定义按钮btn的样式。 var $span1=$('').addclass(glyphicon glyphicon-remove); $btn.append($span1);//添加按钮的图标字体。 var $span2=$($('remove')); $btn.append($span2);//添加按钮的文字内容
（7）点击事件
点击事件处理两个问题
a. 弹出当行id信息；b.当列消失。
$btn.click(function(){//配置按钮点击事件 var id=$(this).attr(data-id);//获取按钮绑定的id alert('您删除的书库编号为:'+id); //弹出id $(this).parent().parent().fadeout(600);}//隐藏当前行
（8）点击函数结束后，添加表格主体到tbl中
$td.append($btn).appendto($tr); $tbl.append($tr);
最后在回调函数最下面，把整个表格加到网页中表格区
$tbl.appendto($('#divbooklist'));
基本要求就算做完了。
【改进】有明显的问题需要改进，就是数字编号。删除之后没有重排。为此需要重新整理点击事件
思路：需要一点原生js的操作。
（1）用两个计数器，count1读取，count2写入
（2）通过count2来获取当前页面可见的行数，作为购物车的物品数。但是fadeout执行需要时间，如果马上判断，就会误把正在消失的那行计入count2
（3）解决思路是，让计数器程序等到删除行消失之后延迟一点点时间再执行。比如说删除行fadout(600)消失时间是600ms，我就通过timout延迟620ms执行。
var otab=document.getelementsbytagname('table')[0]; var arows=otab.tbodies[0].rows; var count1=$(this).parent().siblings().eq(0).html(); // 把当前书籍序号加到count2上面 // this.parentnode.parentnode.firstchild.innerhtml; alert('您删除的是购物车内第'+count1+'本书。书库编号为:'+id); //弹出id // $.post(url?id=+id,null,function(){ // //删除成功后处理的回调函数 // });) $(this).parent().parent().fadeout(600);//隐藏当前行 settimeout(function(){ var count2=0; for(i=0;i=30){ $tr.append($().html(book.price).addclass(danger)); }else{ $tr.append($().html(book.price).addclass(success)); }//添加价格列 /*新创建的一列需要加以下内容： 1.红色的button按钮，内容为remove；remove 2.字体图标（class=glyphicon glyphicon-remove） 3.点击事件：（1）弹出删除信息；（2）当列消失。 */ var $td=$(' '); var $btn=$().attr('data-id',book.id).addclass('btn btn-danger'); //定义按钮的样式。 var $span1=$('').addclass(glyphicon glyphicon-remove); $btn.append($span1);//添加按钮的图标字体。 var $span2=$($('remove')); $btn.append($span2);//添加按钮的文字内容 $btn.click(function(){//配置按钮点击事件 var id=$(this).attr(data-id);//获取按钮绑定的id var otab=document.getelementsbytagname('table')[0]; var arows=otab.tbodies[0].rows; var count1=$(this).parent().siblings().eq(0).html(); // 把当前书籍序号加到count2上面 // this.parentnode.parentnode.firstchild.innerhtml; alert('您删除的是购物车内第'+count1+'本书。书库编号为:'+id); //弹出id // $.post(url?id=+id,null,function(){ // //删除成功后处理的回调函数 // });) $(this).parent().parent().fadeout(600);//隐藏当前行 settimeout(function(){ var count2=0; for(i=0;i
1.基础表单
基础表单和以前差不多，默认使用全局设置。多了一个form-group类。form-gronp提供了1个15px的margin-bottom。看起来更有层次感。
username
password