从 Bootstrap优站精选 学习得出总结

从 Bootstrap优站精选 学习得出总结：http://expo.bootcss.com/

http://tournac.com/ //这只是其中一个优站案例，按F12查看其源码，我总结出如下：

开发该网站的作者是怎样写代码，和布局的？？？

1.先是用语义标签，如：<header> <section> <main> <footer> //这些都是html5新标签。将网页划分开N个区域，

2.然后再在这些语义标签里面加<div class="container"> 和 <div class="row"> <div class="col-sm-7">样式，即将上面已经划分好的N个区域，再作进一步划分。

 

还有的就是，在同一行里面，col-xs-pull-8 意思是向左移动8个栅格，col-xs-push-4 意思是向右移动4个栅格，两个元素是不会换行的，即两个元素有机会重叠。

而 col-xs-offset-* 意思是向左 或 向右移动 * 个栅格。这个是会换行的，元素之间是不会重叠的，区别就在这里了。

 

我是新手，哈哈~，就记录到这里了。。。如果是html4以前的版本，全部都是<div> 加 class样式，现在有了html5。网页源代码可读性就高了许多。。。

下面上传一张布局图：先布局，后填充内容。

HTML 布局详解：http://www.w3school.com.cn/html/html_layout.asp