Comment convertir le tableau de mise en page avec Bootstrap “ligne” et “col--”

Je suis en train de travailler sur le site qui est basé sur le tableau-mise en page (pas de div). Maintenant exigence de changement, et de créer à nouveau de sorte qu'il regarde réactif et souple, nous choisissons de bootstrap en option.

Maintenant, Comment puis-je convertir des tableaux de mise en page dans bootstrap grille de mise en page peuvent donc 1. ne regardez pas le changement, 2. ont réactif aussi.

table-mise en page est trop complexe dans le site. beaucoup de nidification est là. 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 code ci-dessus avec bootstrap row, col-*-* une grille de mise en page.

Confiance en moi, j'ai essayé beaucoup de convertir cela, mais parfois, semble changer ou tout simplement pas de travail du tout.

Général suggestion sur la façon de convertir un tableau de base de mise en page dans bootstrap sont également les bienvenus.

vous pouvez imbriquer des lignes et des colonnes dans le bootstrap tout comme les tableaux de <tr> devient un .ligne et <td> devient .col--. Le bootstrap colonne de la grille de 12 colonnes de sorte que vous avez à faire un peu de mathématiques.

InformationsquelleAutor Kiran | 2015-09-23

37

Voici quelques grands de la littérature: Bootstrap 3 système de Grille
- Remplacer la table et tbody avec div class="container"
- Remplacer tr avec div class="row"
- Remplacer td avec div class="col-ww-nn"
  - Où ww est l'appareil largeur (xs, sm, md, lg)
  - Où nn est un numéro de 1 à 12 pour du pourcentage de la largeur (divisé par 12)
Ci-dessous votre code mis à jour (y compris certains de la syntaxe de corrections). Remarque, j'ai ajouté de la réactivité, de sorte que sur les téléphones (xs périphériques) votre deuxième colonne principale serait une ligne distincte. Et vous pouvez faire des images sensibles avec img-response de sorte que c'est les changements de taille 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>
```
- merci, mais une question - lors de la lecture de docs sur Bootstrap j'ai aussi trouvé que le conteneur ou container-fluid est pas empilable. Donc, C'est ok, à nid comme vous l'avez fait dans le code?
- Bonne trouvaille. Vous pouvez vous en sortir avec elle, mais pour une bonne utilisation de bootstrap, vous ne devriez pas nest conteneurs, car il peut causer des comportements non voulus. J'ai mis à jour mon code en conséquence, simplement en retirant l'intérieur des conteneurs. Je suppose que nous apprenons ensemble.
- Que faire si j'ai plus de 12 colonnes dans ma table?
- Bootstrap conteneur des lignes et des colonnes sont destinées à être utilisées pour répondre de mise en page, afin de remplacer l'ancienne méthode, à l'aide de tableaux. Les tableaux devraient toujours être utilisés pour de véritables tableaux de données. Si vous avez besoin de plus de 12 colonnes dans une rangée, vous devez remplacer le Bootstrap par défaut de mise à jour des pourcentages en conséquence. Note, vous devez également remplacer les décalages de colonne, pousser et tirer.
InformationsquelleAutor Adam Milecki

En fait il n'est pas si complexe.

Juste passer chaque <table> et <tbody> tag, traiter tous les <tr> comme élément de bloc avec class="row" et tous les <td> comme élément de bloc avec class="col-*-*". L'imbrication de Bootstrap grille est totalement okey, donc 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>

Viens 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 exemple de Bootstrap classes - vous de ne pas avoir à coller avec des nombres 😉

InformationsquelleAutor jazzgot

Vous devez vous connecter pour publier un commentaire.