django学习入门系列之第三点《BootSrap的栅格系统》

---

栅格系统

https://v3.bootcss.com/css/#grid

• 把整体划分为12格

• 分类

  • 响应式

  • 简单来说，当大于他的最大宽度的时候，水平堆放。达不到最大宽度时，上下堆放（根据屏幕宽度不同）

    .col-sm-

    .col-md-

    .col-lg-

  	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
  栅格系统行为	看宽度调整	看宽度调整	看宽度调整
  .container 最大宽度	750px	970px	1170px
  类前缀	.col-sm-	.col-md-	.col-lg-
  列（column）数	12	12	12
  最大列（column）宽	~62px	~81px	~97px
  槽（gutter）宽	30px （每列左右均有 15px）	30px （每列左右均有 15px）	30px （每列左右均有 15px）
  可嵌套	是	是	是
  偏移（Offsets）	是	是	是
  列排序	是	是	是

​ 非响应式：

.col-xs-

	超小屏幕 手机 (<768px)
栅格系统行为	总是水平排列
.container 最大宽度	None （自动）
类前缀	.col-xs-
列（column）数	12
最大列（column）宽	自动
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

​

​ 列偏移

​ 使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例 小米商城头标】
15.【案例 小米商城头标总结】
16.【案例 小米商城二级菜单】
17.【案例 商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例 小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
22.【BootSrap的目录栏】