Как преобразовать табличную структуру с помощью Bootstrap "row" и "col - * - *"

Я работаю на сайте, который основан на таблице-макете (без div). Теперь изменение потребности и необходимо воссоздать, чтобы он выглядел отзывчивым, и для отзывчивости мы выбираем bootstrap в качестве опции.

Теперь, как я могу преобразовать табличную структуру в макет сетки начальной загрузки, так что я могу выглядеть без изменений, 2. также реагировать.

таблица-макет слишком сложна на сайте. там много гнездования. Например:

<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
    <table border="0">
        <tr valign='bottom'>
            <td width='50'>&nbsp;</td>
            <td>
                <img border="0" src="#" width="100" height="300">
            </td>
            <td width='25'>&nbsp;</td>
            <td>
                <span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
            </td>
        </tr>
    </table>
</td>
<td align='right'>
    <table border="0" cellspacing="0">
        <tr>
            <td align='center' colspan='3'>
                <span>Another tesing text</span>
                <span style='color:#FFFFCC;'> - </span>
                <span style='font-size:11px;color:#fffff;'>Random text</span>
            </td>
        </tr>
    </table>
</td>
</tr>

Например, как я могу преобразовать выше код с bootstrap row, col-*-* grid-layout.

Поверьте мне, я много пробовал преобразовать это, но когда-то выглядит изменением или некоторое время просто не работает вообще.

Также приветствуется общее предложение о том, как преобразовать макет таблицы в бутстрап.

Ответ 1

Вот отличная литература: http://getbootstrap.com/css/#grid

Заменить таблицу и tbody контейнером div class=
Заменить tr с помощью div class="row"
Замените td на div class="col-ww-nn"
- Где ww - ширина устройства (xs, sm, md, lg)
- Где nn - это число 1-12 для процента по ширине (разделено на 12)

Ниже приведен обновленный код (включая некоторые синтаксические исправления). Заметьте, я добавил отзывчивость, так что на телефонах (xs устройства) ваш второй главный столбец будет отдельной строкой. И вы можете реагировать на изображения с помощью img-response, чтобы размер изменялся с помощью устройства.

<div class="container" style="background-color:#ff00ff">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <div class="row">
                <div class="col-xs-4 col-sm-4">
                    &nbsp;
                </div>
                <div class="col-xs-4 col-sm-4">
                    <img src="#" class="img-responsive">
                </div>
                <div class="col-xs-4 col-sm-4">
                    &nbsp;
                </div>
                <div class="col-xs-4 col-sm-4">
                    <span style="font-size:10px;color:#cccccc;">Alpha testing</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div class="row">
                <div class="col-xs-4 col-sm-4">
                    <span>Another tesing text</span>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <span style="color:#ffffcc;"> - </span>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <span style="font-size:11px;color:#ffffff;">Random text</span>
                </div>
            </div>
        </div>
    </div>
</div>

Ответ 2

На самом деле это не так сложно.

Просто пропустите каждый тег <table> и <tbody>, обрабатывайте каждый <tr> как элемент блока с помощью class="row" и каждый <td> как элемент блока с class="col-*-*". Вложенная сетка Bootstrap полностью okey, поэтому, если у вас есть что-то вроде этого:

<tr style='padding-bottom:1em;'>
  <td>
    <table border="0">
        <tr valign='bottom'>
            <td width='50'>&nbsp;</td>
            <td>
                <img border="0" src="#" width="100" height="300">
            </td>
            <td width='25'>&nbsp;</td>
            <td>
                <span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
            </td>
        </tr>
    </table>
  </td>
</tr>

Просто выполните:

<div class="row">
  <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-6">&nbsp;</div>
            <div class="col-xs-6">
                <img border="0" src="#" width="100" height="300">
            </div>
            <div class="col-xs-10">&nbsp;</div>
            <div class="col-xs-2">
                <span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
            </div>
        </div>
  </div>
</div>

Конечно, это просто пример классов Bootstrap - вам не нужно придерживаться цифр;)