🔎这里是【JQuery】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【JQuery】 目前主要更新JQuery，一起学习一起进步。
👀本期介绍
本期主要介绍扩展BootStrap入门——知识点讲解(二)
文章目录
2. 栅格
1. 布局容器
BootStrap 必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。
相当于一个画板。
帮助手册位置：全局 CSS 样式 ------- 》概览 ------- 》布局容器
任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用 div 作为布局容器
代码准备：
示例 1 ：
效果 1 ：
示例 2 ：
效果 2 ：
2. 栅格
2.1 简述栅格系统
为了方便在布局容器中进行网页的布局操作。
BootStrap 提供了一套专门用于响应式开发布局的栅格系统。
栅格系统将一行分为 12 列 ，通过设定元素占用的列数来 布局元素在页面上的展示位置。
帮助手册位置：全局 CSS 样式 ----- 栅格系统
作用：
可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发。
2.2 栅格系统的特点及入门案例
栅格特点
“行（row ）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中行使用的样式“ .row ”，列使用样式“ col-*-* ” 元素内容应当放置于“列（column ）”内基本的书写方式必须是： 容器 --- 行 --- 列 --- 内容相当于 HTML 表格：表格 ---- 行 ----- 单元格 — 内容
栅格参数：
“ col- 屏幕尺寸 - 占用列数 ”
列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上。
列元素的占用列数，定义列元素的大小
示例 1 ：一个元素占一行
代码准备：
效果 1：
示例 2 ：三个元素平分一行
代码准备：
效果 2：
注：
一个 row 样式下，如果设置的 col 列数总和 <=12 ，那么该 row 下元素在一行排列；
一个 row 样式下，如果设置的 col 列数总和 >12 ，那么超出的元素会另起一行排列；
行和列可以进行无限嵌套，嵌套方式必须为 列 --- 行 --- 列 ---- 行。。。。
2.3 栅格屏幕尺寸设置
屏幕尺寸简述：
large : lg
------- 大屏幕，一般 PC 尺寸
medium : md --------中等屏幕，小 PC 尺寸
small: sm : sm ----- 小屏幕 ， iPad 尺寸
x small : xs
----- 超小屏幕，智能手机尺寸
示例：
代码准备：
效果：
2.4 设置屏幕尺寸时的注意事项
若设置了某个屏幕尺寸的样式，那么比该尺寸大的屏幕，会沿用该设置；比该尺寸小的屏幕，会默认一个元素占 12 列的设置。
例如：设置了 col-md-4 ，那么相当于也设置了 col-lg-4 。
其他屏幕尺寸均默认为 col-sm-12,col-xs-12
2.5 列偏移
通常情况下我们需要将元素居中显示，需要左边空出一定的空白区域，这里我们就可以使用列偏移来达到效果。
代码准备：
3. 响应式工具
为针对性地在移动页面上展示和隐藏不同的内容， bootStrap 提供响应式工具。
可以让开发人员通过该工具决定，在何种屏幕尺寸下，隐藏或者显示某些元素
帮助手册位置：全局 CSS 样式 --- 响应式工具
代码准备：
4. 列表（美工知识：了解）
我们常用的列表在：全局 CSS 样式----排版----列表
实质：通过设置 display: inline-block; 并添加少量的内补（
padding ），将所有元素放置于同一行。
