Cách chuyển đổi bố cục dựa trên bảng bằng Bootstrap "hàng" và "col - * - *"

Question

Tôi đang làm việc trên trang web dựa trên bố cục bảng (không có div). Bây giờ yêu cầu thay đổi và phải tái tạo để nó trông đáp ứng, và đối với đáp ứng, chúng tôi chọn bootstrap là tùy chọn.

Bây giờ, Làm cách nào tôi có thể chuyển đổi bố cục bảng thành bố cục lưới bootstrap để có thể 1. nhìn không thay đổi, 2. cũng có đáp ứng.

Bố cục bảng quá phức tạp trong trang web. rất nhiều làm tổ ở đó. Ví dụ:

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

Ví dụ làm thế nào tôi có thể chuyển đổi trên mã với bootstrap row, col-*-* lưới bố trí.

Tin tưởng tôi, tôi đã cố gắng rất nhiều để chuyển đổi điều này, nhưng đôi khi có vẻ thay đổi hoặc một thời gian không hoạt động chút nào.

Đề xuất chung về cách chuyển đổi bố cục cơ sở bảng thành bootstrap cũng được hoan nghênh.

Answer 1

Thực ra nó không quá phức tạp.

Chỉ cần bỏ qua tất cả các <table> và <tbody> thẻ, điều trị mỗi <tr> như yếu tố khối với class="row" và mỗi <td> như yếu tố khối với class="col-*-*". Làm tổ Bootstrap lưới là hoàn toàn okey, vì vậy nếu bạn có somthing như thế:

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

Chỉ cần làm:

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

Ofcourse đó chỉ là những lớp dụ Bootstrap - bạn không cần phải gắn bó với con số;)

Answer 2

Dưới đây là một số nền văn học lớn: http://getbootstrap.com/css/#grid

• Thay thế bảng và tbody với Clas div s = "container"
• Thay tr với div class="row"
• Thay td với div class="col-ww-nn"
  • đâu ww là chiều rộng thiết bị (xs, sm, md, lg)
  • đâu nn là một con số 1-12 cho tỷ lệ phần trăm chiều rộng (chia cho 12)

Dưới đây là mã được cập nhật của bạn (bao gồm cả một số sửa lỗi cú pháp). Lưu ý, tôi đã thêm phản hồi sao cho trên điện thoại (xs thiết bị) cột chính thứ hai của bạn sẽ là một dòng riêng biệt. Và bạn có thể làm cho hình ảnh phản hồi với img-response sao cho kích thước của nó thay đổi với thiết bị.

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