Bootstrap

Posted 2022-08-15 py-king

网格系统的实现原理，是通过定义容器大小，平分12份。

调整内外边距，通过媒体查询，就制作出强大的响应式网格系统

 

那媒体查询时什么呢：媒体查询主要是对各种移动端设备的一个响应式兼容，

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

1. width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
2. height：高度（数值 / device-height）（范围从223 到10,000）
3. initial-scale：初始的缩放比例 （范围从>0 到10）
4. minimum-scale：允许用户缩放到的最小比例
5. maximum-scale：允许用户缩放到的最大比例                                                                                      
6. user-scalable：用户是否可以手动缩 (no,yes) 

• WebApp全屏模式：伪装app，离线应用

 

在Bootstrap中响应式布局就是利用其栅格系统，对于不容的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板，pc端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。

Bootstrap提供了一套响应式，移动设备优先的栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为12列

会通过一系列的行与列的组合来创建页面布局

 

首先需要在head中引入meta标签，添加viewpirt属性，content中宽度等于设备宽度， initial-scale:页面首次被显示可见区域的缩放级别，取值1则页面按实际尺寸显示，无任何缩放；maximum-scale:允许用户缩放到的最小比例；user-scalable:用户是否可以手动缩放。代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css"

 

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