बूटस्ट्रैप जंबोट्रॉन और पेज हैडर
एक जंबोट्रॉन बनाना
एक जंबोट्रॉन कुछ विशेष सामग्री या जानकारी पर अतिरिक्त ध्यान देने के लिए एक बड़ा बॉक्स इंगित करता है।
एक जंबोट्रॉन को गोल कोनों के साथ एक ग्रे बॉक्स के रूप में प्रदर्शित किया जाता है। यह अपने अंदर के टेक्स्ट के फॉन्ट साइज को भी बड़ा करता है।
युक्ति: एक जंबोट्रॉन के अंदर आप अन्य बूटस्ट्रैप तत्वों/वर्गों सहित लगभग कोई भी मान्य HTML डाल सकते हैं।
जंबोट्रॉन बनाने के लिए कक्षा के साथ एक <div>तत्व का प्रयोग करें:.jumbotron
बूटस्ट्रैप ट्यूटोरियल
वेब पर रिस्पॉन्सिव, मोबाइल-फर्स्ट प्रोजेक्ट्स विकसित करने के लिए बूटस्ट्रैप सबसे लोकप्रिय HTML, CSS और JS फ्रेमवर्क है।
कंटेनर के अंदर जंबोट्रॉन
जंबोट्रॉन को अंदर रखें <div class="container">यदि आप चाहते हैं कि जंबोट्रॉन स्क्रीन के किनारे तक न बढ़े:
उदाहरण
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
कंटेनर के बाहर जंबोट्रॉन
जंबोट्रॉन को बाहर रखें <div class="container">यदि आप चाहते हैं कि जंबोट्रॉन स्क्रीन किनारों तक विस्तारित हो:
उदाहरण
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
पेज हेडर बनाना
एक पेज हेडर एक सेक्शन डिवाइडर की तरह होता है।
वर्ग शीर्षक के .page-headerतहत एक क्षैतिज रेखा जोड़ता है (+ तत्व के चारों ओर कुछ अतिरिक्त स्थान जोड़ता है):
उदाहरण पृष्ठ शीर्षलेख
पेज हेडर बनाने के लिए <div>क्लास वाले एलिमेंट का इस्तेमाल करें :.page-header
उदाहरण
<div class="page-header">
<h1>Example Page Header</h1>
</div>