शक्तिशाली, एक्स्टेंसिबल आणि वैशिष्ट्य-पॅक फ्रंटएंड टूलकिट. 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अधिक माहितीसाठी आणि अतिरिक्त पॅकेज व्यवस्थापकांसाठी आमचे इंस्टॉलेशन डॉक्स वाचा .
जेव्हा तुम्हाला फक्त बूटस्ट्रॅपचे संकलित 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 चा वापर करते. फक्त तुम्हाला आवश्यक असलेले घटक आयात करा, ग्रेडियंट आणि शॅडो सारखे जागतिक पर्याय सक्षम करा आणि आमचे व्हेरिएबल्स, नकाशे, फंक्शन्स आणि मिक्सिनसह तुमचे स्वतःचे CSS लिहा.
एक स्टाइलशीट इंपोर्ट करा आणि तुम्ही आमच्या 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 व्हेरिएबल्स संबंधित वर्गासाठी व्यापलेले आहेत आणि ते सहजपणे सुधारले जाऊ शकतात.
नवीन शैली लिहिण्यासाठी आमचे कोणतेही जागतिक :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 मध्ये नवीन, आमच्या उपयुक्तता आता आमच्या 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 हे HTML-प्रथम आहे, याचा अर्थ प्लगइन जोडणे हे dataविशेषता जोडण्याइतके सोपे आहे. अधिक नियंत्रण हवे आहे? वैयक्तिक प्लगइन्स प्रोग्रामेटिकरित्या समाविष्ट करा.
जेव्हा तुम्ही 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 वापरण्याबद्दल अधिक जाणून घ्या .
बूटस्ट्रॅपमध्ये डझनभर प्लगइन आहेत जे तुम्ही कोणत्याही प्रोजेक्टमध्ये टाकू शकता. ते सर्व एकाच वेळी ड्रॉप करा किंवा तुम्हाला आवश्यक असलेले निवडा.
Bootstrap Icons ही एक ओपन सोर्स SVG आयकॉन लायब्ररी आहे ज्यामध्ये 1,500 पेक्षा जास्त ग्लिफ्स आहेत, ज्यामध्ये प्रत्येक रिलीझमध्ये अधिक जोडले जाते. ते कोणत्याही प्रकल्पात काम करण्यासाठी डिझाइन केलेले आहेत, तुम्ही स्वतः बूटस्ट्रॅप वापरत असलात किंवा नाही. त्यांचा SVG किंवा आयकॉन फॉन्ट म्हणून वापर करा—दोन्ही पर्याय तुम्हाला वेक्टर स्केलिंग आणि CSS द्वारे सुलभ कस्टमायझेशन देतात.
अधिकृत बूटस्ट्रॅप थीम मार्केटप्लेसमधील प्रीमियम थीमसह बूटस्ट्रॅपला पुढील स्तरावर न्या . थीम बूटस्ट्रॅपवर त्यांच्या स्वतःच्या विस्तारित फ्रेमवर्क म्हणून तयार केल्या आहेत, नवीन घटक आणि प्लगइन्स, दस्तऐवजीकरण आणि शक्तिशाली बिल्ड टूल्ससह समृद्ध आहेत.
