页面布局讲解之Bootstrap4 公共样式--Dcat-Admin框架实战(九)

Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容，基于flexbox流式布局构建，支持响应式标准。

（这一篇，浏览过，心中有个大致的映像就可以了，备着后面回来查看）

以下为我的学习笔记：

栅格布局：

每列都有水平的padding值，用于控制它们之间的间隔。

px用于全局层面网格断点和容器宽度（因为浏览器和设备的宽度是以像素px为单位，且不会随字体大小而变化）。

Display 显示属性：

display实用程序类更改显示属性的值。（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）

●display常用属性：

none

inline

inline-block

block

table

table-cell

table-row

flex

inline-flex

 

例：

<div class="d-lg-none">大于lg屏幕尺寸时隐藏</div>（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）

<div class="d-none d-lg-block">小于lg屏幕时隐藏</div>

flex 弹性布局：

浏览器预默认值下，使用 .flex-row 可设置子元素水平方向排版呈现，或者使用.flex-row-reverse 可实现元素在水平上作反方向排列（右对齐、从右到左布局）。

颜色 (Color)：

Float 浮动属性：

可定义元素浮动到左侧或右侧，或者 使用 CSS float 属性实现基于当前浏览器窗口禁用浮动。

规格 (sizi)：

定义元素的宽或高。（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）

（1）宽 = 相对于父容器的百分之25%、50%、75%、 100%

（2）高 = 相对于父容器的百分之25%、50%、75%、 100%

间隔 (spacing)：

系统提供了一组缩写CSS，并赋予 margin 或 padding 值，包括对单个属性、所有 属性以及垂直、水平等属性的支持。

属性设定：

m - 这个Class属性会设定 margin值

p - 这个Class属性会设定 padding值

边缘 设定：

t - 这个Class属性会设定 margin-top 或 padding-top

b - 这个Class属性会设定 margin-bottom 或 padding-bottom（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）

l - 这个Class属性会设定 margin-left 或 padding-left

r - 这个Class属性会设定 margin-right 或 padding-right

x - 这个Class属性会设定 *-left 和 *-right两个值。

y - 这个Class属性会设定 *-top 和 *-bottom两个值

空白 - 这个Class属性会设定 margin 或 padding 元素的四个边。

尺寸规格定义：

0 - 这个Class属性会设定 margin 或 padding 的样式值为 0

1 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * .25规格呈现

2 - (默认时) 这个Class属性会设定 margin 或 padding 以 $spacer * .5规格呈现

3 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer规格呈现

4 - (默认时) 这个Class属性会设定margin 或 padding 以 $spacer * 1.5规格呈现

5 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * 3规格呈现（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）

auto - 这个Class属性会设定 margin 值 auto（按浏览器默认值自由展现）。

文本处理：

控制文本的对齐、组合、字重等。

●左对齐、右对齐、居中对齐，可以使用与栅格系统相同的宽度响应式类（即text-sm-*、text-lg-*等方法）来定义。

●使用.text-wrap类换行文本.

●.text-nowrap class样式类可以防止文本换行.（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）

●对于更长的内容，你可以添加一个 .text-truncate class样式，以省略号截断文本（需要结合 display: inline-block 或 display: block来使用）。

●使用文本大小写样式将文字内容由小写，转为大写（不支持中文）。

●字体粗细和斜体效果

●使用.text-decoration-none类删除文本修饰.

垂直对齐 (vertical align)

使用 vertical-alignment 通用样式改变元素的对齐。

●垂直对齐仅影响 内联inline、 内联块inline-block、 内联表inline-table、 表格单元格table cell 元素。（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）

●可选属性有 .align-baseline、 .align-top、 .align-middle、.align-bottom、 .align-text-bottom、 .align-text-top 。

这周可是精彩啊，过了生日，听了相声，上了车牌~  --2021年4月29日