有些人喜欢它，有些讨厌它。使用框架并不是每个人都喝茶。 Bootstrap框架通常被认为是混乱的，或者所有网站最终看起来都像引导程序。我想清除这些偏见。

这就是为什么我喜欢bootstrap

• 它已被证明和浏览器兼容
• 文档非常好
• 它是模块化且灵活的
• 这很普遍
• 这非常适合快速模型
• 发展是一致的

一些背景信息

我开始在CSS/HTML和Web Design上市时开始专业地工作。那是前一段时间！我创建的第一个网站是在Cyrcus.com上。那是21年前的2002年！

自3版以来，我一直在使用Bootstrap，并且在过去几年中几乎没有使用任何其他框架。

这是我的4个专家技巧

1.使用SASS代替纯CSS

您可以通过CDN链接轻松地将Bootstrap框架嵌入您的网站，然后使用自定义CSS覆盖样式。但这是初学者使用的方法。

注意：有时我仍然这样做是为了简单地为一个新项目创建一个模型，或者当我需要一个非常简单的接口以用于后端应用程序。

但是，专业人士本身会编译Bootstrap Sass文件，因此可以完全控制输出。

适用于Sass的初学者的一个优秀而简单的应用程序是Scout App。阅读有关Bootstrap Sass Files here的更多信息。

2.仅使用您需要的组件

如果您已经使用了SASS，则可以更进一步，只使用框架的某些组件。这样可以提高网站的性能，因为您不必加载装载条的装载样式，例如，如果您从不使用加载条。

在以下屏幕截图中，您可以从我的网站上看到一个SASS文件。在这里，我评论了我不需要的组件。这将我的CSS文件的大小从274 kb减少到238 kb。就我而言，这并不多，但是如果您有很多流量，它会得到回报。如果您只需要几个组件，例如对于简单的Landin页面，您只需包括所需内容，就可以大量减少文件大小。

3.使用尽可能多的引导类课程

Bootstrap Framework提供了许多智能类来定位内容或根据“移动第一”原则进行设计。因此，您应该尽可能习惯于使用这些类。

示例：自定义类VS Bootstrap类

在示例中，您可以看到Bootstrap类和自定义类之间的比较。当然，自定义类的HTML标记较小，但是您必须包括不必要的CSS代码。特别是如果您需要在不同设备上显示的断点，则自定义CSS变得很快。

，但让我们稍后再看一下下一个提示，该提示更详细地处理此主题。

<style type="text/css">
    .custom{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #cfe2ff;
        padding: 1.5rem;
        margin: 0.25rem;
    }
</style>

<!-- Bootstrap Classes -->
<div class="d-flex align-items-center justify-content-center bg-primary-subtle p-4 m-1">
    <div class="text-center">Bootstrap Like a PRO (Bootstrap CSS)</div>
</div>

<!-- Custom Class -->
<div class="custom">
    <div>Bootstrap Like a PRO (Custom CSS)</div>
</div>

在我多年来创建的许多项目中，只替换了字体和颜色，或者变量中的一些值被覆盖。我几乎不再使用自定义类来进行间距或颜色。仅出于特殊的应用目的或自定义组件，必须进行调整。

与许多主张相反： 是的，即使不编写自己的CSS！ >

您只需要知道如何。

// Create custom button by extending the built in classes
.btn-custom{
    @extend .btn-outline-light;
    @extend .text-danger;
    @extend .fw-bold;
    @extend .fs-3;
}

<a class="btn btn-custom" href="#">CLICK ME</a>

.btn-outline-light, .btn-custom {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  // More entries...
}