Bootstrap CSS 的一大优点是它在文档中附带了组件示例。 但这些例子有缺陷。设计缺陷。 幸运的是，它们可以通过一点设计知识和开箱即用的 Bootstrap 类轻松修复。  1) 返工药丸以获得更温暖、更柔软的感觉 Bootstrap 药丸颜色很刺眼。您可以使用 Bootstrap 附带的  CSS 变量。这将柔化背景颜色以创建更好的对比度。  --bs-bg-opacity   <span class="badge rounded-pill text-primary bg-primary" style="--bs-bg-opacity: .20;">Primary</span> <span class="badge rounded-pill text-secondary bg-secondary" style="--bs-bg-opacity: .20;">Secondary</span> <span class="badge rounded-pill text-success bg-success" style="--bs-bg-opacity: .20;">Success</span> <span class="badge rounded-pill text-danger bg-danger" style="--bs-bg-opacity: .20;">Danger</span>  2) 将列表组扔出窗口 他们很笨拙。使用标准的 HTML 列表。您甚至可以添加 SVG 而不是标准列表项目符号来吸引更多注意力。    <div class="card border-0 shadow p-2"> <div class="card-body"> <h3 class="fs-5">Some items we sell</h3> <ul class="" style="list-style: none; list-style-position: outside; padding-left: 0px;"> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> An item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A second item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A third item </li> </ul> </div> </div>  3）给下拉菜单一个阴影和一些呼吸的空间。 将带有 类的阴影添加到下拉列表中。这使它具有深度和更接近用户的外观。使用 添加一个小边距以防止列表与按钮重叠。  阴影 mt-2   <div class="bg-white p-4 shadow d-flex justify-content-center" style="height: 200px;"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu shadow mt-2" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </div>  4) 在卡片上使用阴影和额外的填充 卡片边框常常让人觉得笨重。阴影强调元素并赋予页面深度。使用 类为您的类添加阴影，并使用 类增加填充以使其具有更多的内部间距。  shadow p-2   <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>  5) HTML 表格不必枯燥无味 表不必是数据库的直接 1-1 表示。如果有意义，请合并列并隐藏标题。这使它感觉不像是一个数据库，而更像是一个 UI 组件。    <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> 更多引导技巧？？ 如果你喜欢这个，考虑看看我的新项目 ——Better Bootstrap 在那里你会找到一本包含 15 个 Bootstrap 设计技巧的免费书籍。全书将于今年晚些时候出版。

5 个基本的 Bootstrap CSS 组件以及如何改进它们的设计

About Author

註釋

標籤

这篇文章刊登在

Related Stories

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

架构师指南：构建 AI/ML 数据湖参考架构

从论坛到信息流：社交媒体算法如何塑造数字互动

成功云迁移的完整指南：策略和最佳实践

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

架构师指南：构建 AI/ML 数据湖参考架构

从论坛到信息流：社交媒体算法如何塑造数字互动

成功云迁移的完整指南：策略和最佳实践

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps