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