टाइपोग्राफी
बूटस्ट्रैप टाइपोग्राफी के लेल दस्तावेजीकरण आओर उदाहरण, जाहि मे वैश्विक सेटिंग्स, हेडिंग, बॉडी टेक्स्ट, सूची, आओर बहुत किछु शामिल अछि.
वैश्विक सेटिंग्स
बूटस्ट्रैप बेसिक ग्लोबल डिस्प्ले, टाइपोग्राफी, आओर लिंक शैली सेट करैत अछि. जखन बेसी नियंत्रणक आवश्यकता होयत, तखन पाठ्य उपयोगिता वर्ग देखू .
- एकटा देशी फॉन्ट स्टैक
font-family
कें उपयोग करूं जे प्रत्येक ओएस आ डिवाइस कें लेल सर्वश्रेष्ठ कें चयन करयत छै. - अधिक समावेशी आरू सुलभ प्रकार पैमाना के लेलऽ, हम ब्राउज़र डिफ़ॉल्ट रूट
font-size
(आम तौर प॑ 16px) मान॑ छियै ताकि आगंतुक जरूरत के अनुसार अपनऽ ब्राउज़र डिफ़ॉल्ट क॑ अनुकूलित करी सक॑ । $font-family-base
,$font-size-base
, आ विशेषताक प्रयोग करू$line-height-base
जेना हमर मुद्रण आधार पर लागू कएल गेल अछि<body>
|- के माध्यम सँ वैश्विक लिंक रंग सेट करू
$link-color
आओर लिंक रेखांकन केवल पर लागू करू:hover
. - पर
$body-bg
एक सेट करबाक लेल प्रयोग करू ( डिफ़ॉल्ट रूप सँ).background-color
<body>
#fff
ई शैलीक कें भीतर भेट सकय छै _reboot.scss
, आ वैश्विक चर कें परिभाषित करल गेलय छै _variables.scss
. $font-size-base
में सेट करब सुनिश्चित करू rem
.
शीर्षक
सब एचटीएमएल हेडिंग, <h1>
के माध्यम स <h6>
, उपलब्ध अछि।
शीर्षक | उदाहरण |
---|---|
|
ज1। बूटस्ट्रैप हेडिंग |
|
ज2। बूटस्ट्रैप हेडिंग |
|
ज3। बूटस्ट्रैप हेडिंग |
|
ज ४। बूटस्ट्रैप हेडिंग |
|
ज5। बूटस्ट्रैप हेडिंग |
|
ज6। बूटस्ट्रैप हेडिंग |
.h1
through .h6
classes भी उपलब्ध छै, के लेलऽ जब॑ आप कोनो हेडिंग केरऽ फॉन्ट स्टाइलिंग स॑ मेल खाबै ल॑ चाहै छियै लेकिन संबद्ध HTML तत्व के उपयोग नै करी सकै छियै ।
ज1। बूटस्ट्रैप हेडिंग
ज2। बूटस्ट्रैप हेडिंग
ज3। बूटस्ट्रैप हेडिंग
ज ४। बूटस्ट्रैप हेडिंग
ज5। बूटस्ट्रैप हेडिंग
ज6। बूटस्ट्रैप हेडिंग
शीर्षक अनुकूलित करब
बूटस्ट्रैप 3 सं छोट माध्यमिक हेडिंग पाठ कें पुन: बनावा कें लेल शामिल उपयोगिता वर्गक कें उपयोग करूं.
फैंसी प्रदर्शन हेडिंग फीका गौण पाठ के साथ
शीर्षक प्रदर्शित करब
पारंपरिक हेडिंग तत्व क॑ ऐन्हऽ डिजाइन करलऽ गेलऽ छै कि आपकऽ पन्ना सामग्री के मांस म॑ सबसे अच्छा काम करलऽ जाय । जखन अहाँ केँ कोनो हेडिंग केँ अलग ठाढ़ करबाक आवश्यकता हो, तखन एकटा प्रदर्शन हेडिंग केर प्रयोग पर विचार करू —एकटा पैघ, किछु बेसी राय वाला हेडिंग शैली । ध्यान राखू ई हेडिंग डिफ़ॉल्ट रूप सं उत्तरदायी नहिं अछि, मुदा उत्तरदायी फॉन्ट आकार के सक्षम करब संभव अछि .
प्रदर्शन 1 |
प्रदर्शन 2 |
प्रदर्शन 3 |
प्रदर्शन 4 |
अगुवाई
कोनो पैराग्राफ के जोड़ि क ' अलग बनाउ .lead
.
विवामस सेजिटिस लैकस वेल औग लाओरीत रुट्रम फौसिबस डोलोर नीलामी। Duis mollis, est गैर कोमोडो लक्टस।
इनलाइन पाठ तत्व
आम इनलाइन एचटीएमएल 5 तत्वों के लिये स्टाइलिंग |
अहाँ मार्क टैग के प्रयोग क सकैत छीमुख्य आकर्षणमूल ग्रन्थ.
पाठ केरऽ ई पंक्ति के मतलब छै कि ओकरा हटाय देलऽ गेलऽ पाठ के रूप म॑ मानलऽ जाय ।
पाठक एहि पाँतिकेँ आब सटीक नहि मानल जाय।
पाठ केरऽ ई पंक्ति के उद्देश्य दस्तावेज म॑ जोड़ के रूप म॑ मानलऽ जाय ।
पाठक ई पाँति रेखांकित रूपेँ रेंडर करत
पाठ के ई पाँति के मतलब छै कि एकरा फाइन प्रिंट के रूप में मानलऽ जाय ।
ई पाँति बोल्ड टेक्स्टक रूपमे रेंडर कएल गेल।
ई पाँति इटैलिक पाठक रूपमे प्रस्तुत कएल गेल अछि ।
.mark
आरू .small
कक्षा भी उपलब्ध छै वही शैली क॑ लागू करै लेली <mark>
आरू ओकरा <small>
स॑ बचै के साथ-साथ कोनो भी अवांछित शब्दार्थ निहितार्थ जे टैग लाबै वाला होतै ।
<b>
जखन कि ऊपर नहि देखाओल गेल अछि, प्रयोग करबा लेल आ <i>
HTML5 मे बेझिझक महसूस करू . <b>
शब्द या वाक्यांश के बिना अतिरिक्त महत्व के उजागर करय के मतलब छै जखन <i>
कि बेसीतर आवाज, तकनीकी शब्द आदि के लेल छै.
पाठ उपयोगिताएँ
हमर पाठ उपयोगिता आ रंग उपयोगिता क संग पाठ संरेखण, रूपांतरण, शैली, वजन, आ रंग बदलू .
संक्षिप्त नाम
<abbr>
होवर पर विस्तारित संस्करण क॑ दिखाबै लेली संक्षिप्त आरू संक्षिप्त नाम लेली एचटीएमएल केरऽ तत्व केरऽ शैलीबद्ध कार्यान्वयन । संक्षिप्त नामक मे एकटा डिफ़ॉल्ट अंडरलाइन होयत छै आ एकटा मदद कर्सर प्राप्त करयत छै जे होवर पर आ सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें लेल अतिरिक्त संदर्भ प्रदान करयत छै.
.initialism
कनि छोट फॉन्ट-साइज लेल संक्षिप्त रूप मे जोड़ू ।
अत्त्र
एचटीएमएल
ब्लॉककोट्स
अपन दस्तावेज के भीतर दोसर स्रोत सं सामग्री के ब्लॉक के उद्धरण देबय लेल. उद्धरण के रूप मे <blockquote class="blockquote">
कोनो एचटीएमएल के चारू कात लपेटू ।
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।
कोनो स्रोत के नामकरण
<footer class="blockquote-footer">
स्रोतक पहचान करबाक लेल एकटा जोड़ू । स्रोत कार्य के नाम में लपेटें <cite>
|
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।
संरेखण
अपन ब्लॉककोट क' संरेखण बदलबाक लेल आवश्यकतानुसार पाठ उपयोगिताक उपयोग करू.
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।
सूची बनाइए
अनस्टाइल
सूची आइटम पर डिफ़ॉल्ट list-style
आ बामा मार्जिन हटाउ (केवल तत्काल बच्चा)। इ केवल तत्काल बच्चा सूची आइटम पर लागू होयत छै , मतलब अहां कें कोनों नेस्टेड सूची कें लेल सेहो क्लास जोड़य कें आवश्यकता होयत.
- लोरेम इप्सम डोलोर बैठा अमेत
- Consectetur एडिपिसिंग अभिजात वर्ग
- पूर्णांक molestie lorem पर massa
- प्रीटियम निस्ल एलिकेट में फैसिलिसिस
- नुल्ला वोलुतपत अलिक्वाम वेलित
- फेसेलस इअकुलिस नेक्वे
- पुरुष सोडलेस अल्ट्रिसीस
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat पर
- फौसिबस पोर्टा लेकस फ्रिंगिला वेल
- एनियन बैस अमेत एरात नुंक
- एगेट पोर्टिटोर लोरेम
इनलाइन
कोनो सूचीक गोली निकालू आ margin
दू वर्गक संयोजनसँ किछु प्रकाश लगाउ, .list-inline
आ .list-inline-item
.
- लोरेम इप्सम
- फेसेलस इअकुलिस
- नुल्ला वोलुत्पात
विवरण सूची संरेखण
हमरऽ ग्रिड सिस्टम केरऽ पूर्व परिभाषित वर्ग (या शब्दार्थ मिक्सिन) के उपयोग करी क॑ शब्द आरू विवरण क॑ क्षैतिज रूप स॑ संरेखित करलऽ जाय । दीर्घकाल के लेलऽ, आप वैकल्पिक रूप स॑ एक .text-truncate
वर्ग जोड़॑ सकै छियै जेकरा स॑ पाठ क॑ दीर्घवृत्त स॑ काटलऽ जाय सक॑ ।
- विवरण सूची
- शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।
- यूइसमोद
-
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग |
डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
- मलेसुआदा पोर्टा
- एटियाम पोर्टा सेम मलेसुआडा मैग्ना मोलिस यूइसमोड।
- कटौती कएल गेल शब्दकेँ काटि देल गेल अछि
- फ्यूसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस कंडिमेंटम निभ, उत फर्मेन्टम मासा जस्टो बैस अमेट रिसुस।
- घोंसला बनाना
-
- नेस्टेड परिभाषा सूची
- एनियन posuere, tortor सेड cursus feugiat, ननक औग ब्लैंडिट ननन।
उत्तरदायी फॉन्ट आकार
v4.3.0 कें रूप मे, बूटस्ट्रैप उत्तरदायी फॉन्ट आकारक कें सक्षम करय कें विकल्प कें साथ भेजय छै, जे पाठ कें डिवाइस आ व्यूपोर्ट आकारक कें पार अधिक स्वाभाविक रूप सं स्केल करय कें अनुमति देयत छै. RFS$enable-responsive-font-sizes
क॑ Sass चर क॑ true
बूटस्ट्रैप म॑ बदलै आरू पुनः संकलित करी क॑ सक्षम करलऽ जाब॑ सकै छै .
RFS क समर्थन करबाक लेल , हम अपन सामान्य font-size
गुण कए बदलबा लेल एकटा Sass mixin क उपयोग करैत छी । प्रतिक्रियाशील फॉन्ट आकारक कें प्रतिक्रियाशील स्केलिंग व्यवहार कें सक्षम करय कें लेल आ व्यूपोर्ट इकाइयक कें calc()
मिश्रण कें साथ फंक्शनक मे संकलित कैल जेतय. आरएफएसrem
आओर ओकर विन्यास क बारे मे बेसी जानकारी एकर GitHub भंडार पर भेट सकैत अछि .