هل هناك مجموعة من الطبقات في Twitters Bootstrap Framework التي تعمل على محاذاة النص؟
مثلا لدي بعض الجداول ذات مجاميع $
التي أريد محاذاتها إلى اليمين ...
<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.
إذا نظرت إلى الأدوات المساعدة. ما لم تشاهد عددًا كبيرًا من فئات الأدوات المساعدة في Bootstrap ، فالسبب هو أن هذا النوع من الفئة مستهجن بشكل عام ، ويوصى باستخدامه لأي من: أ) النماذج الأولية والتطوير - حتى تتمكن من البناء بسرعة خارج صفحاتك ، ثم قم بإزالة فئات السحب لليمين والسحب الأيسر لصالح تطبيق الطفو على فئات أكثر دلالات أو على العناصر نفسها ، أو ب) عندما يكون ذلك عمليًا بشكل واضح أكثر من حل أكثر دلالة.
في حالتك ، يبدو أنك ترغب في سؤالك بنسق معين على اليمين في الجدول الخاص بك ، ولكن ليس كل ذلك. بمعنى الكلمة ، سيكون من الأفضل القيام بشيء مثل (سأقوم فقط بتكوين بعض الفصول هنا ، باستثناء فئة bootstrap الافتراضية ، الجدول):
<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 فقط. بالإضافة إلى ذلك ، إذا كنت تأخذ الوقت الكافي لتطبيق فصل دراسي على عنصر ما ، فمن الأفضل محاولة تعيين قيمة دلالية لذلك الفصل الدراسي بحيث يكون التنقل أسهل للمبرمجين الآخرين (أو بعد ثلاثة أشهر).
إحدى الطرق للتفكير في الأمر هي: عندما تطرح السؤال "ما معنى هذا؟" ، فلن تحصل على توضيح من الإجابة "محاذاة إلى اليمين".
يحتوي Bootstrap 2.3 على فصول فائدة يسار النص و يمين النص و مركز النص ، لكنها لا تعمل في خلايا الجدول. حتى يتم إصدار bootstrap 3.0 (حيث تم إصلاح المشكلة) وأستطيع إجراء التبديل ، أضفت هذا إلى موقعي CSS الذي تم تحميله بعد bootstrap.css:
.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.
أعتقد أن المغلق لديه text-align:right
AFAIK bootstrap لا يحتوي على فئة خاصة لذلك.
يحتوي Bootstrap على "سحب يميني" لقوائم div العائمة وما إلى ذلك.
UPDATEbootstrap 2.3 خرج للتو وأضاف أنماط محاذاة النص
http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/
Bootstrap 4 قادم ! أصبحت فئات الأدوات المساعدة المألوفة في Bootstrap 3.x
ممكّنة الآن. نقاط التوقف الافتراضية هي: 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. هذه الفئات وكيفية استخدامها عرضة للتغيير دون إشعار.
Bootstrap Text Alignment in v3.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>
لا توجد حاجة لإنشاء أي فئة خارجية ، فهذه هي فئات bootstrap ولها ممتلكات خاصة بها.
يمكنك استخدام هذا المغلق أدناه:
.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 ، يمكنك استخدام فئات text-center
للمحاذاة المركزية ، text-left
للمحاذاة اليسرى ، text-right
للمحاذاة اليمنى و text-justify
لمحاذاة مبررة.
يعد Bootstrap إطارًا بسيطًا للواجهة الأمامية للعمل معه بمجرد استخدامه. فضلا عن كونه eaay جدا لتخصيص لتناسب ذوقك.
هنا إجابة قصيرة وحلوة مع المثال.
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>
التوسع في إجابة ديفيد ، أنا فقط إضافة فئة بسيطة لزيادة 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>
يمكنك تعيين الفئات مثل مركز النص ، اليسار أو اليمين. سيتم محاذاة النص وفقًا لهذه الفئات. ليس لديك لجعل الطبقات بشكل منفصل. هذه الفئات هي في ثناياه عوامل في BootStrap 3
<h1 class="text-center"> Heading 1 </h1>
<h1 class="text-left"> Heading 2 </h1>
<h1 class="text-right"> Heading 3 </h1>
تحقق هنا: تجريبي
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
في هذه الفئة ثلاثة bootstrap فئة غير صالحة
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }