Bootstrap新手常见问题
Posted 前端新学员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap新手常见问题相关的知识，希望对你有一定的参考价值。
题记
bootstrap这个开源的UI库确实很方便，用了两日，觉得不错，但也有些问题比较头疼！
主题
1、怎么使用？怎么定制？下面是一个范例，修改了navbar的颜色，重新设置了select控件的默认长度
<link href="../static/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<script src="../static/bootstrap/js/bootstrap.min.js"/>
<style>
body {
padding-top: 45px;
}
.navbar-inverse .navbar-inner {
background: #0C7854;
background-image: -webkit-linear-gradient(top, #0D8059, #0B6E4D);
}
.navbar .nav > li > a {
color: #DDD;
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background-color: #0B6E4D;
}
.navbar-inner .brand{
color: #ffffff;
}
select{
width:auto;
}
</style>
<script src="../static/bootstrap/js/bootstrap.min.js"/>
<style>
body {
padding-top: 45px;
}
.navbar-inverse .navbar-inner {
background: #0C7854;
background-image: -webkit-linear-gradient(top, #0D8059, #0B6E4D);
}
.navbar .nav > li > a {
color: #DDD;
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background-color: #0B6E4D;
}
.navbar-inner .brand{
color: #ffffff;
}
select{
width:auto;
}
</style>
2、把公共的html部分提取出来，作为模板引入，比如navbar等
$ .get("../common/head.html",function(data){
$("#floatDiv").html(data);
});
<div class="navbar navbar-inverse navbar-fixed-top" id="floatDiv"></div>
$("#floatDiv").html(data);
});
<div class="navbar navbar-inverse navbar-fixed-top" id="floatDiv"></div>
以上是关于Bootstrap新手常见问题的主要内容，如果未能解决你的问题，请参考以下文章
新手：Bootstrap 左边栏怎么控制右侧内容部分 不用每个页面都做左边栏或者导航栏吧