CSS चड-उणें, प्रतिसाद दिवपी ऑफकॅनव्हास, नवी उपयुक्तताय, आनी हेर!

बूटस्ट्रॅपा वरवीं जलद, प्रतिसाद दिवपी साइट तयार करात

बळिश्ट, विस्तारपाक येवपी, आनी वैशिश्ट्यांनी पॅक केल्ली फ्रंटएंड टूलकिट. Sass कडेन तयार करात आनी पसंतीचे करात, पूर्वनिर्मित ग्रिड प्रणाली आनी घटक वापरात, आनी बळिश्ट JavaScript प्लगइनांनी प्रकल्पांक जिवीत हाडात.

npm i [email protected]

डॉक्स वाचात

सद्या v5.2.1 · डाउनलोड · v4.6.x डॉक्स · सगळ्यो प्रकाशनां

तुमकां जाय ते तरेन सुरवात करात

Bootstrap कडेन उजवे वटेन इमारतींत उडी मारात-CDN वापरात, पॅकेज वेवस्थापक वरवीं प्रतिष्ठापीत करात, वा स्त्रोत कोड डाउनलोड करात.

प्रतिष्ठापन डॉक्स वाचात

पॅकेज वेवस्थापक वरवीं प्रतिष्ठापीत करात

Bootstrap ची स्रोत Sass आनी JavaScript फायली npm, RubyGems, Composer, वा Meteor वरवीं प्रतिष्ठापीत करात. पॅकेज वेवस्थापन केल्ल्या प्रतिष्ठापनांत दस्तावेजीकरण वा आमचीं पुराय बिल्ड स्क्रिप्ट आसपावीत नात. npm वरवीं Bootstrap प्रकल्प बेगीन तयार करपाक तुमी आमचो npm टेम्पलेट रेपोय वापरूं येता.

npm install [email protected]

gem install bootstrap -v 5.2.1

चड म्हायती खातीर आनी अतिरिक्त पॅकेज वेवस्थापकांक आमचे प्रतिष्ठापन डॉक्स वाचात .

सीडीएन वरवीं आस्पाव करचो

जेन्ना तुमकां फकत Bootstrap चो संकलित CSS वा JS समाविष्ट करपाची गरज आसता, तेन्ना तुमी jsDelivr वापरूं येता . See it in action with our simple quick start , वा तुमचो फुडलो प्रकल्प जंपस्टार्ट करपाक उदाहरणां ब्राउझ करात . तुमी पॉपर आनी आमचो जेएस वेगळो आस्पाव करपाकय निवडूंक शकतात .

<!-- 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>

आमचे सुरवातीचे मार्गदर्शक वाचात

आमच्या अधिकृत मार्गदर्शकां वांगडा नव्या प्रकल्पांत Bootstrap च्या स्त्रोत फायलींचो आस्पाव करपाचेर एक उडी मेळोवची.

वेबपॅक हें नांव

पार्सल

विते हें नांव

Sass कडेन सगळें सानुकूल करचें

बूटस्ट्रॅप मॉड्यूलर आनी सानुकूल करपाक येवपी वास्तुकलेखातीर Sass वापरता. तुमकां जाय आशिल्ले फकत घटक आयात करात, ग्रेडियेंट आनी सावळे सारकिले जागतीक पर्याय सक्षम करात, आनी आमच्या चड-उणें, नकाशे, कार्यां, आनी मिक्सिनांनी तुमचो स्वताचो CSS बरोवचो.

सानुकूल करपा विशीं चड जाणून घेयात

बूटस्ट्रॅपाच्या सगळ्या सॅसांचो आस्पाव करचो

एक स्टायलशीट आयात करात आनी तुमी आमच्या CSS च्या दरेक वैशिश्ट्या वांगडा सर्तींनी भायर सरतले.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

आमच्या जागतीक Sass पर्यायां विशीं चड जाणून घेयात .

तुमकां जाय तें समाविष्ट करचें

Bootstrap पसंतीचे करपाचो सगळ्यांत सोपो मार्ग-तुमकां जाय आशिल्लो फकत 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 चडांत चड रियल-टायमांत तयार करप आनी विस्तार करप

जागतीक थीम शैली, वैयक्तीक घटक, आनी उपयुक्तताय लेगीत खातीर CSS चड बरो वापर करपाक बूटस्ट्रॅप 5 दरेक प्रकाशना वांगडा विकसीत जायत आसा. :rootआमी खंयच्याय सुवातेर वापरपा खातीर एका पातळेचेर रंग, फॉन्ट शैली आनी हेर खातीर डझनभर चड-उणें पुरवण करतात . घटक आनी उपयुक्ततायांचेर, CSS चड-उणें संबंदीत वर्गाक व्याप्ती दितात आनी सहजपणान बदलूं येतात.

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);
}

CSS चड-उणें वरवीं पसंतीचें करप

तुमकां आवडटा तशें Bootstrap पसंतीचें करपाक जागतीक, घटक, वा उपयुक्तताय वर्ग चड-उणें अधिलिखित करात. दरेक नेम परतून जाहीर करपाची गरज ना, फकत नवे चडांत चड मोल.

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 त नवे, आमचीं उपयुक्तताय आतां आमच्या उपयुक्तताय API वरवीं तयार क��ल्यांत . आमी तो एक वैशिश्ट्य-पॅक केल्लो Sass नकासो म्हणून तयार केला जो बेगीन आनी सहजपणान सानुकूल करूंक शकता. खंयचेय उपयुक्तताय वर्ग जोडप, काडप वा बदलप केन्नाच सोंपें जावंक ना. उपयुक्तताय प्रतिसाद दिवपी करात, छद्म-वर्ग वेरिएंट जोडात, आनी तांकां सानुकूल नांवां दिवचीं.

उपयुक्तताय विशीं चड जाणून घेयात सानुकूल केल्ले घटक सोदून काडात

घटक बेगीन पसंतीचे करात

// 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 नासतना. बूटस्ट्रॅपांतली जावास्क्रिप्ट HTML-पयली आसा, म्हणल्यार प्लगइन जोडप dataगुणधर्म जोडपा इतलेंच सोंपें आसा. चड नियंत्रणाची गरज आसा? वैयक्तीक प्लगइन प्रोग्रामेटिक रितीन समाविष्ट करात.

बूटस्ट्रॅप जावास्क्रिप्ट विशीं चड जाणून घेयात

डेटा गुणधर्म एपीआय

एचटीएमएल बरोवंक मेळटा तेन्ना चड जावास्क्रिप्ट कित्याक बरोवप? dataBootstrap च्या लागीं लागीं सगळ्या JavaScript प्लगइनांत पयल्या वर्गाचो डेटा API आसा, जें तुमकां फकत गुणधर्म जोडून JavaScript वापरपाक परवानगी दिता .

<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>

मॉड्यूल म्हणून आनी प्रोग्रामेटिक एपीआय वापरून आमच्या जावास्क्रिप्टा विशीं चड जाणून घेयात .

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

बूटस्ट्रॅपांत एक डझन प्लगइन आसात जे तुमी खंयच्याय प्रकल्पांत सोडूंक शकतात. तीं सगळीं एकाच वेळार सोडचीं, वा फकत तुमकां जाय आशिल्लीं वेंचून काडात.

बूटस्ट्रॅप चिन्नां वरवीं तें वैयक्तीक करचें

बूटस्ट्रॅप चिन्नां ही एक मुक्त स्रोत SVG चिन्न लायब्ररी आसा जी 1,500 परस चड ग्लिफ आसा, दरेक प्रकाशनांत चड जोडलां. खंयच्याय प्रकल्पांत काम करपाक ते तयार केल्यात, तुमी स्वता Bootstrap वापरात वा ना. त्यो SVGs वा चिन्न फॉन्ट म्हणून वापरात-दोनूय पर्याय तुमकां CSS वरवीं वेक्टर स्केलिंग आनी सोपें सानुकूलीकरण दितात.

बूटस्ट्रॅप चिन्नां मेळोवचीं

अधिकृत बूटस्ट्रॅप थीम कडेन तें तुमचें करचें

अधिकृत बूटस्ट्रॅप थीम बाजारपेठेंतल्यान प्रीमियम थीम घेवन बूटस्ट्रॅपाक फुडल्या पांवड्यार व्हरचो . थीम Bootstrap चेर तांची स्वताची विस्तारीत चौकटी म्हणून तयार केल्या, नव्या घटकांनी आनी प्लगइनांनी, दस्तावेजीकरणान, आनी बळिश्ट बांदणी साधनांनी गिरेस्त.

बूटस्ट्रॅप थीम ब्राउझ करात

बूटस्ट्रॅपा वरवीं जलद, प्रतिसाद दिवपी साइट तयार करात

तुमकां जाय ते तरेन सुरवात करात

पॅकेज वेवस्थापक वरवीं प्रतिष्ठापीत करात

सीडीएन वरवीं आस्पाव करचो

आमचे सुरवातीचे मार्गदर्शक वाचात

Sass कडेन सगळें सानुकूल करचें

बूटस्ट्रॅपाच्या सगळ्या सॅसांचो आस्पाव करचो

तुमकां जाय तें समाविष्ट करचें

CSS चडांत चड रियल-टायमांत तयार करप आनी विस्तार करप

CSS चड-उणें वापरप

CSS चड-उणें वरवीं पसंतीचें करप

घटक, उपयुक्तताय एपीआय पुराय करात

घटक बेगीन पसंतीचे करात

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

डेटा गुणधर्म एपीआय

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

दक्ष

बटन

हिंडोळ

कडसरावचें

ड्रॉपडावन करप

मोडल हें नांव

ऑफकॅनव्हास

पोपोव्हर हें नांव

स्क्रोलस्पाय हें नांव

टॅब

टोस्ट

साधनाचो टिप

बूटस्ट्रॅप चिन्नां वरवीं तें वैयक्तीक करचें

अधिकृत बूटस्ट्रॅप थीम कडेन तें तुमचें करचें