官网下载

在这里我还是要推荐下我自己建的web前端开发学习群：731669587，群里都是学web前端开发的，如果你正在学习前端，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。

这个是必须要引入的东西，都给写好了，直接在官网复制就ok，但是他们的连接都是网络地址，需要改一下，自己所放那些文件的本地地址

这里面的东西，我们需要导入到我们的html项目中

要找到这个导入

导入之后的结果是这样的额

至此下载及导入工作就完成了，使用BootStrap需要一个基本模板，需要在这个基本模板的基础之上进行开发

Bootstrap基本模板

BootStrap

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，

如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的，这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css 中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如 iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为 ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也不允许用户缩放不同的网站有不同的要求，但让 viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

设置浏览器视口宽度为设备理想宽度

每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device- width这个特殊值就行了

至此准备工作基本完成，下面进行使用BootStrap重写购物网站首页，要做网站首页，关键在于布局，前面用table进行过布局，然后有用div+css进行布局，现在使用BootStrap进行布局

BootStrap官方提供了两个容器，一个是container，还有一个是container-fluid，我们在用div的时候只用在div上写上class=“这两个样式之一”就可以使用这两个样式了，当然这两个样式还是有些区别的。

这里有两个div，分别给他们设置不同的class，可以看有出这两个样式有和不同，还有一点这官方给定的样式没有border，所以这里自己写一下，为了观看方便

效果是这样的，这是二者的区别

这个是官方给定的container的样式，如果对这个不满意，我们不要更改这个，而是在《style》中重写这个，注意《style》要在link引入之后，只有这样才能覆盖掉官方给定的，达到修改的目的

BootStrap主要给定全局css，组件，以及javascript插件，我们用到这方几方面内容的时候可以直接copy过来，因为官方给了大量的实例，非常方便，非常详细

栅格系统

Bootstrap的布局栅格系统原理

1栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

2“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。也就是说行必须写在class为.container （固定宽度）或 .container-fluid （100% 宽度）的div下

3通过“行（row）”在水平方向创建一组“列（column），创建一行，那么效果就相当于创建一列

4你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）的直接子元素

5类似 .row 和 .col-xs-4 等这种预定义的类，官方都给定了固定的样式，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局

6通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

7负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行

8栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

9如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

10栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

我们通过栅格系统可以实现在不同大小设备上显示不同的页面布局，还可以让在不同大小设备上让一些东西不显示，这就是响应式布局，这些官方已经给定，想要什么效果就把官方给定的class添加就ok，具体实现我们不用关心

class=".col-xs-4 .col-sm-6"这个意思是这个在超小屏幕上占4列，在小屏幕上占六列，至于其它的大小的页面则没有任何效果，所以一般我们要对所有大小的屏幕都进行布局设计，防止其他大小页面网站不能友好显示

这个也比较常用，比如页面内容太多，在pc端正常显示，而在手机端我们需要让一些没有太多意义的内容隐藏掉，那么我们可以使用这些class来完成隐藏操作。

布局的时候要使用行还有列来基本布局，至于列在各种设备上占多大，还有列在什么设备上隐藏，需要以上的一些clas来搭配使用，这些事基本的布局操作，至于除了布局之外的一些表单之内的，官方也给提供了实例，直接copy然后修改一下就ok了。

下面重写购物网站首页

效果

通过代码可以看出这行的设计，首先改行写在了容器中，其次，行class=row，列class=好多，列的具体情况就是，在超小屏幕手机中每列占四，在平板屏幕中第一列占4，第二列占5，第三列占3，其他的页面尺寸就不多说了，这些都是根据不同大小的页面如何才能显示的很好来一点一点试的，还有一个在第二列中class=hidden-xs这个意思就是说在最小屏幕上这个div就不要显示了，隐藏，相当于代码删掉一个效果。还有一个图片设置了高度，这在实际开发中是不存在的，因为实际中图片大小应该是正合适的，还有一个列div设置了padding，这个效果就是使得登陆注册购物车距离上面远一点，能够达到居中的而效果，如果不写则默认贴着上面，这是官方给定的效果，我们可以重写，达到覆盖的效果。