Есть ли в фреймворке Twitter's Bootstrap набор классов, которые выравнивают текст?
Например, у меня есть несколько таблиц с итогами $
, которые я хочу выровнять вправо...
<th class="align-right">Total</th>
и
<td class="align-right">$1,000,000.00</td>
<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>
<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>
В Bootstrap 3.x использование text-right
работает отлично:
<td class="text-right">
text aligned
</td>
Нет, в Bootstrap нет класса для этого, но такой класс считается "утилитарным" классом, подобно классу ".pull-right", который упомянул @anton.
Если вы посмотрите на utilities.less, то увидите очень мало классов-утилит в Bootstrap, причина в том, что этот вид классов обычно не одобряется, и их рекомендуется использовать либо для: a) прототипирования и разработки - чтобы вы могли быстро создать свои страницы, а затем удалить классы pull-right и pull-left в пользу применения float к более семантичным классам или к самим элементам, либо b) когда это явно более практично, чем более семантическое решение.
В вашем случае, судя по вашему вопросу, вы хотите, чтобы определенный текст в вашей таблице был выровнен справа, но не весь. Семантически, было бы лучше сделать что-то вроде (я'просто собираюсь придумать несколько классов здесь, кроме класса по умолчанию bootstrap, .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>
И просто примените декларации text-align: left
или text-align: right
к классам price-value и price-label (или любым другим классам, которые вам подходят).
Проблема с применением align-right
как класса заключается в том, что если вы захотите рефакторить свои таблицы, вам придется переделывать разметку и стили. Если вы используете семантические классы, вы можете обойтись рефакторингом только содержимого CSS. Кроме того, если вы тратите время на применение класса к элементу, то лучше всего попытаться присвоить этому классу семантическое значение, чтобы в разметке было легче ориентироваться другим программистам (или вам три месяца спустя).
Можно рассуждать так: когда вы задаете вопрос "Для чего нужен этот td?", вы не получите разъяснений от ответа "align-right".
Начальной загрузки 2.3 и текст-слева служебные классы`,
текст-справа " и " текст-центр, но они не работают в ячейках таблицы. До начальной загрузки 3.0 выпущен (где они исправили проблему) и я могу сделать выключатель, я добавил Это для моего сайта CSS, которые загружаются после загрузки.Усс
:
.text-right
{
text-align: right !important;
}
.text-center
{
text-align: center !important;
}
.text-left
{
text-align: left !important;
}
Просто добавить, что "таможня" в таблицу стилей, которая загружается после загрузки´ы стилей. Так что определения классов перегружены.
В этой таблице стилей объявить выравнивание следующим образом:
.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}
Теперь вы сможете использовать в "общих" и конвенций выравнивания для TD и Th элементов.
Я думаю, потому что в CSS уже есть text-align:right
, AFAIK, Bootstrap не имеет специального класса для этого.
В Bootstrap есть "pull-right" для плавающих div'ов и т.д. справа.
Bootstrap 2.3 только что вышел и добавил стили выравнивания текста:
Bootstrap 2.3 выпущен (2013-02-07)
Предзагрузка 4 грядет! Утилиты классов ознакомлены в Bootstrap 3.х
сейчас брейк-поинт включен. Точки останова по умолчанию: хз
, см
, МД
, ЛГ
и ХL
, так что эти текстовые классы выравнивания выглядеть .текст-[останова]-[alignnment]
.
<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>
Важно: как я пишу эти строки, загрузочный 4 находится только в Альфа-2. Эти классы и как они'повторно использоваться могут быть изменены без предварительного уведомления.
Загрузочный выравнивание текста в В3.3.5:
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
Следующие строки кода работают правильно. Можно назначить классы как текст-по центру, слева или справа, текст будет соответственно скорректировать.
<p class="text-center">Day 1</p>
<p class="text-left">Day 2</p>
<p class="text-right">Day 3</p>
Здесь нет'т необходимость создать любой внешний класс. Это загрузчик классов и имеют свою собственность.
Вы можете использовать этот CSS ниже:
.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */
Класс .text-align
является абсолютно правильным и более удобным, чем .price-label
и .price-value
, которые больше не нужны.
Я рекомендую на 100% использовать пользовательский класс утилиты под названием
.text-right {
text-align: right;
}
Я люблю немного поколдовать, но это на ваше усмотрение, например:
span.pull-right {
float: none;
text-align: right;
}
Ой, с релиза Bootstrap 3, что вы можете использовать классы в <код>текст-центр на< код> По для выравнивание по центру, но <код>текст-слева на < код>По для выравнивание по левому краю, но <код>текст-право на< код> По для выравнивание по правому краю и <код>текст-оправдать</код> для выравнивание.
Bootstrap-это очень простая схема интерфейса для работы с, когда вы использовать его. А также очень легко настроить, чтобы соответствовать вашему вкусу.
Вот короткий и сладкий ответ с примером.
в
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>
в
Расширение Дэвид'ы ответ, я просто добавить простой класс для увеличения загрузки такой:
.money, .number {
text-align: right !important;
}
У нас есть пять классов, что вы можете см. здесь: 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>
в
вы можете присвоить классы как текст-по центру, влево или вправо. Текст будет соответствующим образом корректировать на эти классы. Вам не обязательно делать занятия отдельно. Эти классы встроены в Bootstrap 3
<h1 class="text-center"> Heading 1 </h1>
<h1 class="text-left"> Heading 2 </h1>
<h1 class="text-right"> Heading 3 </h1>
Проверьте здесь: Демо
В Bootstrap версии 4. Есть некоторые встроенные классы для позиционирования текста.
Для центрирования заголовка таблицы и текстовые данные:
<table>
<tr>
<th class="text-center">Text align center.</th>
</tr>
<tr>
<td class="text-center">Text align center.</td>
</tr>
</table>
Вы также можете использовать эти классы в положение какого-либо текста.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-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>
Надеюсь, что это'ы помочь вам.
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<Р=класса на"текст-МД-оставили">По левому краю текста на видовых размеров MD (средние) или шире.</п> <Р=класса"в тексте-ЛГ-оставили">По левому краю текста на видовых экранах размера LG (крупные) или шире.</п> <Р=класса"в тексте-ХL-оставили">По левому краю текста на видовых экранах размера XL (очень большой) или шире.</п>
В этих трех загрузочный класс неправильный класс
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }