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

【问题标题】：Bootstrap - Navbar and footer with same structureBootstrap - 具有相同结构的导航栏和页脚
【发布时间】：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" 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 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>

这是我想要的：

感谢您的帮助！

【问题讨论】：

标签： html css twitter-bootstrap 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/

【讨论】：