शक्तिशाली, एक्स्टेंसिबल और फीचर-पैक फ्रंटएंड टूलकिट। Sass के साथ निर्माण और अनुकूलित करें, प्रीबिल्ट ग्रिड सिस्टम और घटकों का उपयोग करें, और शक्तिशाली जावास्क्रिप्ट प्लगइन्स के साथ परियोजनाओं को जीवंत करें।
वर्तमान में v5.2.1 · डाउनलोड · v4.6.x डॉक्स · सभी रिलीज़
बूटस्ट्रैप के साथ सीधे निर्माण में कूदें—सीडीएन का उपयोग करें, इसे पैकेज मैनेजर के माध्यम से स्थापित करें, या स्रोत कोड डाउनलोड करें।
बूटस्ट्रैप के स्रोत Sass और JavaScript फ़ाइलों को npm, RubyGems, संगीतकार, या उल्का के माध्यम से स्थापित करें। पैकेज प्रबंधित इंस्टॉल में दस्तावेज़ीकरण या हमारी पूर्ण बिल्ड स्क्रिप्ट शामिल नहीं हैं। आप हमारे 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>
बूटस्ट्रैप एक मॉड्यूलर और अनुकूलन योग्य वास्तुकला के लिए Sass का उपयोग करता है। केवल उन घटकों को आयात करें जिनकी आपको आवश्यकता है, ग्रेडिएंट और शैडो जैसे वैश्विक विकल्प सक्षम करें, और हमारे चर, मानचित्र, फ़ंक्शन और मिक्सिन के साथ अपना स्वयं का CSS लिखें।
एक स्टाइलशीट आयात करें और आप हमारे सीएसएस की प्रत्येक विशेषता के साथ दौड़ में शामिल हो गए हैं।
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
हमारे वैश्विक Sass विकल्पों के बारे में और जानें ।
बूटस्ट्रैप को अनुकूलित करने का सबसे आसान तरीका—केवल वह सीएसएस शामिल करें जिसकी आपको आवश्यकता है।
// 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";
Sass के साथ बूटस्ट्रैप का उपयोग करने के बारे में और जानें ।
बूटस्ट्रैप 5 वैश्विक थीम शैलियों, व्यक्तिगत घटकों और यहां तक कि उपयोगिताओं के लिए सीएसएस चर का बेहतर उपयोग करने के लिए प्रत्येक रिलीज के साथ विकसित हो रहा है। :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,
)
)
);
आसानी से टॉगल करने योग्य छिपे हुए तत्व, मोडल और ऑफकैनवास मेनू, पॉपओवर और टूलटिप्स, और भी बहुत कुछ जोड़ें—सभी बिना jQuery के। बूटस्ट्रैप में जावास्क्रिप्ट HTML-प्रथम है, जिसका अर्थ है कि प्लगइन्स जोड़ना उतना ही आसान है जितना कि dataविशेषताएँ जोड़ना। अधिक नियंत्रण की आवश्यकता है? प्रोग्रामेटिक रूप से अलग-अलग प्लगइन्स शामिल करें।
जब आप HTML लिख सकते हैं तो अधिक JavaScript क्यों लिखें? 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 से अधिक ग्लिफ़ हैं, जिसमें हर रिलीज़ में अधिक जोड़े जाते हैं। वे किसी भी प्रोजेक्ट में काम करने के लिए डिज़ाइन किए गए हैं, चाहे आप स्वयं बूटस्ट्रैप का उपयोग करें या नहीं। उन्हें एसवीजी या आइकन फोंट के रूप में उपयोग करें—दोनों विकल्प आपको वेक्टर स्केलिंग और सीएसएस के माध्यम से आसान अनुकूलन प्रदान करते हैं।
आधिकारिक बूटस्ट्रैप थीम मार्केटप्लेस से प्रीमियम थीम के साथ बूटस्ट्रैप को अगले स्तर पर ले जाएं । थीम बूटस्ट्रैप पर अपने स्वयं के विस्तारित ढांचे के रूप में बनाए गए हैं, जो नए घटकों और प्लगइन्स, दस्तावेज़ीकरण और शक्तिशाली बिल्ड टूल से समृद्ध हैं।
