【BootStrap入门级教程】基础类

【博客】http://t.csdn.cn/WlWPE

前言

这一篇幅我们主要针对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>

好了，就到这里吧，大家抓紧时间去练习吧😄
后续内容持续更新中，记得给个三连，这样才能找到我咯😘
祝各位看官万福金安😊

---

⭐️徒手摘星，爱而不得，世人万千，再难遇我。⭐️