初学者--bootstrap（一）--在路上（1）

bootstrap：

是目前最受欢迎的前端框架，并基于HTML、CSS、JAVASCRIPT ，而且他是为了适应并兼容各个电子设备，是对媒体查询的封装。

1.so，什么是媒体查询呢？

他是响应式布局的方法之一，使我们的网页适配于各种设备。

2..媒体查询的写法和格式？

   思想：使用分割法分析和解决问题
   （1）确认把屏幕分成几种样式 （1200px 900px 600px）
      (2) 选择max-width 还是min-width

so，有两种方法：

（1）CSS3

        //浏览器 大小

给页面设置一个最大宽度，那页面超过我设定的最大宽度，超过的那部分以空白显示

因为代码都是一层一层的进行判断执行，那就要注意设置最大或最小显示屏幕的顺序，避免设置的被覆盖

例如：

范围从大到小
小于1200：@media screen and (max-width:1200px){这里面可以写一些要改变的属性样式等}

小于750：@media screen and (max-width:750px){这里面可以写一些要改变的属性样式等}

 小于400 ：@media screen and (max-width:400px){这里面可以写一些要改变的属性样式等}

范围从小到大

 @media screen and (max-width:400px){这里面可以写一些要改变的属性样式等}

 @media screen and (max-width:750px){这里面可以写一些要改变的属性样式等}

@media screen and (max-width:1200px){这里面可以写一些要改变的属性样式等}

  注：理解并会用一种范围就可以了，因为要适应各个设备屏幕的宽度，所以在写初始代码的时候，宽度尽量以百分比设置。

（2）外部link（建议多用）

      这个需要在建立一个CSS，把屏幕所需要发生的变化写在所连接的文件中

      写法：   <link rel="stylesheet" media="screen and (max-width:1200px)"  href=".CSS">

3 .当为一个大的div中添加几个小标签时，不管添加的元素是块级也好行级也好，总之是为其添加 内容，使界面在不同设备上以居中的样式显示，这时要注意的是，不要用float：left属性，用 display:inline-block;