介绍
我们在这章课中主要介绍一下Bootstrap的使用方法!使用Bootstrap,您可以轻松完成页面设计。
本课程推荐给了解HTML/ CSS但从未接触过 Bootstrap 的人,或者一直使用 Bootstrap 而没有系统了解的人。
什么是前端程序
首先,什么是前端?
Bootstrap是一个前端开发的框架,首先我们要理解一下什么是前端。(虽然偏离了严格的定义)在这个解释的范围内,前端应该解释为使用开发的浏览器上的UI(用户界面)部分JavaScript、CSS,HTML、
也可以说是用户可以看到并通过执行操作向系统下达命令的区域。
那么什么是引导程序?
Bootstrap定位为前端开发中使用的CSS框架。不使用框架,可以用自己的编码来装饰CSS ,但是通过引入Bootstrap这样的框架,就可以高效地完成CSS 。特别是使用Bootstrap ,如后所述,您可以通过为 HTML 的每个元素指定规定的类名来简单地创建设计。 另外,既然是一个框架,在团队开发中也算是行之有效的,因为它可以按照一定的规则进行编码。
Bootstrap 最初由Twitter开发,截至 2021 年 2 月,5.0.0 版本为最新版本。
当今世界上有许多CSS框架,但 Bootstrap是 框架的先驱。
使用 Bootstrap 的好处
我在上面谈到了使用 Bootstrap 的优点,但我将更详细地解释这三个功能。
支持响应式网页设计
使用 Bootstrap 的最大优势之一是它支持响应式网页设计。
响应式网页设计是一种在 PC、平板电脑和智能手机等设备上针对不同屏幕尺寸切换到最佳布局设计的方法。
Bootstrap 允许您轻松地为响应式网页设计指定样式,省去了为每个设备准备不同 HTML 的麻烦。
易于引入,多功能性
Bootstrap的安装步骤后面会讲到,其实很简单。
它还具有足够的通用性,无论正在构建的产品的规模或类型如何,都可以使用。
您可以通过这种方式轻松更改设计这一事实是一个很大的优势。
许多组件可用
Bootstrap提供了精心设计的组件(按钮、表单等)。此外,使用这些组件的
过程可以简单地通过将指定的类添加到每个 HTML 元素来实现。即使是非设计工程师也可以通过几个简单的步骤达到一定的设计水平。下面,我想介绍一下 标准组件。
引导设置
现在让我们来看看如何以一种简单的方式使用它。
首先,让我们设置它以便我们可以使用 Bootstrap。这一次,我们不使用CDN(内容分发网络),我们会下载 Bootstrap到我们自己的服务器中。
首先,访问下面的官方页面并下载 Bootstrap。请注意:bootstrap的版本不一样,很多代码都出现了变动,我们在这儿用的是版本5.3.
下载完成后,解压 zip 文件,您应该会看到css和 js 文件夹。
我们只使用【css】文件夹中的“bootstrap.min.css”文件,和【js】文件夹中的“bootstrap.min.js”文件。所以其他的文件都可以删除。但是“bootstrap.min.js”文件是在jQuery的基础上运行的,所以我们在
Bootstrap 还需要加载jQuery ,因此在“ bootstrap.min.js”之前一定要确保读取“JQuery”。
将Bootstrap文件夹方到Wordpress的服务器中
我的途径如下
wordpress的主题【oceanly】之下【bootstrap-5.2.0】
然后我们在wordpress,可以用以下的方法添加。
function theme_enqueue_styles() {
// 读取bootstrap.min.css
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri().'/bootstrap-5.3.0/assets/dist/css/bootstrap.min.css');
// 读取bootstrap.bundle.min.js
wp_enqueue_script( 'bootstrap-script', get_template_directory_uri().'/bootstrap-5.3.0/assets/dist/js/bootstrap.bundle.min.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );