부트 스트랩 - 동일한 구조의 탐색 바 및 꼬리말

부트 스트랩을 처음 사용하고 탐색 구조와 푸터를 같은 구조로하고 싶습니다. 주로 색과 글꼴 패밀리를 의미하며 부트 스트랩 테마의 코드를 각각 다른 출처에서 나는 navbar 부분을 완성했습니다. 이제 footer가 같은 구조를 가지기를 원하지만 어떻게해야하는지 이해할 수 없습니다.부트 스트랩 - 동일한 구조의 탐색 바 및 꼬리말

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

자신 만의 스타일 시트를 사용할 수 있습니다.이 스타일 시트는 부트 스트랩 하나를 덮어 씁니다. 그냥 단순히 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>

수정하거나 웹 페이지에 추가 스타일을 적용하기에 넣고. 원래의 부트 스트랩 스타일을 직접 편집 할 필요가 없습니다.

예를 들어 단추의 둥근 모서리가 마음에 들지 않는다고 판단한 경우 custom.css 파일에 다음 스타일을 적용 할 수 있습니다. 기본 부트 스트랩 스타일 (.btn 클래스)로 웹 페이지에 버튼을 추가하는 경우

.btn { 
border-radius: 0px; 
}

는 이제, 모서리가 둥근되지 않습니다. 이는 사용자 정의 스타일 시트가 기본 부트 스트랩 스타일 시트를 덮어 쓰기 때문입니다.

출처 : https://bootstrapbay.com/blog/customize-bootstrap/

출처

2016-12-05 12:07:51

부트 스트랩 - 동일한 구조의 탐색 바 및 꼬리말

답변

관련 문제