bootstrap自定义css文件 [英] bootstrap custom css file
问题描述
我使用twitter bootstrap示例模板的示例页面。
I am using the sample page from twitter bootstrap example templates.
http://twitter.github.io/bootstrap/examples/starter-template.html
我想知道我是否可以在其中包含自定义css文件？添加一些定制？
I was wondering if I can include a custom css file in it ? to add some customization ?
我将启动器模板文件保存为 shared.html ，我有 _files 文件夹。我应该如何或在哪里放一个 custom.css 文件？我甚至可以做到吗？什么是最好的方式来实现这样的东西？
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 ?
这是我的shared.html文件，在样式区域中有以下几行：
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">
这是我的navbar代码的一部分：
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>
这是我的custom.css文件
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);
}
推荐答案
创建custom.css并将其放在_files然后在shared.html中找到包括引导css文件的行添加此后：
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" />
您还需要为这两个引导文件包含http：//最后检查您使用右选择器;改变.navbar-inner的颜色你应该使用.navbar-inverse .navbar-inner
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
这篇关于bootstrap自定义css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
