[英]how to make a responsive accordion layout using bootstrap 3?
How do i layout bootstrap grids if i want to make this responsive layout? 如果我想制作这种响应式布局,如何布局引导网格?
In the images below, the small box is like a tab, when clicked it will show the content at the bottom of it. 在下面的图片中,小方框就像一个标签,点击它时会显示底部的内容。
When the window / viewed in smaller screen it will reduce the columns accordingly however it should preserve its functionality. 当窗口/在较小的屏幕中查看时,它将相应地减少列,但是它应该保留其功能。
Desktop http://i61.tinypic.com/9sf255.png 桌面http://i61.tinypic.com/9sf255.png
Desktop http://i57.tinypic.com/v3ooiv.png 桌面http://i57.tinypic.com/v3ooiv.png
Desktop http://i62.tinypic.com/1z738n7.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>
This can be accomplished with the collapse javascript functionality in Bootstrap. 这可以通过Bootstrap中的折叠javascript功能来完成。 See http://getbootstrap.com/javascript/#collapse 请参阅http://getbootstrap.com/javascript/#collapse
You could use this code snippet to accomplish it. 您可以使用此代码段来完成它。
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
Simple collapsible </button>
<div id="demo" class="collapse in">...</div>
And then try this: 然后尝试这个:
<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>
You will need to do the rest of the code, but this should get you started. 您将需要执行其余的代码,但这应该让您开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.