首页 > 代码库 > bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
学习前端许久，对于布置框架和响应浏览器用html 和javascript 写的有点繁琐，无意间看到这个框架，觉得挺好用的就开始学习了，但是这个框架上面有很多知识，不是所有的都要学的，故将学习笔记和觉得重点的东西写下来，以便以后学习。
Bootstrap 是一个相应式的布局的一个前端框架。
bootstrap 学习有以下步骤：
1、bootstrap 安装，
2、bootstrap 全局css 样式
3、bootstrap css组件
4、bootstrap javascript 插件
bootstrap 安装：官网下载压缩包解压到项目中，然后在项目文件中引入下面三行代码：
<link rel="stylesheet" href="http://www.mamicode.com/bs/css/bootstrap.css" />
<script src="http://www.mamicode.com/bs/js/jquery-3.1.1.js"></script>
<script src="http://www.mamicode.com/bs/js/bootstrap.js"></script>
全局css 样式：
a.必须是html5文档类型<!DOCTYPE html>
b.移动设备优先 通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。
这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，
还是要看你自己的情况而定！(这被称为视宽)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
栅格系统：
1、Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，
系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
比较有用的例子：class="col-md-" 意思是将列分成12格子，col-md-num 中num的值是每个元素占据多少格子，12/num算出有多少个元素。
row 1行12列
<div class="row">
<div class="col-md-3">
<img src="http://www.mamicode.com/images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="http://www.mamicode.com/images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="http://www.mamicode.com/images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="http://www.mamicode.com/images/1.png" width="100%" />
</div>
</div>
用下面的方法产生临时图片：
<div class="row">
<div class="col-md-3">
<img src="http://www.mamicode.com/holder.js/100x300" />
</div>
</div>
2、前面的几个不要，使图片前面空几个格子用：col-md-offset-num
eg:
<div class="row">
<div class="col-md-3">
<img src="http://www.mamicode.com/images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="http://www.mamicode.com/images/1.png" width="100%" />
</div>
<div class="col-md-3 col-md-offset-3">
<img src="http://www.mamicode.com/images/1.png" width="100%" />
</div>
</div>
3、有个列排序没必要看，用这个也可以实现：pull-right pull-left
eg:
<div class="row">
<div class="col-md-3 pull-left">
<img src="http://www.mamicode.com/images/1.png" width="100%" />
</div>
<div class="col-md-3 pull-left">
<img src="http://www.mamicode.com/images/1.png" width="100%" />
</div>
</div>
bootstrap 学习笔记（1）---介绍bootstrap和栅格系统