【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中提供了指定的媒体查询,通过不同的尺寸“方案”,来指定当前样式的响应式渲染。
- 断点
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 标记标签的间距设置,加在
<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>