BootStrap布局
bootstrap 2.3版与3.0版的使用区别
http://www.weste.net/2013/8-20/93261.html
以一个博客系统的首页，来介绍如何布局
1，纸上画出你的布局草图
(1),先大致勾勒出Header , Content, Right , Footer吧, 标出它们各自的宽高比例
(2)Header里面得有Navgation, Search，Barler这些东东吧, Footer里面总要有CorpRight吧
(3)Righter应该有个NewList,简单介绍，
(4)剩下就是Content了，你要放主要的内容了
Header部分
Height:157px
Footer部分
Height:46px
Content部分
Width :1002px
Right部分
Width: 308px
1,先引用文件
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
2,自定义样式文件Customer.css,写出基本的样式
.header
.container
.footer
3,往Header部分加入东西
观察发现Header有两块组成Barner和导航menu
再看Banner ＝ 图片(80%) + 设为首页一小块(40%)
可以用栅格栏的概念来做(1---12)
<div class="col-md-8">Banner图片</div>
<div class="col-md-4">设为首页一块</div>
注意：
2.3版本是<div class="span8"></div>
流式布局写法
注意：2.3版本是<div class="row-fluid">
3.2版本是row,将最外面的布局元素 .container 修改为 .container-fluid
设为首页部分
<div class="col-md-4">
<ul class="list-inline pull-right topbar">
<li><a href="Article.html">设为首页</a></li>
<li><a href="Article.html">加入收藏</a></li>
<li><a href="Article.html">联系我们</a></li>
<li><a href="Article.html">帮助中心</a></li>
</ul>
</div>
注意：2.3版本是inline
3.2是list-inline
知识点：pull-right右对齐
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
- 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
<div class="menu">
<div class="row">
<div class="col-md-7">
<ul class="nav nav-tabs">
<li><a href="">首页</a></li>
<li><a href="">Web</a></li>
<li><a href="">设计</a></li>
<li><a href="">Jquery</a></li>
<li><a href="">BootStrap</a></li>
<li><a href="">Orchard</a></li>
<li><a href="">前端志</a></li>
</ul>
</div>
<div class="col-md-5"></div>
</div>
</div>
知识点：
导航
Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。
1、标签页
注意.nav-tabs类需要.nav基类。
2、胶囊式标签页
用相同的 HTML 标记，但要用.nav-pills代替。
底部部分
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-center">主题支持：<a href="http://www.58img.com" target="_blank"> www.58img.com</a> (Web前端资源网) Bootstrap交流QQ群：233808496</p>
</div>
</div>
</div>
</div>
知识点
Thumbnail
- 在图像周围添加带有 class .thumbnail 的 <a> 标签。
- 这会添加四个像素的内边距（padding）和一个灰色的边框。
- 当鼠标悬停在图像上时，会动画显示出图像的轮廓。
<div class="well">
<h3>模板说明</h3>
<p>1、此模板基于Bootstrap2.3.2构建。</p>
<p>2、此模板不兼容IE6，其他浏览器均兼容。</p>
<p>3、支持响应式</p>
</div>
知识点：
Well
默认效果
把 Well 用在元素上，能有嵌入（inset）的的简单效果。
Copy
Look, I'm in a well!
<div class="well">...</div>
可选
类
通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置。
Copy
Look, I'm in a large well!
<div class="well well-lg">...</div>
Copy
Look, I'm in a small well!
<div class="well well-sm">...</div>
<p class="alert alert-success">
此模板做为学习示例：利用Bootstrap快速布局简洁漂亮的网页！
</p>
知识点：
alter
创建一个简单的警告信息
使用 CSS class "alert"，位于 bootstrap.css 中的行号 2123 到 2175（版本 2.0.1），您可以创建一个简单警告信息。您可以为它添加一个可选的关闭图标。
当您点击警告框中的关闭图标时，警告框关闭。要想实现这个交互效果，您必须添加两个 JavaScript 文件 jquery.js 和 alert.js。您可以把它们添加到 body 元素关闭标签前面。
参考：http://www.w3cschool.cc/bootstrap/bootstrap-v2-alerts-errors.html
<ul class="list-unstyled news">
<li><a href="Article.html">从Android的设计规则看Google的用户体验观</a></li>
<li><a href="Article.html">网易新闻跟帖为什么火爆 自娱自乐？</a></li>
<li><a href="Article.html">音美国电商为什么不自建物流：准比快更重要</a></li>
<li><a href="Article.html">马云的几个小故事：马化腾后悔未投资淘宝</a></li>
<li><a href="Article.html">狙击京东：天猫为什么发动二选一平台大战</a></li>
<li><a href="Article.html">音乐网站遭版权方催逼 5日或全面试行收费</a></li>
<li><a href="Article.html">PPTV收购案再现新主角：苏宁发收购意向书</a></li>
<li><a href="Article.html">轮椅上的风景：残疾程序员张肖敏北上寻梦记</a></li>
<li><a href="Article.html">音乐网站遭版权方催逼 5日或全面试行收费</a></li>
</ul>
知识点：
list-unstyled
bootstrap提供了专门移除子元素的列表样式（使用.list-unstyled）
<div class="text-center">
<div class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</div>
</div>
知识点：居中可以在外层
来源：https://www.cnblogs.com/huaci/p/3919448.html