Bootstrap使用

原理：CSS3媒体查询，查询屏幕宽度适配不同设备。
@media screen and (){}:

• 默认查询screen,可以省略
• and前后空格不可省
• 查询覆盖，会被顺序后的查询覆盖

遇到的问题

安装配置

Refused to apply style from,because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

• 问题：文件路径不对。

• 相对路径：

• ./：代表文件所在的目录，可以省略不写
• /：代表根目录
• …/：代表文件所在的父级目录

基本内容

• Nomalize.css：相当于Bootstrap的reset.css，一些默认样式，跨浏览器表现一致性。
• 常见类：
  可用类名控制样式

• 容器类：.container:固定宽度，查询屏幕，响应式布局
  .container-fluid:流式布局，宽度随页面宽度的改变而改变
• row类：已设置好了margin-left(right)：-15px,来补偿本身自带的padding值，清除父容器的内边距
• col-md-n列向类：默认会把一行12等分，一列排布如果超过12等份，会自动换行；
  可嵌套，可偏移（col-xs-offset-4）:向右偏移4等份；可排序（col-xs-push-1）:往后推1份
• 响应式工具类：hidden-md,中等屏幕隐藏，控制显示
• pull-left,pull-right:左浮动，右浮动

• collapse插件：折叠插件，一个元素（button,a,divBtn）能控制某一块区域的显示和隐藏

属性

• data-toggle:声明插件类型
• data-target:控制目标选择器

• 与盲人阅读器有关的属性：

aria-,sr-only,role

• 具体使用组件插件时，要分析模板结构，根据需求做出改动
• carousel插件（轮播图）：

• data-ride = ‘carousel’,声明轮播图插件
• slide:图片是否有动画切换
• data-targer:确定控制的轮播图模块
• data-slide-to：控制轮播图索引图；data-slide：prev

• 栅格系统不够集中，改版心容器宽度
• Bootstrap定制：

• 离线定制：修改源码
• 在线