Jak przekonwertować układ oparty na tabeli z Bootstrap "wiersz" i "col - * - *"

Question

Pracuję na stronie, która jest oparta na układzie tabeli (bez div). Teraz wymagana zmiana i musi zostać ponownie utworzona, aby wyglądała na responsywną, a na potrzeby responsywności wybieramy opcję bootstrap jako opcję.

Teraz, w jaki sposób mogę przekonwertować układ tabel na układ siatki początkowej, aby mógł 1. wyglądać bez zmian, 2. mieć również responsywny.

Układ tabeli jest zbyt skomplikowany w witrynie. jest tam dużo gniazdowania. Na przykład:

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

na przykład w jaki sposób można przekształcić powyższy kod z bootstrap row, col-*-* siatki DTP.

Zaufaj mi, próbowałem dużo, aby to zmienić, ale czasami wygląda na zmianę lub jakiś czas po prostu nie działa.

Ogólne sugestie, jak przekonwertować podstawowy układ tabeli na bootstrap są również mile widziane.

Answer 1

Właściwie to nie jest takie skomplikowane.

Wystarczy przejść każdy <table> i <tbody> tag, traktować każdego <tr> jako element bloku z class="row" i każdy <td> jako element bloku z class="col-*-*". Gniazdowania Bootstrap siatka jest całkowicie okey, więc jeśli masz somthing tak:

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

Wystarczy zrobić:

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

Oczywiście to są tylko zajęcia przykład Bootstrap - nie trzeba trzymać się z numerami;)

Answer 2

Oto wielka literatura: http://getbootstrap.com/css/#grid

• Wymień stół i tBODY z div clas s = "pojemnik"
• wymienić TR z div class="row"
• wymienić td z div class="col-ww-nn"
  • przypadku ww to szerokość urządzenia (xs, sm, md, lg)
  • przypadku nn oznacza liczbę 1-12 do szerokość procentowa (podzielona przez 12)

Poniżej znajduje się zaktualizowany kod (w tym niektóre poprawki składni). Zauważ, że dodałem responsywność, aby na telefonach (xs) twoja druga główna kolumna byłaby oddzielną linią. Możesz również dostosować obrazy do rozmiaru img-response, aby zmienić rozmiar urządzenia.

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