17.分钟剩余< / div >
下载后< / >< / div >< / div >< / div >< / div >

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

你希望设计能反映出你的品牌的外观和感觉。你希望在不超出预算的情况下拥有满足访问者需求的功能。不管访问者使用的是什么设备或浏览器，你都要创建响应式布局，以一致的方式显示按钮和表单等元素。

通过使用Bootstrap构建，您可以检查清单上的最后一项。Bootstrap是一个用于快速构建响应式网站和移动优先网络项目的开源框架。因为它提供了一组可重用代码，所以您不必从头开始构建站点。

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

现在下载:免费HTML和CSS入门指南

什么是bootstrap css？

Bootstrap CSS是用于开发响应式和移动优先网站的领先CSS框架。这个免费和开源的工具包附带了响应式网格系统、全局CSS设置、广泛的预构建组件(包括按钮、导航条和表单)和可选的JavaScript插件，以加快开发过程。

尽管Bootstrap是一个用于开发的开源工具包HTML, CSS和JavaScript< / >，它通常被称为CSS框架。

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

由于Bootstrap使创建响应式网站变得更容易和更快，它特别吸引了许多前端开发人员和初学者。然而，并不是所有人都推荐它。下面我们来看看为什么Bootstrap这么受欢迎，什么时候使用它比较理想，什么时候又不理想。

为什么引导呢?

Bootstrap是许多前端开发人员的首选工具包。根据W3Techs< / >在美国，22.1%的互联网网站使用它。

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

Bootstrap与其他开发工具包的不同之处在于，它是基于移动平台开发的。这意味着，代码首先针对移动设备(即最小的屏幕尺寸)进行优化，然后放大到更大的屏幕上。因此，使用Bootstrap CSS构建可以确保你的站点支持所有设备的适当渲染和触摸缩放。

Bootstrap如此受欢迎的另一个原因是它很容易使用。它与版式模板捆绑在一起，形式< / >、按钮、下拉菜单、导航和其他界面组件。使用这些预先设置样式的模板，您可以添加一些特性来丰富用户体验< / >在你的网站上，而不需要从头开始编码。

何时使用bootstrap

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

你想要一个响应的网站。

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

2.你想节省时间。

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

考虑启动按钮< / >为例。基类.btn用于所有你想要的按钮的常见样式，如显示、填充、border-width。有了这个类，您就不必在样式表中重复这些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。让我们仔细看看下面这些原因。

1.你想要一个独特的网站。

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

您可以自定义Bootstrap站点，但这需要时间。另外，如果必须覆盖太多的默认样式，那么首先创建自己的样式表可能更有意义。

你想要一个主题。

Bootstrap框架不是一个主题——尽管有一些Bootstrap主题可用。让我们把框架和a比较一下WordPress主题< / >为例。

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

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

引导会对你的网站速度产生负面影响。为什么?因为它很重——确切地说，不是从KB的角度来看，而是从平均用户的角度来看不使用。

引导小于500KB。您还可以采取几个步骤来减少该权重并减轻其对加载时间的影响。例如，你可以使用精简的CSS和JavaScript文件，或者你只下载CSS文件，而不下载JavaScript文件。

但是即使有了这些步骤，Bootstrap对于您所需要的东西来说仍然是太重了。大多数用户并不需要Bootstrap附带的所有组件、实用程序和插件，所以即使它们没有被使用，它们也可能会拖累你的站点。

4.您没有时间学习和阅读Bootstrap文档。

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

5.你想掌握HTML和CSS。

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

现在我们已经了解了什么是Bootstrap CSS以及谁应该使用它，让我们简要讨论一下不同的下载选项。

如何下载Bootstrap CSS

在我们完成下载Bootstrap的过程之前，请注意您可以通过以下方式远程加载BootstrapBootstrapCDN< / >或者jsDelivr< / >而不是下载。这将要求访问者有一个互联网连接访问您的网站，并将要求您张贴更多的代码，然而。因此，下载Bootstrap是更受欢迎的选择。

Bootstrap有两种不同的形式可以下载< / >．每个版本(预编译版本和源代码版本)都能吸引不同的用户，这取决于他们优先考虑的是易用性还是灵活性。让我们在下面仔细看看。

预编译的引导

预编译版本是Bootstrap最基本的形式。你可以下载预编译的CSS和JS文件，以及简化的CSS和JS文件，这些文件几乎可以放在任何web项目中。

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

引导/

├──CSS/

│├──botstrap-grid.css

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

│├──bootstrap-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

│├──botstrap.css.map.

│├──bootstrap.min.css

│└──bootstrap.min.css.map

└──js /

├──bootstrap.bundle.js

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

├──botstrap.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/文件夹。

因为这个版本的Bootstrap需要你Autoprefixer< / >和SASS编译器，设置过程比设置预编译版本更长，更困难。然而，一旦设置好，您就可以以任何您想要的方式更改和定制文件。

每个版本的Bootstrap都适合不同的用例，但是因为预编译的Bootstrap使用起来更简单更快，所以我们将在后面的文章中重点讨论这个版本。

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

如何使用引导CSS

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

让我们一步一步地分解这个过程。

加载引导CSS和JS

首先，在你的电脑上创建一个名为“bootstrap”的文件夹。将编译后的CSS文件从Bootstrap下载到该文件夹中。如果你也在使用Bootstrap的JS部分，将编译的JS文件也移到这个文件夹中。

在同一文件夹中，创建另一个文件并调用IT index.html。使用您选择的文本编辑器打开此文件，如notepad++< / >．你可以复制粘贴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>身体< ></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 =“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><头></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>身体< ></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>要继续构建此页面，您可以添加导航栏，标题，页脚，Glyphicon字体，<a href="//www.emcdepot.com/website/what-is-a-favicon" rel="noopener" target="_blank">Favicon.< / >，以及其他接口组件。让我们一步一步地添加一个组件——导航条，以便您了解如何使用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>下面是此载体示例的代码。</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 class="collapse navbar-collapse" id="navbarNav"></p><p><ul class="navbar-nav mr-auto mt-2 mt-lg-0"></p><p><李类= " nav-item活跃”></p><p>< class = " nav-link " href = " # " >家<跨类= " sr-only " >(当前)< / span > < / ></p><p>李< / ></p><p><李类= " nav-item " ></p><p>< class = " nav-link " href = " # " > < / >特性</p><p>李< / ></p><p><李类= " nav-item " ></p><p>< class = " nav-link " href = " # " > < / >定价</p><p>李< / ></p><p><李类= " nav-item " ></p><p><a class="nav-link" href="#">关于</a></p><p>李< / ></p><p>< / ul ></p><p>< span style =" font - family:宋体;font - family:宋体</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>> < /形式</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布局与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>纳瓦巴品牌</em>？它指定您的公司、产品或项目名称。raybet电子竞技只需用正确的名称替换</a>标签之前的“Navbar”。</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;">引导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个可用列的数目。假设您想创建三个等宽的列，它们以任意大小跨设备居中于页面上。然后您需要3个“12个中的4个”列，由.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="带三个等宽列的引导网格" 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类=“警报警报 - 成功”角色=“警报”></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">添加一个解散按钮< / >让访客读完警报后就能关闭。</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><button type="button" class="btn btn- Info ">Info</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动画< / >为例。然后我就可以把这个按钮链接到这个主题的博客文章上。下面是代码:</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;">图片来源< / ></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 class = " carousel-inner”></p><p><div类=“carousel-item活动”></p><p><img src="…" class=" -block w-100" alt="…“></p><p>< / div ></p><p>< div class = " carousel-item”></p><p><img src="…" class=" -block w-100" alt="…“></p><p>< / div ></p><p>< div class = " carousel-item”></p><p><img src="…" class=" -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><链接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><头></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><链接rel =“stylesheet”类型=“text / css”href =“custom.css”></p><p></p><p>< / >头</p><p>身体< ></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< / >．在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>该页面是干净的，响应和跨浏览器友好，而是Austere。为了个性化设计，Rascia将自定义CSS添加到Custom.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>margin-bottom: 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>字体大小:26 px;</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>无衬线字体类型:“蒙”;</p><p>｝</p><p>h1,</p><p>h2 {</p><p>粗细:大胆的;</p><p>｝</p><p>p {</p><p>字体大小:16 px;</p><p>颜色:# cdcdcd;</p><p>｝</p><p>.navbar {</p><p>margin-bottom: 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>字体大小:26 px;</p><p>｝</p><p>.navbar-inverse {</p><p>背景：＃2e2f31;</p><p>边界:0;</p><p>｝</p><p>.dropdown-menu {</p><p>背景：＃2e2f31;</p><p>border - radius: 0;</p><p>边界:0;</p><p>｝</p><p>.navbar-逆。navbar-nav</p><p>颜色:# f7f7f7;</p><p>字体大小:16 px;</p><p>｝</p><p>.navbar-enverse .Navbar-Nav Li A：悬停{</p><p>背景:# 27 a967;</p><p>｝</p><p>.navbar-nav .下拉菜单</p><p>背景:# 2 c463c;</p><p>｝</p><p>.下拉菜单</p><p>填充:10 px;</p><p>｝</p><p>.btn-primary {</p><p>颜色:# fff;</p><p>背景颜色:透明;</p><p>边框颜色:白色;</p><p>margin-bottom: 5 px;</p><p>｝</p><p>.btn-primary:{徘徊</p><p>颜色:# 27 a967;</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覆盖，自定义选项几乎是具有引导程序的无限。你可以浏览<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="新的文字-动作“>< / ></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的介绍“>< / ></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">引导和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://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="引导按钮:类和样式解释“>< / ></figure>
             <div class="blog-card__content">
              <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/bootstrap-button">引导按钮:类和样式解释< / ></h3>
              <div class="blog-card__meta">
               <a href="//www.emcdepot.com/website" class="blog-card__blog-link">网站< / ><a href="//www.emcdepot.com/website/bootstrap-button" class="blog-card__read-time">| 11分钟读数< / >< / 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网格[示例布局]“>< / ></figure>
             <div class="blog-card__content">
              <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/css-grid">如何在你的网站上创建一个完美的CSS网格[示例布局]< / ></h3>
              <div class="blog-card__meta">
               <a href="//www.emcdepot.com/website" class="blog-card__blog-link">网站< / ><a href="//www.emcdepot.com/website/css-grid" class="blog-card__read-time">| 16分钟读数< / >< / 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，你需要知道的一切“>< / ></figure>
             <div class="blog-card__content">
              <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/css-id">关于CSS中的ID，你需要知道的一切< / ></h3>
              <div class="blog-card__meta">
               <a href="//www.emcdepot.com/website" class="blog-card__blog-link">网站< / ><a href="//www.emcdepot.com/website/css-id" class="blog-card__read-time">|4分钟阅读< / >< / 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">免费的聊天机器人制造者< / >李< / ><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 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="谷歌玩“>< / >< / 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徽标“>< / ><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 -->
  <!-- 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>