css - 如何使用 Bootstrap "row"和 "col-*-*"转换基于表格的布局

Question

我在基于表格布局(无分区)的网站上工作。现在需求发生变化，必须重新创建以使其看起来响应迅速，为了响应迅速，我们选择 Bootstrap 作为选项。

现在，我如何将表格布局转换为 Bootstrap 网格布局，以便 1. 外观不变，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 转换上面的代码。

相信我，我尝试了很多来转换它，但有时看起来会改变或者有时根本不起作用。

也欢迎就如何将表基布局转换为 Bootstrap 提出一般性建议。

Answer 1

这里有一些很棒的文献:Bootstrap 3 Grid system

• 用 div class="container" 替换 table 和 tbody
• 将 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>