Bootstrap CSS 仍然是垃圾,但我们可以让它变得更好 by@thefullstackdev
1,172 讀數

Bootstrap CSS 仍然是垃圾,但我们可以让它变得更好

2022/07/02
1 分钟
经过 @thefullstackdev 1,172 讀數
tldt arrow
ZH
Read on Terminal Reader

太長; 讀書

厌倦了使用 bootstrap CSS,但对您的建筑的 UI 是否真的看起来不错没有信心? Better Bootstrap 是一系列带有代码示例的设计技巧,教您如何在仍然使用 Bootstrap CSS 的同时制作具有专业外观的 UI。

Company Mentioned

Mention Thumbnail
featured image - Bootstrap CSS 仍然是垃圾,但我们可以让它变得更好
Wes | The Full Stack Dev HackerNoon profile picture

@thefullstackdev

Wes | The Full Stack Dev

Hi, I'm Wes I simplify complex topics - like...

學到更多
LEARN MORE ABOUT @THEFULLSTACKDEV'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

Bootstrap 是一个了不起的 CSS 框架,适合那些在设计、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 设计技巧。

✌️ - 韦斯

相關故事

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa