i using sample page twitter bootstrap example templates.
http://twitter.github.io/bootstrap/examples/starter-template.html i wondering if can include custom css file in ? add customization ?
i saved starter template files shared.html , have _files folder along . how or should put custom.css file ? can ? best way achieve ?
this shared.html file has following lines in styling area :
<link href="twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> <style> body { padding-top: 60px; /* 60px make container go way bottom of topbar */ } </style> <link href="twitter.github.io/bootstrap/assets/css/… rel="stylesheet"> here's navbar part of 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 custom.css file
.navbar-inverse .navbar-fixed-top .navbar-inner { background-color: #e01b5d; /* fallback color, place own */ /* gradients modern browsers, replace 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); }
of course can, first create custom.css , put in _files in shared.html find line includes bootstrap css file add after:
<link type="text/css" rel="stylesheet" href="_files/custom.css" /> you need include http:// 2 bootstrap files , check using right selector; change colors of .navbar-inner should using .navbar-inverse .navbar-inner
Comments
Post a Comment