Bootstrap是一个用于开发响应式网站的开源框架。 在WordPress中使用Bootstrap的一种方法是在WordPress主题中包含Bootstrap文件。

将Bootstrap包含到WordPress主题
要将Bootstrap包含到WordPress主题中,您需要进行以下步骤:
- 下载Bootstrap文件。您可以在Bootstrap官方网站上下载最新版本的Bootstrap文件。
- 将下载的Bootstrap文件解压缩到您的WordPress主题文件夹中。
- 在WordPress主题的header.php文件中包含Bootstrap文件。您可以在下面的代码中包含Bootstrap CSS文件:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/bootstrap/css/bootstrap.min.css">
您还可以包含Bootstrap JavaScript文件,如下所示:
<script src="<?php bloginfo('template_directory'); ?>/bootstrap/js/bootstrap.min.js"></script>
- 在主题中使用Bootstrap类。一旦您已经在WordPress主题中包含了Bootstrap文件,就可以在您的主题中使用Bootstrap的所有类了。例如,您可以使用“btn”类来创建一个按钮,如下所示:
<button class="btn btn-primary">Click me</button>
如何在子主题中调用Bootstrap
如果您想在WordPress子主题中使用Bootstrap,您可以使用与在主题中使用Bootstrap相同的方法。 首先,您需要下载Bootstrap文件并将其解压缩到子主题文件夹中。 然后,您可以在子主题的header.php文件中包含Bootstrap文件,就像在主题中一样。
例如,您可以在子主题的header.php文件中包含Bootstrap CSS文件,如下所示:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/bootstrap/css/bootstrap.min.css">
您还可以在子主题中包含Bootstrap JavaScript文件,如下所示:
<script src="<?php bloginfo('stylesheet_directory'); ?>/bootstrap/js/bootstrap.min.js"></script>
一旦您在子主题中包含了Bootstrap文件,就可以在子主题中使用Bootstrap的所有类了。
应用示例
- 创建一个响应式导航栏
使用Bootstrap可以很容易地创建一个响应式导航栏。 例如,您可以使用以下代码创建一个基本的导航栏:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
- 创建一个响应式布局
使用Bootstrap的网格系统可以很容易地创建响应式布局。 例如,您可以使用以下代码创建一个3列响应式布局:
<div class="container">
<div class="row">
<div class="col-4">Column 1</div>
<div class="col-4">Column 2</div>
<div class="col-4">Column 3</div>
</div>
</div>
- 创建一个按钮
使用Bootstrap可以很容易地创建一个按钮。 例如,您可以使用以下代码创建一个基本的按钮:
<button class="btn btn-primary">Click me</button>
- 创建一个表单
使用Bootstrap可以很容易地创建一个表单。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
- 创建一个模态框
使用Bootstrap可以很容易地创建一个模态框。 例如,您可以使用以下代码创建一个基本的模态框:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
如何将这些示例应用到 WordPress
您可以将这5个示例应用到WordPress主题中,只需将代码复制并粘贴到您的主题文件中即可。 例如,您可以将导航栏代码复制并粘贴到您的header.php文件中,以在所有页面上显示导航栏。
为了使用Bootstrap的其他组件,您可以在您的主题文件中的任何位置使用Bootstrap类。 例如,如果您想在您的主题中的某个页面上创建一个按钮,只需在您的页面模板文件中使用以下代码:
<button class="btn btn-primary">Click me</button>
同样,如果您想在您的主题中的某个页面上创建一个表单,只需在您的页面模板文件中使用以下代码:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
将wordpress菜单添加到响应式导航
要在WordPress中的菜单中自动添加到响应式导航栏中,您需要使用WordPress菜单功能。
首先,您需要在WordPress后台中创建一个菜单。 要创建菜单,请执行以下步骤:
- 在WordPress后台中,点击“外观”>“菜单”。
- 点击“创建新菜单”按钮。
- 输入菜单名称,然后点击“创建菜单”按钮。
- 在菜单项目列表中,选择您想要添加到菜单中的页面、文章或其他内容。
- 点击“添加到菜单”按钮。
一旦您已经创建了菜单,您就可以在您的WordPress主题中使用菜单功能来将菜单项目添加到响应式导航栏中。 要在WordPress主题中添加菜单,请执行以下步骤:
- 在WordPress后台中,点击“外观”>“菜单”。
- 在菜单设置部分中,选择您想要使用的菜单,然后点击“保存更改”按钮。
- 在您的主题的header.php文件中,查找导航栏代码。 该代码应该与以下类似:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<!-- Your menu items go here -->
</ul>
</div>
</nav>
- 在“<ul class=”navbar-nav”>”和“</ul>”之间,使用WordPress菜单功能添加菜单项目。 例如,您可以使用以下代码:
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNav',
'menu_class' => 'navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker()
) );
?>
这将使用您在WordPress后台中创建的菜单项目创建一个菜单。
作者:牛奇网,本站文章均为辛苦原创,在此严正声明,本站内容严禁采集转载,面斥不雅请好自为之,本文网址:https://www.niuqi360.com/avada/how-to-use-bootstrap-in-wordpress-2/