bootstrap框架学习笔记
1、Bootstrap简介
Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
文档:https://bootstrap.css88.com/
2、基本使用
- 创建文件夹结构(bootstrap文件夹)
- 创建html骨架结构(container+row+column)
- 引入相关样式文件
- 编写内容
3、容器
-container 类(固定宽度)
- container-fluid类(流式布局容器)
4、设备划分
- 超小屏幕(手机) <768px:设置宽度为100%
- 小屏设备(平板) 768px ~ < 992px :设置宽度为750px
- 中等屏幕(桌面显示器) 992px ~ <1200px:设置宽度为970pxx
- 宽屏设备(大桌面显示器) >= 1200px:设置宽度为1170px
5、栅格系统
容器将屏幕的尺寸自动分为12列。
栅格系统用于通过一系列的行和列的组合来创建页面布局。
根据容器宽度将类前缀分为:.col-xs-, .col-sm-, .col-md-, .col-lg- 。-后面加上列数,同个容器内列数和应为12。四个前缀分别对应4中的四种宽度。
6、展示与隐藏
.hidden-xs/sm/md/lg 仅在超小屏/小屏/中屏/大屏中隐藏
对应的展示为:.visible-xs/sm/md/lg
7、其他类前缀
列偏移 :col-lg-offset-n 想右偏移n列
列排序:col-lg-push-n 往右推移n列,相当于 , col-lg-pull-n 往左推移n列