bootstrap custom css file

问题

I am using the sample page from twitter bootstrap example templates.

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

I was wondering if I can include a custom css file in it ? to add some customization ?

I saved the starter template files as shared.html and I have the _files folder along with it . How or where should I put a custom.css file ? Can I even do it ? What will be the best way to achieve something like this ?

This is my shared.html file which has the following lines in the styling area :

 <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">

Here's my navbar part of the code:

<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>

Here's my custom.css file

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

回答1:

Of course you can, first create custom.css and put it in _files then in shared.html find the line that includes the bootstrap css file add this after:

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

You also need to include http:// for the two bootstrap files and finally check that your using the right selector; to change the colors of .navbar-inner you should be using .navbar-inverse .navbar-inner

回答2:

Here are 2 great resources on customizing Bootstrap:

1) Twitter Bootstrap Customization Best Practices

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

If you do define a custom.css make sure it is placed after bootstrap.css in the HTML HEAD.

The 'starter template' is also available at Bootply: http://bootply.com/61937, where you can fiddle with the CSS and preview your changes/customization live.

来源：https://stackoverflow.com/questions/17661211/bootstrap-custom-css-file

标签

css

html5

twitter-bootstrap

customization