gpt4 book ai didi

html - Bootstrap - 具有相同结构的导航栏和页脚

转载 作者:太空宇宙 更新时间:2023-11-04 02:04:57 24 4
gpt4 key购买 nike

我是 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" height="50px"></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 分:

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

这是我想要的:enter image description here

感谢您的帮助!

最佳答案

您可以使用自己的样式表,它会覆盖 Bootstrap 样式表。只需将其放在头部即可

<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 样式。

例如,如果您决定不喜欢按钮上的圆 Angular ,则可以在您的 custom.css 文件中应用以下样式。

.btn {
border-radius: 0px;
}

现在,如果您使用默认的 Bootstrap 样式(.btn 类)向网页添加一个按钮,则边 Angular 不会变圆。这是因为您的自定义样式表覆盖了默认的 Bootstrap 样式表。

来源:https://bootstrapbay.com/blog/customize-bootstrap/

关于html - Bootstrap - 具有相同结构的导航栏和页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40973578/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com