web-dev-qa-db-ja.com

Bootstrap "row"および "col-*-*"を使用してテーブルベースのレイアウトを変換する方法

テーブルレイアウト（divなし）に基づくサイトで作業しています。ここで要件が変更され、レスポンシブに見えるように再作成する必要があります。レスポンシブには、オプションとしてbootstrapを選択します。

さて、テーブルレイアウトをbootstrapグリッドレイアウトに変換して、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>

たとえば、上記のコードをbootstrap row、col-*-* grid-layoutでどのように変換できますか。

私を信じて、私はこれを変換するために多くのことを試みましたが、いつか変化するように見えるか、まったく動作しない場合があります。

テーブルの基本レイアウトをbootstrapに変換する方法に関する一般的な提案も歓迎します。

csstwitter-bootstraphtml-table
25
Kiran

ここにいくつかの素晴らしい文献があります： Bootstrap 3 Grid system

  • テーブルとtbodyをdiv class="container"に置き換えます
  • Trをdiv class="row"に置き換えます
  • Tdをdiv class="col-ww-nn" に置き換えます
    • ここで、wwはデバイスの幅です（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>
37
Adam Milecki

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

すべての<table>および<tbody>タグをスキップし、すべての<tr>をclass="row"でブロック要素として、すべての<td>をclass="col-*-*"でブロック要素として扱います。 Bootstrapグリッドのネストはまったく問題ないので、そのようなものがある場合：

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

もちろん、これらは単なるBootstrapクラスの例です-数字に固執する必要はありません;）

5
jazzgot