बूटस्ट्रैप - टाइपोग्राफी
बूटस्ट्रैप अपने डिफ़ॉल्ट फ़ॉन्ट स्टैक में Helvetica Neue, Helvetica, Arial और sans-serif का उपयोग करता है। बूटस्ट्रैप की टाइपोग्राफी सुविधा का उपयोग करके आप शीर्ष लेख, पैराग्राफ, सूचियाँ और अन्य इनलाइन तत्व बना सकते हैं। आइए निम्न वर्गों में इनमें से प्रत्येक को जानें।
हेडिंग
सभी HTML शीर्षकों (h1 से h6) को बूटस्ट्रैप में स्टाइल किया गया है। एक उदाहरण नीचे दिखाया गया है -
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>
बूटस्ट्रैप के साथ उपरोक्त कोड खंड निम्नलिखित परिणाम का उत्पादन करेगा -
इनलाइन सबहेडिंग
शीर्षकों में से किसी में इनलाइन को जोड़ने के लिए, बस किसी भी तत्व के आसपास <small> जोड़ें या जोड़ें .small कक्षा और आपको हल्के रंग में छोटा पाठ मिलेगा जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है -
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>
बूटस्ट्रैप के साथ उपरोक्त कोड खंड निम्नलिखित परिणाम का उत्पादन करेगा -
लीड बॉडी कॉपी
एक पैराग्राफ पर कुछ जोर देने के लिए, वर्ग = "लीड" जोड़ें। यह आपको निम्न उदाहरण के रूप में एक बड़ा फ़ॉन्ट आकार, हल्का वजन और एक लंबी लाइन ऊंचाई देगा -
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>
ज़ोर
HTML का डिफ़ॉल्ट जोर टैग्स जैसे कि <small> टेक्स्ट को पैरेंट के आकार के 85% पर सेट करता है, <strong> भारी फॉन्ट-वेट वाले टेक्स्ट पर जोर देता है, और <em> इटैलिक्स में टेक्स्ट पर जोर देता है।
बूटस्ट्रैप कुछ कक्षाएं प्रदान करता है जिनका उपयोग निम्नलिखित उदाहरण में ग्रंथों पर जोर देने के लिए किया जा सकता है -
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<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-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>
लघुरूप
HTML <abbr> तत्व डब्ल्यूडब्ल्यूडब्ल्यू या एचटीटीपी की तरह संक्षिप्तीकरण या संक्षेप के लिए मार्कअप प्रदान करता है। बूटस्ट्रैप शैलियों <abbr> नीचे के साथ एक प्रकाश बिंदीदार सीमा के साथ तत्व और होवर पर पूर्ण पाठ को प्रकट करता है (जब तक आप उस पाठ को <abbr> शीर्षक विशेषता में जोड़ते हैं)। एक छोटे से छोटे फ़ॉन्ट आकार को जोड़ने के लिए .वादवाद को <abbr> जोड़ें।
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>
पतों
<पता> टैग का उपयोग करके आप अपने वेब पेज पर संपर्क जानकारी प्रदर्शित कर सकते हैं। प्रदर्शन के बाद से <पता> डिफ़ॉल्ट: ब्लॉक; आपको उपयोग करने की आवश्यकता होगी
संलग्न पते पर पंक्ति विराम जोड़ने के लिए टैग।
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href = "mailto:#">[email protected]</a>
</address>
ब्लॉक उद्धरण
आप किसी भी HTML पाठ के आसपास डिफ़ॉल्ट <blockquote> का उपयोग कर सकते हैं। अन्य विकल्पों में शामिल हैं, उद्धरण के स्रोत की पहचान करने के लिए एक <small> टैग जोड़ना और वर्ग। Pull-right का उपयोग करके ब्लॉकचोट को दाएं-संरेखित करना । निम्न उदाहरण इन सभी विशेषताओं को प्रदर्शित करता है -
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
सूचियाँ
बूटस्ट्रैप आदेशित सूचियों, अनियंत्रित सूचियों और परिभाषा सूचियों का समर्थन करता है।
Ordered lists - एक आदेशित सूची एक सूची है जो क्रमबद्ध क्रम में किसी प्रकार से गिरती है और संख्याओं द्वारा पूर्वनिर्धारित होती है।
Unordered lists- एक अनियंत्रित सूची एक सूची है जिसमें कोई विशेष आदेश नहीं है और पारंपरिक रूप से गोलियों के साथ स्टाइल किया गया है। आप गोलियों प्रकट करने के लिए नहीं करना चाहते हैं, तो आप वर्ग का उपयोग करके स्टाइल को हटा सकते हैं .list-unstyled । आप वर्ग सूची । इनलाइन का उपयोग करके सभी सूची आइटमों को एक पंक्ति में रख सकते हैं ।
Definition lists- इस प्रकार की सूची में, प्रत्येक सूची आइटम में <dt> और <dd> दोनों तत्व शामिल हो सकते हैं। <dt> परिभाषा शब्द के लिए खड़ा है , और एक शब्दकोश की तरह, यह शब्द (या वाक्यांश) है जिसे परिभाषित किया जा रहा है। इसके बाद, <dd> <dt> की परिभाषा है। आप वर्ग dl-क्षैतिज का उपयोग करके <dl> लाइन अप-साइड में शब्द और विवरण बना सकते हैं ।
निम्न उदाहरण इन प्रकारों में से प्रत्येक को प्रदर्शित करता है -
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>