Bootstrap框架使用（安装，全局样式，组件，插件）

简介

中文官网：www.bootcss.com

1.响应式框架

2.HTML5文档类型

3.移动设备优先：必须设置viewport

Bootstrap框架使用

BT使用安装

1.安装：1.下载引入：生产环境版本

2.CDN服务

3.使用第三方工具安装

2.文件结构：

css:样式文件
    bootstrap[.min].css：全局样式文件
    bootstrap-theme[.min].css：主题样式文件 -- 一般不用
    *.map：源码映射表 -- less或sass开发时，源码与编译之后的代码对应关系
fonts:字体图标字体
js:js功能插件
    bootstrap[.min].js：所有js功能插件
    npm.js：CommonJS环境中，用来加载所有的js功能插件

BT框架的CSS样式

1.重写了所有标签的默认样式 -- Normalize.css

2.提供了很多全局样式(class)可以直接调用

3.将标签和全局样式结合生成了组件可以直接使用

全局样式

1.布局容器：.container：通过媒体查询设置固定宽度的容器

.container-fluid：类似100%宽度的容器

2.栅格系统：

1.将屏幕等分成12列,一行超出12列，则多余列所在的元素会自动换行

2.栅格系统必须由布局容器包裹，布局容器下为行(.row)，行下面为列(col)，所有的内容必须放在列中

3.列与列之间都有15px的间隔，可以通过给row设置row-no-gutters移除

3.表格：.table--基本样式

4.按钮：.btn--基本样式

5.图片：.img-responsive -- 设置为响应式图片

img-rounded -- 图片圆角效果

img-circle -- 图片圆形效果

img-thumbnail -- 图片缩略图效果（灰色边框）

6.其他：.center-block：将块级元素水平居中

.text-center：将文本水平居中

.pull-left或pull-right：快速浮动

.clearfix：清除浮动 -- 给父元素添加

组件

1.字体图标

2.导航：所有的导航组件都依赖.nav

BT框架的JS插件

1.BT框架的JS插件依赖jQuery

2.引入方式：

1.全部一次性引入：bootstrap[.min].js

2.单个引入：根据功能引入对应的js文件 -- 插件之间有依赖

3.data属性：可以直接通过data-*属性设置插件相关效果 -- 推荐