如何在Bootstrap 3中实现响应式网格Ui

时间:2014-04-11 14:35:14

标签: twitter-bootstrap responsive-design twitter-bootstrap-3 media-queries

我在创建以下UI时遇到问题: enter image description here

我该如何实现这种设计?

2 个答案:

答案 0 :(得分:1)

由于Bootstrap 3是“移动优先”,所以使用xs类从最小设备(“屏幕4”)的所需布局开始,然后从那里开始。

以下是一个让您入门的示例:http://bootply.com/129266

答案 1 :(得分:0)

将响应表与网格系统一起使用。在这里,我为你做了屏幕#1:

   <div class="table-responsive">
   <table width="100%" class="table table-striped table-bordered table-hover">
   <tr >
   <td class="col-md-4" rowspan="2" style="background-color:red">&nbsp;</td>
   <td class="col-md-2" style="background-color:blue">&nbsp;</td>
   <td class="col-md-2" style="background-color:blue">&nbsp;</td>
   <td class="col-md-2" style="background-color:blue">&nbsp;</td>
   <td class="col-md-2" style="background-color:blue">&nbsp;</td>
 </tr>
 <tr>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
 </tr>
 <tr>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   </tr>
   </table>
   </div>

注意td标签col-md-4和col-md-2中的类。使用网格系统,它们必须加起来为12.使用较大的数字为该列分配更多空间。根据需要调整工作台宽度。