2019-06-11 学习日记 day32 BootStrap

BootStrap

  响应式页面,适应不同的分辨率显示不同样式

 

全局 CSS 样式

设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

栅格系统

  栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局

row必须在.container 或 .container-fluid

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。

组件

无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

原文地址:https://www.cnblogs.com/JungTan0113/p/11031339.html