html - बूटस्ट्रैप-अंदर तालिका के लिए पाठ-संरेखण वर्ग




css twitter-bootstrap (13)

बूटस्ट्रैप 3

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>

बूटस्ट्रैप 4

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>

क्या Twitters बूटस्ट्रैप फ्रेमवर्क में कक्षाओं का एक सेट है जो पाठ संरेखित करता है?

जैसे मेरे पास $ कुल योग के साथ कुछ सारणी हैं जिन्हें मैं दाएं से गठबंधन करना चाहता हूं ...

<th class="align-right">Total</th>

तथा

<td class="align-right">$1,000,000.00</td>

यहां सबसे सरल समाधान है

आप टेक्स्ट-सेंटर, बाएं या दाएं जैसे वर्ग असाइन कर सकते हैं। टेक्स्ट इन वर्गों के अनुसार संरेखित होगा। आपको कक्षाओं को अलग से बनाने की ज़रूरत नहीं है। ये कक्षा बूटस्ट्रैप 3 में अंतर्निहित हैं

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

यहां देखें: डेमो


आप नीचे इस सीएसएस का उपयोग कर सकते हैं:

.text-right {text-align: right} /*For right align*/
.text-left {text-align: left} /*For left align*/
.text-center {text-align: center} /*For center align*/

ओउ, बूटस्ट्रैप 3 के रिलीज के साथ, आप केंद्र संरेखण के लिए text-center के वर्गों का उपयोग कर सकते हैं, बाएं संरेखण के लिए text-left , दाएं संरेखण के लिए text-right और एक उचित संरेखण के लिए text-justify

बूटस्ट्रैप एक बार आप इसका उपयोग करने के साथ काम करने के लिए एक बहुत ही सरल फ्रंटेंड फ्रेमवर्क है। साथ ही अपनी पसंद के अनुरूप अनुकूलित करने के लिए बहुत ही आसान है।


डेविड के जवाब पर विस्तार करते हुए, मैं बस बूटस्ट्रैप को बढ़ाने के लिए एक साधारण वर्ग जोड़ता हूं:

.money, .number {
    text-align: right !important;
}

नहीं, बूटस्ट्रैप के पास इसके लिए कोई कक्षा नहीं है, लेकिन इस तरह की कक्षा को "उपयोगिता" वर्ग माना जाता है, जो ".pull-right" वर्ग के समान है जिसे @anton का उल्लेख किया गया है।

यदि आप यूटिलिटीज देखते हैं। जब तक आप बूटस्ट्रैप में बहुत कम उपयोगिता कक्षाएं नहीं देख पाएंगे, इस कारण यह है कि इस तरह की कक्षा आम तौर पर फंस जाती है, और इसके लिए इस्तेमाल करने की अनुशंसा की जाती है: ए) प्रोटोटाइपिंग और विकास - ताकि आप जल्दी से निर्माण कर सकें अपने पृष्ठों को बाहर निकालें, फिर अधिक अर्थपूर्ण कक्षाओं या तत्वों के लिए फ्लोट लगाने के पक्ष में पुल-दाएं और पुल-बाएं कक्षाओं को हटा दें, या बी) जब यह अधिक अर्थपूर्ण समाधान की तुलना में स्पष्ट रूप से अधिक व्यावहारिक है।

आपके मामले में, आपके प्रश्न से ऐसा लगता है कि आप अपनी तालिका में दाईं ओर कुछ टेक्स्ट संरेखित करना चाहते हैं, लेकिन यह सब नहीं। अर्थात्, ऐसा कुछ करना बेहतर होगा (मैं बस कुछ कक्षाएं बनाने जा रहा हूं, डिफ़ॉल्ट बूटस्ट्रैप क्लास को छोड़कर, .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: left या text-align: right मूल्य-मूल्य और मूल्य-लेबल कक्षाओं (या जो भी कक्षाएं आपके लिए काम करती हैं) के लिए text-align: right घोषणाएं।

कक्षा के रूप में align-right करने के साथ समस्या, यह है कि यदि आप अपनी तालिकाओं को दोबारा बनाना चाहते हैं तो आपको मार्कअप और शैलियों को फिर से करना होगा। यदि आप अर्थपूर्ण कक्षाओं का उपयोग करते हैं तो आप केवल सीएसएस को पुनः प्राप्त करने में सक्षम हो सकते हैं। इसके अलावा, यदि किसी तत्व को कक्षा लागू करने के लिए समय निकाला जा रहा है, तो उस कक्षा में अर्थपूर्ण मूल्य असाइन करने का प्रयास करने का सबसे अच्छा अभ्यास है ताकि अन्य प्रोग्रामर (या आप तीन महीने बाद) के लिए नेविगेट करना आसान हो।

इसके बारे में सोचने का एक तरीका यह है: जब आप सवाल पूछते हैं "यह टीडी क्या है?", तो आपको "संरेखण-दाएं" उत्तर से स्पष्टीकरण नहीं मिलेगा।


बूटस्ट्रैप 2.3 में उपयोगिता वर्ग टेक्स्ट-बाएं, टेक्स्ट-दाएं और टेक्स्ट-सेंटर हैं, लेकिन वे तालिका कक्षों में काम नहीं करते हैं। जब तक बूटस्ट्रैप 3.0 जारी नहीं किया जाता है (जहां उन्होंने समस्या तय की है) और मैं स्विच करने में सक्षम हूं, मैंने इसे अपनी साइट सीएसएस में जोड़ा है जो bootstrap.css के बाद लोड किया गया है:

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

.text-center
{
    text-align: center !important;
}

.text-left
{
    text-align: left !important;
}

मुझे लगता है क्योंकि सीएसएस में पहले से ही text-align:right AFAIK बूटस्ट्रैप के लिए इसके लिए एक विशेष श्रेणी नहीं है।

बूटस्ट्रैप में फ़्लोटिंग divs आदि के लिए दाईं ओर "पुल-दाएं" है।

अद्यतन बूटस्ट्रैप 2.3 बस बाहर आया और पाठ संरेखण शैलियों को जोड़ा गया

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/


हमारे पास इसके लिए पांच कक्षाएं हैं, जिन्हें आप यहां से संदर्भित कर सकते हैं: 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>


बूटस्ट्रैप 4 आ रहा है ! बूटस्ट्रैप 3.x में परिचित यूटिलिटी क्लासेस अब ब्रेक-पॉइंट सक्षम हैं। डिफ़ॉल्ट ब्रेकपॉइंट्स हैं: xs , sm , md , lg और xl , इसलिए इन टेक्स्ट संरेखण कक्षाएं कुछ .text-[breakpoint]-[alignnment] जैसी .text-[breakpoint]-[alignnment]

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

महत्वपूर्ण: इसे लिखने के रूप में, बूटस्ट्रैप 4 केवल अल्फा 2 में है। इन वर्गों और उनका उपयोग कैसे किया जाता है, वे बिना किसी सूचना के बदल सकते हैं।


text-right का उपयोग कर बूटस्ट्रैप 3.x का उपयोग पूरी तरह से काम करता है:

<td class="text-right">
  text aligned
</td>

इस तीन कक्षा बूटस्ट्रैप अमान्य वर्ग में

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

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

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

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
व्यूपोर्ट्स एमडी (मध्यम) या व्यापक आकार के बाएं गठबंधन पाठ।

एलजी (बड़े) या व्यापक आकार के व्यूपोर्ट्स पर बाएं संरेखित पाठ।

व्यूपोर्ट्स एक्सएल (अतिरिक्त-बड़े) या व्यापक आकार के बाएं गठबंधन पाठ।





text-align