【JQuery】扩展BootStrap入门——知识点讲解(二)

👀专栏介绍

【JQuery】 目前主要更新JQuery，一起学习一起进步。

👀本期介绍

本期主要介绍扩展BootStrap入门——知识点讲解(二)

文章目录

1. 布局容器

2. 栅格

2.1 简述栅格系统

2.2 栅格系统的特点及入门案例

2.3 栅格屏幕尺寸设置

2.4 设置屏幕尺寸时的注意事项

2.5 列偏移

3. 响应式工具

4. 列表（美工知识：了解）

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 ），将所有元素放置于同一行。