Bootstrap 主题样式到 wordpress 的转换答案

【问题标题】：Boostrap theme styling to wordpress conversionBootstrap 主题样式到 wordpress 的转换
【发布时间】：2014-08-13 05:55:46
【问题描述】：

我在通过 localhost 将我的 bootstrap.css 转换为 wordpress 时遇到了问题。我已经将我的 自定义引导主题 放在了 wordpress 的主题文件夹中。但是，我遵循了一些关于如何轻松转换此主题的教程，但是，它可以显示菜单，但我的 css 没有样式。

这是我的 header.php

代码

     <!DOCTYPE html>
     <html lang="en">
     <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <link href="<?php bloginfo('template_directory');?>" rel="stylesheet">


  </head>

   <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id = "home">
      <div class="container" >
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-   target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand page-scroll" href="#page-top" ><strong>CODE.DESIGN.BUILD</strong></a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav pull-right">
            <li><a href="#about" class = "page-scroll">About</a></li>
             <li><a href="#portfolio" class = "page-scroll">My Portfolio</a></li>
            <li><a href="#contact" data-toggle="modal">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div><!--end of Navbar-->

这是我的 style.css

/*
Theme Name: BS3 Theme
Theme URI:http://
Description: My Bootstrap 3 Responsive Theme
Version: 1
Author: **
Author URI: http://
*/

@import url ("css/bootstrap.css");

对于我的 index.php

<?php get_header(); ?>

<?php get_footer(); ?>

如果有这样的答案，请帮忙解释一下。谢谢堆栈人！

【问题讨论】：

我也尝试在 header.php 中以这种格式调用 css.. 但是仍然没有造型。 :(
首先检查你的 style.css 加载是否正确 body{background-color:red;}，如果它工作你的 @import url ("css/bootstrap.css"); 没有正确指向。
感谢您的回复。我试着改变颜色和它的工作。我仍然不明白为什么我的@import 不起作用。我的文件夹结构是主题\myTheme css/fonts/js/index.php header.php footer.php 有什么问题吗？我以某种方式正确放置了我的文件。 -.-
试试@import url ("../css/bootstrap.css");
我试过了，还是不行。啊！我只是按照代码中的本教程代码进行操作。仍然无法正常工作。多么令人沮丧。它没有链接到我的 CSS。

标签： php css wordpress twitter-bootstrap

【解决方案1】：

本地主机上 wordpress 站点的样式来自一个名为 style.css 的文件，该文件位于 "localhost\wordpress\wp-content\themes\yourtheme\style.css" 中，所以请尝试修改此文件以获得所需的样式。，对于引导主题，您可以尝试相同的方法。

【讨论】：

是的，我试图导入我的引导主题，但不幸的是它没有使用@import url ('css/bootstrap.css') 显示我的样式；它没有指向那个位置，这就是我的引导样式的位置......谢谢你的回复
因此，您的第一步是确保完美导入 css 文件并应用样式。尝试按照 Hareesh 的建议进行测试。
是的，我已经尝试了他的建议，它的工作问题是我的 bootsrap.css 没有链接到我的 style.css。有什么想法吗？

【解决方案2】：

如果您在本地堆栈上使用 Wordpress，则可能无法正确发送 CSS，具体取决于您的服务器配置。您可能想尝试使用您的本地 IP 地址（通常为 127.0.0.1）并将其放在设置屏幕上。特别是如果本地主机未绑定在您的配置文件中。请参阅此处http://codex.wordpress.org/Settings_General_Screen 以供参考。将站点地址和 Wordpress url 地址都替换为您的本地 IP 地址，CSS 应该可以正确提供。

【讨论】：