2

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

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);
              }
4

2 回答 2

3

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

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

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

于 2013-07-15T18:30:37.420 回答
3

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

1) Twitter Bootstrap 定制最佳实践

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

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

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

于 2013-07-15T18:31:18.227 回答