BootStrap

BootStrap

1.bootsrap简介

BootStrap是由Twitter公司开发维护的前端UI框架，他提供了大量编写好的CSS样式，允许HTML结构及JavaScript,快速编写功能完善的网页及常见交互效果

中文官网：https://www.bootcss.com/

2.bootsrap使用

2.1 引入：BootStrap提供的CSS代码

<link rel="stylesheet" herf="./bootstrap-3.3.7/css/bootstrap.css">

2.2 调用类：使用BootStrap提供的样式

container：响应式布局版心类

3.栅格系统原理

3.1 栅格化是指将整个网页的宽度分成若干等分

BootStrap3默认将网页分成12等份

3.2 栅格系统使用

（1）.container是Bootstrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中

（2）.container-fluid也是Bootstrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%

（3）分别使用.row类名和.col类名定义栅格布局的行和列

3.3注意：

（1）container类名带间距15px

（2）row类自带间距-15px

4.bootstrap介绍

4.1手册用法：

Bootstrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点

网站首页 > BootStrap3中文文档 > 全局CSS样式 > 按分类导航查找目标类

5.Glyphicons字体图标

5.1 Glyphicons字体图标使用步骤

HTML页面引入BootStrap样式文件

空标签调用对应类名

glyphicon

图标类

6. 插件使用

6.1 使用步骤：

引入BootStrap样式

引入js文件：JQuery.js + BootStrap.min.js

复制HTML结构，并适当调整结构或内容
*
复制HTML结构，并适当调整结构或内容