BootStrap布局案例

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>

知识点：居中可以在外层