Bootstrap

Persiguiendo

于 2020-08-06 20:47:45 发布

阅读量112

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/Persiguiendo/article/details/107024507

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

内容来自 Bootstrap 中文文档

HTML5 文档类型

<!DOCTYPE html>
<html lang="zh-CN">
...
</html>

移动设备优先

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

通过user-scalable=no属性可以禁用缩放功能

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

全局样式

在 scaffolding.less 文件

布局容器

container 类用于固定宽度并支持响应式布局的容器
container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
注：由于 padding 等属性的原因，这两种容器类不能互相嵌套

栅格系统

随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）
通过“行（row）”在水平方向创建一组“列（column）”
内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为.container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备

媒体查询

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的*/

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

栅格参数

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