一、bootstrap4基础(布局系统、栅格系统、显示与隐藏、对齐与排列、内容排版、代码与图文、表格样式、颜色和边框、工具类)

1.1 Bootstrap简单介绍

在这里插入图片描述

1.2 Bootstrap结构

在这里插入图片描述

1.3 Bootstrap安装和测试

在这里插入图片描述

1.4 布局系统

在这里插入图片描述

1.5 栅格系统

在这里插入图片描述

4.6 栅格等级

在这里插入图片描述

1.7 显示与隐藏

在这里插入图片描述

1.7 对齐与排列

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.8 内容排版

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.9 代码与图文

在这里插入图片描述

1.9.1 设置图片居中显示

在这里插入图片描述
在这里插入图片描述

1.9.1 设置图片响应式显示

在这里插入图片描述

1.9.2 设置图片缩略图显示,以及显示的位置

在这里插入图片描述

1.9.3 设置图片响应式替换,大于600px显示大图,小于600px显示小图

在这里插入图片描述

1.9.4 设置图文对齐

在这里插入图片描述

1.10 表格样式

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.11 颜色和边框

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1.12 公共样式(关闭按钮,浮动,清除浮动,text-hide,overflow-hidden,visible,align-*)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.13 公共样式(内外边距,宽高,阴影)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.14 公共样式(d-none,d-block,text-wrap,text-break,text-lowercase,text-reset,test-decoration-none,text-italic,embed-responsive)在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44827418/article/details/114628467