सीएसएस चर, उत्तरदायी ऑफकैनवास, नमीं उपयोगिताएं, ते होर मते!

बूटस्ट्रैप कन्नै तेज़, उत्तरदायी साइटें दा निर्माण करो

शक्तिशाली, विस्तार योग्य, ते फीचर-पैक फ्रंटएंड टूलकिट। 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अस कुतै बी इस्तेमाल आस्तै इक स्तर पर रंगें, फॉन्ट शैलियां, ते होर मते आस्तै दर्जन भर चर उपलब्ध करोआने आं । घटकें ते उपयोगिताएं पर, सीएसएस चर गी संबद्ध वर्ग च स्कोप कीता जंदा ऐ ते इसगी आसानी कन्नै संशोधित कीता जाई सकदा ऐ।

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 दे बगैर। बूटस्ट्रैप च जावास्क्रिप्ट एचटीएमएल-पैह् ले ऐ , जिसदा मतलब ऐ जे प्लगइन्स जोड़ना उतनी गै आसान ऐ जितना कि 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 दे राहें आसान अनुकूलन दिंदे न.

बूटस्ट्रैप आइकन प्राप्त करो

आधिकारिक बूटस्ट्रैप थीम्स कन्नै इसगी अपना बनाओ

आधिकारिक बूटस्ट्रैप थीम्स बाजार थमां प्रीमियम थीम कन्नै बूटस्ट्रैप गी अगले स्तर पर लेई जाओ . थीम बूटस्ट्रैप पर अपने विस्तारित ढांचे दे रूप च बनाई गेदे न, नमें घटकें ते प्लगइनें, दस्तावेजें, ते शक्तिशाली निर्माण उपकरणें कन्नै समृद्ध।

बूटस्ट्रैप थीम्स ब्राउज़ करो

बूटस्ट्रैप कन्नै तेज़, उत्तरदायी साइटें दा निर्माण करो

किसी भी तरह शुरू करो

पैकेज प्रबंधक दे राहें इंस्टॉल करो

सीडीएन दे जरिए शामल करो

साढ़े शुरूआत करने आह् ले गाइड पढ़ो

सस्स कन्नै सब किश अनुकूलित करो

बूटस्ट्रैप दे सारे सस्स गी शामल करो

जेह् ड़ी तुसेंगी लोड़ ऐ उसी बी शामल करो

सीएसएस चर कन्नै रियल-टाइम च बनाओ ते विस्तार करो

सीएसएस चर दा उपयोग करदे होई

सीएसएस चर दे राहें अनुकूलित करना

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

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

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

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

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

चकन्ना

बटन

हिंडोला

डिग्गना

ड्रॉपडाउन

मोडल

ऑफकैनवास दा

पोपोवर

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

टैब

टोस्ट

टूलटिप दा

बूटस्ट्रैप आइकन कन्नै इसगी निजीकृत करो

आधिकारिक बूटस्ट्रैप थीम्स कन्नै इसगी अपना बनाओ