Есть ли набор классов в Twitters Bootstrap Framework, который выравнивает текст?
например. У меня есть таблицы с $
итогами, которые я хочу выровнять вправо...
<th class="align-right">Total</th>
и
<td class="align-right">$1,000,000.00</td>
v3 Документы выравнивания текста
<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>
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>
Использование Bootstrap 3.x с помощью text-right
отлично работает:
<td class="text-right">
text aligned
</td>
Нет, у Bootstrap нет класса для этого, но этот класс считается классом "utility", аналогичным классу ".pull-right", который упоминается в @anton.
Если вы посмотрите на utilities.less, вы увидите очень мало классов полезности в Bootstrap, причина в том, что этот тип класса обычно недооценивается и рекомендуется использовать для: а) прототипирование и разработка - чтобы вы могли быстро создавать свои страницы, а затем удалять классы pull-right и pull-left в пользу применения float для более семантических классов или самих элементов или б) когда это явно более практично, чем более семантическое решение.
В вашем случае, по вашему вопросу, похоже, что вы хотите, чтобы текст выравнивался справа в вашей таблице, но не все. Семантически, было бы лучше сделать что-то вроде (я просто собираюсь сделать несколько классов здесь, кроме класса начальной загрузки, таблицы):
<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
к классам цены и цены (или какие-либо классы работают для вас).
Проблема с применением align-right
как класса заключается в том, что если вы хотите реорганизовать свои таблицы, вам придется переделать разметку и стили. Если вы используете семантические классы, вы можете уйти с рефакторингом только css. Кроме того, если у вас есть время, чтобы применить класс к элементу, лучше всего попытаться присвоить семантическую ценность этому классу, чтобы разметка была легче ориентироваться для других программистов (или вас через три месяца).
Один из способов подумать об этом: когда вы задаете вопрос "Что это за td для?", вы не получите разъяснений из ответа "align-right".
Bootstrap 2.3 имеет классы утилиты text-left, text-right и text-center, но они не работают в ячейках таблицы. Пока не будет выпущен bootstrap 3.0 (там, где они исправили проблему), и я могу сделать этот переключатель, я добавил его на свой CSS-сайт, загружаемый после загрузки boot.txt:
.text-right
{
text-align: right !important;
}
.text-center
{
text-align: center !important;
}
.text-left
{
text-align: left !important;
}
Просто добавьте "пользовательскую" таблицу стилей, которая загружается после таблицы стилей Bootstrap. Поэтому определения классов перегружены.
В этой таблице стилей объявите выравнивание следующим образом:
.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 и т.д. справа.
UPDATE bootstrap 2.3 только что вышел и добавил стили выравнивания текста
http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/
Бутстрап 4 идет! Классы служебных программ, которые были знакомы в Bootstrap 3.x
, теперь включены в break-point. По умолчанию точки останова: xs
, sm
, md
, lg
и xl
, поэтому эти классы выравнивания текста выглядят примерно как .text-[breakpoint]-[alignnment]
.
<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>
Важно:. При написании этого, Bootstrap 4 находится только в Alpha 2. Эти классы и способы их использования могут быть изменены без уведомления.
Выравнивание текста бутстрапа в версии 3.3.5.
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</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*/
Эта строка кода работает правильно. Вы можете назначить классы, такие как текстовый центр, слева или справа, текст будет соответствующим образом выровнен.
<p class="text-center"> Day 1 </p>
<p class="text-left"> Day 2 </p>
<p class="text-right"> Day 3 </p>
Здесь нет необходимости создавать внешний класс, это классы начальной загрузки и имеют собственное свойство.
.text-align
класс является полностью допустимым и более удобным, чем использование .price-label
и .price-value
, которые больше не нужны.
Я рекомендую переходить на 100% с помощью специального класса утилиты
.text-right {
text-align:right;
}
Мне нравится делать какую-то магию, но это зависит от вас, как-то:
span.pull-right {
float:none;
text-align:right;
}
Ow, с выпуском бутстрапа 3, вы можете использовать классы text-center
для выравнивания по центру, text-left
для выравнивания по левому краю, text-right
для выравнивания по правому краю и text-justify
для обоснованного выравнивания.
Bootstrap - очень простая инфраструктура интерфейса, с которой вы работаете, после ее использования. Кроме того, вы очень легко настраиваетесь по своему вкусу.
Развернувшись на ответе Дэвида, я просто добавлю простой класс, чтобы увеличить Bootstrap следующим образом:
.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>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Выровненный слева текст в видовых экранах размера MD (средний) или более широкий.
Выровненный слева текст в видовых экранах размера LG (большой) или более широкий.
Выровненный слева текст в видовых экранах размером XL (очень большой) или более широкий.Вот короткий и сладкий ответ с примером.
table{width: 100%;}
table td, table th{border: 1px solid #000;}
<script src="/jquery.min.js"></script>
<script src="/bootstrap.min.js"></script>
<link href="/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>
Вы можете назначить классы как текстовые, левые или правые. Текст будет соответствующим образом соответствовать этим классам. Вам не нужно проводить занятия отдельно. Эти классы встроены в BootStrap 3
<h1 class="text-center"> Heading 1 </h1>
<h1 class="text-left"> Heading 2 </h1>
<h1 class="text-right"> Heading 3 </h1>
Проверьте здесь: Демо
В этом трехклассном bootstrap недопустимый класс
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }
Если вы используете Bootstrap 3.x
<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
<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>
Утилиты Boostrap 4 знакомы в Bootstrap 3.x. Дифференциация в данный момент прерывается. По умолчанию точки останова:
xs, sm, md, lg and xl,
, поэтому эти классы выравнивания текста выглядят примерно так: .text- [breakpoint] - [alignnment]