Bootstrap工具包--用于响应式布局和移动设备优先的web项目

Bootstrap是用于前端开发的工具包，是一个css/html框架

用于响应式布局和移动设备优先的web项目　　　　响应式布局--一个网站能兼容多个终端

有很多版本：v3,v4,v5 三个没啥区别 v3的排版更清晰点

网址：http://v3.bootcss.com/

打开页面以后，点击起步　　 >　　选择用于生产环境的Bootstrap进行下载，并进行解压

在pycharm中file>open 打开下载的Bootstrap文件，创建一个新的html文件，打开的新HTML文件的原框架不需要，删除

在从官网起步中找到基本模板，将基本模板标题下的代码块复制到新html文件中。此时查看的结果是 ：你好，世界。

好了，我们开始进行我们想要的操作（我们操作的方法就是--Bootstrap官网中有的复制官网中的，没有的自己写）

对基本模板进行简单的讲解

<meta http-equiv="X-UA-Compatible" content="IE=edge">   在IE运行最新的渲染模式


IE浏览器作为微软开发的软件以前是很正规个浏览器，但可能后来专注于系统，后来就被谷歌，火狐等赶超了，Bootstrap不支持IE古老的兼容模式，

<meta name="viewport" content="width=device-width, initial-scale=1">   viewport:视口  device-width:让你网页1的宽度等于你设备的宽度  inintal-scale:1--不缩放也不放大


它这里用个的一些css和js文件都是用的网址中的，我们可能自己电脑上有下载了一些文件，也可以不用改。


min.css/min.js后缀的文件和css/js文件的区别--js是javascript的源码文件，min.js是压缩版的js文件。min.js文件相对于编译前的js文件体积小，传输效率快，压缩原理：删除jsd代码中的所有注释，跳格符号，换行符号，以及无用的空格，从而压缩js文件的大小        





栅格系统是Bootstrap中最核心的东西，这里是重点！响应式布局就是靠栅格系统来操作的


就是把浏览器分成了12份（不管是版心的还是通栏的）,栅栏的英文前缀是根据屏幕的大小进行参考的，一般为中等屏幕  用（col-md）类前缀。想要在各种终端设备中运用时，我们可以在一个class类里面写多个栅栏前缀的格式，当然不要忘了每个后面加数字后缀


后面的数字是分12份里面的几份。


响应式的两种方法：

方法一：媒体查询@media screen and (max-width:多少px) and (min-width:多少px){　　在这里选择对html的某个类，id，标签　（比如要对class为footer的类进行修改则如下）

　　　　.footer{　　在这里对你想要操作的css代码块进行覆盖重写　　}　　}

　　　　此方法通过在css中媒体查询，根据屏幕大小的尺寸来确定您的网页布局。

方法二：栅格系统处理 在类选择器里写入多种栅格参数，如在一个class类中同时写下　　col-xs- col-sm-　　col-md-　　col-lg-　　。使其在不同设备（不同屏幕下有不同的网页布局）