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  (成本高 不推荐使用)
 
 
三、第三方开源框架  (可以很好的支持浏览器响应式布局的设计)