Come convertire il layout basato su tabella con Bootstrap "riga" e "col - * - *"

Question

Sto lavorando sul sito che si basa sul layout della tabella (nessun div). Ora i requisiti cambiano e devono essere ricreati in modo che risultino reattivi, e per reattivi si sceglie bootstrap come opzione.

Ora, come posso convertire il layout delle tabelle nel layout della griglia bootstrap in modo che 1. non cambi, 2. abbia anche una risposta.

la disposizione delle tabelle è troppo complessa nel sito. c'è un sacco di nidificazione. Ad esempio:

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

per esempio come posso convertire sopra codice con bootstrap row, col-*-* griglia layout.

Fidati di me, ho provato molto a convertire questo, ma a volte sembra cambiare o qualche volta non funziona affatto.

Sono inoltre ben accetti i suggerimenti generali su come convertire il layout di base della tabella in bootstrap.

Answer 1

In realtà non è così complesso.

saltare ogni tag <table> e <tbody>, trattare ogni <tr> come elemento di blocco con class="row" ed ogni <td> come elemento di blocco con class="col-*-*". griglia Nesting Bootstrap è del tutto okey, quindi se avete qualcosa di simile:

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

Basta fare:

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

Naturalmente questi sono solo classi esempio Bootstrap - non c'è bisogno di attaccare con i numeri;)

Answer 2

Ecco una grande letteratura: http://getbootstrap.com/css/#grid

• Sostituire tavolo e tbody con clas div s = "contenitore"
• Sostituire tr con div class="row"
• Sostituire td con div class="col-ww-nn"
  • Dove ww è la larghezza del dispositivo (xs, sm, md, lg)
  • Dove nn è un numero 1-12 per larghezza percentuale (divisa per 12)

Di seguito è riportato il codice aggiornato (incluse alcune correzioni della sintassi). Nota, ho aggiunto la reattività in modo che sui telefoni (dispositivi xs) la seconda colonna principale sia una linea separata. Ed è possibile rendere le immagini reattive con img-response in modo che le sue dimensioni cambino con il dispositivo.

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