Bootstrap - 具有相同结构的导航栏和页脚
Posted
技术标签:
【中文标题】Bootstrap - 具有相同结构的导航栏和页脚【英文标题】：Bootstrap - Navbar and footer with same structure 【发布时间】：2017-04-19 19:20:56 【问题描述】：我是 Bootstrap 的新手，我希望我的导航栏和页脚具有相同的结构，这主要是指颜色和字体系列，我从 Bootstrap 主题中为每个主题以及来自不同来源的代码获取了代码，我已经完成了导航栏部分，我现在希望页脚具有相同的结构，但我不明白该怎么做。
导航栏部分：
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-left" href="#"><img src="images/_ressources/logo.svg" ></a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li> <a href="#" style="font-family: 'Roboto', sans-serif;">ACCUEIL</a> </li>
<li> <a href="#" style="font-family: 'Roboto', sans-serif;">BOUTIQUE</a> </li>
<li> <a href="#" style="font-family: 'Roboto', sans-serif;">CONTACT</a> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#" style="font-family: 'Roboto', sans-serif;">MON COMPTE</a> </li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange"> <span class="glyphicon glyphicon-lock" ></span> </button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
页脚部分：
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 column">
<h4>Information</h4>
<ul class="nav">
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Developers</a></li>
</ul>
</div>
</div>
</div>
</footer>
这是我想要的：
感谢您的帮助！
【问题讨论】：
【参考方案1】：您可以使用自己的样式表，它会覆盖引导程序。把它放在head部分就行了
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
要修改或应用其他样式到您的网页，只需将适当的代码添加到您的 custom.css 文件中。无需直接编辑任何原始 Bootstrap 样式。
例如，如果您决定不喜欢按钮上的圆角，您可以在 custom.css 文件中应用以下样式。
.btn
border-radius: 0px;
现在，如果您使用默认 Bootstrap 样式（.btn 类）将按钮添加到网页，则边角不会变圆。这是因为您的自定义样式表覆盖了默认的 Bootstrap 样式表。
来源：https://bootstrapbay.com/blog/customize-bootstrap/
【讨论】：
以上是关于Bootstrap - 具有相同结构的导航栏和页脚的主要内容，如果未能解决你的问题，请参考以下文章
HTML5开发移动web应用—JQuery Mobile-导航栏和页脚
导航栏和粘性 Bootstrap 页脚之间的 100% 高度