如何搭建bootstrap框架
何为Bootstrap? 简洁的、直观的、超牛的、以移动设备优先的前端开发框架，让web开发更迅速、简单。他是Twitter推出的html/css的前端框架, 现在的网页设计越来越多的平面化,
所以, 也就出现了一些平台来做平面化的样式来供我们来使用. 因为这款框架是一个开源的框架, 所以现在很多人都在使用该框架.
下载下来的框架目录结构如图:
怎么去使用一个开源的框架或者一段现成的源码?
首先你确定要保证你所需要的引用你都有, 还有你要保证运行的最小点. 就是需要3个外部文件, A, B, C, 你就要找到这3个文件,
如果是你找到的一段代码, 你要确保他能够运行, 如果都没有办法运行, 放弃吧. 另找下一个. 一般情况下, 一个框架都会给你一个最基本的例子,
这个例子中使用了框架需要的外部文件和一些简单的说明, bootstrap也给出了一个简单的例子. 如图就是最基本的一个例子.
该例子说了一个很重要的, 也是很好的一个文件引用的方式, 就是css. 全部放在上面, 然后把js. 都放在页面的最下面,
这样能够更好的加载页面渲染. 建议你使用最基本的页面去修改你需要的页面, 而且要做到按照自己的需求来写代码. 不要复制, 粘贴.
Bootstrap中内置了一套响应式的,
移动优先的流式栅格系统, 随着不同的设备, 不同的平台. 或者窗口大小(viewport), 根据他们的不同系统会自动的分成12份.
也就是说, 栅格系统是通过一系列的行和列来组成我们需要的页面, 然后把你需要的内容放在这些的布局中.在使用栅格系统的时候, 需要注意的是:
需要在使用.row(行的意思)的外层使用 .container 为的是, 在赋值时给出合适的排列(aligment)和内补(padding).
举个例子:
一行 其中包含3个内容 分别占屏幕的25%, 50%, 25%. 我们要在超小屏幕设备-手机上使用. 那么就要写成12的3, 6, 3.
具体代码看图片, 这里的效果图, 为了效果加上了一个well的class. 只是为了演示效果, 能够看清除.
为了有一个很好的学习东西,
让你看一下表格的创建. 就是这么的简单, 只需要在table上, 填写一个class为.table的样式即可生成一个很好很实用的表格. 其实,
这些都是别人提前建立好的页面显示效果, 就是不用自己再去写一些简单的css效果. 多练. 多使用它就属于你.
在给出一个只有简单的带有导航栏的页面. 该页面, 理解透了, 这个东西你就算学会了, 剩下的就是用什么查一下文档就拿来用了,
该教程告一段落, 还有更多的一大波在后面陆续而来. 有错误, 请不要吝啬你的批评. 有批评才会有更多的进步.
如何使用bootstrap框架 bootstrap入门必看
为什么使用这个框架呢？
1、浏览器支持，所有的主流浏览器支持，包括：IE、firefox、opera、chrome、Safari等。
2、容易上手，掌握html+css基础即可。
3、具有设备响应式兼容。bootstrap的响应式css能够自适应于台式机、平板电报和手机。
4、包含很多功能强大内置组件，易于定制。
5、开源。
在其官网下载，包括三种形式，我们选择用于生产环境的bootstrap，这样就无须先学习sass或者less的编译，可以着重于学习bootstrap的应用。下载文件为zip格式，解压后包括三个文件夹。css即bootstrap的样式文件，js文件夹即其js文件，fonts为其字体文件夹。
我们暂且只用到css和js，点开css文件夹和js文件夹，出现如下图。css文件夹中，其中，.css文件是编译好的css文件，同我们平常使用的没有区别，.min.css是压缩后的css文件，可以使用这个文件节省大小，.map是映射less文件和css文件对应位置，暂且忽略，复制.min.css文件到自己项目的css文件夹中，同理，复制js中的.min.js文件到自己项目的js文件夹中。
下图为其基本模板。由于bootstrap是用jquery编写，所以需要jquery支持，我们使用的是在线jquery库。在浏览器查看效果。h1第一级标题使用的样式是bootstrap的样式，而非h1原本的样式。
在head的最开头（必须为最开始，可以在编码之后）加上
《meta name=“viewport“ content=“width=device-width, initial-scale=1“》
此为移动端开发经常用的，可以养成好习惯每个网页都添加，可确保适当的触屏缩放和显示比例。
表示：当前的viewport的宽度为设备宽度，当然你也可以设置为具体数值，初始显示为原始比例显示。content共有六个属性：width、height（不常使用）、initial-scale、maximum-scale、minimum-scale、user-scalable
布局容器的使用。
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，包括两个：.container 类用于固定宽度并支持响应式布局的容器；
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
如下图是一个实例。container中包含的为bootstrap显示的样式。
其支持响应式布局，将浏览器窗口拉宽和拉窄效果不同。
8
在bootstrap官网上有较多实例和组件，可以根据个人需要定制化使用，创作属于自己风格的页面。
解释strap什么意思
strap 英[stræp] 美[stræp]
v. 用带捆扎; 用皮带抽打; 拼命工作;
n. 皮带; 带子; 磨刀皮带; 鞭打;
[例句]Nancy gripped the strap of her beach bag
南希抓住了自己沙滩包的带子。
[其他] 第三人称单数：straps 复数：straps 现在分词：strapping过去式：strapped 过去分词：strapped
-boot
