引导自定义 css 文件答案

【问题标题】：bootstrap custom css file引导自定义 css 文件
【发布时间】：2013-07-15 18:26:43
【问题描述】：

我正在使用来自 twitter 引导示例模板的示例页面。

http://twitter.github.io/bootstrap/examples/starter-template.html

我想知道是否可以在其中包含自定义 css 文件？添加一些定制？

我将启动模板文件保存为shared.html，并且我还有_files 文件夹。我应该如何或在哪里放置custom.css 文件？我还能做到吗？实现这样的目标的最佳方法是什么？

这是我的 shared.html 文件，它在样式区域中有以下几行：

 <link href="twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> 

 <style> 

body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } 

</style> 

<link href="twitter.github.io/bootstrap/assets/css/… rel="stylesheet">

这是我的导航栏部分代码：

<body>    

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

这是我的 custom.css 文件

.navbar-inverse .navbar-fixed-top .navbar-inner {
                background-color: #E01B5D; /* fallback color, place your own */

                /* Gradients for modern browsers, replace as you see fit */
                background-image: -moz-linear-gradient(top, #333333, #222222);
                background-image: -ms-linear-gradient(top, #333333, #222222);
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
                background-image: -webkit-linear-gradient(top, #333333, #222222);
                background-image: -o-linear-gradient(top, #333333, #222222);
                background-image: linear-gradient(top, #333333, #222222);
                background-repeat: repeat-x;

                /* IE8-9 gradient filter */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
              }

【问题讨论】：

标签： css html twitter-bootstrap customization

【解决方案1】：

当然可以，首先创建 custom.css 并将其放在 _files 中，然后在 shared.html 中找到包含引导 css 文件的行，然后添加：

<link type="text/css" rel="stylesheet" href="_files/custom.css" />

您还需要在两个引导文件中包含 http://，最后检查您是否使用了正确的选择器；要更改 .navbar-inner 的颜色，您应该使用 .navbar-inverse .navbar-inner

【讨论】：

它不起作用，我看不到任何变化。我的样式如下： twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
@novice7 能否发布您的 custom.css 文件，并通过检查 firebug 上的网络检查器中的网络选项卡来确认它已正确加载。
我再次编辑了我的问题@stefan。你能检查一下 custom.css 文件是否正确吗？
除非您使用 scss，否则您发布的 css 将无法使用 .navbar-inverse .navbar-inner { CSS_HERE }
所以你的问题是文件路径，如果你想把 custom.css 放在 _files 中记得将 html 中的路径更改为别忘了也接受这个答案。

【解决方案2】：

这里有 2 个关于自定义 Bootstrap 的重要资源：

1) Twitter Bootstrap Customization Best Practices

2) http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/

如果您确实定义了 custom.css，请确保将其放在 HTML HEAD 中的 bootstrap.css 之后。

Bootply 也提供了“入门模板”：http://bootply.com/61937，您可以在其中调整 CSS 并实时预览您的更改/自定义。

【讨论】：