在WordPress中包含Bootstrap的最佳方式

我来自Laravel，在Laravel中使用Bootstrap相对容易。然而，我有一个项目，我一直在与Wordpress合作，我正在为我的导航栏使用引导。问题是，他们把我在页面上的标题弄乱了。我使用的主题是Be theme。这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="tabbable">
<div class="panel panel-default">
<div class="panel-body">
    <ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black; "></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="link" role="tabpanel" style="; color: black;">  


    <form action="" method="get" name="" style="color: black;" class="form-inline">
    <br>

    <br>


<input type="submit" name="submit" class="btn btn-default" style="background-color: red;">
</form>

<table>

</table>




    </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>

   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
</div>

</div>
</div>
</div>
</div>
</body>
</html>

多亏了我的帮助，我用这段代码创建了一个模板页面previous question.

如何使用引导程序而不弄乱WP主题及其标题？

编辑：这就是我的功能。php看起来像

add_action( \'wp_enqueue_scripts\', \'mfnch_enqueue_styles\', 101 );
function mfnch_enqueue_styles() {

    // Enqueue the parent stylesheet
//  wp_enqueue_style( \'parent-style\', get_template_directory_uri() .\'/style.css\' );     //we don\'t need this if it\'s empty

    // Enqueue the parent rtl stylesheet
    if ( is_rtl() ) {
        wp_enqueue_style( \'mfn-rtl\', get_template_directory_uri() . \'/rtl.css\' );
    }

    // Enqueue the child stylesheet
    wp_dequeue_style( \'style\' );
    wp_enqueue_style( \'style\', get_stylesheet_directory_uri() .\'/style.css\' );

}

如何编辑此函数以包含引导^？我自己试过了，但没有效果。

提前感谢！

<?php /** * Enqueue scripts and styles */ function your_theme_enqueue_scripts() { // all styles wp_enqueue_style( \'bootstrap\', get_stylesheet_directory_uri() . \'/css/bootstrap.css\', array(), 20141119 ); wp_enqueue_style( \'theme-style\', get_stylesheet_directory_uri() . \'/css/style.css\', array(), 20141119 ); // all scripts wp_enqueue_script( \'bootstrap\', get_template_directory_uri() . \'/js/bootstrap.min.js\', array(\'jquery\'), \'20120206\', true ); wp_enqueue_script( \'theme-script\', get_template_directory_uri() . \'/js/scripts.js\', array(\'jquery\'), \'20120206\', true ); } add_action( \'wp_enqueue_scripts\', \'your_theme_enqueue_scripts\' );

function pwwp_enqueue_my_scripts() { // jQuery is stated as a dependancy of bootstrap-js - it will be loaded by WordPress before the BS scripts wp_enqueue_script( \'bootstrap-js\', \'//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\', array(\'jquery\'), true); // all the bootstrap javascript goodness } add_action(\'wp_enqueue_scripts\', \'pwwp_enqueue_my_scripts\'); function pwwp_enqueue_my_styles() { wp_enqueue_style( \'bootstrap\', \'//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\' ); // this will add the stylesheet from it\'s default theme location if your theme doesn\'t already //wp_enqueue_style( \'my-style\', get_template_directory_uri() . \'/style.css\'); } add_action(\'wp_enqueue_scripts\', \'pwwp_enqueue_my_styles\');

小码农CODE

相关推荐

Change Woothemes admin url