ブートストラップ - 同じ構造のNavbarとFooter

私はBootstrapを初めて使い、NavbarとFooterを同じ構造で使いたいと思っています。主に色とフォントファミリを意味しています。さまざまなソースから、私はnavbarの部分をやったことがあります、そして、私は今、footerが同じ構造であることを望みますが、私はそれを行う方法を理解していません。ブートストラップ - 同じ構造のNavbarとFooter

ナビゲーションバーの一部：

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

は、ここで私が持っていたいものです！

出典

2016-12-05 Charles Duporge

独自のスタイルシートを使用して、ブートストラップ1を上書きすることができます。単にあなたのcustom.cssファイルに適切なコードを追加し、あなたのウェブページに追加スタイリングを変更したり、適用するには、ヘッド部

<head> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/custom.css"> 
</head>

でこれを置きます。オリジナルのBootstrapスタイルを直接編集する必要はありません。

たとえば、ボタンの丸いコーナーが気に入らないと決めた場合は、custom.cssファイルに次のスタイルを適用できます。デフォルトのブートストラップのスタイル（.btnクラス）を使用してWebページにボタンを追加する場合

.btn { 
border-radius: 0px; 
}

は今、角が丸められていません。これは、カスタムスタイルシートがデフォルトのブートストラップスタイルシートをオーバーライドしているためです。

ソース：https://bootstrapbay.com/blog/customize-bootstrap/

出典

2016-12-05 12:07:51

ブートストラップ - 同じ構造のNavbarとFooter

答えて

関連する問題