032 bootstrap

Bootstrap

一、简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

二、安装

1、本地链接

官网下载

2、CDN

三、布局容器

• 固定宽度：.container
• 流式布局：.container-fluid

四、响应式布局

• 超小屏幕：小于 768px
• 小屏幕：大于等于 768px
• 中等屏幕：大于等于 992px
• 大屏幕：大于等于 1200px

五、删格系统

1、概念

将父级可用宽度(content)均分为12等份

2、列比

• 超小屏幕：.col-xs-*
• 小屏幕：.col-sm-*
• 中等屏幕：.col-md-*
• 大屏幕：.col-lg-*

v-hint：只设置小屏列比会影响大屏列比；只设置大屏列比小屏时会撑满屏幕

3、行

...

4、列偏移

• 超小屏幕：.col-xs-offset-*
• 小屏幕：.col-sm-offset-*
• 中等屏幕：.col-md-offset-*
• 大屏幕：.col-lg-offset-*

六、辅助类

1、 情境背景色

...
...
...
...
...

2、快速浮动

...
...

3、快速清浮动

...

4、显隐

...
...

七、字体图标

八、组件