如何在 WordPress 中使用 Bootstrap：初学者指南

WordPress 和 Bootstrap 都是流行的网页设计平台，通常不被认为是兼容的。 Bootstrap 已经成长为开发人员最喜欢的 CSS 平台，因为它可以轻松构建响应式网站。 事实上，互联网上超过 70% 的网站都是用它设计的。 您可以将任何您想要的内容编码到其响应式框架中，以创建一个独特的移动友好网站，开箱即用。 超过一半的用户通过移动设备访问互联网，因此拥有响应式网站至关重要。

如果我们告诉您可以同时使用 Bootstrap 和 WordPress 会怎样？ 嗯，你可以。 有几种方法可以在 WordPress 中使用 Bootstrap，包括可以将 Bootstrap 块添加到 WordPress 编辑器的 WordPress Bootstrap 插件。 我们将介绍在 WordPress 中使用 Bootstrap 的所有方法并向您展示如何使用。

什么是引导程序？

Bootstrap 由两位 Twitter 专家 Marc Otto 和 Jacob Thornton 创建。 有这么多人通过电话访问互联网，他们想设计一个将移动用户放在首位的框架。 因此，Bootstrap 在 Web 开发人员中广受欢迎。 为了完成移动优先设计，Bootstrap 使用网格系统或列结构，在某些断点或屏幕分辨率处调整页面设计。

Bootstrap 由 HTML、CSS 和 Javascript 组成。 它是一个免费的开源框架，允许用户添加他们想要的任何 HTML 或 Javascript 组件。 事实上，有许多 Bootstrap 开发人员创建组件并在多个市场上销售，以帮助初学者开发自己的网站。 与 WordPress 一样，Bootstrap 非常流行，并且允许一些漂亮的设计。

使用 Bootstrap 的优势

除了面向移动设备之外，Bootstrap 速度很快。 它是一个不同于 CMS 的 CSS 框架。 因此，您不会在某些 CMS 上发现任何膨胀来减慢您的网站速度。 另一个优点是浏览器功能。 它可以直接与 Chrome、Safari、Firefox 等一起使用。 不需要使用 webkit CSS 规则来使 Bootstrap 工作 - 使其成为跨浏览器兼容性的绝佳选择。 此外，该框架易于使用。 任何了解 CSS 和 HTML 的人都可以使用 Bootstrap。 最后，有一个围绕 Bootstrap 的大型社区。 用户可以快速分享有关新开发人员可能需要帮助的功能、编码或任何其他相关问题的知识。

在 WordPress 中使用 Bootstrap 的方法

如果您想在 WordPress 网站中使用 Bootstrap，有几个选项。 您可以手动安装脚本，但您需要自己完成大部分编码才能使其栩栩如生。 其次，您可以为 WordPress 使用预制的 Bootstrap 主题。 有几个可供选择，但通过选择此选项，您的网站看起来与主题完全一样。 除非您编写自己的页面模板来进行更改，否则不会有很多选项可以使它看起来不那么千篇一律。 最后，您可以使用 WordPress 插件使用 Boostrap 构建您的网站。

近年来，WordPress 开发人员已经开始发布可在 WordPress 中使用的 Bootstrap 插件。 这些插件开始占据一席之地，尤其是自 Gutenberg Blocks 发布以来。 通过使用 WordPress Bootstrap 插件，您可以将两个平台的优点结合在一起。 在我们深入研究您可以使用这些插件做什么之前，让我们稍微扩展一下您可以使用的其他选项，以使您的 Bootstrap 项目在 WordPress 中栩栩如生。

手动安装引导程序

如果您不想使用插件，您可以随时使用 Boostrap 手动构建您的网站。 为此，您需要在 WordPress 网站的头部添加对 Bootstrap 的链接引用。 您可能需要添加代码片段插件来执行此操作，具体取决于您正在运行的主题。

在您网站的标题中，指向 Bootstrap 外部样式表的 CDN 链接将如下所示：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

确保检查 Bootstrap 的网站以确保您使用的是最新的脚本，以便您可以从可用的最新版本中受益。 请记住，您可以构建自己的包含 Bootstrap 的 WordPress 主题，但这需要您做很多工作。 这将涉及修改核心页面——index.php、wp-admin.php 等。 对于本教程，我们将使用 Bootstap 插件，因为它对大多数人来说是一种更简单的方法。

使用 Bootstrap WordPress 主题

WordPress 存储库中有很多免费的 Bootstrap WordPress 主题。 每个都是完全响应的，并且完全使用 Bootstrap 构建。 让我们来看看一些更受欢迎的选择。

匀称

Shapely 是最受欢迎的 Boostrap WordPress 主题。 这是与 Bootsrap 完全集成的单页设计。 有几个主页小部件，并支持主要的 WordPress 插件，如 WooCommerce、Jetpack、Gravity Forms、Yoast SEO 等。 由于 Boostrap 集成，Shapely 是 100% 响应的。

意地

Illdy 是一个使用前端可视化编辑器的多功能 Bootstrap WordPress 主题。 像所有基于 Bootstrap 的主题一样，Illdy 是完全响应式的。 它具有内置的投资组合功能，因此适合创意企业。

Activello

Activello 在主页上有一个全屏滑块，当您第一次点击页面时，它会提供令人惊叹的外观。 它非常适合博客作者，并支持最流行的 WordPress 插件。 此外，Activello 与 Schema 兼容，这使得这个主题对 SEO 非常友好。

使用 WordPress 引导插件

出于本教程的目的，我们将使用一个插件在 WordPress 中构建我们的引导页面。 我们将要讨论的这两个插件都可以将 Bootstrap 与 Gutenberg 块一起使用，但其中一个提供了比另一个更简单的路径。

引导块

Bootstrap Blocks 是一个 WordPress 插件，可将 Boostrap Gutenberg 块添加到 WordPress 编辑器中。 该插件需要大量定制才能与 WordPress 完全集成。 它不将 Bootstrap 库包含在插件中。 如果您想拥有该功能，则需要手动将代码添加到您的 functions.php 文件中。 该插件更适合具有大量编程知识的 WordPress 开发人员。 如果您已经熟悉核心 WordPress 文件的工作方式，并且对 Bootstrap 有一个很好的概念，那么这可能是您要走的路。 但是，关于此插件，您应该记住一件事。 您只能访问几个组件——容器、行、列和按钮。 如果您想要一个没有太多麻烦的更强大的选择，您可能需要考虑一种不同的方法。

所有引导程序块

All Bootstrap Blocks 插件有一些非常好的功能。 它不仅为您将 Bootstrap 框架整合到 WordPress 中，还为您提供了 37 个非常酷的块，可与 Gutenberg 块一起使用。 您将获得列和行之类的功能——它们是 Bootstrap 的基础块。 此外，还有模态、手风琴、内容卡、图标等等。 这几乎就像通过安装插件来拥有一个功能齐全的主题。 有一些学习曲线可以让事情看起来恰到好处，特别是如果您习惯于拖放视觉构建器。 但是，如果您一直使用 div 和列手动编码，这将是一股清新的空气。

如何在 WordPress 中使用 Bootstrap 设计页面（一步一步）

对于本教程，我们将使用 27 个主题和所有 Boostrap 块在 WordPress 中构建一个页面。 我们将根据优雅主题订阅提供的相机产品页面来建模我们的页面。

1.修改Bootstrap的二十七主题CSS

现在，如果您对 271 有所了解，您会看到默认情况下，有一个大标题图像，然后是两列布局。 对于我们的页面布局，这根本行不通。 我们将需要进行一些更改，以使我们的页面看起来像相机产品页面。

我们需要做的第一件事是删除主题标准的标题图像。 为此，请导航到黑色管理栏中的定制器。

当屏幕刷新时，单击附加的 css部分。

最后，添加以下css：

/*Make page full width */
@media screen and (min-width: 1200px) {
    .wrap {
        max-width:100%!important;
        padding:0;
    }
}

@media screen and (min-width: 1200px) {
#primary .entry-content {
  width: 100% !important;
		}
}

.site-content {
	margin:0!important;
	padding:0!important;
}

/* Hide Menu Bar */

.site-branding {
    display:none;
}

/* Hide Page Title */
.page .panel-content .entry-title, .page-title, body.page .entry-title {
    display:none;
}

/*Hide Site Footer */
    .site-footer {
        display: none;
    }
}

这将做一些事情。 首先，它会使内容的宽度填满页面的整个宽度。 其次，它将删除页面上的任何边距和填充。 别担心，Bootstrap 会控制这些。 此外，它将删除您网站的页眉和页脚区域。 最后，它将从我们即将成为杰作中删除页面名称。

注意：如果要为页面创建页脚，可以省略上面的 site-footer css 规则。

单击发布后，您的页面应如下所示：

2.安装和设置插件

现在我们的主题页面已经准备就绪，您需要安装 All Bootstrap Blocks 插件。 安装并激活后，有很多自定义选项可供选择。 您可以调整颜色、排版、链接等等。 要开始使用，请前往Boostrap > Customize 。 您将找到用于自定义布局、内容、创建表单和组件的选项卡。

3. 使用所有引导程序块创建页面布局

要开始，请创建一个新页面。 创建页面后，从页面上第一个块的条形块开始。 这将创建一个添加容器、行和列的部分。

单击+并单击全部浏览。 这将打开一个带有可用模块的侧边栏。
在引导布局下，选择strip 。

添加内容后，您会看到条带内可见容器、行和列。 接下来，您将选择一个标题并将其设置为 H4。

单击+以在 h4 标记下添加另一个标题。 将其设置为 H1，然后将大小设置为 7em。

接下来，通过单击+添加一个 Bootstrap 按钮。 在搜索栏中键入按钮。 设置按钮的文本。 接下来，将样式设置为深色，将大小设置为中等，并将文本换行保留为默认值。

对于该部分中的最后一项，单击+选择图像。 添加您喜欢的任何图像，但您也可以右键单击 Divi 布局示例并保存大相机图像以在布局中使用。 点击上传插入图片。

您会看到图像直接位于按钮下方，但两者之间没有足够的空间。 要解决此问题，请添加一个垫片。 单击图像下方的列以显示+ 。 搜索垫片。 添加垫片并给它30px 高度。 接下来，单击向上箭头将其移动到图像上方。

4. 对容器进行调整

保存页面后，在新选项卡中打开它。 您会注意到，我们仍然需要为该部分设置背景颜色并给它一些填充以使其从页面顶部向下凸出。

回到后端并在容器内单击。 您可以通过选择页面顶部附近的菜单或在页面构建器上单击容器本身来执行此操作。 接下来，滑动显示背景开关。 将水平对齐设置为center ，然后将颜色设置为#c6e8ff 。

接下来，将容器设置为container-fluid 。 这将使容器跨越页面的整个宽度。

最后，我们需要为该行添加一些填充。 单击显示的下拉菜单。 将 padding 设置为50px top 和 bottom 。

5.创建下一节

接下来，我们将创建一个带有图标和文本的部分。 要开始，请通过单击+在第一个条带下方添加另一个条带。 下一步是在布局中插入一个图标。 单击+ ，然后在搜索栏中输入图标。

选择图标模块。 单击设置下拉菜单以显示图标选项。 选择深色作为样式，然后将大小设置为medium 。 将默认图标双活动保留为图标选择。

在图标设置下，设置水平对齐开始。 这会将图标向左对齐以匹配列的其余部分。

添加 H4 并输入您的标题。 接下来，将文本对齐设置为左对齐，颜色设置为深色，并将大小保留为默认值。 最后，选择中等的外观。

单击+添加段落文本。 将对齐设置为左对齐，颜色设置为深色，并将大小保留为默认值。 使用您选择的文本。

保存页面并在新选项卡中查看。 您会注意到图标上方没有任何间距。 要解决此问题，请单击行设置以在顶部和底部添加50 像素的填充。

最后，在设置 XXL下，将水平对齐设置为居中。 这将使所有屏幕尺寸的内容居中到页面的中间。

下一步是复制列。 这是一个很大的节省时间。 您只需更换图标和文本。 为此，请单击列的设置，然后单击重复。 再次重复此步骤以获得总共三列。

现在有三列在页面中居中，图标和文本左对齐。 接下来，更改中间栏中的图标。 单击图标并选择bi-lightbulb-fill 。 对于第三行的图标，选择bi-zoom-in 。

接下来，更改第二列和第三列的标题。

复制第一行

现在第一行图标已经完成，复制该行以创建第二行图标框。

重复上述步骤以更改所有三列中的标题以及图标。 对于第一列中的图标，使用bi-wind 。 第二列的图标是bi-brightness-lo-fill ，第三列的图标是bi-person-fill 。 此行的最后一步是更改标题。

6. 创建最后一个部分

从添加新条带开始。 在设置下，将背景颜色更改为#f0f0f0 。

在容器设置中，将宽度设置为container-fluid 。 此外，在行中添加50 像素的顶部和底部填充。

复制单列以再制作一列。 接下来，调整每列的列宽以适应布局的大小要求。 对于第一列，使其宽度为 5。

对于第二列，保持列宽不变。 接下来，添加一个 H2 标题，然后是一个 H4 标题。 将两者都设置为左对齐。

将图像添加到右列。 请参阅我们的 Divi 布局以获取要导入的图像。 将图像设置为与中心对齐。

对于下一步，在左列的标题下插入两列。 添加行模块。

复制新创建的行中的列。

单击左侧的第一列并将大小设置为 3 。

现在我们已经有了我们的列结构，我们可以添加一个图标。 选择双箭头全屏图标并将大小设置为大。 将样式设置为深色。 通过将水平对齐设置为开始，请务必将图标左对齐。

对于右列，我们将添加一个 H4 标题，然后是一个段落。 确保将颜色设置为深色，然后将每个颜色左对齐。 在 H4 标题下方添加一个分隔符，并将其高度设置为30px 。

接下来，我们将复制我们创建的内部行两次。

最后一步是更改第二行和第三行中的图标。 首先，选择双卡图像图标。 第二个图标将是bi-camera-fill 。

7.优化移动设备页面

Bootstrap 最棒的地方之一就是能够轻松地让您的设计做出响应。 该页面已完成，但还需要几个步骤才能使其为移动设备做好准备。 首先，我们需要告诉 Bootstrap 我们的部分应该在较小的屏幕上占据多少列。

第一个条已经设置为一列，所以我们不需要担心那个。 对于第二条，有一个小的调整。

向下滚动到设置 (XS)部分并将列设置为 1。

接下来，切换到 XXL 并将列设置为 3。这将告诉 Bootstrap 将行中的所有内容放置在移动设备上的一列中，在大屏幕上显示三列。

您可以根据自己的喜好调整其他屏幕尺寸，但这些设置将使您的布局在更大和更小的屏幕上看起来都很好。

最后结果

将 Bootstrap 与 Divi 一起使用怎么样？

虽然在使用通用 WordPress 主题时 Bootstrap 是一个不错的选择，但如果您打算使用 Divi，它通常不是最佳选择。 使用 Divi，您无需任何 Bootstrap 集成即可设计完全响应、美观的网站。 Divi 标配 40 多个模块，可提供无限的设计可能性。 此外，Divi 包括 200 多个完整的网站包，其中包含 2,000 多个预制网站布局供您使用。

如果您打算创建自己的外观，Divi 的内置 Visual Builder 可以轻松完成。 当您在前端设计网站时，您可以实时查看更改。 您可以使用模块轻松创建和自定义页面，然后编辑颜色、文本、添加背景效果等。 Divi 允许您保存和管理您的设计，以及设置全局元素和样式。

WordPress Bootstrap 插件让使用 Bootstrap 变得简单

虽然 WordPress 本身并不能与 Bootstrap 一起使用，但在一些帮助下它们确实可以很好地协同工作。 如果您是实践型，您可以通过创建自定义页面模板将 Bootstrap 引入您的 WordPress 站点，但您需要进行大量编码。 话虽如此，使用 WordPress 存储库中可用的插件，将两者集成是一项不那么艰巨的任务。 使用 All Bootstrap Blocks 插件，您可以使用普通的 Jane 主题并创建一个 WordPress 站点，而无需手动编写代码。 如果您正在寻找一种将 Bootstrap 与 WordPress 集成的简单方法，那么您绝对应该考虑使用 WordPress Bootstrap 插件。

您是否已将 Bootstrap 整合到您的 WordPress 构建中？ 如果是这样，请在下面的评论部分中发出声音。