[英]how to make a responsive accordion layout using bootstrap 3?
如果我想制作這種響應式布局,如何布局引導網格?
在下面的圖片中,小方框就像一個標簽,點擊它時會顯示底部的內容。
當窗口/在較小的屏幕中查看時,它將相應地減少列,但是它應該保留其功能。
桌面http://i61.tinypic.com/9sf255.png
桌面http://i57.tinypic.com/v3ooiv.png
桌面http://i62.tinypic.com/1z738n7.png
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 what-tab">
<a href="#">TAB NAME</a>
<div class="col-md-12 what-content">TAB CONTENT</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 what-tab">
<a href="#">TAB NAME</a>
<div class="col-md-12 what-content">TAB CONTENT</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 what-tab">
<a href="#">TAB NAME</a>
<div class="col-md-12 what-content">TAB CONTENT</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 what-tab">
<a href="#">TAB NAME</a>
<div class="col-md-12 what-content">TAB CONTENT</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 what-tab">
<a href="#" class="double-line">TAB NAME</a>
<div class="col-md-12 what-content">TAB CONTENT</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 what-tab">
<a href="#">TAB NAME</a>
<div class="col-md-12 what-content">TAB CONTENT</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 what-tab">
<a href="#" class="double-line">TAB NAME</a>
<div class="col-md-12 what-content">TAB CONTENT</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 what-tab">
<a href="#">TAB NAME</a>
<div class="col-md-12 what-content">TAB CONTENT</div>
<div class="clearfix"></div>
</div>
</div>
這可以通過Bootstrap中的折疊javascript功能來完成。 請參閱http://getbootstrap.com/javascript/#collapse
您可以使用此代碼段來完成它。
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
Simple collapsible </button>
<div id="demo" class="collapse in">...</div>
然后嘗試這個:
<div class="col-md-3 col-sm-6 col-xs-12 what-tab">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">Button to toggle open and close</button></div>
<div id="demo" class="collapse in col-md-12 what-content">...</div>
您將需要執行其余的代碼,但這應該讓您開始。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.