BootStrap小知识

BootStrap小知识

1、简介
BootStrap为基于 HTML、CSS、JavaScript的前端开发框架

2、特点
(1)具有css样式和js插件
(1)响应式页面，同一套页面可以兼容不同分辨率的设备

3、BootStrap结构

(1)全局CSS
	一套CSS的样式表
(2)组件
	一套按钮,导航条等组件
(3)JS插件
	一套JS的插件,默认实现很多效果

4、头文件

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

5、栅格系统 (12列)
(1) 设备分辨率大于1200 ----- col-lg-数字 ---- 大屏幕 大桌面显示器
(2) 设备分辨率大于992 < 1200 ---- col-md-数字 ---- 中等屏幕 桌面显示器
(3) 设备分辨率大于768 < 992 ---- col-sm-数字 ---- 小屏幕 平板
(4) 设备分辨率小于768 ----- col-xs-数字 ---- 超小屏幕 手机

6、容器
容器分类：
(1) container：两边留白
(2) container-fluid：100%宽度，全部视口(viewport)

7、CSS样式
(1)按钮：class=“btn btn-default”

.btn-lg / .btn-sm /.btn-xs ----- 设置按钮的不同尺寸
.active ----设置按钮激活状态

(2)图片尺寸

class="img-responsive"：图片在任意尺寸都占100%

(3)图片形状

<img src="..." alt="..." class="img-rounded">：方形
<img src="..." alt="..." class="img-circle"> ： 圆形
<img src="..." alt="..." class="img-thumbnail"> ：相框

(4)表格

table
table-bordered
table-hover