Bootstrap - 学习笔记

                                               Bootstrap-学习笔记 

一、响应式网页
1、响应式网页概述：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。

三个特征：（1）流式布局（2）可伸缩的图片和字体（3）CSS3 Media Query

2、编写响应式网页

（1）设置viewport元标签

（2）避免使用绝对单位(px),用相对单位代替(%,auto,em等)

（3）使用流式定位：float

（4）图片大小实现自适应：img(max-width:100%)会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真

（5）根据浏览器屏幕的特征，有选择性的执行某些css样式——css3媒体查询技术(Media Query)

3、测试响应式网页

（1）使用真实物理设备——效果可靠但任务量太大（只要手机/平板/PC在同一个局域网即可测试）

（2）使用第三方测试/模拟软件——效果有待进一步的验证

（3）使用Chrome自带的浏览器模拟器测试

优势：可以模拟常见的设备、网速、经纬度、加速度…；不足：效果有待进一步的验证。

4、WebStorm的常用操作：

常用快捷键(Eclipse)：

复制当前行：Ctrl+Alt+↓
向上/下移动当前行：Alt+↑/↓
删除当前行：Ctrl+D
注释当前行：Ctrl+/
ZenCoding（代码补全）：
div+TAB+enter
div.box+TAB+enter
div#mybox+TAB+enter
div3+TAB+enter
ul>li3>a+TAB+enter
假文生成：
lorem+TAB+enter
多行编辑：
Alt+左键点击 开始多行同时编辑
ESC 退出多行编辑模式
5、CSS3提供的Media Query技术
作用：根据客户端浏览设备的特性，有选择性的执行部分CSS

Media：指浏览网页的设备，如screen（pc/pad/phone）、print、tv、projection、屏幕阅读器…

Query：查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色深位深、方向，根据这些特性，执行特定的CSS样式。

CSS3MediaQuery有两种用法：

（1）根据媒体的特征，加载不同的外部CSS：

不足：客户端会不管媒体特性，请求所有的CSS文件。

（2）根据媒体的特性，执行某段CSS中的 部分内容：

@media “screen and (min-width:768px) and (max-width:990px)”{
h1{…}
.box{…}
}
6、Twitter Bootstrap

Bootstrap(bootcss.com)是一个框架HTML/CSS/JS框架，适用于移动设备优先的响应式网页。

Bootstrap分为五部分：

（1）起步(Startup)；（2）全局CSS样式(Global CSS)；（3）组件(Component)；（4）插件(plugin)；（5）定制(Customize)

二、Bootstrap起步
1、下载Bootstrap

2、安装Bootstrap

3、网页基本模板

(1)lang属性的两个作用：A、告诉浏览器翻译时如何确定当前网页的基础语言B、告诉读屏软件当前页面的基础发音

(2)IE浏览器的兼容性问题：X-UA-Compitable:Cross-UserAgent-Compitable，该元标签只有IE浏览器支持

设置IE的兼容模式为edge——最新版，尽可能向行业标准看齐。

(3)Bootlint工具：是一个js，由Bootstrap官方提供，用于检测使用Bootstrap的页面中常见的HTML错误、class使用方面的错误——默认情况下浏览器是检查不出来的。

三、Bootstrap全局CSS样式
1、CSS Reset

*{box-sizing:border-box;}

box-si