मुख्य सामग्रीवर जा
Check
v5.2 मध्ये नवीन CSS व्हेरिएबल्स, प्रतिसादात्मक ऑफकॅनव्हास, नवीन उपयुक्तता आणि बरेच काही! बूटस्ट्रॅप

बूटस्ट्रॅपसह जलद, प्रतिसाद देणारी साइट तयार करा

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

npm i [email protected]
डॉक्स वाचा

सध्या v5.2.1 · डाउनलोड · v4.6.x डॉक्स · सर्व प्रकाशन

तुम्हाला हवे तसे सुरू करा

बूटस्ट्रॅपसह थेट बिल्डिंगमध्ये जा—CDN वापरा, पॅकेज मॅनेजरद्वारे स्थापित करा किंवा स्त्रोत कोड डाउनलोड करा.

प्रतिष्ठापन दस्तऐवज वाचा

पॅकेज व्यवस्थापकाद्वारे स्थापित करा

बूटस्ट्रॅपचे स्त्रोत Sass आणि JavaScript फाइल्स npm, RubyGems, Composer किंवा Meteor द्वारे स्थापित करा. पॅकेज व्यवस्थापित इंस्टॉलमध्ये दस्तऐवजीकरण किंवा आमच्या पूर्ण बिल्ड स्क्रिप्टचा समावेश नाही. npm द्वारे बूटस्ट्रॅप प्रकल्प द्रुतपणे व्युत्पन्न करण्यासाठी तुम्ही आमचे npm टेम्पलेट रेपो देखील वापरू शकता .

npm install [email protected]
gem install bootstrap -v 5.2.1

अधिक माहितीसाठी आणि अतिरिक्त पॅकेज व्यवस्थापकांसाठी आमचे इंस्टॉलेशन डॉक्स वाचा .

CDN द्वारे समाविष्ट करा

जेव्हा तुम्हाला फक्त बूटस्ट्रॅपचे संकलित CSS किंवा JS समाविष्ट करण्याची आवश्यकता असेल, तेव्हा तुम्ही jsDelivr वापरू शकता . आमच्या सोप्या क्विक स्टार्टसह ते कृतीत पहा किंवा तुमचा पुढील प्रोजेक्ट जंपस्टार्ट करण्यासाठी उदाहरणे ब्राउझ करा . तुम्ही पॉपर आणि आमचा JS स्वतंत्रपणे समाविष्ट करणे देखील निवडू शकता .

<!-- 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 सह सर्वकाही सानुकूलित करा

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

सानुकूल करण्याबद्दल अधिक जाणून घ्या

बूटस्ट्रॅपचे सर्व 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 व्हेरिएबल्ससह रिअल-टाइममध्ये तयार करा आणि वाढवा

जागतिक थीम शैली, वैयक्तिक घटक आणि अगदी उपयुक्तता यासाठी 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 व्हेरिएबल्सद्वारे सानुकूलित करणे

तुम्हाला हवे तसे बूटस्ट्रॅप सानुकूलित करण्यासाठी जागतिक, घटक किंवा युटिलिटी क्लास व्हेरिएबल्स ओव्हरराइड करा. प्रत्येक नियम पुन्हा घोषित करण्याची आवश्यकता नाही, फक्त एक नवीन व्हेरिएबल मूल्य.

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

घटक, उपयुक्तता API पूर्ण करा

बूटस्ट्रॅप 5 मध्ये नवीन, आमच्या उपयुक्तता आता आमच्या Utility 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 शिवाय शक्तिशाली JavaScript प्लगइन

सहजपणे टॉगल करण्यायोग्य लपविलेले घटक, मॉडेल आणि ऑफकॅनव्हास मेनू, पॉपओव्हर्स आणि टूलटिप्स आणि बरेच काही जोडा - सर्व काही jQuery शिवाय. बूटस्ट्रॅपमधील JavaScript हे HTML-प्रथम आहे, याचा अर्थ प्लगइन जोडणे हे dataविशेषता जोडण्याइतके सोपे आहे. अधिक नियंत्रण हवे आहे? वैयक्तिक प्लगइन्स प्रोग्रामेटिकरित्या समाविष्ट करा.

Bootstrap JavaScript बद्दल अधिक जाणून घ्या

डेटा विशेषता API

जेव्हा तुम्ही HTML लिहू शकता तेव्हा अधिक JavaScript का लिहावे? dataजवळपास सर्व बूटस्ट्रॅपच्या 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>

आमच्या JavaScript बद्दल मॉड्यूल्स म्हणून आणि प्रोग्रामॅटिक API वापरण्याबद्दल अधिक जाणून घ्या .

प्लगइनचा सर्वसमावेशक संच

बूटस्ट्रॅपमध्ये डझनभर प्लगइन आहेत जे तुम्ही कोणत्याही प्रोजेक्टमध्ये टाकू शकता. ते सर्व एकाच वेळी ड्रॉप करा किंवा तुम्हाला आवश्यक असलेले निवडा.

अलर्ट

तुमच्या वापरकर्त्यांना सूचना संदेश दाखवा आणि लपवा.

बटण

बटणांसाठी सक्रिय स्थिती प्रोग्रामॅटिकरित्या नियंत्रित करा.

कॅरोसेल

क्रॉसफेडसाठी समर्थनासह कोणत्याही पृष्ठावर स्लाइडशो जोडा.

संकुचित करा

सामग्रीचे क्षेत्र विस्तृत आणि संकुचित करा किंवा एकॉर्डियन तयार करा.

ड्रॉपडाउन

दुवे, क्रिया, फॉर्म आणि बरेच काही मेनू तयार करा.

मोडल

तुमच्या प्रोजेक्टमध्ये लवचिक आणि प्रतिसाद देणारे संवाद जोडा.

ऑफकॅनव्हास

कोणत्याही पृष्ठामध्ये लपविलेल्या साइडबार तयार करा आणि टॉगल करा.

पॉपओव्हर

सानुकूल आच्छादन तयार करा. पॉपर वर बांधले.

Scrollspy

पृष्ठ स्क्रोलवर आधारित सक्रिय एनएव्ही लिंक स्वयंचलितपणे अद्यतनित करा.

टॅब

सामग्री टॉगल करण्यासाठी बूटस्ट्रॅप एनएव्ही घटकांना अनुमती द्या.

टोस्ट

तुमच्या अभ्यागतांना सूचना दाखवा आणि लपवा.

टूलटिप

सानुकूल असलेल्या ब्राउझर टूलटिप्स बदला. पॉपर वर बांधले.

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

Bootstrap Icons ही एक ओपन सोर्स SVG आयकॉन लायब्ररी आहे ज्यामध्ये 1,500 पेक्षा जास्त ग्लिफ्स आहेत, ज्यामध्ये प्रत्येक रिलीझमध्ये अधिक जोडले जाते. ते कोणत्याही प्रकल्पात काम करण्यासाठी डिझाइन केलेले आहेत, तुम्ही स्वतः बूटस्ट्रॅप वापरत असलात किंवा नाही. त्यांचा SVG किंवा आयकॉन फॉन्ट म्हणून वापर करा—दोन्ही पर्याय तुम्हाला वेक्टर स्केलिंग आणि CSS द्वारे सुलभ कस्टमायझेशन देतात.

बूटस्ट्रॅप चिन्ह मिळवा

बूटस्ट्रॅप चिन्ह

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

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

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

बूटस्ट्रॅप थीम