शक्तिशाली, विस्तार योग्य, अवुरी फीचर से भरपूर फ्रंटएंड टूलकिट। सास के साथ बिल्ड आ कस्टमाइज करीं, पहिले से बनल ग्रिड सिस्टम आ कंपोनेंट सभ के इस्तेमाल करीं, आ शक्तिशाली जावास्क्रिप्ट प्लगइन सभ के साथ प्रोजेक्ट सभ के जीवन में ले आईं।
वर्तमान में v5.2.1 · डाउनलोड करीं · v4.6.x डॉक्स · सभ रिलीज बा
बूटस्ट्रैप के साथ बिल्डिंग में ठीक कूद जाईं-सीडीएन के इस्तेमाल करीं, पैकेज मैनेजर के माध्यम से इंस्टॉल करीं, या स्रोत कोड डाउनलोड करीं।
बूटस्ट्रैप के स्रोत Sass आ जावास्क्रिप्ट फाइल सभ के npm, RubyGems, Composer, या Meteor के माध्यम से इंस्टॉल करीं। पैकेज प्रबंधित इंस्टॉल में दस्तावेजीकरण भा हमनी के पूरा बिल्ड स्क्रिप्ट शामिल नइखे. रउआँ npm के माध्यम से जल्दी से बूटस्ट्रैप प्रोजेक्ट जनरेट करे खातिर हमनी के npm टेम्पलेट रेपो के भी इस्तेमाल कर सकत बानी।
npm install [email protected]gem install bootstrap -v 5.2.1अधिक जानकारी आ अतिरिक्त पैकेज प्रबंधक खातिर हमनी के इंस्टॉलेशन डॉक्स पढ़ीं ।
जब रउआँ के खाली बूटस्ट्रैप के संकलित CSS या JS के शामिल करे के जरूरत बा, त रउआँ jsDelivr के इस्तेमाल कर सकत बानी । हमनी के सरल त्वरित शुरुआत के साथ एकरा के एक्शन में देखीं , या अपना अगिला प्रोजेक्ट के जंपस्टार्ट करे खातिर उदाहरण ब्राउज करीं । रउआ पॉपर आ हमनी के जेएस के अलग से भी शामिल करे के विकल्प चुन सकत बानी .
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
हमनी के आधिकारिक गाइड के साथ एगो नया प्रोजेक्ट में बूटस्ट्रैप के स्रोत फाइल के शामिल करे पर एगो कूद पाईं।
बूटस्ट्रैप मॉड्यूलर आ अनुकूलन योग्य आर्किटेक्चर खातिर सास के इस्तेमाल करेला। खाली ओह घटक के आयात करीं जवना के रउरा जरूरत बा, ग्रेडिएंट आ शैडो जइसन ग्लोबल विकल्प सक्षम करीं, आ हमनी के चर, मैप, फंक्शन, आ मिक्सिन से आपन खुद के सीएसएस लिखीं.
एगो स्टाइलशीट आयात करीं आ रउरा हमनी के सीएसएस के हर फीचर का साथे दौड़ खातिर निकल जाईं.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
हमनी के वैश्विक सास विकल्प के बारे में अउरी जानें .
बूटस्ट्रैप के अनुकूलित करे के सबसे आसान तरीका-केवल जवन CSS के जरूरत बा ओकरा के शामिल करीं।
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
सास के साथ बूटस्ट्रैप के इस्तेमाल के बारे में अउरी जानें .
बूटस्ट्रैप 5 हर रिलीज के साथ बिकसित हो रहल बा जेह से कि ग्लोबल थीम स्टाइल, अलग-अलग कंपोनेंट, आ इहाँ तक कि यूटिलिटी सभ खातिर CSS चर सभ के बेहतर तरीका से इस्तेमाल कइल जा सके। :rootहमनी के कहीं भी इस्तेमाल खातिर रंग, फॉन्ट शैली, आ अउरी बहुत कुछ खातिर दर्जनों चर उपलब्ध करावेनी जा । घटक आ उपयोगिता सभ पर, सीएसएस चर सभ के संबंधित क्लास में दायरा दिहल जाला आ आसानी से संशोधित कइल जा सके ला।
नया शैली लिखे खातिर हमनी के कवनो ग्लोबल :rootवैरिएबल के इस्तेमाल करीं. CSS चर सभ var(--bs-variableName)सिंटैक्स के इस्तेमाल करे लें आ चिल्ड्रेन तत्व सभ द्वारा इनहेरिट कइल जा सके लें।
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}बूटस्ट्रैप के ठीक ओइसने अनुकूलित करे खातिर ग्लोबल, घटक, या उपयोगिता वर्ग चर के ओवरराइड करीं जइसे रउआ पसंद करीं। हर नियम के दोबारा घोषित करे के जरूरत नइखे, बस एगो नया चर मान।
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}बूटस्ट्रैप 5 में नया, हमनी के उपयोगिता अब हमनी के उपयोगिता एपीआई द्वारा जनरेट कइल गइल बा । हमनी के एकरा के फीचर से भरपूर सास मैप के रूप में बनवले बानी जा जवना के जल्दी अवुरी आसानी से कस्टमाइज कईल जा सकता। कवनो उपयोगिता वर्ग के जोड़ल, हटावल भा संशोधित कइल कबो आसान ना रहल. उपयोगिता सभ के रिस्पांसिव बनाईं, छद्म-क्लास वेरिएंट जोड़ीं, आ इनहन के कस्टम नाँव दीं।
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
आसानी से टॉगल करे लायक छिपल तत्व, मोडल आ ऑफकैनवास मेनू, पॉपओवर आ टूलटिप, आ अउरी बहुत कुछ जोड़ीं-ई सभ बिना जेक्वेरी के। बूटस्ट्रैप में जावास्क्रिप्ट एचटीएमएल-फर्स्ट बा, मतलब प्लगइन जोड़ल ओतने आसान बा जतना कि dataएट्रिब्यूट जोड़ल। अउरी नियंत्रण के जरूरत बा? अलग-अलग प्लगइन के प्रोग्रामेटिक रूप से शामिल करीं।
जब रउरा एचटीएमएल लिख सकेनी त अधिका जावास्क्रिप्ट काहे लिखल जाव? dataबूटस्ट्रैप के लगभग सभ जावास्क्रिप्ट प्लगइन में पहिला श्रेणी के डेटा एपीआई बा, जवना से आप सिर्फ एट्रिब्यूट जोड़ के जावास्क्रिप्ट के इस्तेमाल क सकतानी ।
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
मॉड्यूल के रूप में आ प्रोग्रामेटिक एपीआई के इस्तेमाल से हमनी के जावास्क्रिप्ट के बारे में अउरी जानें .
बूटस्ट्रैप में एक दर्जन प्लगइन बा जवना के रउरा कवनो प्रोजेक्ट में छोड़ सकेनी. एके बेर में सब गिरा दीं, भा बस जवन चाहीं ऊ चुनीं.
बूटस्ट्रैप आइकन एगो ओपन सोर्स एसवीजी आइकन लाइब्रेरी हवे जेह में 1,500 से ढेर ग्लिफ सभ के बिसेसता बा, हर रिलीज में अउरी जोड़ल जाला। ई कवनो प्रोजेक्ट में काम करे खातिर बनावल गइल बा, चाहे रउरा खुद बूटस्ट्रैप के इस्तेमाल करीं भा ना. इनहन के एसवीजी भा आइकन फॉन्ट के रूप में इस्तेमाल करीं-दुनो विकल्प रउआँ के वेक्टर स्केलिंग आ CSS के माध्यम से आसान कस्टमाइजेशन देला।
आधिकारिक बूटस्ट्रैप थीम बाजार से प्रीमियम थीम के साथ बूटस्ट्रैप के अगिला स्तर पर ले जाईं . थीम सभ के बूटस्ट्रैप पर आपन बिस्तारित फ्रेमवर्क के रूप में बनावल गइल बा, नया कंपोनेंट आ प्लगइन, दस्तावेजीकरण, आ शक्तिशाली बिल्ड टूल सभ से भरपूर।
