admin管理员组

文章数量:1026989

bootstrap框架学习笔记

bootstrap框架学习笔记

• 1、Bootstrap简介
• 2、基本使用
• 3、容器
• 4、设备划分
• 5、栅格系统
• 6、展示与隐藏
• 7、其他类前缀
• 8、组件直接参考开发文档

1、Bootstrap简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
文档：/

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列

8、组件直接参考开发文档

bootstrap框架学习笔记

bootstrap框架学习笔记

• 1、Bootstrap简介
• 2、基本使用
• 3、容器
• 4、设备划分
• 5、栅格系统
• 6、展示与隐藏
• 7、其他类前缀
• 8、组件直接参考开发文档

1、Bootstrap简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
文档：/

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列

8、组件直接参考开发文档

本文标签： bootstrap框架学习笔记