Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）

最新推荐文章于 2024-04-21 13:20:41 发布

不背完3500个考研英语词汇不改名

最新推荐文章于 2024-04-21 13:20:41 发布

阅读量1.8k

点赞数 37

分类专栏：前端学习笔记文章标签： css 前端 html5

本文链接：https://blog.csdn.net/Luo3255069063/article/details/136634465

版权

前端学习笔记专栏收录该内容

44 篇文章 1 订阅

订阅专栏

类中缀的设置技巧

1.当多个连续品目使用一个样式时，则给最小的设置即可。
比如：大屏以上内边距都是3：p-lh-3
2.超小屏不设置类中缀的样式
比如超小屏内边距时1，小屏内边距时2，中屏及以上内边距是3
p-1
p-sm-2
p-md-3

display显示

使用display属性，可以改变元素的展示效果

.d-none就是元素消失display:none
.d-block以块级形式显示
.d-inline以内联形式显示
.d-inline-block以行内块显示
.d-flex弹性
显示方式都有响应式的写法，如：.d-{类中缀}-none

flex主轴排序
- 行模式.flex-row 和.flex-row-reverse
- 列模式.flex-column和.flex-column-reverse
- 可以写响应式 .flex-{类中缀}-row
主轴的对齐方式
- .justify-content-start 起点
- .justify-content-end终点
- .justify-content-center居中
- .justify-content-between两端对齐
- .justify-content-around两臂间隔
- .justify-content-evenly平均分布
- 响应式的效果.justify-content-{类中缀}-{对齐方式}
- 项目交叉轴对齐
- .align-items-start交叉轴起点对齐
- .align-items-end交叉轴终点对齐
- .align-items-center交叉轴居中对齐
- 响应式的效果.align-items-{类中缀}-{方式}
项目的收缩和增长
- .flex-{grow|shrink}-0项目不可放大/不可收缩
- .flex-{grow|shrink}-1可放大/可收缩

浮动

https://v5.bootcss.com/docs/utilities/float/

.float-start左浮动
.float-end右浮动
.float-none不浮动
响应式浮动显示.float-{类中缀}-{浮动方式}
.clearfix清除父元素高度坍塌，放到父元素中

定位

（1）定位方式

.position-relative相对定位
.position-absolute绝对定位
.position-fixed固定定位
注意：boot5新增了定位方向，5版本以前没有定位方向，因此5版本以前定位尽量自己写

（2）位移方向

top-{number}对于顶部的位移位置0、50、100，分别值0%,50%,100%
bottom-{number}对于底部的位移位置0、50、100，分别值0%,50%,100%
start-{number}对于左侧的位移位置0、50、100，分别值0%,50%,100%
end-{number}对于右侧的位移位置0、50、100，分别值0%,50%,100%

（3）中心位置位移

.translate-middle使用位移x轴y轴居中
.translate-middle-x水平方向居中
.translate-middle-y垂直方向居中

<div class="parent position-relative">
     <div class="child position-absolute start-50 top-50 translate-middle"></div>
   </div>
 </div>

<div class="container">
    <div class="parent bg-secondary position-relative md-3">
        <div class="myDiv bg-success position-absolute top-50 start-100">
            定位 父相子绝
            如果需要精准的定位距离，则需要自行设置样式
            子元素向下移动父元素高度的50% top-50
            子元素向右移动父元素宽度的100% start-100
        </div>
    </div>
    <br>
    <div class="parent bg-secondary position-relative">
        <div class="myDiv bg-success position-absolute translate-middle">
            如何按照自身百分比移动？
            translate-middle-x 水平方向向左移动自身宽度的50%
            translate-middle-y 竖直方向向上移动自身高度的50%
            当两个都需要时则必须要写成 translate-middle
        </div>
    </div>
    <br>
    <div class="parent bg-primary position-relative">
        <div class="MyDiv bg-success position-absolute top-50 start-50 translate-middle">
            让子元素在父元素内水平居中
            先定位到父元素的水平、竖直的50%
            再向左向上移动自身的50%
        </div>
    </div>
</div>

文本

（1）文本对齐方式

写给外层父元素（块级），具有继承性的

.text-start文本、内联左对齐
.text-end文本、内联右对齐
.text-center文本、内联居中对齐
响应式的对齐方式.text-{类中缀}-{方式}

（2）字体

.fw-bold加粗体
.fw-bolder特粗体
.fw-normal正常体
.fw-light细体
.fw-lighter特细体
.fst-italic斜体

（3）文本修饰线

.text-decoration-underline下划线
.text-decoration-line-through删除线
.text-decoration-none无线条

栅格系统

1.行和列

父子布局，父元素包裹子元素。父元素使用.row行，子元素是父元素的列使用.col-{number}。
一行可以分为12份，最多可以容纳12个列，每个列.col-1。
在栅格布局中可以调整每个列所占的份额，如一行四列

<div class="row">
 <div class="col-3">占3个份额也就是3/12</div> 
 <div class="col-3">占3个份额也就是3/12</div> 
 <div class="col-3">占3个份额也就是3/12</div> 
 <div class="col-3">占3个份额也就是3/12</div> 
</div>

栅格布局的底层是flexbox，也就是说，你使用栅格同时也可以使用flex的相关属性。
每一个列不允许有额外的外间距，本身存在12px左右内间距（天沟）。

        <div class="container">
            <div class="h3">栅格系统</div>
            <!--
            栅格系统
            把父元素分成了12份
            子元素通过占父元素的份数来控制宽度
            -->
            <div class="parent bg-danger row">
<!--                12个col-1的子元素占满父元素-->
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
                <div class="col-1 bg-info p-0">我占一份</div>
<!--
注：每一个设置colxx的子元素都会自带内边距
可以通过p-0来去除
-->
            </div>
            <div class="parent bg-danger row">
<!--                通过所占份数不一样控制子元素的宽度-->
                <div class="col-2 bg-danger p-0">我占2份</div>
                <div class="col-3 bg-info p-0">我占3份</div>
                <div class="col-4 bg-secondary p-0">我占4份</div>
                <div class="col-3 bg-warning p-0">我占3份</div>
            </div>
            <div class="parent bg-dark row">
                <!--没有占满12份-->
                <div class="col-2 bg-danger p-0">我占2份</div>
                <div class="col-3 bg-info p-0">我占3份</div>
                <div class="col-4 bg-secondary p-0">我占4份</div>
            </div>
            <div class="parent bg-dark row">
                <!--超过12份，就会换行-->
                <div class="col-2 bg-danger p-0">我占2份</div>
                <div class="col-3 bg-info p-0">我占3份</div>
                <div class="col-4 bg-secondary p-0">我占4份</div>
                <div class="col-5 bg-warning p-0">我占5份</div>
<!--                注：换行大多等同布局混乱。所以不要超过12份-->
            </div>
            <div class="parent bg-dark row">
                <!--特殊的，如果需要均分的几个div，则直接写col即可-->
                <div class="col bg-danger p-0">平均分</div>
                <div class="col bg-info p-0">平均分</div>
                <div class="col bg-secondary p-0">平均分</div>
                <div class="col bg-warning p-0">平均分</div>
                <div class="col bg-success p-0">平均分</div>
            </div>
        </div>

2.响应式栅格布局

.col-{类中缀}-{number}列的响应式写法
注意列都是挨着的不能加外间距，可以考虑天沟，也就是在列中嵌套元素
当一行12份已满会自动换行

<div class="container">
    <div class="h3">栅格系统</div>
    <div class="parent bg-dark row mb-3">
<!--        子元素所占份数，可以添加类中缀-->
<!--        父元素分左右两部分
            超小屏到中屏，左右比未为3：1
            大屏及以上，只显示左侧并且占满父元素
            超小屏：
            左 col-9
            右 col-3
            小屏到中屏使用超小屏样式，不用设置
            大屏
            左 col-lg-12
            右 d-lg-none
            超大特大使用大屏样式不用设置
            -->
        <div class="bg-danger col-9 col-lg-12">左</div>
        <div class="bg-info col-3 d-lg-none">右</div>
    </div>
</div>

3.栅格布局的嵌套

行.row类嵌套列.col-{number}，行列布局底层是flex，容器使用容器属性，项目使用项目属性。
保证行和列清晰区分。如果需要嵌套.row>.col>.row>.col
发生嵌套之后，只要是行.row里就会分12列。列只会和上层行（父级发生分块关系），简单说子元素只分父元素的份数。

<!-- 最外层行：分为两块，一左一右 -->
     <div class="row">
       <!-- 左侧块 嵌套内容-->
       <div class="vh-100 bg-warning col-xl-9 col-12">
         <!-- 在列中嵌套，一定要加行row -->
         <div class="row">
           <div class="col-lg-4 col-sm-6 col-12"></div>
         </div>
       </div>
       <!-- 右侧块 -->
       <div class="vh-100 bg-danger col-xl-3 d-none d-xl-block"></div>
     </div>

<div class="container">
    <div class="row">
        <div class="col-7">
            <div class="me-2 bg-success top">左</div>
        </div>
        <div class="col-5">
            <div class="bg-success top">右</div>
        </div>
            <div class="col-5">
                <div class="me-2 bg-success bottom">左</div>
            </div>
            <div class="col-7">
                <div class="row">
                    <div class="col">
                        <div class="bottom bg-info me-2">右1</div>
                    </div>
                    <div class="col">
                        <div class="bottom bg-info me-2">右2</div>
                    </div>
                    <div class="col">
                        <div class="bottom bg-info">右3</div>
                    </div>
                </div>
            </div>
<!--    注：设置col的元素，不要加外边距-->
<!--    如果需要外边距，则右col元素内部的元素加外边距-->
    </div>
</div>