Bootstrap - Navbar и нижний колонтитул с той же структурой

Я новичок в Bootstrap, и я хочу, чтобы мой навигатор и нижний колонтитул с той же структурой, это в основном цвета и семейство шрифтов, я взял код из тем Bootstrap для каждого из и из разных источников я сделал навигационную часть, и теперь я хочу, чтобы нижний колонтитул был с той же структурой, но я не понимаю, как это сделать.Bootstrap - Navbar и нижний колонтитул с той же структурой

Navbar часть:

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

Вот что я хочу иметь:

Спасибо за помощь!

источник

2016-12-05 Charles Duporge

Вы можете использовать свою собственную таблицу стилей, которая переопределяет загрузочный файл. Просто поместите это в головной секции

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

Теперь, если вы добавите кнопку на веб-странице со стилями бутстрапом по умолчанию (.btn класс), углы не закруглены. Это связано с тем, что ваша пользовательская таблица стилей переопределяет таблицу стилей Bootstrap по умолчанию.

источник: https://bootstrapbay.com/blog/customize-bootstrap/

источник

2016-12-05 12:07:51

Bootstrap - Navbar и нижний колонтитул с той же структурой

ответ

Смежные вопросы