bootstrap步骤
This tutorial explains the key steps for using Bootstrap and WordPress together, integrating the latest release of the Bootstrap library with a WordPress theme.
本教程说明了结合使用Bootstrap库和WordPress主题的最新版本的Bootstrap库的关键步骤。
Both Bootstrap and WordPress are highly popular: 3.7 websites on the internet are built with Bootstrap and 29% of the web uses WordPress. Clearly, knowing how to build websites and apps using these two robust and mature, open-source technologies can be a valuable skill for developers in the workplace.
Bootstrap和WordPress都非常受欢迎： Internet上的3.7个网站都是使用Bootstrap构建的，其中 29％的网站使用WordPress 。 显然，了解如何使用这两种健壮且成熟的开源技术来构建网站和应用程序对于工作场所的开发人员而言可能是一项宝贵的技能。
There’s quite a lot to cover, so let’s dive in!
有很多要讲的内容，所以让我们开始吧！
WordPress is open-source software you can use to create a beautiful website, blog or app.
WordPress是开源软件，可用于创建漂亮的网站，博客或应用。
The popularity of WordPress is mostly due to its ease of use and powerful options for appearance, customization, and extensibility (via themes and plugins).
WordPress的流行主要是由于其易用性以及外观，自定义和可扩展性(通过主题和插件)的强大选项。
Thanks to WordPress themes, webmasters with little to no coding experience can power their websites with a professional appearance and custom functionality. Users can easily select different themes with a few clicks using the Appearance menu in the administration dashboard or copy theme files directly into the wp-content > themes folder. Themes can be purchased from dedicated marketplaces, individual developers, or can also be freely installed from the WordPress.org themes directory.
借助WordPress主题，几乎没有编码经验的网站管理员可以以专业的外观和自定义功能为网站提供支持。 使用管理仪表板中的“ 外观”菜单，用户只需单击几下即可轻松选择不同的主题，或将主题文件直接复制到wp-content> themes文件夹中。 主题可以从专门的市场，个人开发者处购买，也可以从WordPress.org主题目录免费安装。
As developers, we can create our own theme, which is what we’re going to do in this tutorial. More specifically, we’re going to perform the key steps towards building a simple WordPress theme that integrates the latest release of the Bootstrap library.
作为开发人员，我们可以创建自己的主题，这是我们在本教程中要做的。 更具体地说，我们将执行关键步骤以构建一个简单的WordPress主题，该主题集成了最新版本的Bootstrap库。
Bootstrap is a robust and comprehensive UI library for developing responsive and mobile-first websites and apps. Here are some advantages of using Bootstrap as the styling framework for a WordPress theme.
Bootstrap是一个健壮且全面的UI库，用于开发响应式和移动优先的网站和应用程序。 这是将Bootstrap用作WordPress主题的样式框架的一些优点。
In my view, there are many advantages of using Bootstrap to style a WordPress theme.
在我看来，使用Bootstrap设置WordPress主题的样式有很多优点。
Bootstrap is a popular, open-source project with extensive development and continuous maintenance, which over time has resulted in fewer bugs.
Bootstrap是一个受欢迎的开源项目，具有广泛的开发和持续的维护，随着时间的流逝，导致的bug减少了。
It’s a cross-browser framework that supports major browsers with a good CSS baseline called [Reboot] (http://getbootstrap.com/docs/4.0/content/reboot/).
这是一个跨浏览器框架，它支持具有良好CSS基准的主流浏览器，称为[Reboot](http://getbootstrap.com/docs/4.0/content/reboot/)。
It has an extensive and thorough documentation.
它具有广泛而详尽的文档。
It deals with reset, grids, typography, utilities, and media queries, thereby freeing up development time.
它处理重置，网格，排版，实用程序和媒体查询，从而节省了开发时间。
It’s widely used by developers to style websites, so it’s easy to find tutorials, demos, and open-source projects to learn from or extend.
开发人员已广泛使用它来设置网站样式，因此很容易找到教程，演示和开放源代码项目以进行学习或扩展。
Bootstrap can be used to quickly create a mobile-first and mobile-optimized WordPress theme without reinventing the wheel.
Bootstrap可用于快速创建针对移动设备优先和针对移动设备优化的WordPress主题，而无需重新设计轮子。
There are tons of starter themes made available by the community, such as Understrap, which aim to provide a quick starting point for developers to create WordPress themes with Bootstrap.
社区提供了许多入门主题，例如Understrap ，旨在为开发人员提供一个快速的起点，以便他们使用Bootstrap创建WordPress主题。
Although it’s not created with WordPress in mind, Bootstrap can be easily integrated with WordPress.
虽然它并不是在考虑WordPress的情况下创建的，但是Bootstrap可以轻松地与WordPress集成。
We can easily customize Bootstrap to meet specific project requirements, once we have enough knowledge of the available classes.
一旦我们对可用类有足够的了解，我们就可以轻松自定义Bootstrap以满足特定的项目要求。
We can take advantage of hundreds of JavaScript/jQuery plugins already integrated with Bootstrap.
我们可以利用已经与Bootstrap集成的数百个JavaScript / jQuery插件。
Starting with Bootstrap 4, plugins use modern ES6.
从Bootstrap 4开始，插件使用现代ES6。
With the release of Bootstrap 4, the library now uses Sass instead of Less as the preprocessor of choice, which makes it more widely compatible with a huge number of developer workflows.
随着Bootstrap 4的发布，该库现在使用Sass而不是Less作为首选的预处理器，这使其与大量开发人员工作流更加广泛地兼容。
Bootstrap 4 introduces new components such as the card component. Bootstrap cards make it easy to create a modern, card-based layout such as the Masonry-style interface.
Bootstrap 4引入了新的组件，例如卡组件 。 引导卡可轻松创建基于卡的现代布局，例如Masonry风格的界面。
The Bootstrap 4 grid system is built on top of flexbox, which makes the grid even more flexible, developer-friendly and clean.
Bootstrap 4网格系统构建在flexbox的顶部，这使网格更加灵活，对开发人员友好且干净。
As for the disadvantages, the developer community has raised a few concerns, including the following.
对于缺点，开发人员社区提出了一些担忧，包括以下几点。
Bootstrap isn’t designed for straightforward integration with WordPress, but that shouldn’t be a huge obstacle for most developers.
Bootstrap并不是为与WordPress直接集成而设计的，但是对于大多数开发人员来说，这并不是一个巨大的障碍。
If we need to override a lot of predefined Bootstrap styles to meet the design requirements, it might not be worthwhile to use a CSS framework at all.
如果我们需要重写许多预定义的Bootstrap样式以满足设计要求，那么根本不值得使用CSS框架。
It’s true that Bootstrap makes it easy to quickly add responsive styling to our theme. However, we also need to invest time learning about Bootstrap to be able to add our customizations so that our themes look different from the numerous Bootstrap-based websites on the Internet.
的确，Bootstrap可以轻松快速地将响应式样式添加到我们的主题中。 但是，我们还需要花时间学习有关Bootstrap的知识，以便能够添加我们的自定义设置，以便我们的主题看上去与Internet上众多基于Bootstrap的网站不同。
Bootstrap depends on jQuery, so in some situations we might have to deal with problems related to jQuery — such as outdated plugins, or having to include the whole jQuery library, even if our project only needs a small feature like $.ajax().
Bootstrap依赖于jQuery，因此在某些情况下，即使我们的项目仅需要$.ajax()类的小功能，在某些情况下，我们也可能不得不处理与jQuery相关的问题，例如过时的插件，或者必须包括整个jQuery库。
In this tutorial, I assume you have a development environment with PHP, MySQL and WordPress installed — such as Homestead Improved. This quick tip will help you get up and running with a brand new Homestead Improved Vagrant VM in no time.
在本教程中，我假设您有一个安装了PHP，MySQL和WordPress的开发环境，例如Homestead Improvement 。 此快速提示将帮助您立即使用全新的Homestead Enhanced Vagrant VM启动并运行。
You also need to be familiar with WordPress — particularly how to install and activate themes, add WordPress Menus, create posts and pages, etc.
您还需要熟悉WordPress，尤其是如何安装和激活主题，添加WordPress菜单，创建帖子和页面等。
Finally, you need to have some knowledge of how to build a WordPress theme. In fact, this is a tutorial on integrating Bootstrap in a WordPress theme, not a tutorial on how to build a fully functional WordPress theme, which would have a much wider scope than what we have available in this article.
最后，您需要了解如何构建WordPress主题。 实际上，这是有关将Bootstrap集成到WordPress主题中的教程，而不是有关如何构建功能齐全的WordPress主题的教程，该主题的范围比本文中提供的要广泛得多。
In this section, we’re going to learn about the key steps we need to perform to integrate Bootstrap in a simple WordPress theme project.
在本节中，我们将学习将Bootstrap集成到一个简单的WordPress主题项目中所需执行的关键步骤。
First, let’s review which files we’re going to create.
首先，让我们回顾一下要创建的文件。
A WordPress theme has a predetermined file structure. Some files are required for the theme to be recognized by WordPress.
WordPress主题具有预定的文件结构。 WordPress可以识别主题需要一些文件。
The first required file is style.css. This CSS file contains styles for the theme. Most importantly, this file also has a special task: it provides meta information about the theme such as the theme name, description, author, and other extra details. The meta information needs to be present in the head of the file in the form of CSS comments.
第一个必需文件是style.css 。 此CSS文件包含主题的样式。 最重要的是，该文件还有一个特殊的任务：它提供有关主题的元信息，例如主题名称，描述，作者和其他额外的细节。 元信息需要以CSS注释的形式出现在文件的开头。
The other required file is index.php, which is the main WordPress theme file, and the last fallback template file WordPress relies on, in case it can’t find any other template file to display its content.
另一个必需文件是index.php ，这是主要的WordPress主题文件，最后一个后备模板文件WordPress依靠WordPress，以防找不到其他模板文件来显示其内容。
There are many optional files, but for our simple Bootstrap-based theme we’re only going to add the following files:
有许多可选文件，但是对于我们基于Bootstrap的简单主题，我们将仅添加以下文件：
header.php and footer.php, to lay out the header and footer sections of our WordPress theme respectively, which are displayed on every page of our theme
header.php和footer.php ，分别布置WordPress主题的页眉和页脚部分，这些部分显示在主题的每一页上
functions.php, where we’re going to write the code for loading our theme’s custom stylesheet, Bootstrap styles and scripts, and more.
functions.php ，我们将在其中编写代码以加载主题的自定义样式表，Bootstrap样式和脚本等。
If you’re curious, check out the other templates that you can customize from the WordPress docs.
如果您感到好奇，请查看可从WordPress文档中自定义的其他模板。
Let’s get down to business!
让我们转到工作上！
First, we head over to our WordPress installation folder and navigate to wp-content -> themes. Here, we create a folder for our theme. Let’s call it bs-theme.
首先，我们转到WordPress的安装文件夹，并导航到wp-content -> themes 。 在这里，我们为主题创建一个文件夹。 我们称之为bs-theme 。
Let’s create our first required file, style.css, where we’re going to put our custom CSS code.
让我们创建第一个必需的文件style.css ，在其中放置自定义CSS代码。
At the very top of this stylesheet document (make sure you leave no blank space at the top), we add the meta information about our theme between CSS comments (remember to replace the <THEME_URI>, <AUTHOR_NAME>, and <AUTHOR_URI> placeholders with values relating to your own project):
在此样式表文档的最顶部(确保顶部不留空白)，我们在CSS注释之间添加有关主题的元信息(切记替换<THEME_URI> ， <AUTHOR_NAME>和<AUTHOR_URI>占位符)以及与您自己的项目相关的值)：
/* Theme Name: BS 4 Theme Theme URI: <THEME_URI> Description: A Theme for WordPress with Bootstrap for styling. Author: <AUTHOR_NAME> Author URI: <AUTHOR_URI> Version: 1.0 */Now WordPress can display our theme’s info in the admin area.
现在，WordPress可以在管理区域中显示我们主题的信息。
We can add our custom styles below the meta information comments. For example, let’s add a few CSS rules to style the <body>:
我们可以在元信息注释下方添加自定义样式。 例如，让我们添加一些CSS规则来设置<body>样式：
@import url(https://fonts.googleapis.com/css?family=Montserrat:700); body { padding-top: 4.5rem; font-family: 'Montserrat','Helvetica Neue',Arial,sans-serif; color: #001A33; }Let’s start by creating header.php in the themes folder. Next, we add the following content:
让我们从在themes文件夹中创建header.php开始。 接下来，我们添加以下内容：
<!DOCTYPE html> <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]><html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width"> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#"> <?php bloginfo('name'); ?> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="/"> Home <span class="sr-only">(current)</span> </a> </li> </ul> </div> </nav>In the code above, most meta information for the HTML head section is added using various WordPress tags, such as bloginfo('name') for getting the site’s name, wp_title() to get the title for the page, and wp_head() to fire the wp_head action hook used by WordPress to add links and other functionality to the head section.
在上面的代码中，使用各种WordPress标记添加了HTML head部分的大多数元信息，例如bloginfo('name')用于获取站点名称， wp_title()用于获取页面标题，而wp_head()触发WordPress使用的wp_head操作钩子 ，以将链接和其他功能添加到head部分。
We’ve also used different Bootstrap classes to create a responsive navigation bar. However, as it is, the navigation bar is not dynamic. That is, it’s not integrated with the WordPress menu functionality. This means that we can’t build a WordPress menu in the admin area and see it displayed on the front end of our website.
我们还使用了不同的Bootstrap类来创建响应式导航栏。 但是，导航栏不是动态的。 也就是说，它没有与WordPress菜单功能集成在一起。 这意味着我们无法在管理区域中构建WordPress菜单，而无法看到其显示在我们网站的前端。
Giving the static Bootstrap navigation bar the power of WordPress will be our next step.
为静态Bootstrap导航栏提供WordPress的功能将是我们的下一步。
To accomplish our task, we need a WordPress walker class, which lets developers traverse tree-like data structures with a view to rendering HTML markup. There are a few Bootstrap navigation walker classes available on the Internet. For this tutorial, we’ll go with Dominic Businaro’s BS4navwalker, which is freely available on GitHub.
为了完成我们的任务，我们需要一个WordPress walker类 ， 该类使开发人员可以遍历树状数据结构以呈现HTML标记。 Internet上有一些Bootstrap导航walker类。 在本教程中，我们将使用Dominic Businaro的BS4navwalker ，该代码可在GitHub上免费获得。
We grab bs4navwalker.php and save it in the root directory of our theme (which we called bs-theme earlier in this tutorial).
我们抓取bs4navwalker.php并将其保存在主题的根目录中(在本教程的前面我们称为bs-theme )。
Next, we’re going to create a functions.php file (this name is required by WordPress) in the theme’s root folder, and we’ll write this line of code:
接下来，我们将在主题的根文件夹中创建一个functions.php文件(WordPress需要此名称)，并将编写以下代码行：
require_once('bs4navwalker.php');Now we can use the Bootstrap navigation walker class in our theme files.
现在，我们可以在主题文件中使用Bootstrap导航walker类。
We locate the markup for the nav element we just wrote and modify it as follows:
我们找到刚才编写的nav元素的标记，并按如下所示对其进行修改：
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#"> <?php bloginfo('name'); ?> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <?php wp_nav_menu([ 'menu' => 'primary', 'theme_location' => 'menu-1', 'container' => 'div', 'container_id' => 'navbarCollapse', 'container_class' => 'collapse navbar-collapse', 'menu_id' => false, 'menu_class' => 'navbar-nav mr-auto', 'depth' => 0, 'fallback_cb' => 'bs4navwalker::fallback', 'walker' => new bs4navwalker() ]); ?> </nav>The code above assumes we’ve already created a menu in the WordPress admin area and have a few pages stored in the WordPress database.
上面的代码假设我们已经在WordPress管理区域中创建了一个菜单，并在WordPress数据库中存储了几页。
To display our navigation bar, we’re using the wp_nav_menu() function.
为了显示导航栏，我们使用wp_nav_menu()函数。
The values for the menu and theme_location parameters we’re passing to wp_nav_menu() are taken from the settings of our WordPress menu, which we should have created already in the admin area.
我们传递给wp_nav_menu()的menu和theme_location参数的值取自我们应该已经在管理区域中创建的WordPress菜单的设置。
The values for the container, container_id, and container_class parameters are taken from the Bootstrap classes and CSS id attribute on the div element that wraps the ul element containing the list items for our navigation links.
container ， container_id和container_class参数的值取自div元素上的Bootstrap类和CSS id属性，该属性包装了包含我们导航链接列表项的ul元素。
The menu_class parameter’s value comes from the Bootstrap class on the ul element.
menu_class参数的值来自ul元素上的Bootstrap类。
The depth parameter’s value indicates how many hierarchical levels our navigation menu is going to have. We’ve set this to 0, which is the default value and stands for all.
depth参数的值指示我们的导航菜单将具有多少个层次级别。 我们将其设置为0 ，这是默认值，代表all 。
The walker parameter is here very important, and we’ve set it to a new instance of the bs4navwalker class, which is responsible for rendering the Bootstrap navigation markup.
walker参数在这里非常重要，我们将其设置为bs4navwalker类的新实例，该类负责呈现Bootstrap导航标记。
And we’re done!
我们完成了！
You’ll find a detailed explanation with the full list of parameters for the wp_nav_menu() function on the WordPress.org documentation page.
您可以在WordPress.org文档页面上找到wp_nav_menu()函数的参数完整列表的详细说明。
The next step is to create the footer.php file and add the following content:
下一步是创建footer.php文件并添加以下内容：
<footer> </footer> < ?php wp_footer(); ?> </body> </html>wp_footer() is used by WordPress to dynamically place different markup elements, such as links to stylesheet and JavaScript files, at the bottom of the page.
WordPress使用wp_footer()在页面底部动态放置不同的标记元素，例如指向样式表和JavaScript文件的链接。
It’s important to note that many plugins use the wp_head() and wp_footer() hooks to place required elements in the head and footer of the page. Therefore, you’ll need to make sure to add both hooks as shown in this tutorial. Doing so will avoid breaking these plugins’ functionality when our theme is activated.
重要的是要注意，许多插件使用wp_head()和wp_footer()钩子将所需的元素放置在页面的wp_footer()和页脚中。 因此，您需要确保添加两个钩子，如本教程所示。 这样做可以避免在激活我们的主题时破坏这些插件的功能。
index.php is the second required file for every WordPress theme, so let’s go ahead and create it. We then add the content below:
index.php是每个WordPress主题的第二个必需文件，所以让我们继续创建它。 然后，我们在下面添加内容：
<?php get_header(); ?> <!-- Other Content here --> <?php get_footer(); ?>Using get_header() and get_footer() instructs WordPress to include the previously created templates, header.php and footer.php, inside index.php.
使用get_header()和get_footer()指示WordPress将先前创建的模板header.php和footer.php在index.php 。
To show our posts, we’ll be using the famous WordPress loop.
为了展示我们的帖子，我们将使用著名的WordPress循环 。
Inside index.php, between the header and footer tags, let’s add the following code:
在index.php ，在header和footer标记之间，让我们添加以下代码：
<div> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2> <a href="<?php the_permalink() ?>"> <?php the_title(); ?> </a> </h2> <?php the_content(); ?> <?php endwhile; else: ?> <p>There no posts to show</p> <?php endif; ?> </div>This is what happens above:
上面是这样的：
We check if there are any posts by calling have_posts().
我们通过调用have_posts()检查是否有任何帖子。
Using a while loop, we loop over all the existing posts.
使用while循环，我们遍历所有现有帖子。
Finally, we show the title and content for each post. We could also get extra information such as the date when the post is published, the author of the post, comments associated with each post, and so on. 最后，我们显示每个帖子的标题和内容。 我们还可以获得其他信息，例如帖子发布的日期，帖子的作者，与每个帖子相关的评论等等。After adding our template files, we now have a good starting theme that we can activate via the Appearance menu in the admin panel.
添加模板文件后，我们现在有了一个很好的入门主题，可以通过管理面板中的外观菜单激活它。
If we preview our theme, we’ll get an unstyled site, which looks like the following screenshot:
如果预览主题，我们将获得一个未样式设置的网站，该网站的外观类似于以下屏幕截图：
To give our theme a Bootstrap look and feel, we need to include the Bootstrap files in our project.
为了使主题具有Bootstrap外观，我们需要在项目中包含Bootstrap文件。
Let’s grab the Bootstrap ZIP file from getbootstrap.com and copy the files into our theme. (For organizational purposes, we can add css and js folders to our project and place the corresponding files inside the appropriate folder.)
让我们从getbootstrap.com获取Bootstrap ZIP文件，然后将文件复制到我们的主题中。 (出于组织目的，我们可以将css和js文件夹添加到我们的项目中，并将相应的文件放置在适当的文件夹中。)
Our folder structure should look like this:
我们的文件夹结构应如下所示：
- bs-theme - style.css - footer.php - functions.php - header.php - index.php - single.php - css - bootstrap.min.css - js - vendor - bootstrap.bundle.min.cssNext, we’ll do the following:
接下来，我们将执行以下操作：
Enqueue Bootstrap stylesheet and JavaScript files
使 Bootstrap样式表和JavaScript文件入队
use WordPress hooks to insert the Bootstrap files into the web page.
使用WordPress挂钩将Bootstrap文件插入网页。
Let’s start by opening functions.php and adding the following code:
让我们首先打开functions.php并添加以下代码：
<?php function themebs_enqueue_styles() { wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'core', get_template_directory_uri() . '/style.css' ); } add_action( 'wp_enqueue_scripts', 'themebs_enqueue_styles'); function themebs_enqueue_scripts() { wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/vendor/bootstrap.bundle.min.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'themebs_enqueue_scripts');We’ve used various WordPress methods here, so let’s briefly look at each one of them:
我们在这里使用了各种WordPress方法，因此让我们简要地看一下其中每个方法：
wp_enqueue_style(): this method enqueues and loads the stylesheet passed as a parameter. In the code above, we use it to load both the Bootstrap stylesheet and our custom CSS file.
wp_enqueue_style() ：此方法使作为参数传递的样式表入队并加载。 在上面的代码中，我们使用它来加载Bootstrap样式表和自定义CSS文件。
wp_enqueue_script(): this method enqueues and loads a script file. We’ve used it to load Bootstrap’s JavaScript bundle, indicating the jQuery library as a dependency. jQuery comes already bundled with WordPress, so we don’t need to load it using a URL. (WordPress knows exactly where to get it.)
wp_enqueue_script() ：此方法wp_enqueue_script()并加载脚本文件。 我们已经使用它加载了BootstrapJavaScript包，表明jQuery库是一个依赖项。 jQuery已经与WordPress捆绑在一起，因此我们不需要使用URL进行加载。 (WordPress确切知道从何处获得它。)
get_template_directory_uri(): this method gets the URI of the current activated theme directory.
get_template_directory_uri() ：此方法获取当前激活的主题目录的URI。
add_action('wp_enqueue_scripts', '...'): this method hooks our functions into the wp_enqueue_scripts action (used when en-queuing styles and scripts that need to appear on the front-end of the website).
add_action('wp_enqueue_scripts', '...') ：此方法将我们的函数挂接到wp_enqueue_scripts操作中(用于将需要显示在网站前端的样式和脚本排队时使用)。
You can find more about including CSS and JavaScript files in the WordPress theme docs.
您可以在WordPress主题文档中找到有关包含CSS和JavaScript文件的更多信息。
This is our theme now with its shiny Bootstrap appearance:
这是我们现在的主题，其闪亮的Bootstrap外观：
In this tutorial, we’ve seen how to create a simple WordPress theme that integrates the latest version of Bootstrap.
在本教程中，我们已经看到了如何创建一个简单的WordPress主题，该主题集成了最新版本的Bootstrap。
With this new skill under your developer belt, you’re now ready to create your own awesome, Bootstrap-based WordPress theme and share it with the world!
利用开发人员的这项新技能，您现在就可以创建自己的超棒，基于Bootstrap的WordPress主题并将其与世界分享！
If you’ve heard about Bootstrap but have been putting off learning it because it seems too complicated, then play through our Introduction to Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.
如果您听说过Bootstrap但由于似乎过于复杂而推迟学习它，请浏览我们的Bootstrap 4入门课程，快速而有趣地介绍Bootstrap的功能。
翻译自: https://www.sitepoint.com/bootstrap-wordpress-theme-integration/
bootstrap步骤
