शक्तिशाली, विस्तार योग्य, ते फीचर-पैक फ्रंटएंड टूलकिट। 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 हर रिलीज कन्नै विकसित होआ करदा ऐ तां जे वैश्विक थीम शैलियें, व्यक्तिगत घटकें, ते इत्थूं तगर जे उपयोगिताएं आस्तै 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,
)
)
);
आसानी कन्नै टॉगल करने योग्य छिपे दे तत्व, मोडल ते ऑफकैनवास मेनू, पॉपओवर ते टूलटिप्स, ते होर मता किश जोड़ो-एह् सारे 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 शा मते ग्लिफें दी सुविधा ऐ, जिस च हर रिलीज च होर बी जोड़े गेदे न। एह् कुसै बी प्रोजेक्ट च कम्म करने आस्तै डिजाइन कीते गेदे न, चाहे तुस खुद बूटस्ट्रैप दा इस्तेमाल करो जां नेईं। इन्हें गी एसवीजी जां आइकन फॉन्ट दे रूप च इस्तेमाल करो-दोनें विकल्प तुसेंगी वेक्टर स्केलिंग ते CSS दे राहें आसान अनुकूलन दिंदे न.
आधिकारिक बूटस्ट्रैप थीम्स बाजार थमां प्रीमियम थीम कन्नै बूटस्ट्रैप गी अगले स्तर पर लेई जाओ . थीम बूटस्ट्रैप पर अपने विस्तारित ढांचे दे रूप च बनाई गेदे न, नमें घटकें ते प्लगइनें, दस्तावेजें, ते शक्तिशाली निर्माण उपकरणें कन्नै समृद्ध।
