【Web前端第二阶段--Bootstrap】Day05

【Web前端第二阶段–Bootstrap】Day05

第一章 【Web前端第二阶段–Html】Day01
第二章 【Web前端第二阶段–Html】Day02
第三章 【Web前端第二阶段–CSS】Day03
第四章【Web前端第二阶段–CSS高级】Day04

---

Bootstrap简介

Bootstrap 是一款快速构建、响应式网站的，UI框架。框架的作用就是为开发人员提供一些已经封装
好，或者已经优化好的名称，可以直接使用来达到效果。前提是一定要按照他提供的文档进行书写。

Bootstrap5.1

Bootstrap 5.1官网
Bootstrap 5.1文档
Bootstrap 所有版本文档

主题颜色

使用变量颜色的书写方式

/*内联*/
style="background-color: var(--bs-pink);"
/*内部和外部*/
.zdy-color{
background-color: var(--bs-pink);
}

布局

1、核心概念

在boot中提供了指定的媒体查询，通过不同的尺寸“方案”，来指定当前样式的响应式渲染。

1. 断点
   
   2）Container容器

• 定宽容器： .container 会参考响应式，根据设备宽度的变化而做最大值的变化，有外间距并且在屏幕内水平居中
• 变宽容器： .container-fluid 不管屏幕有多宽，全部展示 width:100% ，没有外间距
  
  3）天沟
  间距是列内容之间的间隙，由水平创建 padding 。为了美观和隔离内容。默认天沟1.5rem(24px) 。很多boot里的类都有这个默认的天沟。

基础内容

排版文字大小

1）标题

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

2）显示标题
一种更大、更自以为是的标题样式。 .display-1 ~ .display-6 更大的显示标题，这个标题没有加粗效果。

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

3）列表
.list-unstyled 一般情况下使用列表用 ul 或者 ol 标签，标签会带有列表项的标识符。
删除 list-style 列表项的默认值和左边距（ li ）。简单说就是说删掉li前面啊的左边距和标识符。

<ul class="list-unstyled">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>

表格和表单

表格

将基类添加 .table 到

标签中，就会有一个默认的table样式，之后再加其他的table样式。
1）表格颜色
可以在整个表格，或行，或列中添加颜色

<table class="table-primary">加给整个表格</table>
<thead class="table-primary">加给整个thead</thead>
<tbody class="table-primary">加给整个tbody</tbody>
<tr class="table-primary">加给整行</tr>
<td class="table-primary">加给一个单元格或者th</td>

2）条形纹
用于 .table-striped斑马条纹添加到 <table>
隔行变色效果，不会受背景色的影响。有隔行深浅色的交替效果。

<table class="table table-striped"></table>

3)可悬停
.table-hover 添加到

可以加鼠标在行时的悬停效果，为行整体加一个着重色

<table class="table table-hover"></table>

4）表格边框
.table-bordered 在表格和单元格的所有边添加边框。

<table class="table table-bordered"></table>

边框颜色可以更改 .border-{color} 不是单单只适用于表格边框

<table class="table table-bordered border-primary"</table>

5）表头主题
表头主题色只有两种展示， .table-light 或 .table-dark 使 显示为浅灰色或深灰色主题效果，文字也会跟着反向展示让表头更清晰。

表单

1）文本输入框

• 或其他文本表单控件 等，增加 .form-control 可以修饰文本输入框。
• .form-control 变块，宽度100%，边框样式等等
• .form-label 标记标签的间距设置，加在 标签中
  2）下拉菜单
  .form-select 修饰下拉菜单的基础样式，会使下拉菜单也变为块级元素，宽度100%，等等其他样式。

<select class="form-select">
<option selected>请选择喜欢的城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>

3）选框

• .form-check 选框外包裹元素
• .form-check-input 选框元素（单选、多选）
• .form-check-label 标记标签
  4）input group
• .input-group 输入组的外层
• .input-group-text 输入组的内容部分
• .form-control input标签

工具类

1、尺寸

宽度（Width）和高度（height）相对于父元素的尺寸。默认情况下支持 25% 、 50% 、 75% 、 100% 和auto 值。

• .w-{num} 父元素宽度的百分之多少，数字25、50、75、100、auto
• .h-{num} 父元素高度的百分之多少，数字25、50、75、100、auto，前提是父元素一定要有高度才生效
• 该属性的优先级较高，如果需要自定义样式，需要，提升优先级

背景色

• .bg-{color} 背景色
• .bg-gradient 线性渐变（上下）
• .bg-opacity-{num} 背景透明度,数字10、25、50、75

边框

1)边框的编写

• .border四个边的边框，浅灰色很细，是基础类
• .border-{fx} 单边边框，top，bottom，start，end，这些类是基类

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

2)去掉边框线

将单边或者所有边的边框线去掉，一般是指原本就有边框线需要去掉的某些元素。

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-end-0"></span>
<span class="border-bottom-0"></span>
<span class="border-start-0"></span>

3)边框颜色

边框的颜色，前提是要有基础类.border或单边的基础类

<span class="border border-primary"></span>
<span class="border border-secondary"></span>

4)边框宽度

边框宽度的粗细，boot中为我们定义了5个，.border-{num}数字1-5，边框级别的单位是px。

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

5）边界半径

元素添加圆角，默认圆角很小，但是圆形和胶囊型特殊

• .rounded四个方向的小圆角，单独方向的圆角.rounded-{fx}
• .rounded-circle圆形
• .rounded-pill胶囊型

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">

间距

间距里包含内、外间距

间距的基础类

单独的基础类无法直接出现，需要加间距的距离

• m- 对于设置的类margin
• p- 对于设置的类padding

距离分为五个长度，指间距的四个方向

• 0- 对于消除m-0或p-0设置为的类0大小
• 1- 用于设置m-1orp-1的类0.25rem
• 2- 用于设置m-2orp-2的类0.5rem
• 3- 用于设置m-3orp-3的类1rem
• 4- 用于设置m-4orp-4的类1.5rem
• 5- 用于设置m-5orp-5的类3rem
• auto- 对于设置margin为自动的类

间距的方向

• t- 对于设置mt-{num}或pt-{num} 上内外间距
• b- 对于设置mb-{num}或pb-{num} 下内外间距
• s- （开始）用于设置ms-{num}或ps-{num} 左内外间距
• e-（结束）对于设置me-{num}或pe-{num} 右内外间距
• x- 对于同时设置左右内外间距mx-{num}和px-{num}
• y- 对于同时设置上下内外间距my-{num}和py-{num}

响应式写法

{内外间距}{方向}-{类中缀}-{数字}这些类使用 sm、md、lg、xl和xxl。

浮动

浮动属性

给元素增加浮动属性，但是注意，元素浮动后，其父元素会高度坍塌，需要清除浮动

<div class="float-start">左浮动</div>
<div class="float-end">右浮动</div>
<div class="float-none">不浮动</div>

响应式浮动

float-{类中缀}-{方式},响应式是sm、md、lg、xl、xxl

<div class="float-sm-start"></div>

清除浮动

当子元素浮动，父元素高度坍塌，因此要靠清除浮动类解决。给父元素加.clearfix类

<div class="container bg-warning clearfix">
<div class="zdy-h w-25 bg-primary floatstart"></div>
<div class="zdy-h w-25 bg-danger float-end">
</div>
</div>

定位

定位的常用基本属性

<div class="position-relative">相对定位</div>
<div class="position-absolute">绝对定位</div>
<div class="position-fixed">固定定位</div>

还有两种特定的，在有需要的特定情境下使用，不需要单独指定top和bottom

• fixed-top吸顶导航，固定定位在视口顶端的
• fixed-bottom吸底导航，固定定位在视口底端的

排列元素

方向

• top- 对于垂直顶端位置
• start- 对于水平left位置
• bottom- 对于垂直底端位置
• end- 对于水平right位置

位置

• 0- 用于0边缘位置
• 50- 用于50%边缘位置
• 100- 用于100%边缘位置

居中

使用转换实用程序类使元素居中.translate-middle双方向回移自己的50%

• .translate-middle双方向回移自己的50%
• .translate-middle-xx轴方向向回移自己宽度的50%
• .translate-middle-yy轴方向向回移自己高度的50%

文本

文本的水平居中方式

<p class="text-start">文本的居左</p>
<p class="text-center">文本居中</p>
<p class="text-end">文本右</p>

文本对齐的响应式
.text-{类中缀}-{方位}文本对齐的响应式，sm，md，lg，xl，xxl

文本粗细

pc端浏览器一般会显示文字三种粗细，粗，细，正常。但是在移动
终端开发时，手机能展现的粗细将会更多，且不同的系统显示略有不同。

<p class="fw-bold">粗体</p>
<p class="fw-bolder">加粗体</p>
<p class="fw-normal">正常体</p>
<p class="fw-light">细体</p>
<p class="fw-lighter">极细体</p>
<p class="fst-italic">斜体</p>

文本修饰线

<p class="text-decoration-underline">有下划线</p>
<p class="text-decoration-line-through">删除线</p>
<a href="#" class="text-decoration-none">去除下划线
</a>

栅格系统

行与列

栅格系统分为行.row和列.col,行必须包裹列。可以是一行包多列，也可以写多行包多列。

<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>

响应式列

栅格嵌套