라인에서 부트 스트랩 사이드 바 및 navbar를 추가하는 방법은 무엇입니까?

Question

사이드 바의 샘플 코드와 부트 스트랩이있는 navbar가 있습니다.

사이드 바를 같은 방법으로 탐색 막대에 추가하는 방법을 모르겠습니다. 이처럼

: http://codepen.io/r0ysy0301/pen/MbYzpE

에서

내 펜 그것은 단지 탐색 모음을 표시하고, 사이드 바를 열 수있는 버튼 같은 토글 버튼을 표시하지 의미

sidebar  logo navbar {item 1, item 2, item 3} 

.

Answer 1

이 간단한 부트 스트랩과 사이드 바 구현 here을 확인하십시오.

<div class="navbar navbar-fixed-top navbar-default" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand text-center" href="#">Project name</a> 
     </div> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#">Item 1</a></li> 
       <li><a href="#about">Item 2</a></li> 
       <li><a href="#contact">Item 3</a></li> 
      </ul> 
     </div> 
     <!-- /.nav-collapse --> 
    </div> 
    <!-- /.container --> 
</div> 
<!-- /.navbar --> 

<div class="container-fluid"> 
    <div class="row row-offcanvas row-offcanvas-left"> 
     <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="custom-sidebar" role="navigation"> 
      <div class="sidebar-nav"> 
       <ul class="nav"> 

        <li class="active"><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li class="nav-divider"></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div> 
      <!--/.well --> 
     </div> 
     <!--/span--> 

     <div class="col-xs-12 col-sm-9"> 
      <br> 
      <div class="jumbotron"> 
      <a href="#" class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a> 
      <h1>Hello, world!</h1> 
      <p>dajsdnaksjndkajsndkjas</p> 
      </div> 
      <div class="row"> 
       <div class="col-6 col-sm-6 col-lg-4"> 
        <h2>Section</h2> 
        <p>asdkasdkmaskdmaskdmkasmdkwuidnjdnajdjkansdjkasndjkasndkajsndkajsndkajsndkjasd</p> 
        <p><a class="btn btn-default" href="#">View details »</a></p> 
       </div> 
       <!--/span--> 
       <div class="col-6 col-sm-6 col-lg-4"> 
        <h2>Heading</h2> 
        <p>Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript. Bootstrap is a front-end framework that uses CSS and JavaScript to 
         facilitate responsive Web design. </p> 
        <p><a class="btn btn-default" href="#">View details »</a></p> 
       </div> 
       <!--/span--> 

       <div class="col-6 col-sm-6 col-lg-4"> 
        <h2>Heading</h2> 
        <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap 
         friendly HTML, CSS and Javascript.</p> 
        <p><a class="btn btn-default" href="#">View details »</a></p> 
       </div> 
       <!--/span--> 
       <div class="col-6 col-sm-6 col-lg-4"> 
        <h2>Heading</h2> 
        <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap 
         friendly HTML, CSS and Javascript.</p> 
        <p><a class="btn btn-default" href="#">View details »</a></p> 
       </div> 
       <!--/span--> 
      </div> 
      <!--/row--> 
     </div> 
     <!--/span--> 


    </div> 
    <!--/row--> 

    <hr> 

    <footer> 
     <p>© Footer here</p> 
    </footer> 

</div> 
<!--/.container--> 

CSS :

body { 
    padding-top: 50px; 
} 
footer { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

/* 
* Off Canvas 
* -------------------------------------------------- 
*/ 
@media screen and (max-width: 768px) { 
    .row-offcanvas { 
    position: relative; 
    -webkit-transition: all 0.25s ease-out; 
    -moz-transition: all 0.25s ease-out; 
    transition: all 0.25s ease-out; 
    background:#ecf0f1; 
    } 

    .row-offcanvas-left 
    .sidebar-offcanvas { 
    left: -40%; 
    } 

    .row-offcanvas-left.active { 
    left: 40%; 
    } 

    .sidebar-offcanvas { 
    position: absolute; 
    top: 0; 
    width: 40%; 
    margin-left: 12px; 
    } 
} 

#custom-sidebar { 
    padding:15px; 
    z-index: 1000; 
    margin-top: -56px; 
    background: #fff; 
} 

.navbar-brand { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    margin: auto; 
} 
.navbar-toggle { 
    z-index:3; 
} 

.navbar { 
    z-index: 200; 
} 

스크립트 :

$(function(){ 
    $('[data-toggle=offcanvas]').click(function() { 
    $('.row-offcanvas').toggleClass('active'); 
    }); 
});