【Bootstrap】上一次学习还是在遥远的上次 （表格的基本使用）

chyeonLeu
386 阅读4分钟

好久没有触碰过Bootstrap了，这是一篇对于bootstrap5的理解和基本使用。又是一篇知识整理向的文章/(ㄒoㄒ)/~~

简介

官网指路， 目前最新版为5.2

推荐看英文官方文档，几点原因：

​ 1、中文文档可能更新不及时（先等英文文档更新完，再翻译）

​ 2、翻译的质量参差不齐，可能不准确

​ 3、提高英文阅读能力

Bootstrap5不再强制需要使用jQuery（不过当然还是可以一起使用的）

可以定制bootstrap使用，比如自定义断点的数值，颜色，变量，组件.etc

使用方法

1、可以作为单独的模块引入使用

2、在JS框架中使用

​ 因为框架不直接操作DOM，但是bootstrap喜欢直接和DOM元素进行交互，所以推荐使用为不同框架特制的包来代替直接使用bootstrap。

​ Vue: BootstrapVue (currently only supports Vue 2 and Bootstrap 4)

3、在线CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

breakpoints 断点（6个）

image.png

none	sm	md	lg 	xl	xxl

container容器

container是bootsrap最基本的元素，如果使用了提供的grid栅格布局，那么grid的外层必须包裹一个container类盒子。

3种不同的container容器写法：

Snipaste_2022-11-06_01-46-23.png

Snipaste_2022-11-06_01-48-03.png

  • .container-sm 的意思就是：

该容器到sm断点指定的宽度576px前，宽度都是100%，>=576后宽度固定(设置了max-width)，之后每到一个新断点改变为新宽度（改变max-width）

  • .container 和 .container-sm就是一样的

  • .container-fluid就是任何时候都宽度100%

grid栅格布局

基于flexbox弹性盒，支持6种断点，必须有container类容器包裹，行(row)包裹列(col)，每行默认分成12列

想要多少列，就在row里写多少个col

注意：样式的类名另外添加，不要直接修改

col：

col-n

n表示占据该行12格中的n个，如果多个n加起来超过12，那开始超过的那个col另起一行显示（不影响下一个row中col的布局）

可以通过单独设置某个col的，来自定义布局

剩下的没设置n份的，平分剩下的空间，遇到单数也可平分为x.5,但是不可以在类名设置为x.5

col-断点

到断点前，宽度都是100%，到断点后就和col一样
如果同row中有col 和col-断点，那col其实也是跟着和col-断点一样

col-断点-n

到断点前，宽度都是100%，断点后，占据该row的n份
该row中有col，那么断点后，col就占据剩下row的空间

image-20221106023302908.png

这样表示，一开始所有盒子都是垂直堆叠在一列（前提是宽度小于sm对应的断点），之后宽度拉开，就会按后面指定的n份数，来布局col

col-断点-auto：让内容撑开宽度

image-20221106024742411.png

image-20221106024309261.png

image-20221106025603378.png

到md断点前所有col垂直堆叠成列，因为中间的col是md，所以到md断点就不再堆叠
（如果中间改成lg，那么就是lg前该row3个col都堆叠，lg后中间才由内容撑开）

到lg之后，因为第一行的其余两个col都设置为2份所以剩下空间，
第二行因为只设置了一个col为2份，所以剩下是那个col占满剩余空间

row：

row-cols-n

指定该row有n个col

row-cols-auto

同row其实都是一行，只是根据宽度，将多个col堆叠成虚拟的几行

row-cols-断点-n

根据不同的断点，决定每row有多少个col

image-20221106032433435.png

多个不同断点的写在一起，不同宽度row包含不同col

align-items-位置

可选值：start center end

决定row中的垂直位置，也就是决定该row中所有col的垂直位置

align-self-xx	单独设置每个col  
可选值相同

justify-content-位置

可选值： start center end around between

决定该row中各col的摆放位置

实现：购物车样式

目标：

image.png

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(255, 251, 244);
            padding: 20px;
        }

        .table-wrapper {
            width: 90%;
            padding: 10px 20px;
            background-color: #fff;
            border: 1px solid rgb(231, 69, 231);
            border-radius: 20px;
        }

        .table-wrapper td {
            text-align: right;
        }

        .table-wrapper .name {
            text-align: left;
        }

        .table-wrapper .quantity {
            text-align: center;
        }

        .operations {
            text-align: right;
        }
    </style>
</head>

<body>
    <div class='table-wrapper'>
        <table class="table table-striped border table-bordered caption-top">
            <caption style="color: black; font-size: 20px;">Cart</caption>
            <thead>
                <tr>
                    <th scope="col" style="text-align: left;">Name</th>
                    <th scope="col" style="text-align: center;">Quantity</th>
                    <th scope="col" style="text-align: right;"><i>(Standard)</i> Price (USD)</th>
                    <th scope="col" style="text-align: right;">Sub-total(USD)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="name">Chicken Wing</td>
                    <td class="quantity">3</td>
                    <td>10</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td class="name">Pizza</td>
                    <td class="quantity">1</td>
                    <td>50</td>
                    <td>50</td>
                </tr>
                <tr>
                    <td class="name">Hamburger</td>
                    <td class="quantity">1</td>
                    <td>12</td>
                    <td>12</td>
                </tr>
            </tbody>
            <tfoot>
                <td scope="row" colspan="3" style="font-weight:700">Total</t>
                <td>USD 92</td>
            </tfoot>
        </table>
        <div class="operations">
            <button type="button" class="btn btn-primary" style="
                color: #1b7dcd; border: none; background-color: transparent;
            ">Reset</button>
            <button type="button" class="btn btn-primary"
                style="background-color: #70a6d2; color:#fff;border: none;">Checkout</button>
        </div>
    </div>
</body>
</html>

总结

bootstrap是个比较“复古”的前端UI库，使用起来比Element-UI等目前流行点的组件库难一点。

还是得多学习 多总结 多梳理……

avatar
文章
阅读
粉丝