4 Bootstrap 的不良做法

4 Bootstrap 的不良做法

引导程序 被广泛用作 CSS 和 JS 库。虽然 Bootstrap 本身是任何开发人员工具包中的优秀项目，但有几个常见的 不良做法 有些人可能会跟随。在本文中，我将解释其中的 4 个。

过度使用行和列

开发者使用 Bootstrap 的行和列类来放置 HTML 元素很棒，Bootstrap 的网格系统仍然是必要的技术。我想说的是，在许多情况下，您可以使用更简单的 CSS 实现相同的结果。想象一下，我们想在一行中放置 3 个项目（我们不希望该行成为响应行）。我们可以这样编码：

 <div class='row'>  
 <div class='col-4 text-center'>  
 项目-A  
 </div>  
 <div class='col-4 text-center'>  
 项目-B  
 </div>  
 <div class='col-4 text-center'>  
 项目-C  
 </div>  
 </div>

上面的代码工作正常。但是我们只能使用具有相同输出的两个类！使用 flex 类会使代码更清晰。像这样：

 <div class='d-flex justify-content-around'>  
 <div>项目-A</div>  
 <div>项目-B</div>  
 <div>项目-C</div>  
 </div>

不同之处在于，当您使用 col 类时，它将是一个响应式网格。当您不需要响应式网格并且您唯一需要的是正确放置时，请使用 Bootstrap 的 flex 类。

不必要地使用 col-sm-12

在编码网格时，您不必编写 col-sm-12！因为它是 默认 任何列的 Bootstrap 设置，除非您使用 col-2 之类的类，它强制 div 以任何分辨率占用行的 2 / 12。换句话说，以下两段代码的工作方式相同：

 <div class='row'>  
 <div class='col-md-6'>  
 <div class='alert alert-primary'>Lorem Ipsum</div>  
 </div>  
 <div class='col-md-6'>  
 <div class='alert alert-primary'>Lorem Ipsum</div>  
 </div>  
 <div class='col-md-6'>  
 <div class='alert alert-primary'>Lorem Ipsum</div>  
 </div>  
 <div class='col-md-6'>  
 <div class='alert alert-primary'>Lorem Ipsum</div>  
 </div>  
 </div>

工作方式相同：

 <div class='row'>  
 <div class='col-sm-12 col-md-6'>  
 <div class='alert alert-primary'>Lorem Ipsum</div>  
 </div>  
 <div class='col-sm-12 col-md-6'>  
 <div class='alert alert-primary'>Lorem Ipsum</div>  
 </div>  
 <div class='col-sm-12 col-md-6'>  
 <div class='alert alert-primary'>Lorem Ipsum</div>  
 </div>  
 <div class='col-sm-12 col-md-6'>  
 <div class='alert alert-primary'>Lorem Ipsum</div>  
 </div>  
 </div>

类 px 和 py

如果您希望左右填充相等，您可以简单地使用 px 而不是一起使用类 'pe' 和 'ps'。对于可以将类 'mx' 和 'my' 应用于 HTML 标记的页边距也是如此。

覆盖 Bootstrap 的类

虽然 Bootstrap 可以克服 CSS 和 JS 中的任何挑战，但 Bootstrap 的问题是，由这个库构建的网站看起来非常 Bootstrap！迟早您会遇到必须自定义 Bootstrap 的情况。

如果您希望自定义 Bootstrap，请在关键字 ' 的帮助下覆盖 Bootstrap 的类 重要的 '不是明智的选择。 Bootstrap 5 为您提供了广泛的选择 定制 .由于一切都是在幕后用 Sass 编写的，因此您可以使用 Sass 功能来自定义 Bootstrap。

让我们仔细看看。想象一下，我们想要一个新的主题颜色，比如“蓝绿色”。 Bootstrap 的每种主题颜色都带有变体，例如：“text-teal”、“btn-teal”、“bg-teal”和“alert-teal”……使用 Sass，添加所有这些变体变得简单。您所要做的就是将青色代码添加到名为 $颜色主题 Bootstrap 会自动为您制作所有变体。您甚至不更改 Bootstrap 的原始文件！看下面的代码：

 @import "../node_modules/bootstrap/scss/functions";  
 @import "../node_modules/bootstrap/scss/variables"; $附加主题颜色：（  
 “蓝绿色”：#008080，  
 '紫罗兰色'：#ee82ee，  
 “琥珀”：#FFBF00  
 ); **$主题颜色** : map-merge($theme-colors, $additional-theme-colors); @import '../node_modules/bootstrap/scss/bootstrap.scss';

上面的一段代码只是一小部分 萨斯 文件。这里不想多说Sass，但是从Sass代码中可以很清楚的看出，在$theme-colors更改后，代码中导入了主Bootstrap文件。 Sass 解释器 只要之前声明了自定义的 $theme-colors，就会停止主引导文件以使用其原始 $theme-colors。

结论

遵循最佳实践会使您的工作成为 可维护 一个每个人都倾心的。 Bootstrap 5 让一切变得更加简单，尤其是在涉及到 定制 引导程序。要实现 Bootstrap 5 的真正实力，你应该学习 萨斯 .初中生应该不到一周的时间。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/24566/33141009