ブートストラップ "row"と "col - * - *"を使ってテーブルベースのレイアウトを変換する方法

Question

私はテーブルレイアウト（divなし）に基づいたサイトで作業しています。今、要件の変更と再作成する必要がありますので、反応するように見えるように応答するためのオプションとしてブートストラップを選択します。

ここで、テーブルレイアウトをブートストラップグリッドレイアウトに変換するにはどうしたらよいですか？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> 

どのようにブートストラップrow、col-*-*グリッドレイアウトでコード上に変換することができます。

私はこれを変換しようと多くの努力をしましたが、時々変わって見えるか、まったく動作しないことがあります。

テーブルベースレイアウトをブートストラップに変換する方法についての一般的な提案も歓迎します。

Answer 1

実際、それほど複雑ではありません。

だけで、すべての<table>と<tbody>タグをスキップclass="col-*-*"でブロック要素としてclass="row"、すべて<td>でブロック要素として、すべての<tr>を扱います。

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

は一例ブートストラップクラスです - あなたは数字に固執する必要はありません。ここでは）

Answer 2

は、いくつかの素晴らしい文学です：http://getbootstrap.com/css/#grid

• はDIVのCLASとテーブルとTBODYを交換してくださいS = "コンテナ"
• div class="col-ww-nn"
  • wwとTDを交換div class="row"
  • とTR交換は、装置幅（xs、sm、md、lg）であるnnのための番号1-12である
  • 幅のパーセンテージ（12で除算）

以下は更新されたコードです（いくつかの構文修正も含まれています）。注：私は電話機（xsデバイス）に2つ目のメイン列が別の行になるように応答性を追加しました。また、画像を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>