bootstrap-布局容器-栅格系统-响应式工具

1.1 bootstrap简介
中文官网: https://www.bootcss.com/
官网: http://bootstrap.html.cn/
2.3 布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器,Bootstarp预先定义好了这个类,叫.container他提供了两个作此用处的类
1.container类
响应式布局的容器 固定宽度
大屏(>=1200px)宽度为1170px
中屏(>=992px)宽度为970px
小屏(>=768px)宽度为750px
超小屏(100%)
3.1 栅格系统
系统会自动分为最多12列
3.2 栅格选项参数
超小屏幕设备 手机 (<768px) 小屏幕设备 平板 (≥768px) 中等屏幕设备 桌面 (≥992px) 大屏幕设备 桌面 (≥1200px)
容器的宽度 None (auto) 750px 970px 1170px
class前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
按照不同屏幕划分为1-12等份
行(row)可以去除父容器作用15px的边距
xs-extra small:超小;sm-small:小;md-medium:中等;lg-large:大;
列(column)大于12,多余的"列(column)"所在的元素将被作为一个整体另起一行排列
每一列默认有左右15px的padding
可以同时为一列指定多个设备的类名,以便划分不同份数 列如class=“col-md-4 col-sm-6”
3.6 响应式工具
类名 超小屏 小屏 中屏 大屏
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
与之相反,visible-xs visible-sm visible-md visible-lg 是显示某个页面内容