bootstrap:User Interface Framework用户页面架构
bootstrap 是什么:
Sleek, intuitive, and powerful front-end framework for faster and easier web development. 点击打开链接 英文
简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。 点击打开链接 中文网站
打开官网,查看各个导航栏中的内容:
官网下载:http://twitter.github.io/bootstrap/ 点击打开链接
解压:
文件结构:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
其中带有 min 字眼的文件是压缩后的版本,文件体积比较小,适合发布时用。
responsive 为响应式
下载jquery:
地址: http://code.jquery.com/jquery-1.7.2.min.js 点击打开链接
将它解压到bootstrap 目录下的 js 文件夹下。
下载 html5shiv文件,解压到相应目录:
编写第一个 start.html文件:
引入bootstrap的css, js 文件,和引入 html5shiv文件(适应IE浏览器某版本不支持html5技术),引入jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Learning</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
<body>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
栅格系统示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 布局</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
<body>
<h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>
<p>Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器,默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。</p>
<h2 class="page-header">区块一</h2>
<p>对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。</p>
<h2 class="page-header">区块二</h2>
<p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如,.offset4 将 .span4 右移了4个列的宽度。</p>
<h2 class="page-header">区块三</h2>
<p>在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。</p>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
效果:
让页面居中显示:
加入div container 类 <div class="container">,刷新页面即可:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 布局</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>
<p>Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器,默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。</p>
<h2 class="page-header">区块一</h2>
<p>对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。</p>
<h2 class="page-header">区块二</h2>
<p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如,.offset4 将 .span4 右移了4个列的宽度。</p>
<h2 class="page-header">区块三</h2>
<p>在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。</p>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
效果图:
使用栅格系统:
三个区块,平均分成三栏,所以每栏占四个风格的宽度。
在布局容器上,添加相应的网格的类。
对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
效果图:
========================================================
嵌套:
在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 布局
</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>
<p>Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器,默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。
</p>
<div class="row">
<div class="span4">
<h2 class="page-header">区块一</h2>
<p>对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
</p>
</div>
<div class="span4">
<h2 class="page-header">区块二</h2>
<p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如,.offset4 将 .span4 右移了4个列的宽度。
</p>
</div>
<div class="span4">
<h2 class="page-header">区块三</h2>
<p>在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
</p>
<div class="row">
<div class="span2">
在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
</div>
<div class="span2">
在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
效果图:
流式栅格系统案例
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力,这就保证它能对不同的分辨率和设备做出适当的调整。
将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变,这样能方便的在流式与固定栅格之间切换。
代码:
效果图片:(任意缩小、放大浏览器页面,就可以看到“流动”效果了)
注意:
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力,这就保证它能对不同的分辨率和设备做出适当的调整。
动手做:
将区块三中的两个 .span2 改为 span6,再查看效果,是不是现在比较整齐均匀了呢?
=============响应式=======================================
Media queries允许在一些条件基础上自定义CSS
@media (max-width: 767px) {}
上面代码的意思是:当浏览器窗口小于767px时,就应用 {} 里的样式
代码:居然不引入(link href="")也可以使用啊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Media queries允许在一些条件基础上自定义CSS
</title>
<!--<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> -->
<style>
body{background:#000;}
@media(max-width:767px) {body{background:#f00;}}
</style>
</head>
<body>
<!-- <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> -->
<!-- <script src="../bootstrap/js/bootstrap.min.js"></script> -->
</body>
</html>
缩小放大浏览器窗口,就可以看到效果了。
/* 大屏幕 */
@media (min-width: 1200px) { ... }
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }
启用响应式特性
通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
例子:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 布局
</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
响应式布局辅助class
为了更快的针对移动设备做开发, 下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class可以在 responsive.less 文件中找到。
参考:
官方文档
中文文档:http://www.bootcss.com/scaffolding.html