如何在 WordPress 中调用 Bootstrap?

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

如何在 WordPress 中调用 Bootstrap?
如何在 WordPress 中调用 Bootstrap?

将Bootstrap包含到WordPress主题

要将Bootstrap包含到WordPress主题中,您需要进行以下步骤:

  1. 下载Bootstrap文件。您可以在Bootstrap官方网站上下载最新版本的Bootstrap文件。
  2. 将下载的Bootstrap文件解压缩到您的WordPress主题文件夹中。
  3. 在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>
  1. 在主题中使用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的所有类了。

应用示例

  1. 创建一个响应式导航栏

使用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>
  1. 创建一个响应式布局

使用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>
  1. 创建一个按钮

使用Bootstrap可以很容易地创建一个按钮。 例如,您可以使用以下代码创建一个基本的按钮:

<button class="btn btn-primary">Click me</button>
  1. 创建一个表单

使用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>
  1. 创建一个模态框

使用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">&times;</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后台中创建一个菜单。 要创建菜单,请执行以下步骤:

  1. 在WordPress后台中,点击“外观”>“菜单”。
  2. 点击“创建新菜单”按钮。
  3. 输入菜单名称,然后点击“创建菜单”按钮。
  4. 在菜单项目列表中,选择您想要添加到菜单中的页面、文章或其他内容。
  5. 点击“添加到菜单”按钮。

一旦您已经创建了菜单,您就可以在您的WordPress主题中使用菜单功能来将菜单项目添加到响应式导航栏中。 要在WordPress主题中添加菜单,请执行以下步骤:

  1. 在WordPress后台中,点击“外观”>“菜单”。
  2. 在菜单设置部分中,选择您想要使用的菜单,然后点击“保存更改”按钮。
  3. 在您的主题的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>
  1. 在“<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/

(0)
牛奇网牛奇网
上一篇 2022年12月24日 上午10:09
下一篇 2022年12月24日 下午2:05

相关推荐

发表回复

登录后才能评论