如何將按鈕的div編碼爲Bootstrap響應？

我使用Bootstrap 3.0來編寫我的網站。所以我有這個導航區域由6個按鈕組成，它們在頁面上水平運行。但是，一旦用戶調整瀏覽器大小或者在平板電腦和手機等小屏幕上查看網站，我想將此導航區變成側欄菜單圖標欄。如何將按鈕的div編碼爲Bootstrap響應？

我該如何編碼，以便在較小的設備上查看時它會變成帶菜單圖標的導航欄。我是否應該使用「nav」和「ul」等將此區域更改爲實際的導航欄div？然後編碼「李」看起來像按鈕？

HTML

<div class="row" style="margin-bottom: 10px; margin-left: -37px;"> 
     <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Home</a></button></div> 
     <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Description</a></button></div> 
     <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="gallery.html">Gallery</a></button></div> 
     <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Location</a></button></div> 
     <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Availability</a></button></div> 
     <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Rates</a></button></div> 
    </div>

來源

2014-03-24 user3097331

使用NAV可能是你最好的選擇。 – Lenny

http://getbootstrap.com/components/#navbar – hungerstar

Just see this example code or goto http://getbootstrap.com/components/#navbar for more details 
<nav role="navigation" class=" navbar navbar-default "> 
<div class="navbar-header"> 
    <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

     </div> 
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav"> 
<li><a class="active" href="">Home</a></li> 
<li><a href="">Demo</a></li> 
<li><a href="">About Us</a></li> 
<li><a href="">Plans &amp; Pricing</a></li> 
</ul> 
</div> 

</nav>

來源

2014-03-25 04:40:54 sunilkjt

如何將按鈕的div編碼爲Bootstrap響應？

回答

相關問題