17分钟剩余
下载后< / >
如果您正在为您的业务创建一个网站，那么您可能有一个很长的愿望清单。
您希望设计反映您品牌的外观和感受。您希望拥有满足访问者需求所需的功能，而不会超过预算。并且，您想创建响应性布局，以显示像按钮等元素，无论访问者使用的设备或浏览器都是始终如一的。
通过使用Bootstrap构建，您可以检查清单上的最后一项。Bootstrap是一个用于快速构建响应式网站和移动优先网络项目的开源框架。因为它提供了一组可重用代码，所以您不必从头开始构建站点。
理解为什么互联网上有2100万个网站使用Bootstrap< / >，让我们仔细看看它是什么。
什么是Bootstrap CSS?
Bootstrap CSS是用于开发响应式和移动优先网站的领先CSS框架。这个免费和开源的工具包附带了响应式网格系统、全局CSS设置、广泛的预构建组件(包括按钮、导航条和表单)和可选的JavaScript插件，以加快开发过程。
虽然Bootstrap是一个用于与之开发的开源工具包HTML，CSS和JavaScript< / >，它通常被称为CSS框架。
要理解其中的原因，您必须首先理解CSS对于具有各种技术经验的人来说通常更容易学习，并且在浏览器中比JavaScript更快。出于这些原因，Bootstrap开发人员使用CSS(和HTML.< / >)而不是JavaScript。因此，Bootstrap中包含的CSS库比JavaScript库大得多。
由于Bootstrap使创建响应网站更容易和更快，因此对许多前端开发人员和初学者呼吁。但是，所有这些都不推荐。下面我们会看看为什么引导是如此流行，并且当它是理想的时候 - 而且它不理想。
为什么引导呢?
Bootstrap是许多前端开发人员的首选工具包。根据W3Techs< / >在美国，22.1%的互联网网站使用它。
Bootstrap受欢迎的原因有几个。首先，它是开源的，因此可以免费下载和使用。它也是完全可定制的，并与所有现代浏览器兼容。然而，许多CSS框架都是如此。
Bootstrap与其他开发工具包的不同之处在于，它是基于移动平台开发的。这意味着，代码首先针对移动设备(即最小的屏幕尺寸)进行优化，然后放大到更大的屏幕上。因此，使用Bootstrap CSS构建可以确保你的站点支持所有设备的适当渲染和触摸缩放。
Bootstrap如此流行的另一个原因是它易于使用。它与排版模板捆绑在一起，形式< / >、按钮、下拉菜单、导航和其他界面组件。使用这些预先设置样式的模板，您可以添加丰富用户体验< / >在你的网站上，而不需要从头开始编码。
何时使用引导
使用Bootstrap的原因有很多。我们已经在上面讨论了一些原因，下面让我们仔细看看这些原因。
1.你想要一个响应式网站。
使用Bootstrap构建响应式站点要比从头开始容易得多。Bootstrap带有响应式风格，如容器和媒体查询，以确保您的网站调整到视口。这意味着你不必担心你的访客是使用台式机、平板电脑还是移动设备。
2.你想节省时间。
你可以用Bootstrap快速构建你的网站。下载框架后，就可以开始使用基本模板，然后添加所需的组件。这些组件是基本的HTML元素，如表格、表单、按钮、图像和图标，它们使用基类进行样式化，并使用修改器类进行扩展。使用这些预先设计好的组件极大地限制了必须编写的自定义CSS的数量。
考虑Bootstrap按钮< / >为例。基类.btn用于所有你想要的按钮的常见样式，如显示、填充、border-width。有了这个类，您就不必在样式表中重复这些CSS属性来格式化添加的每个按钮。
另一方面，像.btn-primary这样的修饰符类用于为按钮添加更具体的样式，比如按钮的颜色、背景颜色和border-color。这只是使用Bootstrap组件比从头编写要快得多的一个例子。
3.你熟悉HTML和CSS。
虽然Bootstrap确实简化了构建网站的过程，但您必须熟悉HTML和CSS来使用该框架。例如，了解CSS盒模型< / >将在使用容器类和构建第一个Bootstrap网格时非常重要。
好消息是你只需要raybetapp基本的编码知识< / >开始。
4.你有很多人在建设你的网站。
如果您有多个合作者在一个站点上工作，那么一致性就很重要。你不希望主页上的按钮与登陆页面上的按钮看起来不同，或者使用不同的按钮网站的排版< / >在你的博客上比在你的网站上的任何地方都要多——等等。使用Bootstrap及其默认设置、实用工具类和组件元素可以帮助确保站点的前端看起来一致。
5.你想成为社区的一份子。
由于Bootstrap是开源的，所以它拥有一个全球开发人员和设计人员社区，致力于支持该框架。这些开发人员和设计人员修改和增强Bootstrap的代码库GitHub< / >．他们也回答问题推特< / >，堆栈溢出< / >，在一个专用的松弛的房间< / >．使用引导时，您可以利用此活动社区成为更好的引导用户。
何时不使用引导
虽然使用这个CSS框架有很多好处，但也有一些原因不也可以使用引导。下面让我们仔细看看这些原因。
1.你想要一个独特的网站。
由于Bootstrap带有预先设计好的内容、组件和模板，所以Bootstrap站点看起来都是开箱即用的。事实上，Bootstrap也因此受到指责为什么今天的网站看起来都一样< / >．
您可以自定义Bootstrap站点，但这需要时间。另外，如果必须覆盖太多的默认样式，那么首先创建自己的样式表可能更有意义。
2.你需要一个主题。
Bootstrap框架不是主题 - 尽管有可用的引导主题。让我们将框架比较到一个WordPress主题< / >为例。
3.你想要一个快速加载的网站。
引导可以对网站的速度产生负面影响。为什么？因为它很重 - 不是KB，究竟，但在普通用户的方式方面不使用。
引导小于500KB。您还可以采取几个步骤来减少该权重并减轻其对加载时间的影响。例如，你可以使用精简的CSS和JavaScript文件，或者你只下载CSS文件，而不下载JavaScript文件。
但是，即使有了这些步骤，引导程序对于您所需要的东西来说仍然太重。大多数用户不需要Bootstrap附带的所有组件、实用程序和插件，因此即使它们没有被使用，它们也可能会影响您的站点。
4.您没有时间学习和阅读Bootstrap文档。
Bootstrap被认为是一个易于使用的平台。它为框架的每个部分提供了广泛的文档，从布局到内容到组件等等。这意味着几乎任何人都可以学习Bootstrap——这也意味着需要花时间阅读文档并学习框架。如果你想尽快建立一个网站，那么Bootstrap可能不像其他解决方案那样理想，比如网站建设者< / >．
5.你想掌握HTML和CSS。
使用Bootstrap提供的预先设计的组件和模板可以使构建一个网站更容易、更快——但它也会阻碍你作为一个程序员的成长。使用Bootstrap创建就像使用计算器做代数:你可以在完全不了解如何得到它的情况下最终得到你想要的结果。这就是为什么花时间创建您自己的自定义组件是好的，即使您也学习和使用Bootstrap。
现在我们了解Bootstrap CSS是什么，谁应该使用它，让我们简要讨论你拥有的不同下载选项。
如何下载引导CSS
在我们完成下载Bootstrap的过程之前，请注意您可以通过以下方式远程加载BootstrapBootstrapCDN< / >或JSDeliver< / >而不是下载。这将要求访问者有一个互联网连接访问您的网站，并将要求您张贴更多的代码，然而。因此，下载Bootstrap是更受欢迎的选择。
Bootstrap有两种不同的形式可以下载< / >．每个版本 - 预编译和源代码版本 - 取决于它们是否优先考虑易用或灵活性。让我们仔细看看下面。
预编译引导
预编译版本是Bootstrap最基本的形式。你可以下载预编译的CSS和JS文件，以及简化的CSS和JS文件，这些文件几乎可以放在任何web项目中。
下载后，您将解压缩压缩文件夹并看到以下结构。
引导/
├──css /
│├──bootstrap-grid.css
│├──bootstrap-grid.css.map
│├──botstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│├──bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│├──bootstrap-reboot.min.css
│├──bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│├──bootstrap.css.map
│├──bootstrap.min.css
│└──bootstrap.min.css.map
└──js /
├──bootstrap.bundle.js
├──bootstrap.bundle.js.map
├──bootstrap.bundle.min.js
├──bootstrap.bundle.min.js.map
├──bootstrap.js
├──bootstrap.js.map
├──bootstrap.min.js
└──bootstrap.min.js.map
使用编译后的版本比使用源代码版本更容易、更快——但更困难定制< / >．您要对预先设置样式的元素或布局所做的任何更改都必须与对当前样式的替代一起应用。
如果你想定制Bootstrap中包含的CSS和JS文件，那么你最好下载源代码版本。
引导源代码
源代码版本包括预编译的CSS, JS和字体资产以及分别为CSS, JS和图标字体的源文件。
如果您选择下载Bootstrap源代码，那么您将解压缩该文件夹并看到以下结构。
引导/
├──dist /
│├──css /
│└──js /
├──网站/
│└──docs /
│ └── 4.6/
│└──/例子
├──js /
└──SCSS/
dist/文件夹包含了上面预编译部分列出的所有内容。docs/文件夹包括Bootstrap文档的源代码和Bootstrap使用示例。js/文件夹包含Bootstrap js的源代码和Bootstrap CSS的scss/文件夹。
因为此版本的引导程序要求您autoprefixer.< / >和SASS编译器，设置过程比设置预编译版本更长，更困难。然而，一旦设置好，您就可以以任何您想要的方式更改和定制文件。
每个版本的Bootstrap都适合不同的用例，但是因为预编译的Bootstrap使用起来更简单更快，所以我们将在后面的文章中重点讨论这个版本。
下面让我们看看如何使用预编译的引导raptap来构建一个网站。
如何使用引导CSS
为了使用Bootstrap CSS，您需要将其集成到开发环境中。要做到这一点，只需在计算机上创建一个文件夹。在那个文件夹中，保存你编译的CSS和JS文件，以及一个新的HTML文件，在那里你将加载Bootstrap。然后您可以使用Bootstrap模板向页面添加接口元素。
让我们一步一步地分解这个过程。
加载引导CSS和JS
首先，在你的电脑上创建一个名为“bootstrap”的文件夹。将编译后的CSS文件从Bootstrap下载到该文件夹中。如果你也在使用Bootstrap的JS部分，将编译的JS文件也移到这个文件夹中。
在同一个文件夹中，创建另一个文件，并将其命名为index.html。使用您选择的文本编辑器打开此文件，例如记事本++< / >．你可以复制和粘贴Bootstrap官方网站的基本HTML模板< / >输入文件或从头开始编写代码。
下面是一个从头开始编写的HTML页面示例。
<！DOCTYPE html >
< html lang =“en”>
Bootstrap Tutorial Sample Page</p><p>< meta charset = " utf - 8 " ></p><p><meta name="viewport" content="width=device-width, initial-scale=1</p><p></p><p>> < /头</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>< link rel = "样式表" href = "引导/ css / bootstrap.min.css”></p></code><p><code class="html"></code></p></pre><p></p><p>如果您计划只使用Bootstrap的CSS部分，那么您就都准备好了。</p><p>如果您计划使用JS部分，那么您需要添加两行代码。组件包括警报，切换按钮，<a href="//www.emcdepot.com/website/bootstrap-carousel-css" rel="noopener" target="_blank">旋转木马< / >，下拉框需要使用JavaScript才能运行，所以如果您想向站点添加任何这些元素，请继续执行这些步骤。</p><p>首先，您需要加载jQuery库。这样做，<a href="https://jquery.com/download/" rel="noopener" target="_blank">下载jQuery< / >到你的电脑上。解压文件并将其与已编译的CSS和JS文件以及index.html文件一起保存在“bootstrap”文件夹中。</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 = "引导/ js / bootstrap.min.js”> > < /脚本</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="viewport" content="width=device-width, initial-scale=1</p><p>< link rel = "样式表" href = "引导/ css / bootstrap.min.css”></p><p></p><p>> < /头</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>保存文件夹后，您将拥有如下基本引导布局：</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>要继续构建此页面，您可以添加导航栏、页眉、页脚、符号字体、<a href="//www.emcdepot.com/website/what-is-a-favicon" rel="noopener" target="_blank">的图标< / >，以及其他接口组件。让我们一步一步地添加一个组件——导航条，以便您了解如何使用Bootstrap。</p><p>说你想<a href="//www.emcdepot.com/website/bootstrap-navbar" rel="noopener" target="_blank">添加引导导航条< / >主页看起来是这样的:<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>下面是Navbar示例的代码。</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><button class=" navbartoggller " type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"></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=“导航项目激活”></p><p>主页<span class=“仅限sr”>（当前）</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>< class = " nav-link " href = " # " >对< / ></p><p>李< / ></p><p></ UL></p><p>< span style =" font - family:宋体;font - family:宋体</p><p><input class="form-control mr-sm-2" type="search" placeholder=" search" ariah -label=" search" > . <input class="form-control mr-sm-2" type="search" placeholder=" 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>？这就需要一个深色的背景色。如果你喜欢浅色的配色方案，可以用导航条灯代替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">默认颜色< / >．</ div><h4 style="font-weight: normal;">品牌</h4><p>在第二行代码中，看<em>navbar-brand</em>？它指定您的公司、产品或项目名称。raybet电子竞技只需用正确的名称替换</a>标签之前的“Navbar”。</p><h4 style="font-weight: normal;">善变者</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="引导导航栏与切换按钮显示在移动" 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>form-inline</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;">自举网格</h3><p><a href="//www.emcdepot.com/website/css-grid?_ga=2.250809862.1607566148.1585586557-1753121421.1568128919" rel="noopener" target="_blank">CSS网格系统< / >用于通过包含内容的一系列行和列创建页面布局。在引导网格系统中，行必须适当地放置在.container(固定宽度)或.container-fluid(全宽度)中<a href="//www.emcdepot.com/website/css-position?_ga=2.250809862.1607566148.1585586557-1753121421.1568128919" rel="noopener" target="_blank">定位< / >和<a href="//www.emcdepot.com/website/css-padding?_ga=2.253887240.1607566148.1585586557-1753121421.1568128919" rel="noopener" target="_blank">衬垫< / >．这些行用于创建水平组。</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 class = " col-4”></p><p>三列之一</p><p></ div></p><p>< div class = " col-4”></p><p>三列之一</p><p></ div></p><p>< div class = " 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="有三列的引导网格在桌面和mobile-min上显示不同" 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;">图片来源< / ></p><p>还有很多选项可供选择。使用Bootstrap的网格系统，您可以创建跨多行等宽列。您可以设置一列的宽度，并让同级列自动调整其大小。您可以根据内容的自然宽度来设置列的大小——甚至更多。</p><h3 style="font-weight: normal;">引导警报</h3><p>您可以在Bootstrap站点中添加提醒，为访问者提供重要信息。Bootstrap为警告消息提供了8种默认颜色。例如，假设您想添加一个警告，以指示访客已成功创建了一个帐户。然后你可以使用下面的例子。</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><div class="alert alert-success" role="alert"></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="带有引导成功警告的基本引导布局" 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">添加“取消”按钮< / >让访客读完警报后就能关闭。</p><h3 style="font-weight: normal;">启动按钮</h3><p>使用Bootstrap，您可以快速地从几个预定义的按钮样式中进行选择<a href="//www.emcdepot.com/website/bootstrap-button" rel="noopener" target="_blank">在Bootstrap网站的登陆页面或表单中添加按钮< / >．让我们说要向您的网站添加“信息”按钮。以下是示例以及它将如何看待前端。</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类被设计用于<button>元素，但您也可以在其他元素上使用它们。例如，如果你想把一个链接变成一个按钮，你可以使用下面的代码:</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动画< / >为例。然后我就可以把这个按钮链接到这个主题的博客文章上。下面是代码:</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><a href="//www.emcdepot.com/website/css-animation" class="btn btn-info" role="button"></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="访问者点击引导按钮链接将被重定向到链接的文章" 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;">图片来源< / ></p><p>您可以通过添加适当的修改器类来更改按钮的颜色、大小和其他方面。</p><h3 style="font-weight: normal;">引导旋转木马</h3><p><span>旋转木马是一种幻灯片，用于显示一系列内容，无论是图像、文本还是自定义标记。在网页设计中，你可以创建一个没有JavaScript的纯CSS旋转木马，或者你可以使用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" class="carousel slide" data-ride="carousel"></p><p>< div class = " carousel-inner”></p><p>< div class = " carousel-item活跃”></p><p><img src =“...”类=“d-block w-100”alt =“...”></p><p></ div></p><p><div class=“转盘项目”></p><p><img src =“...”类=“d-block w-100”alt =“...”></p><p></ div></p><p><div class=“转盘项目”></p><p><img src =“...”类=“d-block w-100”alt =“...”></p><p></ div></p><p></ div></p><p><a class="carousel-control-prev" href="# carouselexamplecontrolls " role="button" data-slide="prev"></p><p>< span class = " carousel-control-prev-icon“aria-hidden = " true " > < / span ></p><p>以前< span class = " sr-only”> < / span ></p><p>< / ></p><p><a class="carousel-control-next" href="# carouselexamplecontrolls " role="button" data-slide="next"></p><p>< span class = " carousel-control-next-icon“aria-hidden = " true " > < / span ></p><p>< span class = " sr-only“> < / span ></p><p>< / ></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">如何创建您的网站在引导CSS旋转木马滑块< / >．</em></p><p>一旦你对你的网页布局感到满意，你可能想要通过改变它们的颜色来定制这些和其他Bootstrap组件的外观，<a href="//www.emcdepot.com/website/css-font-size" rel="noopener" target="_blank">字体大小< / >、边框或其他现有的引导样式。为此，您可以覆盖现有的样式。让我们看看下面是如何做到的。</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>< link rel = "样式表" href = "引导/ 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><link rel="stylesheet" type="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="viewport" content="width=device-width, initial-scale=1</p><p>< link rel = "样式表" href = "引导/ css / bootstrap.min.css”></p><p><link rel="stylesheet" type="text/css" href="custom.css"></p><p></p><p>> < /头</p><p><body></p><p><br><br></p><p>< script src = " jquery-3.3.1.min.js " > < /脚本></p><p>< script src = "引导/ js / bootstrap.min.js”> > < /脚本</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，让我们看一个编辑预编译Bootstrap的示例。</p><p>我们将从一个由开发人员和技术作家创建的简单布局开始<a href="https://www.taniarascia.com/me/" rel="noopener" target="_blank">塔尼亚Rascia< / >．在Bootstrap提供的基本HTML模板的基础上，她使用框架中绑定的模板添加了导航栏、大屏幕标题、网格和符号。结果如下所示。</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;">图片来源< / ></p><p>页面是干净的，响应灵敏的，跨浏览器友好的，但相当简朴。为了个性化设计，Rascia在custom. CSS文件中添加了自定义CSS。通过使用<a href="//www.emcdepot.com/website/css-selectors" rel="noopener" target="_blank">CSS选择器< / >，她能够对页面上的HTML元素应用独特的样式属性。</p><p>首先，她想要删除导航栏和大屏幕头部之间的空白。因此，她使用类选择器“navbar”向文件添加了以下代码。</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”将以下代码添加到文件中。</p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>.jumbotron {</p><p>背景:# 27 a967;</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>背景:# 3 e4649;</p><p>颜色:# f7f7f7;</p><p>无衬线字体类型:“蒙”;</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>背景:# 27 a967;</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>背景:# 2 e2f31;</p><p>边界:0;</p><p>｝</p><p>.dropdown-menu {</p><p>背景:# 2 e2f31;</p><p>border - radius: 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-nav li:hover {</p><p>背景:# 27 a967;</p><p>｝</p><p>.navbar-nav .下拉菜单</p><p>背景：#2C463C；</p><p>｝</p><p>.下拉菜单</p><p>填充:10 px;</p><p>｝</p><p>.btn主要{</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-large {</p><p>字体大小:100 px;</p><p>｝</p><p>.call-to-action {</p><p>text-align:中心;</p><p>｝</p><p>.call-to-action p {</p><p>margin-bottom: 30 px;</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="引导模板与导航栏，大屏幕头，网格，和自定义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;">图片来源< / ></p><p>使用CSS覆盖，Bootstrap的定制选项实际上是无限的。你可以浏览<a href="https://expo.getbootstrap.com/" rel="noopener" target="_blank">引导世博会< / >来看看Bootstrap的一些最有创意的用法。</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< / ></ 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%20Nest%20Your%20CSS%20Selectors%20for%20Cleaner%20Code.jpeg -->
<article class="blog-card blog-card--one-third ">
<figure>
<a href="//www.emcdepot.com/website/nesting-css"><img src="//www.emcdepot.com/hubfs/Google%20Drive%20Integration/How%20to%20Nest%20Your%20CSS%20Selectors%20for%20Cleaner%20Code.jpeg" alt="如何为清洁代码嵌套CSS选择器"></a>
</figure>
<div class="blog-card__content">
<h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/nesting-css">如何为清洁代码嵌套CSS选择器< / ></h3>
<div class="blog-card__meta">
<a href="//www.emcdepot.com/website" class="blog-card__blog-link">网站< / ><a href="//www.emcdepot.com/website/nesting-css" class="blog-card__read-time">| 3分钟读数< / ></ div></ div></article>
<!-- hasFeaturedImage: https://www.hubspot.com/hubfs/Junior%20developer%20learning%20how%20to%20use%20the%20CSS%20text-indent%20property%20.jpg -->
<article class="blog-card blog-card--one-third ">
<figure>
<a href="//www.emcdepot.com/website/how-to-indent-css"><img src="//www.emcdepot.com/hubfs/Junior%20developer%20learning%20how%20to%20use%20the%20CSS%20text-indent%20property%20.jpg" alt="如何缩进文本，段落，列表和更多的CSS"></a>
</figure>
<div class="blog-card__content">
<h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/how-to-indent-css">如何缩进文本，段落，列表和更多的CSS< / ></h3>
<div class="blog-card__meta">
<a href="//www.emcdepot.com/website" class="blog-card__blog-link">网站< / ><a href="//www.emcdepot.com/website/how-to-indent-css" class="blog-card__read-time">| 3分钟读数< / ></ div></ div></article>
<!-- hasFeaturedImage: https://www.hubspot.com/hubfs/Google%20Drive%20Integration/The%20Beginners%20Guide%20to%20Responsive%20Text%20on%20the%20Web.jpeg -->
<article class="blog-card blog-card--one-third ">
<figure>
<a href="//www.emcdepot.com/website/responsive-text"><img src="//www.emcdepot.com/hubfs/Google%20Drive%20Integration/The%20Beginners%20Guide%20to%20Responsive%20Text%20on%20the%20Web.jpeg" alt="网络上响应式文本的初学者指南"></a>
</figure>
<div class="blog-card__content">
<h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/responsive-text">网络上响应式文本的初学者指南< / ></h3>
<div class="blog-card__meta">
<a href="//www.emcdepot.com/website" class="blog-card__blog-link">网站< / ><a href="//www.emcdepot.com/website/responsive-text" class="blog-card__read-time">|7分钟阅读< / ></ 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">现在得到它< / ></ 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="#">回来< / ><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">免费会议调度程序应用程序< / >李< / ><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">社会媒体工具< / >李< / ><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">电子邮件跟踪软件雷竞技苹果下载官方版< / >李< / ><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">销售电子邮件自动化< / >李< / ><li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/products/marketing/ads" data-order="4" data-linkorder="4">广告软件雷竞技苹果下载官方版< / >李< / ><li class="hsg-footer__nav-item" data-order="5"><a href="https://www.hubspot.com/products/marketing/email" data-order="5" data-linkorder="5">电子邮件营销软件雷竞技苹果下载官方版< / >李< / ><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">领导管理软件雷竞技苹果下载官方版< / >李< / ><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">管道管理工具< / >李< / ><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">销售电子邮件模板< / >李< / ><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">帮助台软件雷竞技苹果下载官方版< / >李< / ><li class="hsg-footer__nav-item" data-order="10"><a href="https://www.hubspot.com/products/marketing/forms" data-order="10" data-linkorder="10">免费在线表格建设者< / >李< / ><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.< / >李< / ><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">免费实时聊天软件雷竞技苹果下载官方版< / >李< / ><li class="hsg-footer__nav-item" data-order="13"><a href="https://www.hubspot.com/products/marketing/analytics" data-order="13" data-linkorder="13">市场营销分析< / >李< / ><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">免费登陆页面创建器< / >李< / ></ 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">网站平地机< / >李< / ><li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/make-my-persona" data-order="1" data-linkorder="1">让我的角色< / >李< / ><li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/email-signature-generator" data-order="2" data-linkorder="2">电子邮件签名发电机< / >李< / ><li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/blog-topic-generator" data-order="3" data-linkorder="3">博客想法发生器< / >李< / ><li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/invoice-template-generator" data-order="4" data-linkorder="4">发票模板生成器< / >李< / ><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">营销计划发电机< / >李< / ><li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/business-templates" data-order="6" data-linkorder="6">免费商业模板< / >李< / ><li class="hsg-footer__nav-item" data-order="7"><a href="https://www.hubspot.com/industry-data" data-order="7" data-linkorder="7">行业基准数据< / >李< / ><li class="hsg-footer__nav-item" data-order="8"><a href="https://www.hubspot.com/comparisons" data-order="8" data-linkorder="8">雷竞技苹果下载官方版软件比较库< / >李< / ></ 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">关于我们< / >李< / ><li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/careers" data-order="1" data-linkorder="1">职业生涯< / >李< / ><li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/company/management" data-order="2" data-linkorder="2">管理团队< / >李< / ><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">董事会< / >李< / ><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">投资者关系< / >李< / ><li class="hsg-footer__nav-item" data-order="5"><a href="//www.emcdepot.com" data-order="5" data-linkorder="5">博客< / >李< / ><li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/company/contact" data-order="6" data-linkorder="6">联系我们< / >李< / ></ 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">客户支持< / >李< / ><li class="hsg-footer__nav-item" data-order="1"><a href="https://academy.hubspot.com/hubspot-user-groups" data-order="1" data-linkorder="1">加入本地用户组< / >李< / ></ 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">所有合作伙伴项目< / >李< / ><li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/partners/solutions" data-order="1" data-linkorder="1">解决方案合作伙伴计划< / >李< / ><li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/partners/app" data-order="2" data-linkorder="2">应用合作伙伴计划< / >李< / ><li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/startups/partners" data-order="3" data-linkorder="3">HubSpot的对于创业公司来说< / >李< / ><li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/partners/affiliates" data-order="4" data-linkorder="4">从属节目< / >李< / ></ 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">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="应用商店"></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">合法的东西< / >李< / ><li><a href="https://legal.hubspot.com/privacy-policy">隐私政策< / >李< / ></ 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 -->
<div id="fb-root"></div>
</body>
</html>