Bootstrap CSS 仍然很糟糕。但我们可以让它变得更好。

对于那些在设计、CSS 方面遇到困难或需要快速构建某些东西的人来说，Bootstrap 是一个很棒的 CSS 框架。

但是从文档中复制粘贴的 Bootstrap 组件存在缺陷。

这些缺陷阻碍了您的设计！

这里有 5 个设计技巧来纠正这些缺陷并改进 Bootstrap。

1）引起对警报的关注

添加深色边框和 svg 图标来吸引用户的注意力。

<div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert">
    <p class="fs-6 mb-0 d-flex align-items-center">
        <!-- https://heroicons.com/ light-bul-->
        <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
        </svg>
        <span>A simple primary alert—check it out!</span>
    </p>
</div>

2）表格不必与数据库匹配

HTML 表格不必完全照搬数据库结构。您可以根据需要删除列名和 ID，并合并字段。

<div class="border-0 shadow bg-white rounded">
    <h3 class="fs-5 px-3 pt-3">Users</h3>
    <div class="px-2 pt-2">
        <table class="table table-borderless fs-6">
            <tbody>
                <tr>
                    <td>Mark Otto</td>
                    <td class="text-end text-muted">@mdo</td>
                </tr>
                <tr class="bg-light rounded-4">
                    <td>Jacob Thornton</td>
                    <td class="text-end text-muted">@fat</td>
                </tr>
                <tr>
                    <td>Larry the Bird</td>
                    <td class="text-end text-muted">@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="p-3 bg-light rounded d-flex justify-content-end">
        <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons>
        <buttons class="btn btn-primary">View</buttons>
    </div>
</div>

3）辅助按钮不需要背景颜色

为主要操作提供背景色，而为次要操作不提供背景色，这将建立重要性的层次结构。

<div class="card border-0 shadow p-2">
    <div class="card-body">
        <h5 class="card-title">Special offer</h5>
        <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p>

        <buttons class="btn btn-primary">View Details</buttons>
        <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons>
    </div>
</div>

4）不要再给一切贴标签！

开发人员喜欢给值贴标签。别这样！把信息显示得像书里的句子，而不是键值对。

<div class="card border-0 shadow">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h1 class="card-title fs-5">Rocky Mount, MI</h1>
        <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2>
        <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p>
    </div>
</div>

5）阴影>边框

卡片边框通常感觉笨重。阴影可以强调元素，赋予页面深度，使元素感觉更贴近用户。

<div class="card border-0 shadow p-2">
    <div class="card-body">
        <h5 class="card-title fs-5">Collaborate</h5>
        <p class="card-text">
            Share your work with hundreds of like minded individuals around the world!
        </p>
    </div>
</div>

更多 Bootstrap 设计技巧？

如果您喜欢这个，请考虑查看我的新项目 - Better Bootstrap

在那里你会找到一本免费的书，其中包含更多类似本文中的 Bootstrap 设计技巧。

文章来源：https://dev.to/wes_walke/bootstrap-css-is-still-the-sht-but-we-can-make-it-better-1p6d