网页设计 大小自适应 第1篇
1. 尺寸Sizing
宽度和高度
在boot中提供的宽度和高度的类是按百分比算的
宽度 .w-{number} 支持25 50 75 100 auto 分别代表百分比
高度 .h-{number} 支持25 50 75 100 auto 分别代表百分比
注意:这里的大小是参照父级元素的百分比，所以前提是父级要有高度
相对视口的尺寸
vw-100 表示整个视口的宽度(全屏宽度)
vh-100表示整个视口的高度(全屏高度)
注意:没有25 50 75这些值
2. 间距
间距包括内间距和外间距
间距的分类
.m-{number} 表示外间距
.p-{number} 表示内间距
间距的方向
上内、外间距 pt-{number} 和 mt-{number}
下内、外间距 pb-{number} 和 mb-{number}
左内、外间距 ps-{number} 和 ms-{number}
右内、外间距 pe-{number} 和 me-{number}
垂直方向内、外间距 py-{number} 和 my-{number}
水平方向内、外间距 px-{number} 和 mx-{number}
特殊值：外间距的auto mx-auto水平方向的自动居中
间距的大小
值支持1~5 0表示没有该方向的间距
number=1时： = 16* = 4px
number=2时： = 16* = 8px
number=3时：1rem = 16*1 = 16px
number=4时： = 16* = 24px
number=5时：3rem = 16*3 = 48px
响应式下的间距写法
p-{类中缀}-{number} 响应式写法的内间距
m-{类中缀}-{number} 响应式写法的外间距
响应式写法会随着.container的变化而变化
3. 边框 borders
边框样式
.border 边框的基础类 默认四个方向1px的边框
单方向边框
上边框 .border-top
右边框 .border-end
下边框 .border-bottom
左边框 .border-start
边框的宽度
.border-{number} 0~5 0是去掉边框 1~5对应1px~5px的边框宽度
边框的颜色
.border-{color} 颜色就是boot提供的色值
边框圆角
.rounded 圆角的基础类 默认给4个方向添加边框圆角
.rounded-{number} 圆角的弧度0~3 0是没有圆角 3是3px圆角
.rounded-circle 圆形
.rounded-pill 胶囊形
4. 元素的显示模式display
我们可以通过display修改元素的展示效果
.d-none 元素消失，相当于CSS的display:none;
.d-block 元素以块级的形式显示
.d-inline 元素以行内的形式显示
.d-inline-block 元素以行内块的形式显示
.d-flex 元素以弹性方式显示
以上每个值都有响应式的写法，如: .d-{类中缀}-{显示模式}
5. 浮动
.float-start 左浮动
.float-end 右浮动
响应式浮动显示 .float-{类中缀}-{浮动方式}
清除浮动
.clearfix 清除浮动导致的父元素高度坍塌
6. 定位
定位方式
.position-relative 相对定位
.position-absolue 绝对定位
.position-fixed 固定定位
位移方向
top-{number} 对于顶部的位移位置
end-{number} 对于右侧的位移位置
bottom-{number} 对于底部的位移位置
left-{number} 对于左侧的位移位置
number支持 0 50 100 分别指参照物0% 50% 100%
中心位置位移：
.translate-middle 让元素在X轴 Y轴上回正自己的50% 实现中心点居中
底层源码：transform: translate(-50%, -50%) !important;
7. flex布局的相关属性
direction—flex主轴的方向
.flex-row 行模式
.flex-row-reverse 行模式反序
.flex-column 列模式
.flex-column-reverse 列模式反序
响应式写法: .flex-{类中缀}-{方向}
justify-content –主轴上项目的对齐方式
.justify-content-start 起点对齐
.justify-content-end 终点对齐
.justify-content-center 居中对齐
.justify-content-between 两端对齐
.justify-content-evenly 公平对齐
.justify-content-around 环绕对齐
响应式写法：.justify-content-{类中缀}-{对齐方式}
Align items – 项目在交叉轴上的对齐方式
.align-items-start 起点对齐
.align-items-end 终点对齐
.align-items-center 居中对齐
响应式写法：.align-items-{类中缀}-{对齐方式}
grow and shrink 项目的增长和收缩
.flex-grow-0 项目不允许增长【默认值】
.flex-grow-1 项目允许增长
.flex-shrink-0 项目不允许收缩
.flex-shrink-1 项目允许收缩【默认值】
8. 文本text
文本的对齐方式
.text-start 文本、内联左对齐
.text-end 文本、内联右对齐
.text-center 文本、内联居中对齐
响应式写法：text-{类中缀}-{对齐方式}
字体处理
.fw-bold 加粗体
.fw-light 细体
.fw-normal 正常体
.fst-italic 斜体
文本修饰线
.text-decoration-underline 添加下滑线
.text-decoration-line-through 添加删除线
.text-decoration-none 去掉文本修饰线
网页设计 大小自适应 第2篇
1. 按钮buttons
.btn 按钮的基础类
.btn-{color} 按钮的颜色
.btn-outline-{color} 带轮廓线的按钮
.btn-lg 大号尺寸的按钮
.btn-sm 小号尺寸的按钮
按钮组:使用一个外层div包裹着需要的几个按钮，给这个div加一个.btn-group即可
2. 导航栏navbar
最外层包裹元素—功能块：
.navbar 导航栏的基础类
.navbar-expand-{断点} 响应式断点，确定大小菜单切换的节点
.navbar-dark 暗色主题 .navbar-light 亮色主题
LOGO区域
.navbar-brand logo可以是文字也可以是图片
小菜单
.navbar-toggler 修饰小菜单的样式，一般是button
.navbar-toggler-icon 作为小菜单的图标(三条横线) 用span包裹
JS属性：data-bs-toggle=_collapse_ 开启折叠功能
JS属性：data-bs-target=_#navbarNav_ 使用折叠功能的目标是谁(id对应的是大菜单)
大菜单
.collapse 消失和显示的切换
.navbar-collapse 负责水平铺满 允许放大 元素居中显示
.navbar-nav 导航栏列表，加给ul
.nav-item 列表项，加给li
.nav-link 链接，加给导航栏中的超链接a
.active 激活状态
.disabled 禁用状态
3. 徽章 badge
在一个小的按钮区，固定一个类似于角标这样的内容
.badge 徽章的基础类，一般用内联元素，比如span
可以修改徽章的背景色 .bg-{color}
可以修改徽章的形状 比如 rounded-pill 变成胶囊状
徽章也可以在父级元素中参与定位
4. 图标 icons
boot提供的图标其实就是文字
我们可以在图标库中找到自己需要的图标名称
使用方法：class=”bi-{图标名}”引入使用该图标
我们可以使用文字的类区修改图标的颜色 大小等
5. 下拉菜单Dropdowns
.dropdown 最外层父元素包裹按钮和下拉菜单
. dropdown-toggle 负责渲染按钮中的小三角
. dropdown-menu 下拉菜单父级 一般是ul
.dropdown-item 下拉列表项 一般具有hover样式
JS属性：data-bs-toggle=_dropdown_ 开启下拉菜单的菜单项的显示与隐藏
6. 模态框 Modal
网页设计 大小自适应 第3篇
1. 行和列
1. 父子布局，父元素包裹子元素
2. 父元素使用.row行
3. 子元素是父元素的列，使用.col-{number}
4. 一行分为12份，最多容纳12列，每一列都是.col-1
5. 我们可以调整份数来修改子元素在父元素中所占的比例
6. 栅格布局每列都不允许有额外的外间距，但我们可利用元素有的12px的左右内间距(天沟)
2. 响应式栅格布局
栅格系统最大的作用就是帮我们实现响应式的布局