具有引导CSS，您可以比从简单的CSS构建网站更快、更容易地开发响应性网站。这是因为此开源工具包提供了预先设计的模板和组件，因此您可以使用重要的设计元素创建布局，如引导按钮,桌子和形式而不必从头开始构建它们。
然而，这个过程并不像复制和粘贴这些可重用代码块那么简单。你需要自定义引导模板和组件，以确保你的网站反映出你独特的品牌。
例如，您可能希望添加自定义颜色，而不是使用引导提供的10种颜色实用程序类。或者，您可能希望更改引导网格布局的断点。或者您可能希望添加自定义类，如.btn自定义类，以创建完全唯一的按钮。
在这篇文章中，我们将介绍如何定制引导CSS以及如何不到更具体地说，我们将向您展示如何自定义引导按钮、颜色、导航栏和旋转木马。单击下面的任何跳转链接可跳到该部分。
如何编辑引导CSS
您可以直接编辑引导的核心文件来更改站点，但不建议这样做。
直接更改默认引导样式表将很快变得难以维护。不仅更难跟踪所做的更改，而且升级到更新版本的引导样式表也会更加痛苦。升级时，您必须替换核心文件，因此所有自定义设置都将丢失。
好消息是有一种方法bob官网官方网站可以在不编辑引导源代码的情况下进行更改。下面让我们仔细看看这个过程。
你能覆盖引导CSS吗？
如果要自定义引导站点，请保持源代码不变，只需在外部样式表中添加自定义代码即可。只要设置正确，此外部样式表中的代码将覆盖现有样式。此设置过程因站点上加载引导的方式而异。
有几种不同的方法可以从引导开始．你可以使用BootstrapCDN将Bootstrap编译后的CSS和JS的缓存版本发送到你的项目中，或者你可以下载Bootstrap的预编译版本或源代码版本。
下面，我们将介绍定制每个引导版本的过程。
如何覆盖引导CSS
您可以使用两种可能的方法覆盖引导元素的默认样式。第一种方法——使用CSS覆盖——适用于使用BootstrapCDN或Bootstrap预编译版本的站点。第二种方法——使用Sass变量——适用于使用Bootstrap源代码版本的站点。
每种方法都适用于不同的用例。虽然使用CSS覆盖更简单，但它也更耗时，更难扩展。另一方面，使用Sass变量非常适合在整个站点上进行更广泛的更改，但它是为更高级的用户设计的。下面让我们详细了解这两种方法
如何使用CSS覆盖覆盖引导
无论您使用的是BootstrapCDN还是预编译版本，您都将从一个基本的HTML5 doctype开始，该doctype如下所示：
<！doctype html>
<头>你好，世界</标题></p><p></head></p><p><body></p><p><h1>你好，世界</h1></p></code><p><code class="html"></body><br><br></html><br></code></p></pre><p></p><p>这将是您的index.html文件。下一步是将引导加载到站点上。</p><p>如果使用BootstrapCDN，则无需下载任何文件。只需将以下代码行添加到index.html文件的<head>部分：</p><p></p><pre class="syntax"><code class="html"><br><link rel=“样式表”href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css“integrity=”sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l“crossorigin=”匿名“><br></code></pre><p></p><p>这将在您的站点上加载引导CSS。请注意，如果您想加载引导Javascript，则必须在<body>部分添加一些代码。由于此重写方法不需要这些代码，因此我们将跳过此步骤。</p><p>如果您使用的是编译版本的Bootstrap，那么您必须下载编译后的CSS文件，并将它们保存在index.html文件所在的文件夹中。然后将以下代码行添加到index.html文件的<head>部分：</p><p></p><pre class="syntax"><code class="html"><br><link rel=“stylesheet”href=“bootstrap/css/bootstrap.min.css”><br></code></pre><p></p><p>完成此步骤后，您将成功链接到引导的默认样式表。现在是创建您自己的样式表的时候了。</p><p>为此，只需在index.html文件所在的文件夹中创建另一个文件。您可以将此文件称为“custom.css”，因为这是您将放置自定义css的位置。</p><p>但在开始添加到此文件之前，请返回index.html文件，并在默认样式表的链接下直接添加以下代码行。</p><p></p><pre class="syntax"><code class="html"><br><link rel=“stylesheet”type=“text/css”href=“custom.css”><br></code></pre><p></p><p>为了让这个CSS覆盖自定义方法工作，对custom.css的引用必须在bootstrap.css之后。为什么?因为规则<a href="//www.eigoj.com/website/css-specificity" rel="noopener" target="_blank">CSS特异性</a>。如果HTML元素被多个<a href="//www.eigoj.com/website/css-selectors" rel="noopener" target="_blank">CSS选择器</a>具有相同的特殊性，最后一个样式将覆盖其他样式，并且只应用其样式属性。通过在默认样式表之后链接到自定义样式表，可以为其提供更高级别的特殊性。</p><p>添加此项后，如果使用BootstrapCDN，index.html文件的外观如下所示。</p><p></p><pre class="syntax"><code class="html"><p></p><p><！doctype HTML></p><p><html lang=“en”></p><p><头></p><p><meta charset=“utf-8”></p><p><meta name=“viewport”content=“width=device width，初始比例=1，收缩以适应=否”></p><p><link rel=“样式表”href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css“integrity=”sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l“crossorigin=”匿名“></p><p><link rel=“stylesheet”type=“text/css”href=“custom.css”></p><p><title>你好，世界</标题></p><p></head></p><p><body></p><p><h1>你好，世界</h1></p><p></body></p><p></html></p></code><p><code class="html"></code></p></pre><p></p><p>如果使用预编译引导，index.html文件的外观如下。</p><p></p><pre class="syntax"><code class="html"><p></p><p><！doctype html></p><p><html lang=“en”></p><p><头></p><p><meta charset=“utf-8”></p><p><meta name=“viewport”content=“width=device width，初始比例=1，收缩以适应=否”></p><p><link rel=“stylesheet”href=“bootstrap/css/bootstrap.min.css”></p><p><link rel=“stylesheet”type=“text/css”href=“custom.css”></p><p><title>你好，世界</标题></p><p></head></p><p><body></p><p><h1>你好，世界</h1></p><p></body></p><p></html></p></code><p><code class="html"></code></p></pre><p></p><p>现在，您可以向custom.css文件添加任何必要的更改。</p><a id="how-to-customize-bootstrap-buttons" data-hs-anchor="true"></a><h4>如何使用CSS覆盖自定义引导按钮</h4><p>假设您希望在站点上增大按钮文本的字体大小。在Bootstrap中，.btn类的默认字体大小为16px，如下所示。</p><p><img src="//www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png?width=650&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png" alt="Bootstrap.btn类和具有默认样式的修改器类-1" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png?width=325&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png 325w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png?width=650&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png 650w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png?width=975&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png 975w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png?width=1300&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png 1300w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png?width=1625&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png 1625w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png?width=1950&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles-1.png 1950w" sizes="(max-width: 650px) 100vw, 650px">您可以使用<a href="//www.eigoj.com/website/css-font-size" rel="noopener" target="_blank">CSS字体大小属性</a>使用类选择器，您可以使用以下代码将.btn类下所有元素的字体大小更改为20px。</p><p></p><pre class="syntax"><code class="css"><p></p><p>.btn{字体大小：20px}</p></code><p><code class="css"></code></p></pre><p></p><p>结果如下：</p>
<div>
<img src="//www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png?width=650&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png" alt="具有自定义CSS覆盖的默认样式的Bootstrap.btn类和修改器类" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png?width=325&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png 325w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png?width=650&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png 650w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png?width=975&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png 975w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png?width=1300&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png 1300w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png?width=1625&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png 1625w, //www.eigoj.com/hs-fs/hubfs/Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png?width=1950&name=Bootstrap%20.btn%20class%20and%20modifier%20classes%20with%20default%20styles%20overridden%20by%20custom%20CSS.png 1950w" sizes="(max-width: 650px) 100vw, 650px">按照相同的过程，您可以根据需要进行任意多的更改以转换引导站点<a href="//www.eigoj.com/website/css-selectors?_ga=2.269204600.865349696.1590761964-1753121421.1568128919" rel="noopener" target="_blank">CSS选择器</a>与bootstrap.css文件中的内容一样具体，或者比bootstrap.css文件中的内容更具体。</div><p>完成更改后，保存custom.css文件。在任何时候，您都可以编辑或删除任何自定义CSS，以恢复到Bootstrap的默认样式或重新设计站点。您也可以轻松地切换到<a href="https://getbootstrap.com/docs/versions/" rel="noopener" target="_blank">引导的另一个版本</a>（只要是小版本，如4.4），替换index.html文件中对上一个样式表的引用。</p><p>现在我们已经了解了这个定制选项及其好处，让我们看看其他定制选项，它适用于使用Bootstrap源代码版本的站点所有者。</p><a id="how-to-customize-bootstrap-sass" data-hs-anchor="true"></a><h3>如何使用Sass覆盖引导</h3><p>下载Bootstrap的源代码版本是在站点上加载Bootstrap最困难的方法，因为它需要额外的工具来设置源文件，如Bootstrap的官方编译版本。这是因为Bootstrap的最新主要版本-<a href="https://getbootstrap.com/docs/5.0/customize/sass/" rel="noopener" target="_blank">引导程序5</a>-是用英文写的<a href="https://sass-lang.com/" rel="noopener" target="_blank">无礼</a>，一种CSS扩展语言，必须对其进行编译，以便浏览器能够正确理解和呈现它。</p><p>您需要一个Sass编译器和自动引用器来完成此操作。但是，一旦您投入时间设置此版本的引导，您就可以完全控制您的代码和引导的代码。这就是为什么此方法吸引更高级的用户。</p><p>假设您选择使用包管理器（如npm）下载引导源代码，然后解压缩文件夹并查看以下结构。</p><p>你的项目/</p><p>└── scss</p><p>│ └── custom.scss</p><p>└── 节点单元/</p><p>└── 独自创立</p><p>└── js</p><p>└── scss</p><p>请注意，标记为“custom.scss”的文件夹（将用作您自己的样式表）与bootstrap/scss文件夹（默认样式表）是分开的。重要的是要注意，如果您不使用包管理器，您只需要手动设置一个类似的文件结构，使引导的源文件与您自己的源文件分开。</p><p>与其他定制方法一样，您仍然避免修改引导的核心文件。Sass的不同之处在于，在您自己的样式表中，您将导入引导的Sass文件，以便可以修改它们。</p><p>转到custom.scss文件。通过包含以下代码行，可以导入所有引导的源SAS。</p><p></p><pre class="syntax"><code class="css"><p></p><p>@导入“./node_模块/bootstrap/scss/bootstrap”；</p></code><p><code class="css"></code></p></pre><p></p><p>或者，您可以选择所需的文件。以下代码导入自定义所需的文件。</p><p></p><pre class="syntax"><code class="css"><p></p><p>@导入“./node_模块/引导/scss/函数”；</p><p>@导入“./node_模块/bootstrap/scss/variables”；</p><p>@导入“./node_模块/bootstrap/scs/mixin”；</p></code><p><code class="css"></code></p></pre><p></p><p>下面的代码用于导入可选文件。在以后开始自定义时，始终可以添加此代码或其他代码。</p><p></p><pre class="syntax"><code class="css"><p></p><p>@导入“./node_模块/bootstrap/scss/reboot”；</p><p>@导入“./node_模块/bootstrap/scss/type”；</p><p>@导入“./node_模块/bootstrap/scss/images”；</p><p>@导入“./node_模块/bootstrap/scss/code”；</p><p>@导入“./node_模块/bootstrap/scss/grid”；</p></code><p><code class="css"></code></p></pre><p></p><p>一旦设置好，您就可以开始进行更改。不需要在index.html文件中添加对样式表的引用，因此您将保留在custom.scss文件中。</p><p>与在其他方法中添加自定义CSS不同，您将修改<a href="https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss" rel="noopener" target="_blank">Bootstrap中的500个Sass变量和映射</a>. 完整的列表可以在您的scss/_variables.scss文件中找到，但是让我们关注引导文档中使用的两个特定示例。每个示例演示如何使用Sass变量或映射自定义引导颜色。</p><a id="how-to-customize-bootstrap-colors-sass-variables" data-hs-anchor="true"></a><h4>如何使用Sass变量自定义引导颜色</h4><p>默认情况下，引导中<body>元素的Sass变量为：</p><p></p><pre class="syntax"><code class="css"><p></p><p>$body bg:$white！默认值；</p><p>$body color:$gray-900！默认值；</p></code><p><code class="css"></code></p></pre><p></p><p>这意味着背景色为白色，颜色为灰色。假设您要更改这些颜色。</p><p>查看这两个变量如何具有！default标志？该标志允许您在自己的Sass中重写变量的默认值，而无需修改引导程序的源代码。您只需复制并粘贴custom.scss文件中的变量，更改其值，然后删除！default标志。</p><p>因此，如果我想改变背景颜色和<body>元素的颜色分别为黑色和深灰色，我将添加以下自定义。scss文件。</p><p></p><pre class="syntax"><code class="css"><p></p><p>$body bg:#000；</p><p>$body color:#111；</p></code><p><code class="css"></code></p></pre><p></p><p>要成功跨Sass文件进行此覆盖，我必须通过在变量后添加以下代码来完成引导的Sass文件的导入：</p><p></p><pre class="syntax"><code class="css"><p></p><p>@导入“./node_模块/bootstrap/scss/bootstrap”；</p></code><p><code class="css"></code></p></pre><p></p><p>这类似于在前面的方法中，必须在index.html文件的<head>中包含对样式表的两个引用。</p><p>综上所述，如果导入所有引导文件，则custom.scss文件的外观如下：</p><p></p><pre class="syntax"><code class="css"><p></p><p>@导入“./node_模块/bootstrap/scss/bootstrap”；</p><p>$body bg:#000；</p><p>$body color:#111；</p><p>@导入“./node_模块/bootstrap/scss/bootstrap”；</p></code><p><code class="css"></code></p></pre><p></p><a id="how-to-customize-bootstrap-colors-sass-maps" data-hs-anchor="true"></a><h4>如何使用Sass映射自定义引导颜色</h4><p>引导还包括Sass映射，它基本上是Sass变量的相关组。例如，引导中有颜色和网格断点的Sass映射。与Sass变量一样，Sass映射包括！默认标志，因此可以在不修改引导源代码的情况下覆盖它们。</p><p>例如，引导中颜色的Sass映射为：</p><p></p><pre class="syntax"><code class="css"><p></p><p>$theme colors:（）！默认值；</p><p>/ / stylelint-disable-next-line scss / dollar-variable-default</p><p>$主题颜色：地图合并(</p><p>(</p><p>“主要”：$primary，</p><p>“二级”：$secondary，</p><p>“成功”：$success，</p><p>“info”：$info，</p><p>“警告”：$warning，</p><p>“危险”：$危险，</p><p>“light”：$light，</p><p>“黑暗”:$黑暗</p><p>),</p><p>$主题颜色</p><p>);</p></code><p><code class="css"></code></p></pre><p></p><p>使用Sass映射，您有两个选项—可以修改映射，也可以添加到映射。</p><p>假设您要更改$theme colors映射中的现有颜色。只需复制并粘贴映射键，并仅在custom.scss文件中包含要更改的变量。然后，更改它们的值并删除！default标志。</p><p>因此，如果您想将原色更改为青蓝，则应将以下内容添加到自定义Sass文件中：</p><p></p><pre class="syntax"><code class="css"><p></p><p>$主题颜色：(</p><p>“主要”：#0074d9，</p><p>);</p></code><p><code class="css"></code></p></pre><p></p><p>这将改变整个CSS的主主题颜色，因此.alert primary、.text primary、.bg primary等都将受到影响。</p><p>如果您想向$theme color映射添加新颜色，那么您需要添加一个新键，使用变量“custom color”，并为其指定一个值。以下内容将在地图上添加深红色。</p><p></p><pre class="syntax"><code class="css"><p></p><p>$主题颜色：(</p><p>“定制颜色”：#990000，</p><p>);</p></code><p><code class="css"></code></p></pre><p></p><p>现在我们了解了引导用户拥有的两种不同的自定义选项，让我们看看如何使用CSS或Sass自定义引导导航栏和旋转木马。这样，无论使用的是哪个版本的引导，您都可以自定义这些元素。</p><a id="how-to-customize-bootstrap-navbar" data-hs-anchor="true"></a><h2>如何自定义引导导航栏</h2><p>假设我创建了一个标准<a rel="noopener" target="_blank" href="//www.eigoj.com/website/bootstrap-navbar">引导导航条</a>带有指向主页、功能页面和定价页面的链接，这些页面将其内容折叠到<a rel="noopener" target="_blank" href="//www.eigoj.com/website/hamburger-button">汉堡纽扣</a>在小断点（576px）处。下面是展开时的外观。</p><p><img alt="具有默认样式的引导导航栏" src="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-75-PM.png?width=650&name=Untitled%20document-Mar-24-2021-04-57-46-75-PM.png" style="margin-left: auto; margin-right: auto; display: block; width: 650px;" title="" width="650" srcset="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-75-PM.png?width=325&name=Untitled%20document-Mar-24-2021-04-57-46-75-PM.png 325w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-75-PM.png?width=650&name=Untitled%20document-Mar-24-2021-04-57-46-75-PM.png 650w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-75-PM.png?width=975&name=Untitled%20document-Mar-24-2021-04-57-46-75-PM.png 975w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-75-PM.png?width=1300&name=Untitled%20document-Mar-24-2021-04-57-46-75-PM.png 1300w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-75-PM.png?width=1625&name=Untitled%20document-Mar-24-2021-04-57-46-75-PM.png 1625w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-75-PM.png?width=1950&name=Untitled%20document-Mar-24-2021-04-57-46-75-PM.png 1950w" sizes="(max-width: 650px) 100vw, 650px"></p><p>现在让我们看看如何使用CSS覆盖或Sass变量对其进行自定义。</p><h3>使用CSS</h3><p>比如说，我想更改navbar品牌，它通常指定公司、产品或项目名称。默认情况下，navbar品牌的字体颜色为黑色，字体大小为20px。bob全站app</p><p>您可以分别使用样式表中的CSS颜色和字体大小属性将其更改为紫色和24px<a href="//www.eigoj.com/website/what-is-css-class" rel="noopener" target="_blank">类名</a>导航元素和定位元素的名称，即导航条品牌。下面是代码。</p><p></p><pre class="syntax"><code class="css"><br>.navbar.navbar品牌{<br>颜色：#94128A；<br>字体大小：24px；<br>}<br></code></pre><p></p><p>结果如下：</p><p><img alt="引导navbar使用CSS定制，因此navbar品牌具有不同的字体颜色和大小" src="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-89-PM.png?width=650&name=Untitled%20document-Mar-24-2021-04-57-46-89-PM.png" style="margin-left: auto; margin-right: auto; display: block; width: 650px;" title="" width="650" srcset="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-89-PM.png?width=325&name=Untitled%20document-Mar-24-2021-04-57-46-89-PM.png 325w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-89-PM.png?width=650&name=Untitled%20document-Mar-24-2021-04-57-46-89-PM.png 650w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-89-PM.png?width=975&name=Untitled%20document-Mar-24-2021-04-57-46-89-PM.png 975w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-89-PM.png?width=1300&name=Untitled%20document-Mar-24-2021-04-57-46-89-PM.png 1300w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-89-PM.png?width=1625&name=Untitled%20document-Mar-24-2021-04-57-46-89-PM.png 1625w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-89-PM.png?width=1950&name=Untitled%20document-Mar-24-2021-04-57-46-89-PM.png 1950w" sizes="(max-width: 650px) 100vw, 650px"></p><p>注意：在HTML中，我将<a></a>标记之间的“Navbar”也替换为“MyCompany”名称。bob全站app</p><p>使用CSS覆盖的挑战在于您必须理解<a href="//www.eigoj.com/website/css-specificity" rel="noopener" target="_blank">CSS特异性</a>并了解在默认的Bootstrap样式表(Bootstrap .css)中使用了哪些选择器，以便您可以使用更具体的选择器。</p><p>而且，即使你能做到这一点，你的定制选项仍然有限。使用CSS覆盖对单个元素或元素组进行一次性更改。并且它不会改变处于伪状态的元素的外观，如：hover“，：active”和“disabled”。</p><p>如果您想对样式表进行更广泛的更改，那么您需要使用Sass。</p><h3>使用Sass</h3><p>假设我想改变导航栏项目的字体颜色当它们处于活动状态时，当用户将鼠标悬停在它们上面时，使用不同的颜色。下面是Bootstrap中导航条轻元素的默认Sass变量:</p><p></p><pre class="syntax"><code class="css"><br>$navbar浅色：rgba（$黑色，.5）！违约<br>$navbar灯光悬停颜色：rgba（$black，.7）！默认值；<br>$navbar-light-active-color: rgba($black， .9) !<br></code></pre><p></p><p>这意味着默认情况下，浅色导航栏中项目的字体颜色为黑色。让我们更改这些颜色。</p><p>请记住！default标志意味着您可以在自己的Sass中覆盖变量的默认值，而无需修改引导程序的源代码。只需复制并粘贴custom.scss文件中的变量，更改其值，然后删除！default标志。</p><p>因此，如果我想将navbar项的颜色更改为Sass变量$gray-900的等效值，我会使用十六进制代码#212529。如果我想在navbar项目处于活动状态或用户悬停在其上时将其颜色更改为Sass变量$indigo，那么我会使用十六进制代码#6610f2。下面是我要添加到custom.scss文件中的全部代码。</p><p></p><pre class="syntax"><code class="css"><br>@导入“./node_模块/bootstrap/scss/bootstrap”；<br><br>$navbar浅色：#212529；<br>$navbar灯光悬停颜色：#6610f2；<br>$navbar灯光活动颜色：#6610f2；<br><br>@导入“./node_模块/bootstrap/scss/bootstrap”；<br><br></code></pre><p></p><p>结果如下：</p><p><img alt="引导CSS导航条自定义与Sass变量，以改变颜色的导航项目在活动和悬停状态" src="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document.gif?width=650&name=Untitled%20document.gif" style="margin-left: auto; margin-right: auto; display: block; width: 650px;" title="" width="650" srcset="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document.gif?width=325&name=Untitled%20document.gif 325w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document.gif?width=650&name=Untitled%20document.gif 650w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document.gif?width=975&name=Untitled%20document.gif 975w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document.gif?width=1300&name=Untitled%20document.gif 1300w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document.gif?width=1625&name=Untitled%20document.gif 1625w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document.gif?width=1950&name=Untitled%20document.gif 1950w" sizes="(max-width: 650px) 100vw, 650px"></p><a id="how-to-customize-bootstrap-carousel" data-hs-anchor="true"></a><h2>如何定制引导转盘</h2><p>假设我创建了一个标准<a rel="noopener" target="_blank" href="//www.eigoj.com/website/bootstrap-carousel-css">自举转盘</a>小狗的形象。这是它的样子。</p><p><img src="//www.eigoj.com/hs-fs/hubfs/override-css-image-slider-example.gif?width=650&name=override-css-image-slider-example.gif" alt="使用html和引导css制作的图像旋转木马示例" width="650" style="margin-left: auto; margin-right: auto; display: block; width: 650px;" srcset="//www.eigoj.com/hs-fs/hubfs/override-css-image-slider-example.gif?width=325&name=override-css-image-slider-example.gif 325w, //www.eigoj.com/hs-fs/hubfs/override-css-image-slider-example.gif?width=650&name=override-css-image-slider-example.gif 650w, //www.eigoj.com/hs-fs/hubfs/override-css-image-slider-example.gif?width=975&name=override-css-image-slider-example.gif 975w, //www.eigoj.com/hs-fs/hubfs/override-css-image-slider-example.gif?width=1300&name=override-css-image-slider-example.gif 1300w, //www.eigoj.com/hs-fs/hubfs/override-css-image-slider-example.gif?width=1625&name=override-css-image-slider-example.gif 1625w, //www.eigoj.com/hs-fs/hubfs/override-css-image-slider-example.gif?width=1950&name=override-css-image-slider-example.gif 1950w" sizes="(max-width: 650px) 100vw, 650px"></p><p>现在，让我们看看如何使用CSS覆盖、Sass变量或映射对其进行自定义。</p><h3>使用CSS</h3><p>假设我想更改旋转木马滑块中图像的高度。我可以使用类型选择器img来执行此操作。下面是代码。</p><p></p><pre class="syntax"><code class="css"><br>img{高度：500px；}<br></code></pre><p></p><p>结果如下：</p><p><img alt="使用CSS定制的引导图像旋转木马可更改图像高度" src="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg?width=650&name=Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg" style="margin-left: auto; margin-right: auto; display: block; width: 650px;" title="" width="650" srcset="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg?width=325&name=Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg 325w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg?width=650&name=Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg 650w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg?width=975&name=Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg 975w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg?width=1300&name=Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg 1300w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg?width=1625&name=Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg 1625w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg?width=1950&name=Untitled%20document-Mar-24-2021-04-57-46-58-PM.jpeg 1950w" sizes="(max-width: 650px) 100vw, 650px"></p><h3>使用Sass</h3><p>假设我想更改底部三个指示器的样式。以下是转盘指示器宽度和高度的默认Sass变量：</p><p></p><pre class="syntax"><code class="css"><br>$carousel指示器宽度：30px！默认值；<br>$carousel指示器高度：3px！默认值；<br></code></pre><p></p><p>这意味着默认情况下，指示器的宽度为30px，高度为3px。</p><p>假设我想增加宽度和高度，使这些指示器更加突出。我将复制并粘贴custom.scss文件中的变量，更改它们的值，并删除！default标志。代码如下：</p><p></p><pre class="syntax"><code class="css"><br>@导入“./node_模块/bootstrap/scss/bootstrap”；<br><br>$carousel指示器宽度：100px；<br>$carousel指示器高度：10px；<br><br>@导入“./node_模块/bootstrap/scss/bootstrap”；<br></code></pre><p></p><p>结果如下：</p><p><img alt="使用Sass定制的引导图像旋转木马可更改指示器的宽度和高度" src="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg?width=650&name=Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg" style="margin-left: auto; margin-right: auto; display: block; width: 650px;" title="" width="650" srcset="//www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg?width=325&name=Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg 325w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg?width=650&name=Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg 650w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg?width=975&name=Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg 975w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg?width=1300&name=Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg 1300w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg?width=1625&name=Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg 1625w, //www.eigoj.com/hs-fs/hubfs/Google%20Drive%20Integration/Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg?width=1950&name=Untitled%20document-Mar-24-2021-04-57-46-41-PM.jpeg 1950w" sizes="(max-width: 650px) 100vw, 650px"></p><h2>创建和自定义引导站点</h2><p>无论您使用的是CSS覆盖还是Sass变量，您都可以在Bootstrap中解锁数百个自定义选项。这样，您不仅可以构建一个响应性强的网站，还可以根据您的品牌进行设计。您只需熟悉HTML和CSS即可。</p><p><em>编者按：这篇文章最初发表于2020年6月，并已全面更新。</em></p><p>
<!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-b4b6cb84-2a18-490b-840d-883884a94a83"><span class="hs-cta-node hs-cta-b4b6cb84-2a18-490b-840d-883884a94a83" id="hs-cta-b4b6cb84-2a18-490b-840d-883884a94a83">
<!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="https://cta-redirect.hubspot.com/cta/redirect/53/b4b6cb84-2a18-490b-840d-883884a94a83" target="_blank" rel="noopener"><img class="hs-cta-img" id="hs-cta-img-b4b6cb84-2a18-490b-840d-883884a94a83" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/53/b4b6cb84-2a18-490b-840d-883884a94a83.png" alt="新的文字-动作"></a></span></span>
<!-- end HubSpot Call-to-Action Code --></p><p></p>
<div id="slidebox">
<a class="close"></a>
<!--HubSpot Call-to-Action Code -->
<span class="hs-cta-wrapper" id="hs-cta-wrapper-be00be7b-acfc-4948-9055-bf6bf9746111"><span class="hs-cta-node hs-cta-be00be7b-acfc-4948-9055-bf6bf9746111" id="hs-cta-be00be7b-acfc-4948-9055-bf6bf9746111">
<!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="https://cta-redirect.hubspot.com/cta/redirect/53/be00be7b-acfc-4948-9055-bf6bf9746111" target="_blank" rel="noopener"><img class="hs-cta-img" id="hs-cta-img-be00be7b-acfc-4948-9055-bf6bf9746111" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/53/be00be7b-acfc-4948-9055-bf6bf9746111.png" alt="css简介"></a></span></span>
<!-- end HubSpot Call-to-Action Code -->
</div><p></p></span>
<p class="post-content__publish-date">最初发布于2021年4月27日上午7:00:00，更新于2021年10月8日</p>
<div class="post-content__topic-container blog-postPage-topic">
<p>话题：</p>
<a href="//www.eigoj.com/website/bootstrap-css" class="post-content__topic" data-hubs_params="false">Bootstrap&CSS</a>
</div>
<div class="post-content__social-share-container">
<div id="hs_cos_wrapper_End_of_Post_CTA" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
<div class="wt-blog__post__cta post-content__bottom-cta">
<div class="wt-blog__post__cta__content">
<h3>别忘了分享这篇文章！</h3>
<div class="addthis_inline_share_toolbox"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="blog-section-header blog-section-header--border-top blog-section-header--arrow-down ">
<h3 class="blog-section-header__heading">相关文章</h3>
</section>
<section class="related-posts">
<!-- hasFeaturedImage: https://www.hubspot.com/hubfs/Google%20Drive%20Integration/How%20to%20Minify%20CSS%20and%20Speed%20Up%20Your%20Website.jpeg -->
<article class="blog-card blog-card--one-third ">
<figure>
<a href="//www.eigoj.com/website/minify-css"><img src="//www.eigoj.com/hubfs/Google%20Drive%20Integration/How%20to%20Minify%20CSS%20and%20Speed%20Up%20Your%20Website.jpeg" alt="如何缩小CSS并加速您的网站" class="hsg-deferred"></a>
</figure>
<div class="blog-card__content">
<h3 class="blog-card__content-title"><a href="//www.eigoj.com/website/minify-css">如何缩小CSS并加速您的网站</a></h3>
<div class="blog-card__meta">
<a href="//www.eigoj.com/website" class="blog-card__blog-link">网站</a>
<a href="//www.eigoj.com/website/minify-css" class="blog-card__read-time">|5分钟阅读</a>
</div>
</div>
</article>
<!-- hasFeaturedImage: https://www.hubspot.com/hubfs/Google%20Drive%20Integration/scrolling%20text%20css.jpeg -->
<article class="blog-card blog-card--one-third ">
<figure>
<a href="//www.eigoj.com/website/scrolling-text-css"><img src="//www.eigoj.com/hubfs/Google%20Drive%20Integration/scrolling%20text%20css.jpeg" alt="如何使用CSS[+代码模板]创建滚动文本" class="hsg-deferred"></a>
</figure>
<div class="blog-card__content">
<h3 class="blog-card__content-title"><a href="//www.eigoj.com/website/scrolling-text-css">如何使用CSS[+代码模板]创建滚动文本</a></h3>
<div class="blog-card__meta">
<a href="//www.eigoj.com/website" class="blog-card__blog-link">网站</a>
<a href="//www.eigoj.com/website/scrolling-text-css" class="blog-card__read-time">|5分钟阅读</a>
</div>
</div>
</article>
<!-- hasFeaturedImage: https://f.hubspotusercontent00.net/hubfs/53/Site%20owner%20using%20CSS%20classes%20and%20selectors%20to%20style%20HTML%20elements.jpg -->
<article class="blog-card blog-card--one-third ">
<figure>
<a href="//www.eigoj.com/website/what-is-css-class"><img src="//www.eigoj.com/hubfs/Site%20owner%20using%20CSS%20classes%20and%20selectors%20to%20style%20HTML%20elements.jpg" alt="CSS类入门指南" class="hsg-deferred"></a>
</figure>
<div class="blog-card__content">
<h3 class="blog-card__content-title"><a href="//www.eigoj.com/website/what-is-css-class">CSS类入门指南</a></h3>
<div class="blog-card__meta">
<a href="//www.eigoj.com/website" class="blog-card__blog-link">网站</a>
<a href="//www.eigoj.com/website/what-is-css-class" class="blog-card__read-time">|7分钟阅读</a>
</div>
</div>
</article>
</section>
<div id="hs_cos_wrapper_module_163294726013371" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"></div>
</main>
</main>
<div class="blog-sticky-footer open hide" data-background="gradient4">
<div class="hs-page-width-normal">
<div class="blog-sticky-footer__container" data-timeout="3000">
<div class="blog-sticky-footer__interactor"></div>
<div class="blog-sticky-footer__collapsed-content hidden-content">
<p><strong>扩大报价</strong></p>
</div>
<div class="blog-sticky-footer__open-content visible-content">
<p><strong>注册HubSpot的CMS软件bob电竞官方下载</strong></p>
<a href="https://www.hubspot.com/products/cms?hubs_post-cta=mobile-blog-sticky" class="cta cta--medium cta--primary blog-sticky-update">现在就去拿</a>
<button class="cta cta--medium cta--primary blog-sticky-update">现在就去拿</button>
</div>
</div>
</div>
</div>
<div id="blog-sticky-footer-form" class="blog-sticky-footer-form blog-sticky-footer-form--hidden">
<div class="blog-sticky-footer-form__container">
<div class="blog-sticky-footer-form__content">
<span class="blog-sticky-footer-form__close hsg-icon hsg-icon-close"></span>
<div class="blog-sticky-footer-form__header">
<span class="blog-sticky-footer-form__header-pre-title"></span>
<h2 class="blog-sticky-footer-form__header-title"></h2>
<div class="blog-sticky-footer-form__header-content">
<div class="blog-sticky-footer-form__header-img">
<img src="" alt="">
</div>
<div>
<p class="blog-sticky-footer-form__header-description"></p>
<div class="blog-sticky-footer-form__header-external-link-wrapper">
<a class="blog-sticky-footer-form__header-external-link" href="" target="_blank"><span></span>
<svg class="cl-icon">
<use xlink:href="#external-link"></use>
</svg></a>
</div>
</div>
</div>
</div>
<div class="blog-sticky-footer-form__form-wrapper">
<span id="hs_cos_wrapper_blog_sticky_footer_form" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"><h3 id="hs_cos_wrapper_blog_sticky_footer_form_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text"></h3>
<div id="hs_form_target_blog_sticky_footer_form"></div></span>
</div>
</div>
</div>
</div>
</section>
</div>
<div data-modal="downloadForLater" data-exit="0" class="hsg-modal-container">
<div class="hsg-modal-contents">
<div data-background="secondary4" class="hsg-modal-header">
<span class="hsg-icon hsg-icon-close"></span>
</div>
<div class="hsg-modal-text" style="text-align: left">
<span id="hs_cos_wrapper_download_for_later" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"><h3 id="hs_cos_wrapper_download_for_later_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">下载供以后使用</h3>
<div id="hs_form_target_download_for_later"></div></span>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</div>
<div class="footer-container-wrapper">
<div class="footer-container container-fluid">
<div class="row-fluid-wrapper row-depth-1 row-number-1">
<div class="row-fluid ">
<div class="span12 widget-span widget-type-global_group " style="" data-widget-type="global_group" data-x="0" data-w="12">
<div class="" data-global-widget-path="generated_global_groups/4255443445.html">
<div class="row-fluid-wrapper row-depth-1 row-number-1 ">
<div class="row-fluid ">
<div class="span12 widget-span widget-type-raw_jinja " style="" data-widget-type="raw_jinja" data-x="0" data-w="12">
<footer class="hsg-footer">
<div class="hsg-footer__layout">
<div id="back-link" class="hsg-footer__logo-caret">
<a class="hsg-footer__logo-caret-home" href="#">返回</a>
<span class="hsg-footer__close" role="img" aria-label="Close"></span>
</div>
<nav class="hsg-footer__nav">
<div class="hsg-footer__nav-left" role="navigation">
<section class="hsg-footer__nav-column hsg-footer__nav-column-left">
<input type="checkbox" id="hsg-footer-column-0" name="hsg-footer-column-0">
<label for="hsg-footer-column-0">受欢迎的特性</label>
<ul>
<li class="hsg-footer__nav-item" data-order="0"><a href="https://www.hubspot.com/products/sales/schedule-meeting" data-order="0" data-linkorder="0">免费会议调度程序应用程序</a></li>
<li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/products/marketing/social-inbox" data-order="1" data-linkorder="1">社交媒体工具</a></li>
<li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/products/sales/email-tracking" data-order="2" data-linkorder="2">电子邮件跟踪软件bob电竞官方下载</a></li>
<li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/products/sales/sales-automation" data-order="3" data-linkorder="3">销售电子邮件自动化</a></li>
<li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/products/marketing/ads" data-order="4" data-linkorder="4">广告软件bob电竞官方下载</a></li>
<li class="hsg-footer__nav-item" data-order="5"><a href="https://www.hubspot.com/products/marketing/email" data-order="5" data-linkorder="5">电子邮件营销软件bob电竞官方下载</a></li>
<li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/products/crm/lead-management" data-order="6" data-linkorder="6">铅管理软件bob电竞官方下载</a></li>
<li class="hsg-footer__nav-item" data-order="7"><a href="https://www.hubspot.com/products/crm/pipeline-management" data-order="7" data-linkorder="7">管道管理工具</a></li>
<li class="hsg-footer__nav-item" data-order="8"><a href="https://www.hubspot.com/products/sales/email-templates-sales" data-order="8" data-linkorder="8">销售电子邮件模板</a></li>
<li class="hsg-footer__nav-item" data-order="9"><a href="https://www.hubspot.com/products/service/help-desk" data-order="9" data-linkorder="9">服务台软件bob电竞官方下载</a></li>
<li class="hsg-footer__nav-item" data-order="10"><a href="https://www.hubspot.com/products/marketing/forms" data-order="10" data-linkorder="10">免费在线表单生成器</a></li>
<li class="hsg-footer__nav-item" data-order="11"><a href="https://www.hubspot.com/products/crm/chatbot-builder" data-order="11" data-linkorder="11">免费聊天机器人生成器</a></li>
<li class="hsg-footer__nav-item" data-order="12"><a href="https://www.hubspot.com/products/crm/live-chat" data-order="12" data-linkorder="12">免费实时聊天软件bob电竞官方下载</a></li>
<li class="hsg-footer__nav-item" data-order="13"><a href="https://www.hubspot.com/products/marketing/analytics" data-order="13" data-linkorder="13">营销分析</a></li>
<li class="hsg-footer__nav-item" data-order="14"><a href="https://www.hubspot.com/products/marketing/landing-pages" data-order="14" data-linkorder="14">免费登录页面生成器</a></li>
</ul>
</section>
</div>
<div class="hsg-footer__nav-right" role="navigation">
<div class="hsg-footer__nav-full" role="navigation">
<section class="hsg-footer__nav-column ">
<input type="checkbox" id="hsg-footer-column-1" name="hsg-footer-column-1">
<label for="hsg-footer-column-1">免费工具</label>
<ul>
<li class="hsg-footer__nav-item" data-order="0"><a href="https://website.grader.com/?__hstc=20629287.e4e046660731447bf82affe18aa75831.1482962870986.1487962165415.1487964870240.141&__hssc=20629287.1.1487964870240&__hsfp=3218882972" data-order="0" data-linkorder="0">网站分级器</a></li>
<li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/make-my-persona" data-order="1" data-linkorder="1">做我的角色</a></li>
<li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/email-signature-generator" data-order="2" data-linkorder="2">电子邮件签名生成器</a></li>
<li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/blog-topic-generator" data-order="3" data-linkorder="3">博客创意生成器</a></li>
<li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/invoice-template-generator" data-order="4" data-linkorder="4">发票模板生成器</a></li>
<li class="hsg-footer__nav-item" data-order="5"><a href="https://www.hubspot.com/marketing-plan-template-generator" data-order="5" data-linkorder="5">营销计划生成器</a></li>
<li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/business-templates" data-order="6" data-linkorder="6">免费商业模板</a></li>
<li class="hsg-footer__nav-item" data-order="7"><a href="https://www.hubspot.com/industry-data" data-order="7" data-linkorder="7">行业基准数据</a></li>
<li class="hsg-footer__nav-item" data-order="8"><a href="https://www.hubspot.com/comparisons" data-order="8" data-linkorder="8">bob电竞官方下载软件比较库</a></li>
</ul>
</section>
</div>
<div class="hsg-footer__nav-full" role="navigation">
<section class="hsg-footer__nav-column ">
<input type="checkbox" id="hsg-footer-column-2" name="hsg-footer-column-2">
<label for="hsg-footer-column-2">bob全站app</label>
<ul>
<li class="hsg-footer__nav-item" data-order="0"><a href="https://www.hubspot.com/our-story" data-order="0" data-linkorder="0">关于我们</a></li>
<li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/careers" data-order="1" data-linkorder="1">事业</a></li>
<li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/company/management" data-order="2" data-linkorder="2">管理团队</a></li>
<li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/company/board-of-directors" data-order="3" data-linkorder="3">董事会</a></li>
<li class="hsg-footer__nav-item" data-order="4"><a href="https://ir.hubspot.com/?_ga=2.262843276.12874469.1592422655-430007000.1592422655" data-order="4" data-linkorder="4">投资者关系</a></li>
<li class="hsg-footer__nav-item" data-order="5"><a href="//www.eigoj.com" data-order="5" data-linkorder="5">博客</a></li>
<li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/company/contact" data-order="6" data-linkorder="6">联系我们</a></li>
</ul>
</section>
</div>
<div class="hsg-footer__nav-split" role="navigation">
<section class="hsg-footer__nav-column ">
<input type="checkbox" id="hsg-footer-column-3" name="hsg-footer-column-3">
<label for="hsg-footer-column-3">客户</label>
<ul>
<li class="hsg-footer__nav-item" data-order="0"><a href="https://help.hubspot.com/" data-order="0" data-linkorder="0">客户支持</a></li>
<li class="hsg-footer__nav-item" data-order="1"><a href="https://academy.hubspot.com/hubspot-user-groups" data-order="1" data-linkorder="1">加入本地用户组</a></li>
</ul>
</section>
<section class="hsg-footer__nav-column ">
<input type="checkbox" id="hsg-footer-column-4" name="hsg-footer-column-4">
<label for="hsg-footer-column-4">bob综合博彩下载</label>
<ul>
<li class="hsg-footer__nav-item" data-order="0"><a href="https://www.hubspot.com/partners" data-order="0" data-linkorder="0">所有合作伙伴计划</a></li>
<li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/partners/solutions" data-order="1" data-linkorder="1">解决方案合作伙伴计划</a></li>
<li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/partners/app" data-order="2" data-linkorder="2">应用程序合作伙伴计划</a></li>
<li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/startups/partners" data-order="3" data-linkorder="3">创业公司的HubSpot</a></li>
<li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/partners/affiliates" data-order="4" data-linkorder="4">联盟计划</a></li>
</ul>
</section>
</div>
</div>
</nav>
</div>
<section class="hsg-footer__contact-links">
<ul class="hsg-footer__social">
<li><a href="https://www.facebook.com/hubspot" target="_blank" class="hstc_facebook"><i class="hsg-icon hsg-icon-facebook"></i><span class="hidden-social">脸谱网</span></a></li>
<li><a href="https://www.instagram.com/hubspot" target="_blank" class="hstc_instagram"><i class="hsg-icon hsg-icon-instagram"></i><span class="hidden-social">一款图片分享应用</span></a></li>
<li><a href="https://youtube.com/user/HubSpot" target="_blank" class="hstc_youtube"><i class="hsg-icon hsg-icon-youtube"></i><span class="hidden-social">Youtube</span></a></li>
<li><a href="https://twitter.com/HubSpot" target="_blank" class="hstc_twitter"><i class="hsg-icon hsg-icon-twitter"></i><span class="hidden-social">啁啾</span></a></li>
<li><a href="https://www.linkedin.com/company/hubspot" target="_blank" class="hstc_linkedin"><i class="hsg-icon hsg-icon-linkedin"></i><span class="hidden-social">Linkedin</span></a></li>
<li><a href="https://medium.com/@HubSpot" target="_blank" class="hstc_medium"><i class="hsg-icon hsg-icon-medium"></i><span class="hidden-social">中等的</span></a></li>
</ul>
</section>
<section class="hsg-footer__bottom">
<div class="hsg-footer__apps">
<a class="hsg-footer__app" href="https://apps.apple.com/us/app/hubspot/id1107711722" aria-label="Link to App Store"><img class="hsg-deferred homepage-mobile-footer-apple" data-src="https://cdn2.hubspot.net/hubfs/53/app%20store%20high%20res.png" alt="应用商店"></a>
<a class="hsg-footer__app" href="https://play.google.com/store/apps/details?id=com.hubspot.android&hl=en_US" aria-label="Link to Google Play"><img class="hsg-deferred homepage-mobile-footer-google" data-src="https://cdn2.hubspot.net/hubfs/53/google%20play%20high%20res.png" alt="谷歌游戏"></a>
</div>
<div class="hsg-footer__logo" role="img">
<a href="https://www.hubspot.com" aria-label="HubSpot Home Logo"><img class="hsg-deferred" data-src="https://www.hubspot.com/hubfs/WBZ-1165%20Global%20Nav%20Redesign/Wordmark-White.svg" alt="轮毂点标志"></a>
<p>版权所有©2021 HubSpot，Inc。</p>
</div>
<div class="hsg-footer__copyright">
<ul>
<li><a href="https://legal.hubspot.com/legal-stuff">法律事务</a></li>
<li><a href="https://legal.hubspot.com/privacy-policy">隐私政策</a></li>
</ul>
</div>
</section>
</footer>
</div>
</div>
<!--end widget-span -->
</div>
<!--end row-->
</div>
<!--end row-wrapper -->
</div>
</div>
<!--end widget-span -->
</div>
<!--end row-->
</div>
<!--end row-wrapper -->
<div class="row-fluid-wrapper row-depth-1 row-number-2">
<div class="row-fluid ">
<div class="span12 widget-span widget-type-raw_html " style="" data-widget-type="raw_html" data-x="0" data-w="12">
<div class="cell-wrapper layout-widget-wrapper">
<span id="hs_cos_wrapper_module_1497301113455132" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html">
<!-- prev 4208 --></span>
</div>
<!--end layout-widget-wrapper -->
</div>
<!--end widget-span -->
</div>
<!--end row-->
</div>
<!--end row-wrapper -->
</div>
<!--end footer -->
<!--end footer wrapper -->
<!--[if lte IE 8]>
<script charset="utf-8" src="https://js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<!-- Start of HubSpot Analytics Code -->
<!-- End of HubSpot Analytics Code -->
<!-- HREFLANG MACRO -->
<!-- begin Convert -->
<!-- end Convert -->
<!-- wt-mktg-analytics script -->
<div id="fb-root"></div>
</body>
</html>