Bootstrap - Classe d'alignement de texte pour l'intérieur d'une table
Existe-t-il un ensemble de classes dans le cadre Bootstrap de Twitter qui aligne le texte?
Par exemple, j'ai quelques tables avec $ totaux que je veux alignés à droite ...
<th class="align-right">Total</th>
et
<td class="align-right">$1,000,000.00</td>
Bootstrap 3
Documents d'alignement de texte v
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Bootstrap 4
documents d'alignement de texte v4
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Utiliser Bootstrap 3.x avec text-right fonctionne parfaitement:
<td class="text-right">
text aligned
</td>
Non, Bootstrap n'a pas de classe pour cela, mais ce genre de classe est considérée comme une classe "utilitaire", similaire à la classe ".pull-right" mentionnée par @anton.
Si vous regardez utilities, vous verrez très peu de classes d’utilitaires dans Bootstrap, la raison étant que ce type de classe est généralement mal vu et qu’il est recommandé de l’utiliser pour: a) le prototypage et le développement - afin de pouvoir construire rapidement sortez vos pages, puis supprimez les classes tirée à droite et tirée à gauche au profit de l'application de flottants à des classes plus sémantiques ou aux éléments eux-mêmes, ou b) quand c'est clairement plus pratique qu'une solution plus sémantique.
Dans votre cas, selon votre question, il semble que vous souhaitiez que certains textes soient alignés à droite dans votre tableau, mais pas tous. Sémantiquement, il serait préférable de faire quelque chose comme (je vais juste créer quelques classes ici, à l'exception de la classe par défaut bootstrap classe, .table):
<table class="table price-table">
<thead>
<th class="price-label">Total</th>
</thead>
<tbody>
<tr>
<td class="price-value">$1,000,000.00</td>
</tr>
</tbody>
</table>
Et appliquez simplement les déclarations text-align: left ou text-align: right aux classes price-value et price-label (ou aux classes qui fonctionnent pour vous).
Le problème avec l’application de align-right en tant que classe est que si vous souhaitez refactoriser vos tableaux, vous devrez refaire le balisage et les styles. Si vous utilisez des classes sémantiques, vous pourrez peut-être vous contenter de refactoriser uniquement le contenu CSS. De plus, si vous prenez le temps d'appliquer une classe à un élément, il est préférable d'essayer d'attribuer une valeur sémantique à cette classe afin que le balisage soit plus facile à naviguer pour les autres programmeurs (ou vous trois mois plus tard).
Une façon d’y penser est la suivante: lorsque vous posez la question "A quoi sert ce td?", La réponse "align-right" ne vous clarifie pas.
Bootstrap 2.3 a les classes d'utilitaires text-left, text-right et text-center, mais elles ne fonctionnent pas dans les cellules de tableau. Jusqu'à ce que Bootstrap 3.0 soit publié (où ils ont résolu le problème) et que je puisse faire le changement, j'ai ajouté ceci à mon site CSS qui est chargé après bootstrap.css:
.text-right
{
text-align: right !important;
}
.text-center
{
text-align: center !important;
}
.text-left
{
text-align: left !important;
}
Ajoutez simplement une feuille de style "personnalisée" qui est chargée après la feuille de style de Bootstrap. Donc les définitions de classe sont surchargées.
Dans cette feuille de style, déclarez l'alignement comme suit:
.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}
Vous pouvez maintenant utiliser les conventions d'alignement "communes" pour les éléments td et th.
Je suppose que parce que CSS a déjà text-align:right, autant que je sache, Bootstrap n'a pas de classe spéciale pour cela.
Bootstrap a "tirer à droite" pour les divs flottants, etc. à droite.
Bootstrap 2.3 vient de sortir et ajoute des styles d'alignement de texte:
Publication de Bootstrap 2. (2013-02-07)
Bootstrap 4 arrive ! Les classes utilitaires rendues familières dans Bootstrap 3.x sont maintenant activées. Les points d'arrêt par défaut sont: xs, sm, md, lg et xl, de sorte que ces classes d'alignement de texte ressemblent à .text-[breakpoint]-[alignnment].
<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>
Important: Au moment de l'écriture de ce texte, Bootstrap 4 ne figure que dans Alpha 2. Ces classes et leur utilisation sont soumises à changer sans préavis.
Amorcez l'alignement du texte dans v3.3.5:
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
Les lignes de code suivantes fonctionnent correctement. Vous pouvez affecter les classes comme au centre de texte, à gauche ou à droite. Le texte s'alignera en conséquence.
<p class="text-center">Day 1</p>
<p class="text-left">Day 2</p>
<p class="text-right">Day 3</p>
Ici, il n'est pas nécessaire de créer une classe externe. Ce sont les classes Bootstrap et ont leur propre propriété.
Vous pouvez utiliser ce CSS ci-dessous:
.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */
La classe .text-align est totalement valide et plus utilisable que d'avoir .price-label et .price-value qui ne servent plus à rien.
Je recommande d'aller à 100% avec une classe d'utilitaire personnalisée appelée
.text-right {
text-align: right;
}
J'aime faire de la magie, mais c'est à vous de choisir:
span.pull-right {
float: none;
text-align: right;
}
Avec la sortie de Bootstrap 3, vous pouvez utiliser les classes de text-center pour l’alignement central, text-left pour l’alignement à gauche, text-right pour l’alignement à droite et text-justify pour un alignement justifié.
Bootstrap est un framework frontend très simple à utiliser, une fois que vous l'utilisez. En plus d'être très facile à personnaliser pour s'adapter à votre goût.
Voici une réponse courte et douce avec un exemple.
table{
width: 100%;
}
table td, table th {
border: 1px solid #000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<table>
<tr>
<th class="text-left">Text align left.</th>
<th class="text-center">Text align center.</th>
<th class="text-right">Text align right.</th>
</tr>
<tr>
<td class="text-left">Text align left.</td>
<td class="text-center">Text align center.</td>
<td class="text-right">Text align right.</td>
</tr>
</table>
</body>En développant la réponse de David , je viens d'ajouter une classe simple pour augmenter Bootstrap comme ceci:
.money, .number {
text-align: right !important;
}
Nous avons cinq classes pour cela, que vous pouvez consulter à partir d’ici: http://v4-alpha.getbootstrap.com/components/utilities/
<div class="text-left">Left aligned text.</div>
<div class="text-center">Center aligned text.</div>
<div class="text-right">Right aligned text.</div>
<div class="text-justify">Justified text.</div>
<div class="text-nowrap">No wrap text.</div>Voici la solution la plus simple
Vous pouvez affecter les classes comme au centre de texte, à gauche ou à droite. Le texte s'alignera en conséquence sur ces classes. Vous n'êtes pas obligé de faire des cours séparément. Ces classes sont intégrées à BootStrap 3
<h1 class="text-center"> Heading 1 </h1>
<h1 class="text-left"> Heading 2 </h1>
<h1 class="text-right"> Heading 3 </h1>
Vérifiez ici: démo
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Dans cette classe de trois Bootstrap classe invalide
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }