bootstrap学习笔记，主要是看文档和写小demo

一、初识bootstrap
1.bootstrap是个框架，基于jQuery写的一些插件，他的核心是css和js

2.Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以引入js文件时需先把jQuery引入必须放在前边

3.Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面，使其在各个尺寸的屏幕上表现良好

4.IE9以下需要兼容

5.IE浏览器需要单独兼容
<meta http-equiv="X-UA-Compatible" content="IE=edge">

6.国产浏览器高速模式
国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，
这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。幸运的是，国内浏览器厂商逐渐意识到了这一点，
某些厂商已经开始有所作为了

二、全局css样式
1.Bootstrap 是移动设备优先

2.在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能

3.bootstrap要求HTML5 文档类型

4.Bootstrap 排版、链接样式设置了基本的全局样式，body元素设置background-color: #fff;

5.布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器
提供的两个类
.container 类用于固定宽度并支持响应式布局的容器

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

6.栅格系统
1.bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着视口或者屏幕尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类还有强大的mixin用于生成更具意义的布局

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

3.row必须包含在.container(固定宽度)或者.container-fluid(百分百宽度)中，以便为其赋予合适的排列(aligment)和内补(padding)

4.通过row在水平方向创建一组column 内容应当放于column内只有column才可以作为row的直接子元素

5.类似.row和.col-xs-4这种预定义的类可以用来快速创建栅格布局，mixin也可以用来创建语义话的布局

6.通过为column设置padding属性，从而创建列与列的间隔，通过为row设置margin属性从而抵消.container的元素设置的padding

7.栅格系统中的列是通过指定1到12的值来表示其跨越的范围三个等宽的列可以使用三个 .col-xs-4 来创建。如果一行等于12列就会另起一行

8.媒体查询media query
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值

bootstrap学习笔记，主要是看文档和写小demo

猜你喜欢