如何使用Bootstrap“row”转换基于表格的布局和“col-*-*”。 [英] How to convert table based layout with Bootstrap "row" and "col-*-*"

问题描述

我在网站上工作，这是基于表格布局（没有div）。

现在，如何将表格布局转换为引导网格（bootstrap grid）布局这样可以1.看起来不变，2.也有响应。

表格布局在网站太复杂。很多的嵌套是有。例如：

 < table border =0width ='100％'bgcolor ='＃ff00ff' 
< tr style ='padding-bottom：1em;'> 
< td> 
< table border =0> 
< tr valign ='bottom'> 
< td width ='50'>& nbsp;< / td> 
< td> 
< img border =0src =＃width =100height =300> 
< / td> 
< td width ='25'>& nbsp;< / td> 
< td> 
< span style ='font-size：10px; color：#cccccc;'> Alpha测试< / span> 
< / td> 
< / tr> 
< / table> 
< / td> 
< td align ='right'> 
< table border =0cellspacing =0> 
< tr> 
< td align ='center'colspan ='3'> 
< span>另一个测试文本< / span> 
< span style ='color：#FFFFCC;'> - < / span> 
< span style ='font-size：11px; color：#fffff;'>随机文字< / span> 
< / td> 
< / tr> 
< / table> 
< / td> 
< / tr> 
  

上面的代码与引导行， col - * - * 网格布局。

相信我，我试了很多转换这个，但有时看起来变化或有时间根本不工作。

一般建议如何

解决方案

这里有一些很棒的文章：http://getbootstrap.com/css/#grid

• 替换表格and tbody with div class =container


• 将tr替换为div class =row


• 将div替换为div class =col-ww -nn
  
  
  
  
  • 其中ww是设备宽度（xs，sm，md，lg）
  
  
  • 其中nn是第1-12个宽度百分比（除以12）
  
  

更新的代码（包括一些语法修复）。请注意，我添加了响应性，以便在手机（xs设备）上您的第二个主列将是一个单独的行。

 < div class =容器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测试< / span> 
< / div> 
< / div> 
< / div> 
< div class =col-xs-12 col-sm-6> 
< div class =row> 
< div class =col-xs-4 col-sm-4> 
< span>另一个测试文本< / 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;>随机文字< / span> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

I am working on site which is based on table-layout (no div). Now requirement change and has to re-create so that it look responsive, and for responsive we choose bootstrap as option.

Now, How can I convert tables layout into bootstrap grid layout so can 1. look not change, 2. have responsive also.

table-layout is too complex in site. lots of nesting is there. For example:

<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>

For example how can I convert above code with bootstrap row, col-*-* grid-layout.

Trust me, I tried a lot to convert this, but sometime looks change or some time just not work at all.

General suggestion on how to convert table base layout into bootstrap are also welcome.

解决方案

Here is some great literature: http://getbootstrap.com/css/#grid

• Replace table and tbody with div class="container"
• Replace tr with div class="row"
• Replace td with div class="col-ww-nn"
  • Where ww is device width (xs, sm, md, lg)
  • Where nn is a number 1-12 for width percentage (divided by 12)

Below is your updated code (including some syntax fixes too). Note, I've added responsiveness so that on phones (xs devices) your second main column would be a separate line. And you can make images responsive with img-response so that it's size changes with the device.

<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>

这篇关于如何使用Bootstrap“row”转换基于表格的布局和“col-*-*”。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！