У меня возникла проблема при создании следующего пользовательского интерфейса: введите описание изображения здесь

Как я могу реализовать такой дизайн?

-2
Sopo 11 Апр 2014 в 18:35

2 ответа

Лучший ответ

Поскольку Bootstrap 3 ориентирован на мобильные устройства, начните с желаемого макета для самого маленького устройства («экран 4»), используя классы xs, а затем поднимитесь оттуда.

Вот пример для начала: http://bootply.com/129266

1
Zim 12 Апр 2014 в 10:25

Используйте адаптивные таблицы с сеткой. Здесь я сделал для вас Экран №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. Чем больше число, тем больше места для этого столбца. При необходимости отрегулируйте ширину стола.

0
DivineChef 11 Апр 2014 в 23:18