Tekstjusteringsklasse for inne i en tabell
Finnes det et sett med klasser i Twitters Bootstrap-rammeverk som justerer tekst?
For eksempel har jeg noen tabeller med $
totaler som jeg vil justere til høyre ...
<th class="align-right">Total</th>
og
<td class="align-right">$1,000,000.00</td>
706
3
Nei, Bootstrap har ikke en klasse for det, men denne typen klasse betraktes som en "utility" -klasse, i likhet med "pull-right" -klassen som @anton nevnte.
Hvis du ser på utilities.less vil du se svært få verktøyklasser i Bootstrap, årsaken er at denne typen klasser generelt er mislikt, og anbefales å brukes til begge deler: a) prototyping og utvikling - slik at du raskt kan bygge ut sidene dine, og deretter fjerne pull-right og pull-left-klassene til fordel for å bruke flyter til mer semantiske klasser eller til elementene selv, eller b) når det er klart mer praktisk enn en mer semantisk løsning.
I ditt tilfelle ser det ut til at du ønsker å ha noe tekst justert til høyre i tabellen, men ikke alt. Semantisk ville det være bedre å gjøre noe sånt som (jeg skal bare lage noen få klasser her, bortsett fra standard bootstrap-klassen, .table):
Og bare bruke
text-align: left
ellertext-align: right
erklæringer til price-value og price-label klasser (eller hvilke klasser som fungerer for deg).Problemet med å bruke
align-right
som en klasse, er at hvis du vil refaktorere tabellene dine, må du gjøre om markeringen og stilene. Hvis du bruker semantiske klasser, kan du kanskje slippe unna med å refaktorere bare CSS-innholdet. I tillegg, hvis du tar deg tid til å bruke en klasse på et element, er det beste praksis å prøve å tilordne semantisk verdi til den klassen slik at markeringen er lettere å navigere for andre programmerere (eller deg tre måneder senere).En måte å tenke på det på er dette: når du stiller spørsmålet "Hva er denne td for?", vil du ikke få avklaring fra svaret "align-right".
Jeg antar at fordi CSS allerede har
text-align:right
, AFAIK, Bootstrap ikke har en spesiell klasse for det.Bootstrap har "pull-right" for flytende divs, etc. til høyre.
Bootstrap 2.3 kom nettopp ut og la til tekstjusteringsstiler:
Bootstrap 2.3 utgitt (2013-02-07)
Klassen
.text-align
er helt gyldig og mer anvendelig enn å ha en.price-label
og.price-value
som ikke lenger er til nytte.Jeg anbefaler å gå 100% med en tilpasset verktøyklasse som heter
Jeg liker å gjøre litt magi, men det er opp til deg, som noe: