17.分钟剩余
下载以后

如果您正在为您的业务创建一个网站，那么您可能有一个很长的愿望清单。

您希望设计反映您品牌的外观和感受。您希望拥有满足访问者需求所需的功能，而不会超过预算。并且，您想创建响应性布局，以显示像按钮等元素，无论访问者使用的设备或浏览器都是始终如一的。

通过使用Bootstrap构建，您可以检查列表中的最后一个项目。Bootstrap是一种快速构建响应网站和移动第一Web项目的开源框架。因为它提供了一个可重用代码的集合，所以您不必从头开始构建一个站点。

理解为什么互联网上有2100万个网站使用Bootstrap，让我们仔细看看它是什么。

立即下载：免费介绍HTML和CSS指南

什么是bootstrap css？

Bootstrap CSS是用于开发响应和移动第一网站的领先CSS框架。这款免费和开源工具包附带了一个响应的网格系统，全局CSS设置，广泛的预制组件，包括按钮，NavBars和表单，以及可选的JavaScript插件，以加快开发过程。

虽然Bootstrap是一个用于与之开发的开源工具包HTML，CSS和JavaScript，它通常被称为CSS框架。

要理解其中的原因，您必须首先理解CSS对于具有各种技术经验的人来说通常更容易学习，并且在浏览器中比JavaScript更快。出于这些原因，Bootstrap开发人员使用CSS(和HTML.)而不是JavaScript。因此，Bootstrap中包含的CSS库比JavaScript库大得多。

由于Bootstrap使创建响应网站更容易和更快，因此对许多前端开发人员和初学者呼吁。但是，所有这些都不推荐。下面我们会看看为什么引导是如此流行，并且当它是理想的时候 - 而且它不理想。

为什么引导？

Bootstrap是许多前端开发人员的首选工具包。根据W3Techs，它在互联网上的所有网站中使用了22.1％。

有几个导致举动的人气的普及。首先，它是开源，因此可以自由下载和使用。它也完全可定制，并与所有现代浏览器兼容。然而，这是许多CSS框架的真实。

与其他开发工具包相比的引导程序是它的开发移动 - 第一。意思是，首先为移动设备（即最小屏幕尺寸）进行了优化的代码，然后缩放到更大的屏幕上。因此，使用Bootstrap CSS构建可确保您的网站支持所有设备的正确渲染和触摸缩放。

Bootstrap的另一个原因如此受欢迎的是它易于使用。它与模板捆绑在一起，用于排版，形式，按钮，下拉菜单，导航和其他接口组件。使用这些预样式模板，您可以添加丰富的功能用户体验在您的网站上，不必从头开始编写它们。

何时使用bootstrap

使用Bootstrap的原因有很多。我们已经在上面讨论了一些原因，下面让我们仔细看看这些原因。

你想要一个响应的网站。

使用Bootstrap构建响应式站点要比从头开始容易得多。Bootstrap带有响应式风格，如容器和媒体查询，以确保您的网站调整到视口。这意味着你不必担心你的访客是使用台式机、平板电脑还是移动设备。

2.你想节省时间。

你可以用Bootstrap快速构建你的网站。下载框架后，就可以开始使用基本模板，然后添加所需的组件。这些组件是基本的HTML元素，如表格、表单、按钮、图像和图标，它们使用基类进行样式化，并使用修改器类进行扩展。使用这些预先设计好的组件极大地限制了必须编写的自定义CSS的数量。

考虑Bootstrap按钮例如。基类.btn用于按钮的所有通用样式，如显示，填充，边框宽度。使用此类，您不必在样式表中重复这些CSS属性以格式化您添加的每一个按钮。

另一方面，像.btn-primary这样的修饰符类用于为按钮添加更具体的样式，比如按钮的颜色、背景颜色和border-color。这只是使用Bootstrap组件比从头编写要快得多的一个例子。

3.你熟悉HTML和CSS。

虽然Bootstrap确实简化了构建网站的过程，但您必须熟悉HTML和CSS来使用该框架。例如，了解CSS盒模型将在使用容器类和构建第一个Bootstrap网格时非常重要。

好消息是你只需要raybetapp编码的基本知识开始。

4.您有多人构建您的网站。

如果您有多个在网站上工作的合作者，那么一致性很重要。您不希望您的主页上的按钮看起来与着陆页上的按钮不同，或使用不同的按钮网站的排版在你的博客上比在你的网站上的任何地方都要多——等等。使用Bootstrap及其默认设置、实用工具类和组件元素可以帮助确保站点的前端看起来一致。

5.你想成为社区的一份子。

由于Bootstrap是开源的，所以它拥有一个全球开发人员和设计人员社区，致力于支持该框架。这些开发人员和设计人员修改和增强Bootstrap的代码库GitHub。他们也回答了问题推特那堆栈溢出，在一个专业的松弛房间。使用Bootstrap时，您可以利用此活动社区成为更好的引导用户。

什么时候不使用bootstrap

虽然使用这个CSS框架有很多好处，但也有一些原因不是使用Bootstrap也是如此。让我们仔细看看以下原因。

你想要一个唯一的网站。

由于Bootstrap带有预先设计好的内容、组件和模板，所以Bootstrap站点看起来都是开箱即用的。事实上，Bootstrap也因此受到指责为什么今天的网站看起来都一样。

您可以自定义引导站点，但它会花费时间。另外，如果您必须覆盖过多的默认样式，那么它可能在第一个位置创建自己的样式表可能会更有意义。

你想要一个主题。

Bootstrap框架不是主题 - 尽管有可用的引导主题。让我们将框架比较到一个WordPress主题例如，。

当你安装并激活WordPress主题，它会改变整个网站的外观。当你下载Bootstrap框架时，网站外观的某些方面会自动改变，比如排版。但你仍然需要编写HTML，插入预设的布局，颜色，和组件，你需要组成你的网站。

3.您想要一个快速加载网站。

引导可以对网站的速度产生负面影响。为什么？因为它很重 - 不是KB，究竟，但在普通用户的方式方面没有使用。

Bootstrap小于500KB。您还可以采取几个步骤来减少重量并减轻其对负荷时间的影响。例如，您可以使用缩小的CSS和JavaScript文件，或者您只能下载CSS文件，而不是JavaScript in。

但即使通过这些步骤，Bootstrap仍然可能太重，因为您需要的东西。大多数用户不需要引导携带的所有组件，实用程序和插件，因此即使它们未使用，也可能会在您的网站上重视。

4.您没有时间通过​​引导文档学习和读取。

引导被认为是一个易于使用的平台。它为其框架的每个部分提供了广泛的文档，从其布局到内容到组件等等。这意味着几乎任何人都可以学习Bootstrap - 它也意味着它需要时间来阅读文档并学习框架。如果您正在寻找尽快建立一个网站，那么Bootstrap可能不会像其他解决方案一样理想，如网站建设者。

5.您想要掌握HTML和CSS。

使用Bootstrap提供的预先设计的组件和模板可以使构建一个网站更容易、更快——但它也会阻碍你作为一个程序员的成长。使用Bootstrap创建就像使用计算器做代数:你可以在完全不了解如何得到它的情况下最终得到你想要的结果。这就是为什么花时间创建您自己的自定义组件是好的，即使您也学习和使用Bootstrap。

现在我们了解Bootstrap CSS是什么，谁应该使用它，让我们简要讨论你拥有的不同下载选项。

如何下载Bootstrap CSS

在我们走过下载引导过程之前，重要的是要注意您可以通过远程加载Bootstrapbootstrapcdn.或者jsdelivr.而不是下载。这将要求访问者有一个互联网连接访问您的网站，并将要求您张贴更多的代码，然而。因此，下载Bootstrap是更受欢迎的选择。

有两种不同形式的引导可供下载。每个版本 - 预编译和源代码版本 - 取决于它们是否优先考虑易用或灵活性。让我们仔细看看下面。

预编译的引导

预编译的版本是最基本的引导形式。您将在几乎任何Web项目中下载易于删除的预编译的CSS和JS文件以及缩小的CSS和JS文件。

下载后，您将解压缩压缩文件夹并查看以下结构。

Bootstrap /

├──CSS/

│├──botstrap-grid.css

│├──botstrap-grid.css.map.

│├──botstrap-grid.min.css

│├──botstrap-grid.min.css.map.

│├──botstrap-reboot.css

│├──botstrap-reboot.css.map.

│├──bootstrap-reboot.min.css

│├──botstrap-reboot.min.css.map.

│├──botstrap.css.

│├──botstrap.css.map.

│├──botstrap.min.css.

│└──bootstrap.min.css.map

└──js /

├──bootstrap.bundle.js

├──botstrap.bundle.js.js.map.

├──botstrap.bundle.min.js.

├──bootstrap.bundle.min.js.map

├──botstrap.js.

├──bootstrap.js.map

├──bootstrap.min.js

└──bootstrap.min.js.map

使用编译的版本比源代码版本更容易和更快地使用 - 但它更难以使用定制。您想要对预调整元素或布局的任何更改必须应用于当前样式。

如果你想定制Bootstrap中包含的CSS和JS文件，那么你最好下载源代码版本。

引导源代码

源代码版本包括预编译的CSS，JS和字体资产以及CSS，JS和图标字体的源文件。

如果您选择下载Bootstrap源代码，那么您将解压缩该文件夹并看到以下结构。

Bootstrap /

├──dist /

│├──css /

│└──js /

├──网站/

│└──docs/

│└──4.6/

│└──/例子

├──js /

└──SCSS/

Dist /文件夹包含上面预编译部分中列出的所有内容。docs /文件夹包含引导文档的源代码和引导程序使用的示例。JS /文件夹包含引导js和bootstrap css的scss /文件夹的源代码。

由于此版本的Bootstrap要求您拥有autoprefixer.和SASS编译器，设置过程比设置预编译版本更长，更困难。然而，一旦设置好，您就可以以任何您想要的方式更改和定制文件。

每个版本的Bootstrap都是不同用例的理想选择，但由于预编译的Bootstrap更简单，使用速度更快，我们将专注于该帖子其余部分的该版本。

下面让我们看看如何使用预编译的引导raptap来构建一个网站。

如何使用bootstrap css

要使用Bootstrap CSS，您需要将其集成到您的开发环境中。为此，您只需在计算机上创建一个文件夹。在该文件夹中，保存编译的CSS和JS文件以及您将加载Bootstrap的新HTML文件。然后，您可以使用Bootstrap模板将接口元素添加到页面。

让我们逐步分解此过程。

加载Bootstrap CSS和JS

首先，在您的计算机上创建名为“Bootstrap”的文件夹。将编译的CSS文件从Bootstrap下载移动到该文件夹​​中。如果您还使用了Bootstrap的JS部分，请将编译的js文件移动到文件夹中。

在同一文件夹中，创建另一个文件并调用IT index.html。使用您选择的文本编辑器打开此文件，如记事本++。你可以复制和粘贴Bootstrap官方网站的基本HTML模板进入文件或代码从头开始。

下面是从头开始编码的HTML页面的示例。

<！DOCTYPE html >
< html lang =“en”>
Bootstrap Tutorial Sample Page</p><p><meta charset =“UTF-8”></p><p><meta name =“视口”content =“width = device-width，initial-scale = 1”></p><p></p><p></ head></p><p><body></p><p><br><br></p><p>< /身体></p><p></ html></p></code><p><code class="html"></code></p></pre><p></p><p>现在可以将Bootstrap CSS加载到项目中了。只需将以下代码添加到index.html文件的头部，就在</head>标记之前。</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><链接rel =“stylesheet”href =“bootstrap / css / bootstrap.min.css”></p></code><p><code class="html"></code></p></pre><p></p><p>如果您计划只使用CSS部分Bootstrap，那么您都设置了。</p><p>如果您计划使用JS部分，那么您需要添加两行代码。组件包括警报，切换按钮，<a href="//www.emcdepot.com/website/bootstrap-carousel-css" rel="noopener" target="_blank">旋转木马</a>，下拉框需要使用JavaScript才能运行，所以如果您想向站点添加任何这些元素，请继续执行这些步骤。</p><p>首先，您需要加载jQuery库。这样做，<a href="https://jquery.com/download/" rel="noopener" target="_blank">下载jquery.</a>到你的电脑上。解压缩文件并将其保存在“Bootstrap”文件夹中以及编译的CSS和JS文件和索引.HTML文件中。</p><p>然后在index.html文件中添加以下代码行。这一次，您将把它添加到页脚，而不是头部，就在<body>标记之后。</p><p></p><pre class="syntax"><code class="js"><p></p><p><span style="font-size: 1.125rem; font-weight: 400;"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity=" sha84 -q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> . txt</span></p></code><p><code class="js"></code></p></pre><p></p><p>要加载Bootstrap JavaScript，请在​​调用jQuery后立即添加以下代码行。</p><p></p><pre class="syntax"><code class="js"><p></p><p></p><p><script src =“bootstrap / js / bootstrap.min.js”> </ script></p></code><p><code class="js"></code></p></pre><p></p><p>完成这些步骤后，这就是您的index.html文件应该如下所示：</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><！DOCTYPE html ></p><p>< html lang =“en”></p><p><head></p><p></p><p><title>Bootstrap Tutorial Sample Page</p><p><meta charset =“UTF-8”></p><p><meta name =“视口”content =“width = device-width，initial-scale = 1”></p><p><链接rel =“stylesheet”href =“bootstrap / css / bootstrap.min.css”></p><p></p><p></ head></p><p><body></p><p></p><p></p><p><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity=" sha84 -q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> . txt</p><p>< /身体></p><p></ html></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>保存文件夹后，您将拥有一个类似的Bootstrap布局，看起来像这样：</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello,%20world!.png?width=650&name=Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello,%20world!.png" alt="基本引导布局，标题为Hello, world!" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png?width=325&name=Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png 325w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png?width=650&name=Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png 650w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png?width=975&name=Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png 975w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png?width=1300&name=Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png 1300w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png?width=1625&name=Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png 1625w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png?width=1950&name=Basic%20Bootstrap%20layout%20with%20heading%20that%20says%20Hello%2C%20world!.png 1950w" sizes="(max-width: 650px) 100vw, 650px">
               </div><p>这现在可以作为你网站的主页。</p><h3 style="font-weight: normal;">构建一个基本模板</h3><p>要继续构建此页面，您可以添加导航栏，标题，页脚，Glyphicon字体，<a href="//www.emcdepot.com/website/what-is-a-favicon" rel="noopener" target="_blank">Favicon.</a>，以及其他接口组件。让我们一步一步地添加一个组件——导航条，以便您了解如何使用Bootstrap。</p><p>说你想<a href="//www.emcdepot.com/website/bootstrap-navbar" rel="noopener" target="_blank">添加引导导航条</a>主页看起来是这样的:<a href="https://getbootstrap.com/docs/4.6/components/navbar/" rel="noopener" target="_blank" style="font-style: italic;"></a></p><p><img src="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png?width=650&name=Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png" alt="基本引导布局与暗导航栏，带有搜索表单和切换按钮" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png?width=325&name=Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png 325w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png?width=650&name=Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png 650w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png?width=975&name=Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png 975w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png?width=1300&name=Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png 1300w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png?width=1625&name=Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png 1625w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png?width=1950&name=Basic%20Bootstrap%20layout%20with%20dark%20navbar%20with%20search%20form%20and%20toggle%20button.png 1950w" sizes="(max-width: 650px) 100vw, 650px">现在，一个前景可以到达您的主页，并立即了解有关贵公司的更多信息，您的产品功能以及您的定价 - 或者他们可以搜索别的东西。raybet电子竞技</p><p>下面是此载体示例的代码。</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p>< navbar class="navbar -expand-lg navbar-dark bg-dark"></p><p>< class = " navbar-brand " href = " # " >导航条< / ></p><p><按钮类=“navbar-toggler”类型=“按钮”数据 -  toggle =“折叠”数据 - 目标=“#navbartogglerdemo02”aria-controls =“navbartogglerdemo02”aria-aldended =“false”aria-label =“切换导航“></p><p><span class =“navbar-toggler-icon”> </ span></p><p>< /按钮></p><p></p><p><div类=“崩溃invbar-collaps”id =“navbarnav”></p><p><ul class="navbar-nav mr-auto mt-2 mt-lg-0"></p><p><Li Class =“Nav-Item Active”></p><p><a class="nav-link" href="#"> home <span class =“sc-sply”>（current）</ span> </a></p><p>李< / ></p><p><Li Class =“Nav-Item”></p><p><a class="nav-link" href="#"> </a></p><p>李< / ></p><p><Li Class =“Nav-Item”></p><p><a class="nav-link" href="#"> pricing </a></p><p>李< / ></p><p><Li Class =“Nav-Item”></p><p><a class="nav-link" href="#">关于</a></p><p>李< / ></p><p></ UL></p><p><form class =“form-inline my-2 my-lg-0”></p><p><输入类=“form-control mr-sm-2”类型=“搜索”占位符=“搜索”aria-label =“search”></p><p><button class="btn btn-outline-success my-2 my-sm-0" type="submit"></p><p></ form></p><p></ div></p><p></ NAV></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>让我们将这个代码片段分解为它支持的子组件:配色方案、品牌、切换器、导航和表单。</p><h4 style="font-weight: normal;">配色方案</h4><p>仔细看看第一行代码。看<em>Navbar-Dark BG-Dark</em>还是那个呼吁黑暗的背景颜色。如果您更喜欢浅色方案，请更换使用Navbar-Light BG-Light。它看起来像以下内容一样：</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png?width=650&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png" alt="带有浅色方案的Bootstrap导航栏的基本引导布局" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png?width=325&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png 325w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png?width=650&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png 650w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png?width=975&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png 975w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png?width=1300&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png 1300w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png?width=1625&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png 1625w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png?width=1950&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20Navbar%20with%20light%20color%20scheme.png 1950w" sizes="(max-width: 650px) 100vw, 650px">或者你可以选择其中一个<a href="https://getbootstrap.com/docs/4.6/utilities/colors/" rel="noopener" target="_blank">默认颜色</a>。</ div><h4 style="font-weight: normal;">品牌</h4><p>在第二行代码中，看<em>纳瓦巴品牌</em>还是指定您的公司，产品或项目名称。raybet电子竞技只需用正确的名称替换“纳瓦栏”标记。</p><h4 style="font-weight: normal;">toggler.</h4><p>接下来，您将看到一大块代码，表示切换按钮。此按钮隐藏在桌面上。当必须折叠导航栏的内容以适合较小的屏幕时，它仅在移动时出现。</p><p>在上面的代码中<em>Navbar-toggler.</em>定义样式，因此品牌名称在移动屏幕左侧显示右侧的切换按钮。单击按钮将显示折叠内容，如下所示。</p><p><img src="//www.emcdepot.com/hs-fs/hubfs/Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png?width=650&name=Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png" alt="Bootstrap Navbar使用Toggle按钮在移动上显示" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png?width=325&name=Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png 325w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png?width=650&name=Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png 650w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png?width=975&name=Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png 975w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png?width=1300&name=Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png 1300w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png?width=1625&name=Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png 1625w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png?width=1950&name=Bootstrap%20Navbar%20with%20toggle%20button%20displayed%20on%20mobile.png 1950w" sizes="(max-width: 650px) 100vw, 650px"></p><h4 style="font-weight: normal;">导航</h4><p>在下一点代码中，看<em>Navbar-Nav.</em>还是使用此子组件，您可以在导航栏中添加链接。您只需要包装相应的修改器类（<em>nav-link</em>)环绕你想要超链接的单词。</p><h4 style="font-weight: normal;">形式</h4><p>您还可以添加一个表单，如搜索框，在您的导航栏与<em>形式内联</em>子组件。您可以在上面的模板底部看到这一点代码。</p><p>既然您知道如何使用品牌，导航等添加Bootstrap的响应导航标头，您可以遵循类似的过程以将其他元素添加到页面。让我们看看下面的一些人。</p><a id="bootstrap-css-examples" data-hs-anchor="true"></a><h2 style="font-weight: normal;">Bootstrap CSS示例</h2><p>Bootstrap提供HTML和CSS模板，或“示例”，以帮助您快速开始构建您的网站。虽然Bootstrap源代码具有更多高级示例，但具有自定义组件和添加到框架上的布局，我们将专注于使用预编译和源代码版本中的内置组件的示例。</p><p>我们已经提到了上面的一些例子，包括Navbar。下面我们将进一步研究其他一些例子。</p><h3 style="font-weight: normal;">Bootstrap网格</h3><p><a href="//www.emcdepot.com/website/css-grid?_ga=2.250809862.1607566148.1585586557-1753121421.1568128919" rel="noopener" target="_blank">CSS网格系统</a>用于通过包含内容的一系列行和列创建页面布局。在引导网格系统中，行必须适当地放置在.container(固定宽度)或.container-fluid(全宽度)中<a href="//www.emcdepot.com/website/css-position?_ga=2.250809862.1607566148.1585586557-1753121421.1568128919" rel="noopener" target="_blank">定位</a>和<a href="//www.emcdepot.com/website/css-padding?_ga=2.253887240.1607566148.1585586557-1753121421.1568128919" rel="noopener" target="_blank">填充</a>。这些行用于创建水平组。</p><p>由于Bootstrap是一个12列系统，因此您必须指定要跨越的12个可用列的数量。假设您想创建三个相等宽度列，这些列以任何大小的设备跨设备居中。然后，您需要三个“四十二个”列，由.col-4类表示。下面是完整的网格示例。</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p>< div class = "容器" ></p><p>< div class = "行" ></p><p><div类=“col-4”></p><p>三列之一</p><p></ div></p><p><div类=“col-4”></p><p>三列之一</p><p></ div></p><p><div类=“col-4”></p><p>三列之一</p><p></ div></p><p></ div></p><p></ div></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>在你的网站前端，它在移动和桌面上看起来是这样的。</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png?width=650&name=Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png" alt="Bootstrap网格，具有三个方面ridgeL列" width="650" loading="lazy" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png?width=325&name=Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png 325w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png?width=650&name=Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png 650w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png?width=975&name=Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png 975w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png?width=1300&name=Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png 1300w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png?width=1625&name=Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png 1625w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png?width=1950&name=Bootstrap%20grid%20with%20three%20equa-widthl%20columns.png 1950w" sizes="(max-width: 650px) 100vw, 650px">
               </div><p>但是，如果你想要网格在桌面上出现一种方式以及移动到移动的方式怎么样？假设您希望列在桌面上并排出现，但在移动设备上堆叠在一起。</p><p>然后您可以指定以“small”为前缀的列的宽度。这将使列100%宽，直到小断点(576px)。下面是完整的网格示例。</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p>< div class = "容器" ></p><p>< div class = "行" ></p><p>< div class = " col-sm-4”></p><p>三列之一</p><p></ div></p><p>< div class = " col-sm-4”></p><p>三列之一</p><p></ div></p><p>< div class = " col-sm-4”></p><p>三列之一</p><p></ div></p><p></ div></p><p></ div></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>下面的视频展示了它在桌面和移动设备上的外观。</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif?width=650&name=Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif" alt="具有三列的引导网格在桌面和移动式上以不同的方式显示不同的" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif?width=325&name=Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif 325w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif?width=650&name=Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif 650w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif?width=975&name=Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif 975w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif?width=1300&name=Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif 1300w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif?width=1625&name=Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif 1625w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif?width=1950&name=Bootstrap%20grid%20with%20three%20columns%20displays%20differently%20on%20desktop%20and%20on%20mobile-min.gif 1950w" sizes="(max-width: 650px) 100vw, 650px">
               </div><p style="font-size: 13px; text-align: center;"><a href="https://getbootstrap.com/docs/4.6/layout/grid/" rel="noopener" target="_blank" style="font-style: italic;">图像源码</a></p><p>还有很多选项可供选择。使用Bootstrap的网格系统，您可以创建跨多行等宽列。您可以设置一列的宽度，并让同级列自动调整其大小。您可以根据内容的自然宽度来设置列的大小——甚至更多。</p><h3 style="font-weight: normal;">引导警报</h3><p>您可以将警报添加到Bootstrap站点以向您的访客提供重要消息。Bootstrap为警报消息提供八种默认颜色。假设您要添加一个警报，以指示访问者已成功创建了一个帐户。然后，您可以使用下面的示例。</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><div类=“警报警报 - 成功”角色=“警报”></p><p>一个简单的成功警报 - 检查出来！</p><p></ div></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>它将在您网站的前端看起来像这样。</p><p><img src="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png?width=650&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png" alt="基本Bootstrap布局与Bootstrap成功警报" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png?width=325&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png 325w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png?width=650&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png 650w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png?width=975&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png 975w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png?width=1300&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png 1300w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png?width=1625&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png 1625w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png?width=1950&name=Basic%20Bootstrap%20layout%20with%20Bootstrap%20success%20alert.png 1950w" sizes="(max-width: 650px) 100vw, 650px"></p><p>如果你已经将编译好的JS加载到你的站点上，你也可以<a href="https://getbootstrap.com/docs/4.6/components/alerts/" rel="noopener" target="_blank">添加解除按钮</a>让访客在阅读它后关闭警报。</p><h3 style="font-weight: normal;">启动按钮</h3><p>使用Bootstrap，您可以从多个预定义的按钮样式中选择快速<a href="//www.emcdepot.com/website/bootstrap-button" rel="noopener" target="_blank">将按钮添加到启动站点上的登录页面或表单</a>。让我们说要向您的网站添加“信息”按钮。以下是示例以及它将如何看待前端。</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><按钮类型=“按钮”类=“BTN BTN-INFO”> INFO </ BUTTON></p><p></p></code><p><code class="html"></code></p></pre><p></p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png?width=650&name=Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png" alt="带标题和信息按钮的基本引导布局" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png?width=325&name=Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png 325w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png?width=650&name=Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png 650w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png?width=975&name=Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png 975w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png?width=1300&name=Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png 1300w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png?width=1625&name=Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png 1625w, //www.emcdepot.com/hs-fs/hubfs/Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png?width=1950&name=Basic%20Bootstrap%20layout%20with%20heading%20and%20Info%20button.png 1950w" sizes="(max-width: 650px) 100vw, 650px">
               </div><p>虽然.btn类旨在与<按钮>元素一起使用，但您也可以在其他元素上使用它们。例如，如果您想将链接转换为按钮，那么您可以使用以下代码：</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><a href="#" class="btn btn-info" role="button">Link button </a> . txt</p><p></p></code><p><code class="html"></code></p></pre><p></p><p>假设我想向我的Bootstrap网站添加一个按钮，鼓励访问者<a href="//www.emcdepot.com/website/css-animation" rel="noopener" target="_blank">了解更多关于CSS动画</a>例如，。然后我可以将按钮链接到主题上的博客文章。这将是代码：</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><a href="https：//www.emcdepot.com/website/csss-animation" class="btn btn-info"角色="button">了解更多</a></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>这里是它在网站上运行的方式：</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif?width=650&name=Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif" alt="访问者点击Bootstrap按钮，链接被重定向到链接文章" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif?width=325&name=Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif 325w, //www.emcdepot.com/hs-fs/hubfs/Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif?width=650&name=Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif 650w, //www.emcdepot.com/hs-fs/hubfs/Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif?width=975&name=Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif 975w, //www.emcdepot.com/hs-fs/hubfs/Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif?width=1300&name=Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif 1300w, //www.emcdepot.com/hs-fs/hubfs/Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif?width=1625&name=Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif 1625w, //www.emcdepot.com/hs-fs/hubfs/Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif?width=1950&name=Visitor%20clicks%20on%20Bootstrap%20button%20with%20link%20is%20redirected%20to%20linked%20article.gif 1950w" sizes="(max-width: 650px) 100vw, 650px">
               </div><p style="font-size: 13px; text-align: center;"><a href="https://codepen.io/hubspot/pen/jOBNBdO" rel="noopener" target="_blank" style="font-style: italic;">图像源码</a></p><p>您可以通过添加相应的修改器类来更改按钮的颜色，大小和其他方面。</p><h3 style="font-weight: normal;">靴子转盘</h3><p><span>旋转木马是一个幻灯片，用于呈现一系列内容，无论是图像，文本还是自定义标记。在Web Design中，您可以在没有JavaScript的情况下创建纯CSS Carousel  - 或者您可以使用Bootstrap创建一个。在Bootstrap中，CSS 3D变换和一些JavaScript建造了旋转板。使用Bootstrap示例，如下面的示例，可以显着加速编码过程。</span></p><p><span>此示例是旋转板，仅具有幻灯片和前一个和下一个控件。</span></p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><div id =“simplecarouselexample”类=“旋转木马幻灯片”数据ride =“carousel”></p><p><div类=“carousel-inner”></p><p><div类=“carousel-item活动”></p><p><img src =“...”类=“d-block w-100”alt =“...”></p><p></ div></p><p><div类=“carousel-item”></p><p><img src =“...”类=“d-block w-100”alt =“...”></p><p></ div></p><p><div类=“carousel-item”></p><p><img src =“...”类=“d-block w-100”alt =“...”></p><p></ div></p><p></ div></p><p><a class="carousel-control-prev" href="#carouselexamplecontrols"角色="button" data -slide="prev"></p><p>< span class = " carousel-control-prev-icon“aria-hidden = " true " > < / span ></p><p><span class =“sr-spone”>以前的</ span></p><p></a></p><p><a class="carousel-control-next" href="#carouselexamplecontrols"角色="button" data -slide="next"></p><p><span class =“carousel-control-next-icon”aria-hidden =“true”> </ span></p><p><span class =“st-soct”>下一个</ span></p><p></a></p><p></ div></p><p><br><br></p></code><p><code class="html"></code></p></pre><p></p><p>以下是它将如何在网站的前端看：</p><p><img src="//www.emcdepot.com/hs-fs/hubfs/Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif?width=650&name=Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif" alt="引导CSS例子的一个旋转木马，只有幻灯片和前一个和下一个控件" width="650" style="width: 650px; margin-left: auto; margin-right: auto; display: block;" srcset="//www.emcdepot.com/hs-fs/hubfs/Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif?width=325&name=Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif 325w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif?width=650&name=Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif 650w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif?width=975&name=Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif 975w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif?width=1300&name=Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif 1300w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif?width=1625&name=Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif 1625w, //www.emcdepot.com/hs-fs/hubfs/Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif?width=1950&name=Bootstrap%20CSS%20example%20of%20a%20carousel%20with%20slides%20only%20and%20the%20previous%20and%20next%20controls.gif 1950w" sizes="(max-width: 650px) 100vw, 650px"><em>您可以通过逐步介绍开发过程<a href="//www.emcdepot.com/website/bootstrap-carousel-css" rel="noopener" target="_blank">如何在Bootstrap CSS中为您的网站创建Carousel滑块</a>。</em></p><p>一旦您对网页的布局满意，您可能希望通过更改颜色来自定义这些和其他引导组件的外观，<a href="//www.emcdepot.com/website/css-font-size" rel="noopener" target="_blank">字体大小</a>、边框或其他现有的引导样式。为此，您可以覆盖现有的样式。让我们看看下面是如何做到的。</p><a id="how-to-override-bootstrap-css" data-hs-anchor="true"></a>
               <div class="hsg-featured-snippet">
                <div class="hsg-featured-snippet__wrapper">
                 <h2>如何覆盖引导CSS</h2>
                 <div class="hsg-featured-snippet__wrapper--content" data-type="paragraph">
                  <p>更改Bootstrap CSS的默认样式很简单。使用文本编辑器创建文件并调用main.css。在这里，添加要进行的任何自定义CSS更改。完成后，将此文件保存在与Bootstrap CSS和JS文件和index.html文件相同的文件夹中。然后，您只需要将一行代码添加到index.html文件的标题中。</p>
                 </div>
                </div>
               </div><p>还记得你是如何在index.html文件的头文件中添加以下代码来在你的站点上加载Bootstrap CSS的吗?</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><链接rel =“stylesheet”href =“bootstrap / css / bootstrap.min.css”></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>在此之下，粘贴以下代码：</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><链接rel =“stylesheet”类型=“text / css”href =“custom.css”></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>这将确保无论你在custom.css文件中添加什么CSS，都会覆盖index.html文件中的默认样式。</p><p>index.html文件的结构现在应该如下所示：</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><！DOCTYPE html ></p><p>< html lang =“en”></p><p><head></p><p></p><p><title>Bootstrap Tutorial Sample Page</p><p><meta charset =“UTF-8”></p><p><meta name =“视口”content =“width = device-width，initial-scale = 1”></p><p><链接rel =“stylesheet”href =“bootstrap / css / bootstrap.min.css”></p><p><链接rel =“stylesheet”类型=“text / css”href =“custom.css”></p><p></p><p></ head></p><p><body></p><p><br><br></p><p>< script src = " jquery-3.3.1.min.js " > < /脚本></p><p><script src =“bootstrap / js / bootstrap.min.js”> </ script></p><p>< /身体></p><p></ html></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>重要的是要注意，这一覆盖默认CSS样式的过程可以为Bootstrap和源代码版本的预编译版本工作。然而，随后，如果您有Sass的体验，您也可以直接编辑Bootstrap Sass源代码。</p><p>由于许多用户不知道Sass，让我们来看看编辑预编译的引导的示例。</p><p>我们将从一个由开发人员和技术作家创建的简单布局开始<a href="https://www.taniarascia.com/me/" rel="noopener" target="_blank">塔尼亚Rascia</a>。从Bootstrap提供的基本HTML模板，使用框架中捆绑在一起的模板添加导航栏，Jumbotron标题，网格和Glyphicons。结果如下所示。</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png?width=600&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png" alt="带导航栏、大屏幕标题、网格和符号的引导模板" width="600" style="width: 600px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png?width=300&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png 300w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png?width=600&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png 600w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png?width=900&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png 900w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png?width=1200&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png 1200w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png?width=1500&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png 1500w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png?width=1800&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-7.png 1800w" sizes="(max-width: 600px) 100vw, 600px">
               </div><p style="font-size: 13px; text-align: center;"><a href="https://www.taniarascia.com/what-is-bootstrap-and-how-do-i-use-it/" rel="noopener" target="_blank" style="font-style: italic;">图像源码</a></p><p>该页面是干净的，响应和跨浏览器友好，而是Austere。为了个性化设计，Rascia将自定义CSS添加到Custom.css文件。通过使用<a href="//www.emcdepot.com/website/css-selectors" rel="noopener" target="_blank">CSS选择器</a>，她能够对页面上的HTML元素应用独特的样式属性。</p><p>首先，她想删除导航栏和jumbotron标题之间的空白空间。因此，她使用类选择器“vavbar”将以下代码添加到文件中。</p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>.Navbar {</p><p>边缘底：0;</p><p>｝</p><p></p></code><p><code class="css"></code></p></pre><p></p><p>她还想将Jumbotron的颜色改为绿色和字体的颜色和居中的颜色。因此，她使用类选择器“Jumbotron”将以下代码添加到文件中。</p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>jumbotron {</p><p>背景：＃27A967;</p><p>颜色:白色;</p><p>text-align:中心;</p><p>｝</p><p>.jumbotron p {</p><p>颜色:白色;</p><p>字体大小：26px;</p><p>｝</p><p></p></code><p><code class="css"></code></p></pre><p></p><p>她还做了其他几项改变。我将复制并粘贴下面她的custom.css文件的内容，而不是逐个讨论它们。您会注意到使用了类型选择器和类选择器的混合。</p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>身体{</p><p>背景：＃3e4649;</p><p>颜色：＃f7f7f7;</p><p>Font-Family：'Montserrat'，Sans-Serif;</p><p>｝</p><p>h1,</p><p>H2 {</p><p>粗细:大胆的;</p><p>｝</p><p>p {</p><p>字体大小：16px;</p><p>颜色：#cdcdcd;</p><p>｝</p><p>.Navbar {</p><p>边缘底：0;</p><p>｝</p><p>jumbotron {</p><p>背景：＃27A967;</p><p>颜色:白色;</p><p>text-align:中心;</p><p>｝</p><p>.jumbotron p {</p><p>颜色:白色;</p><p>字体大小：26px;</p><p>｝</p><p>.navbar-inverse {</p><p>背景：＃2e2f31;</p><p>边界： 0：</p><p>｝</p><p>.dropdown-菜单{</p><p>背景：＃2e2f31;</p><p>边界半径：0;</p><p>边界： 0：</p><p>｝</p><p>.navbar-enverse .navbar-nav li a {</p><p>颜色：＃f7f7f7;</p><p>字体大小：16px;</p><p>｝</p><p>.navbar-enverse .Navbar-Nav Li A：悬停{</p><p>背景：＃27A967;</p><p>｝</p><p>.navbar-nav .下拉菜单</p><p>背景：＃2c463c;</p><p>｝</p><p>.下拉菜单</p><p>填充：10px;</p><p>｝</p><p>.btn-miginer {</p><p>颜色：#fff;</p><p>背景颜色：透明;</p><p>边界颜色：白色;</p><p>margin-bottom: 5 px;</p><p>｝</p><p>.btn-primary:{徘徊</p><p>颜色：＃27A967;</p><p>背景颜色：白色;</p><p>边界颜色：白色;</p><p>｝</p><p>glyphicon大{</p><p>字体大小：100px;</p><p>｝</p><p>.call-to-action {</p><p>text-align:中心;</p><p>｝</p><p>.call-to-action p {</p><p>边缘：30px;</p><p>字体类型:无衬线;</p><p>｝</p><p><br><br></p></code><p><code class="css"></code></p></pre><p></p><p>通过这些改变，她完全改变了Bootstrap网站。看看下面。</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png?width=600&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png" alt="带有导航栏，Jumbotron标题，网格和Glyphicons的引导模板，具有自定义CSS覆盖默认样式" width="600" style="width: 600px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png?width=300&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png 300w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png?width=600&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png 600w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png?width=900&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png 900w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png?width=1200&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png 1200w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png?width=1500&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png 1500w, //www.emcdepot.com/hs-fs/hubfs/The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png?width=1800&name=The%20Ultimate%20Guide%20to%20Bootstrap%20CSS-3.png 1800w" sizes="(max-width: 600px) 100vw, 600px">
               </div><p style="font-size: 13px; text-align: center;"><a href="https://www.taniarascia.com/what-is-bootstrap-and-how-do-i-use-it/" rel="noopener" target="_blank" style="font-style: italic;">图像源码</a></p><p>使用CSS覆盖，自定义选项几乎是具有引导程序的无限。你可以浏览<a href="https://expo.getbootstrap.com/" rel="noopener" target="_blank">Bootstrap Expo.</a>看看一些最具创造性的引导使用。</p><h2 style="font-weight: normal;">构建您的响应网站</h2><p>Bootstrap是一个强大的建筑和自定义移动友好网站的前端框架。使用Bootstrap，您不必从头开始<em>或者</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"><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><span class="s1"></span></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"><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></span>
              <p></p>
              <p class="post-content__publish-date">最初发布于2021年5月5日上午7:00:00，更新于2021年5月5日</p>
              <div class="post-content__topic-container blog-postPage-topic">
               <p>主题：</p>
               <a href="//www.emcdepot.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://cdn2.hubspot.net/hubfs/53/Bootstrap%20site%20owner%20creating%20and%20styling%20buttons.jpg -->
            <article class="blog-card blog-card--one-third ">
             <figure>
              <a href="//www.emcdepot.com/website/bootstrap-button"><img src="//www.emcdepot.com/hubfs/Bootstrap%20site%20owner%20creating%20and%20styling%20buttons.jpg" alt="引导按钮:类和样式解释“></a></figure>
             <div class="blog-card__content">
              <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/bootstrap-button">引导按钮:类和样式解释</a></h3>
              <div class="blog-card__meta">
               <a href="//www.emcdepot.com/website" class="blog-card__blog-link">dota2雷竞技
</a><a href="//www.emcdepot.com/website/bootstrap-button" class="blog-card__read-time">|11分钟阅读</a></ div></ div></article>
            <!-- hasFeaturedImage: https://cdn2.hubspot.net/hubfs/53/GettyImages-873597792.jpeg -->
            <article class="blog-card blog-card--one-third ">
             <figure>
              <a href="//www.emcdepot.com/website/css-grid"><img src="//www.emcdepot.com/hubfs/GettyImages-873597792.jpeg" alt="如何在您的网站上创建完美的CSS网格[示例布局]“></a></figure>
             <div class="blog-card__content">
              <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/css-grid">如何在您的网站上创建完美的CSS网格[示例布局]</a></h3>
              <div class="blog-card__meta">
               <a href="//www.emcdepot.com/website" class="blog-card__blog-link">dota2雷竞技
</a><a href="//www.emcdepot.com/website/css-grid" class="blog-card__read-time">| 16分钟读数</a></ div></ div></article>
            <!-- hasFeaturedImage: https://cdn2.hubspot.net/hubfs/53/Site%20owner%20customizing%20HTML%20element%20with%20CSS%20ID%20selector.jpg -->
            <article class="blog-card blog-card--one-third ">
             <figure>
              <a href="//www.emcdepot.com/website/css-id"><img src="//www.emcdepot.com/hubfs/Site%20owner%20customizing%20HTML%20element%20with%20CSS%20ID%20selector.jpg" alt="您需要了解的一切关于CSS中的ID“></a></figure>
             <div class="blog-card__content">
              <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/css-id">您需要了解的一切关于CSS中的ID</a></h3>
              <div class="blog-card__meta">
               <a href="//www.emcdepot.com/website" class="blog-card__blog-link">dota2雷竞技
</a><a href="//www.emcdepot.com/website/css-id" class="blog-card__read-time">|4分钟阅读</a></ div></ div></article>
           </section>
          </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软件雷竞技苹果下载官方版</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></ 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 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 class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/products/sales/email-tracking" data-order="2" data-linkorder="2">电子邮件跟踪软件雷竞技苹果下载官方版</a>李< / ><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 class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/products/marketing/ads" data-order="4" data-linkorder="4">广告软件雷竞技苹果下载官方版</a>李< / ><li class="hsg-footer__nav-item" data-order="5"><a href="https://www.hubspot.com/products/marketing/email" data-order="5" data-linkorder="5">电子邮件营销软件雷竞技苹果下载官方版</a>李< / ><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">领导管理软件雷竞技苹果下载官方版</a>李< / ><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 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 class="hsg-footer__nav-item" data-order="9"><a href="https://www.hubspot.com/products/service/help-desk" data-order="9" data-linkorder="9">帮助台软件雷竞技苹果下载官方版</a>李< / ><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 class="hsg-footer__nav-item" data-order="11"><a href="https://www.hubspot.com/products/crm/chatbot-builder" data-order="11" data-linkorder="11">免费Chatbot Builder.</a>李< / ><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">免费实时聊天软件雷竞技苹果下载官方版</a>李< / ><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 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>李< / ></ 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 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 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 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 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 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 class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/business-templates" data-order="6" data-linkorder="6">免费商业模板</a>李< / ><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 class="hsg-footer__nav-item" data-order="8"><a href="https://www.hubspot.com/comparisons" data-order="8" data-linkorder="8">雷竞技苹果下载官方版软件比较库</a>李< / ></ 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">raybet电子竞技</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 class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/careers" data-order="1" data-linkorder="1">职业生涯</a>李< / ><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 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 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 class="hsg-footer__nav-item" data-order="5"><a href="//www.emcdepot.com" data-order="5" data-linkorder="5">博客</a>李< / ><li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/company/contact" data-order="6" data-linkorder="6">联系我们</a>李< / ></ 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 class="hsg-footer__nav-item" data-order="1"><a href="https://academy.hubspot.com/hubspot-user-groups" data-order="1" data-linkorder="1">加入本地用户组</a>李< / ></ 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">raybet平台</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 class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/partners/solutions" data-order="1" data-linkorder="1">解决方案合作伙伴计划</a>李< / ><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 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 class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/partners/affiliates" data-order="4" data-linkorder="4">联盟计划</a>李< / ></ 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">Facebook.</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">Instagram.</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="App Store.“></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="Hubspot徽标“></a><p>版权所有©2021 Hubspot，Inc。</p>
             </div>
             <div class="hsg-footer__copyright">
              <ul>
               <li><a href="https://legal.hubspot.com/legal-stuff">合法的东西</a>李< / ><li><a href="https://legal.hubspot.com/privacy-policy">隐私政策</a>李< / ></ 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 -->
  <!-- Begin Domain Settings Code -->
  <!--[if lt IE 9]>
<div style="position:absolute;top:42px;left:0;width:100%;padding:5px 0 5px  15px;color:#b94a48;background:#f2dede";font-size:14px;>Please note: HubSpot no longer supports Internet Explorer version 8 or older. You are using an outdated browser, we recommend you <a href="http://knowledge.hubspot.com/update-browser">upgrade your browser</a> for a better and safer experience.</a></div>
<![endif]-->
  <!-- HREFLANG MACRO -->
  <!-- begin Convert -->
  <!-- end Convert -->
  <!-- End Domain Settings Code -->
  <div id="fb-root"></div>
 </body>
</html>