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? (Why WordPress?)
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? (Why 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主题的样式框架的一些优点。
结合使用Bootstrap和WordPress主题的优势 (Advantages of Using Bootstrap and WordPress Themes Together)
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.
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的顶部,这使网格更加灵活,对开发人员友好且干净。