web-dev-qa-db-fra.com

Comment convertir une mise en page basée sur une table avec Bootstrap "row" et "col - * - *"

Je travaille sur le site qui est basé sur la disposition de la table (pas de div). Maintenant, les exigences changent et doivent être recréées de manière à ce qu'elles aient l'air réactives. Pour cela, nous choisissons bootstrap en tant qu'option.

Maintenant, comment puis-je convertir la mise en page de tableaux en bootstrap mise en page afin que 1. puisse ne pas regarder, 2. avoir également responsive.

la disposition des tables est trop complexe sur le site. il y a beaucoup de nidification. Par exemple:

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

Par exemple, comment puis-je convertir le code ci-dessus avec bootstrap row, col-*-* disposition de la grille.

Croyez-moi, j'ai beaucoup essayé de convertir cela, mais parfois, les choses changent ou parfois ne fonctionnent pas du tout.

Des suggestions générales sur la façon de convertir la disposition de la base de la table en bootstrap sont également les bienvenues.

csstwitter-bootstraphtml-table
25
Kiran

Voici quelques ouvrages remarquables: système Bootstrap 3 Grid

  • Remplacez la table et tbody par div class="container"
  • Remplacez tr par div class="row"
  • Remplacez td par div class="col-ww-nn"
    • Où ww est la largeur du périphérique (xs, sm, md, lg)
    • Où nn est un nombre compris entre 1 et 12 pour le pourcentage de largeur (divisé par 12)

Vous trouverez ci-dessous votre code mis à jour (avec certaines corrections de syntaxe également). Remarque: j'ai ajouté la réactivité afin que sur les téléphones (xs appareils) votre deuxième colonne principale constitue une ligne séparée. Et vous pouvez rendre les images sensibles avec img-response pour que sa taille change avec l'appareil.

<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

En réalité, ce n'est pas si complexe.

Il suffit de sauter chaque balise <table> Et <tbody>, De traiter chaque <tr> Comme élément de bloc avec class="row" Et chaque <td> Comme élément de bloc avec class="col-*-*". L'imbrication de la grille Bootstrap est tout à fait correcte, alors si vous avez quelque chose comme ça:

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

Il suffit de faire:

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

Bien sûr, ce ne sont que des exemples Bootstrap classes - vous n'avez pas à vous en tenir aux chiffres;)

5
jazzgot