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>

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

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

Og bare bruke text-align: left eller text-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".

Kommentarer (4)

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)

Kommentarer (1)

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

.text-right {
  text-align: right;
}

Jeg liker å gjøre litt magi, men det er opp til deg, som noe:

span.pull-right {
  float: none;
  text-align: right;
}
Kommentarer (4)