CSS चर, उत्तरदायी ऑफकैनवास, नव उपयोगिता, आओर बहुत किछु!

बूटस्ट्रैप क संग तेज, उत्तरदायी साइट बनाउ

शक्तिशाली, विस्तार योग्य, आ सुविधा-पैक फ्रंटएंड टूलकिट. 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 क संग बूटस्ट्रैप क उपयोग क बारे मे बेसी जानू .

CSS चर के साथ वास्तविक समय में निर्माण और विस्तार |

बूटस्ट्रैप 5 प्रत्येक रिलीज कें साथ विकसित भ रहल छै ताकि वैश्विक थीम शैली, व्यक्तिगत घटक, आ यहां तक कि उपयोगिताअक कें लेल सीएसएस चर कें बेहतर उपयोग कैल जा सकय. :rootहम कतहु उपयोग के लेल एक स्तर पर रंग, फॉन्ट शैली, आओर बेसी के लेल दर्जनों चर प्रदान करैत छी | घटक आ उपयोगिताक पर, सीएसएस चर कें संबंधित वर्ग कें लेल दायरा देल गेल छै आ आसानी सं संशोधित कैल जा सकय छै.

CSS चर के बारे मे अधिक जानें |

CSS चर का प्रयोग

नव शैली लिखबाक लेल हमर कोनो ग्लोबल :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 के बिना शक्तिशाली जावास्क्रिप्ट प्लगइन

आसानी सं टॉगल करय योग्य छिपल तत्व, मोडल आ ऑफकैनवास मेनू, पॉपओवर आ टूलटिप्स, आओर बहुत किछु जोड़ू-सब बिना 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 चर के साथ वास्तविक समय में निर्माण और विस्तार |

CSS चर का प्रयोग

सीएसएस चर के माध्यम स अनुकूलित करब

घटक, उपयोगिता एपीआई पूरा करू

घटक के जल्दी से अनुकूलित करें

jQuery के बिना शक्तिशाली जावास्क्रिप्ट प्लगइन

डेटा विशेषता एपीआई

प्लगइन के व्यापक सेट

चेतावनी

बोताम

हिंडोला

खसि पड़नाइ

ड्रॉपडाउन

मोडल

ऑफकैनवास

पोपोवर

स्क्रॉलस्पाई

टैब

सेकनाइ

टूलटिप

बूटस्ट्रैप आइकन के साथ एकरा निजीकृत करू

आधिकारिक बूटस्ट्रैप थीम के साथ एकरा अपन बनाउ