在创建网站时，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 ✌️ 也在 发布。 这里

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

太長; 讀書

Companies Mentioned

Wes | The Full Stack Dev

About Author

標籤

Languages

这篇文章刊登在...