前言
这一篇幅我们主要针对BootStrap中的文本颜色、对齐,背景色,边框、边距、定位和弹性盒子等进行了说明和练习,BootStrap帮我们实现了一些常用的样式,在实际工作过程中可以极大的提升我们的开发效率,但是如果业务需求比较个性化时,还是要自己写样式去完成的哦😄
1、文本颜色、背景和边框
文本颜色类:
text-xxx
<div class="text-danger">红色</div>
<div class="text-primary">蓝色</div>
<div class="text-warning">黄色</div>
<div class="text-white-50">白色-50</div>
<div class="text-white">白色</div>
背景色:bg-xxx
<div class="bg-danger">红色</div>
<div class="bg-primary">蓝色</div>
<div class="bg-warning">黄色</div>
边框
border全边框
border-start左边框
border-end右边框
border-top上边框
border-bottom下边框
边框颜色:border-xxx,例如border-danger红色边框
边框大小:border-数值(1 2 3 4 5)
边框圆角
rounded四个角都是小圆角
rounded-top上两个角圆角
rounded-top-1 2 3 4 5圆角大小
rounded-circle圆形,如果是正方型,就是正圆,否则椭圆
rounded-pill胶囊型
边框删除
border-位置(top bottom start end)-0表示指定位置边框宽度为0
<!-- 边框删除 -->
<div class="border border-start-0 border-danger border-5">张三</div>
<!-- 边框形状
rounded四个角都是圆角
rounde-circle圆形,如果想正圆,必须是正方形
rounded-位置(top bottom start end)[-{0-5圆角半径}]
rounded-pill胶囊型
-->
<div class="rounded-pill border border-success border-5">张三</div>
<div class="rounded-top-5 border border-success border-5">张三</div>
<div class="rounded-circle border border-success border-5">张三</div>
<div class="rounded border border-success border-5">张三</div>
<!-- 边框设置 边框颜色 边框宽度 -->
<div class="border border-danger border-5">张三</div>
<div class="border-start border-primary border-5">李四</div>
<div class="border-end border-primary border-5">王五</div>
<div class="border-top border-primary border-5">赵六</div>
<div class="border-bottom border-primary border-5">赵六2</div>
2、display
语法:
d-值
d-断点尺寸-值
说明:
值可以有如下:
none:不显示
inline:行元素
inline-block:行元素,块显示
block:块元素
flex:伸缩盒子
断点尺寸:sm md lg。。。
<!-- d-inline块---》行 -->
<div class="bg-danger d-inline m-5">123</div>
<!-- d-block行---》块 -->
<span class="bg-info d-block">456</span>
<!-- d-none隐藏 -->
<span class="bg-warning d-none">789</span>
<!-- d-inline-block行内元素,块的形态 -->
<span class="bg-danger d-inline-block m-5">abc</span>
<!-- display响应式
d-sm-block表示:尺寸大于等于sm时,block
-->
<span class="bg-danger d-sm-block">取消</span>
<span class="bg-success d-sm-block">确认</span>
3、float
语法:
float-位置(start end none不浮动)
float-断点尺寸-位置
断点尺寸同上display
<!-- 左右浮动 -->
<!-- <div class="bg-info float-start">左浮动</div>
<div class="bg-danger float-end">右浮动</div> -->
<!-- 响应式浮动 -->
<div class="bg-info float-sm-start">左浮动2</div>
<div class="bg-danger float-sm-end">右浮动2</div>
4、interactions
user-select-all全复制
user-select-auto自由复制
user-select-none不能复制
<div class="user-select-all">全部复制</div>
<div class="user-select-auto">自由复制</div>
<div class="user-select-none">不可复制</div>
5、透明度
语法:
opacity-值(0 25 50 75 100)
<img src="../img/1.jpg" class="opacity-50" alt="">
6、溢出
语法:
overflow-auto溢出时自动出现滚动条
overflow-scroll不管是否溢出都存在滚动条
overflow-hidden溢出部分隐藏
overflow-visible溢出显示(不会出现滚动条,默认状态)
<!-- 默认的 -->
<div class="border border-5 border-danger" style="width: 100px;">
adfsaadfsaadfsaadfsaadfsaadfsaadfsa
</div>
<!-- 溢出隐藏 -->
<div class="overflow-hidden border border-5 border-danger" style="width: 100px;">
adfsaadfsaadfsaadfsaadfsaadfsaadfsa
</div>
<!-- 溢出时滚动 -->
<div class="overflow-auto border border-5 border-danger" style="width: 100px;">
adfsaadfsaadfsaadfsaadfsaadfsaadfsa
</div>
<!-- 溢出可见,同默认一样 -->
<div class="overflow-visible border border-5 border-danger" style="width: 100px;">
adfsaadfsaadfsaadfsaadfsaadfsaadfsa
</div>
<!-- 始终有滚动条 -->
<div class="overflow-scroll border border-5 border-danger" style="width: 100px;">
adfsaa
</div>
7、定位
语法:
position-absolute:绝对定位
position-relative:相对定位,相对本身原来位置
position-fiexd:固定定位
position-sticky:粘性定位,到达指定位置后就固定
position-static:静态定位,默认不设置就是静态
<div class="position-absolute">绝对定位</div>
<div class="position-relative">相对定位</div>
<div class="position-static">静态定位,默认</div>
<div class="position-fixed">固定定位</div>
<div class="position-sticky">粘性定位</div>
应用:
结合位置 top start end bottom,位置的值:0 50 100
<div class="bg-danger position-fixed top-0">固定定位</div>
<div style="height: 500px;" class="border border-2 border-danger">
<div class="position-relative top-50 bg-info">
相对定位
</div>
<div class="bg-danger">随便一个</div>
</div>
<div class="bg-warning position-sticky top-0">粘性定位</div>
<div class="border border-warning position-relative" style="height: 500px;">
<div class="position-absolute top-50 bg-success">绝对定位</div>
<div>测试</div>
</div>
8、弹性
语法:
.d-flex:设置弹性容器
.flex-row:水平方向排列
.flex-row-reverse:水平方向反转
.flex-column:垂直排列
.flex-wrap:换行
flex-column-reverse:垂直反转
justify-content-*:主轴对齐,x
align-items-*:侧轴对齐y
示例:
<!-- 水平排列,默认的 -->
<div class="d-flex flex-row">
<div class="bg-info w-25">1</div>
<div class="bg-danger w-25">2</div>
<div class="bg-success w-25">3</div>
</div>
<!-- 水平翻转 -->
<div class="d-flex flex-row-reverse">
<div class="bg-info w-25">1</div>
<div class="bg-danger w-25">2</div>
<div class="bg-success w-25">3</div>
</div>
<!-- 主轴对齐 -->
<div class="d-flex justify-content-between">
<div class="bg-info w-25">1</div>
<div class="bg-danger w-25">2</div>
<div class="bg-success w-25">3</div>
</div>
<!-- 换行 -->
<div class="d-flex flex-wrap">
<div class="bg-info w-25">1</div>
<div class="bg-danger w-25">2</div>
<div class="bg-success w-25">3</div>
<div class="bg-info w-25">1</div>
<div class="bg-danger w-25">2</div>
</div>
<!-- 侧轴对齐:侧轴对齐时,注意将排列方向设置column -->
<div class="d-flex flex-column align-items-end">
<div class="bg-info w-25">1</div>
<div class="bg-danger w-25">2</div>
<div class="bg-success w-25">3</div>
</div>
9、阴影
语法:
shadow-none:无阴影
shadow-sm:小阴影
shadow-lg:大阴影
shadow:正常阴影
示例:
<!-- 没阴影 -->
<img src="../img/1.jpg">
<!-- 小阴影 -->
<img src="../img/1.jpg" class="shadow-sm">
<!-- 大阴影 -->
<img src="../img/1.jpg" class="shadow-lg">
<!-- 正常阴影 -->
<img src="../img/1.jpg" class="shadow">
10、大小
语法:
h-数值(25 50 75 100):占父级尺寸高度的百分比
w-数值(25 50 75 100):占父级尺寸宽度的百分比
vh-100:占整个视图的高度,值只有100
vw-100:占整个视图的宽度,值只有100
<!-- 相对于父级 -->
<div class="bg-info" style="height: 300px;">
<div class="h-100 bg-danger">相对父级高度</div>
</div>
<!-- 相对于页面 -->
<div class="bg-warning vh-100">相对于整个页面</div>
11、间距
语法:
{属性}{边}-{尺寸}
属性:m表示外边距,p表示内边距
边:t表示top上,b表示bottom下,s表示start左,e表示end右
尺寸: 0 1 2 3 4 5 auto
例如:mt-2 m-2 p-2 ps-2
<div class="d-flex">
<div class="bg-info m-2">1</div>
<div class="bg-danger">2</div>
<div class="bg-warning ms-2">3</div>
</div>
<div class="bg-success mt-2 pt-4">4</div>
12、文本
文本大小
fs-1 2 3 4 5 6
文本加粗和斜体
fst-normal:加粗
fst-italic:斜体
行高
lh-1 sm lg base
文本装饰
text-decoration-underline下划线
text-decoration-line-through删除线
text-decoration-none没有修饰
<!-- 文本装饰 -->
<div class="text-decoration-underline">下划线</div>
<div class="text-decoration-line-through">删除线</div>
<div class="text-decoration-none">没线</div>
<!-- 行高 -->
<div class="lh-1 border border-danger">行高</div>
<div class="lh-sm border border-danger">行高</div>
<div class="lh-lg border border-danger">行高</div>
<div class="lh-base border border-danger">行高</div>
<!-- 文本加粗 -->
<div class="fst-normal">加粗</div>
<div class="fst-italic">加粗</div>
<!-- 大小 -->
<div class="fs-1">哈哈哈哈</div>
<div class="fs-2">哈哈哈哈</div>
<div class="fs-3">哈哈哈哈</div>
<div class="fs-4">哈哈哈哈</div>
<div class="fs-5">哈哈哈哈</div>
<div class="fs-6">哈哈哈哈</div>
好了,就到这里吧,大家抓紧时间去练习吧😄
后续内容持续更新中,记得给个三连,这样才能找到我咯😘
祝各位看官万福金安😊
⭐️徒手摘星,爱而不得,世人万千,再难遇我。⭐️