如何破解 Bootstrap CSS 以获得更好看的网站

在创建网站时，Bootstrap 拥有很多全栈开发人员的手。我们很多人不知道如何使用 Figma，不确定什么是好的“设计”，也不精通 CSS 属性。

但是该死的，我们擅长构建数据库模式，构建我们的控制器和模型，在我们的视图中添加我们在谷歌上找到的引导程序主题并称之为一天。

最终结果通常让人们对他们创建网站的效率感到满意，但对结果不满意。

“它看起来不错，但不像我最近看到的某个了不起的设计师的那个很棒的网站” ——通用的全栈开发。

本文是关于可操作设计技巧的教程，可让您对引导主题网站的外观感到满意。

设置

我将从这个免费的引导主题开始。现在让我们改进它！

扩展你的颜色

更新你的调色板

Bootstrap 带有一个您可能不知道的完整颜色托盘。利用它看起来与其他千篇一律的引导网站不同。

要访问这些颜色，我们只需要将它们添加到我们的scss/_variables.scss引导文件中。

 $theme-colors: ( "primary": $teal-300, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ) !default;

或者，如果您为 Bootstrap 使用 npm 设置，请更新您已编译的自定义 sass 文件。

 @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; $custom-colors: ( primary: $teal-300, ); $theme-colors: map-merge($theme-colors, $custom-colors); @import "../node_modules/bootstrap/scss/bootstrap";

现在我们可以为我们的“开始”按钮更新粗引导主蓝色为漂亮的软蓝绿色。我们还想通过删除text-white类将文本从白色更改为黑色。这是为了在较浅的背景颜色上具有可读性。

在英雄部分的顶部添加颜色提示

我们可以在导航顶部添加一个小边框，通过border-primary使用新的蓝绿色原色为我们的页面带来更多活力。

文本

将行高更改为常用元素

很多人不知道的一个微妙变化是，文本越大，行高越小。让我们覆盖 CSS 文件中常见 HTML 元素的默认行高。

 h1 { line-height: 1.1; } h2 { line-height: 1.125; } h3 { line-height: 1.25; } p { line-height: 1.5; } 

更新的字母间距

默认情况下，大标题通常有太多的字母间距。通过更新我们的 CSS 文件来压缩 h1 和 h2 标签的字母间距，就像我们对行高所做的那样。

 h1 { line-height: 1.1; letter-spacing: -0.05em; } h2 { line-height: 1.125; letter-spacing: -0.025em; } 

较重的标题支持文本

现在我们可以加强英雄中的支持文本。它和H1标签之间的反差达到了极致。我们将删除lead类并赋予它fs-5类。这带有更厚的字体重量。

概括

到目前为止，我们在哪里...

我想在 1 篇博文中做这个主题重构，但内容太多了。我把它分成几篇文章。

下周回来查看文章 2 或在thefreelancedev.com订阅我的时事通讯。我将更新主题的功能部分，并为您提供一些 🔥 提示。

我还强烈建议您查看Refactoring UI 。它彻底改变了我作为开发人员对设计的看法。

✌️

也在这里发布。