Bootstrap

Bootstrap 目录

- bootstrap 全局样式用法

- viewport的意义

- 栅格化布局用法

- 字体 图标

- 实现响应式布局的开发

特性：

    响应式设计、栅格布局、完整的类库、JQuery插件、不同的使用场景

Bootstrap框架的核心是轻量的CSS基础代码库

Bootstrap 样式

一、排版-标题

标题 （h1~h6 / .h1~.h6）

h1:36px   h2:30px     h3:24px  h4:18px  h5:14px   h6:12px

副标题 （small）

 一般是针对于单个单词或单个句子的代码

 一般是针对于多行代码（也就是成块的代码） 

 一般是表示用户要通过键盘输入的内容
在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代
二、排版-文本
对齐：  .text-left    .text-center .text-right  
大小写： .text-lowercase  .text-uppercase .text-capitalize
颜色： .text-muted (浅灰色) .text-primary(蓝色) .text-success(浅绿色)







三、排版-表格






table 样式


.table-responsive  响应式表格






响应式表格


tr：  .warning（黄色 警告） .info（蓝色）  .success（绿色） .danger(红色)  .active（灰色）







四、表单
form、input







button







五、图片






图片样式




六、viewport
meta viewport 有6个属性:







  //初始化移动浏览显示






不同机型产生的字体问题


isRetina  判断是否是retina屏幕


  //在IE运行最新的渲染模式
七、栅格布局
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
.col-lg-   (1170px)
.col-md- (970px)
.col-sm- (750px)
.col-xs- (none)







八、单位






国内使用px多 国外使用em和rem多








px弊端








em弊端









九、图标








bootstrap 组件

一、图标







二、下拉菜单







三、控件组
.input-group  表示控件组
.input-group-addon 可放置额外内容以及图标







四、导航













导航样式


五、分页
.pagination  在父元素中添加表示分页
.pager  放置在翻页区域
.previous  把链接向左对齐 
.next 把链接向右对齐







六、进度条














七、列表
.list-group   列表组
.badge  状态数
.active  选中的状态
.list-inline  把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示







八、面板














九、插件
1> 引用
    bootstrap 插件依赖 bootstrap.js
    bootstrap.js 基于JQuery
2> data属性
    通过data属性控制页面交互
    $(document).off(" .data-api ") 解除属性绑定








响应式布局

一、CSS3-Media Query  (最简单的方式)






属性








media使用


二、借助原生JavaScript  (成本高 不推荐使用)
三、第三方开源框架  (可以很好的支持浏览器响应式布局的设计)