1.栅格系统
Bootstrap是基于移动优先的原则开发的,使用了一系列的媒体查询(media queries)方法,为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值,并且当窗口视图改变的时候允许元素缩放。
(分界点大小:576px、768px、992px、1200px)
Bootstrap包含了一个强大的移动优先的网格系统,它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)。Bootstrap4是完全基于flexbox流式布局构建的,完全支持响应式标准。
2.响应式的class选择器
Bootstrap的栅格系统包括五种宽带预定义,用于构建复杂的响应布局,你可以根据需要定义在特小.col
、小.col-sm-*
、中.col-md-*
、大.col-lg-*
、特大.col-xl-*
五种屏幕(设备)下的样式。
每个标签都是定义了在当前断点之下的排列样式,一旦小于这个断点那么样式就不起作用了,变成了各独自占一行。
类似于sm,md,lg,xl等都是断点,只有当屏幕尺寸大于断点的对应的大小,这样的的class样式才会生效。比如:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<