शक्तिशाली, विस्तारणीय, तथा विशेषता-सम्पन्न अग्रभाग उपकरणपुस्तिका। Sass इत्यनेन सह निर्माणं अनुकूलितं च कुर्वन्तु, पूर्वनिर्मितजालप्रणालीं घटकानां च उपयोगं कुर्वन्तु, तथा च शक्तिशालिनः JavaScript प्लगिन्स् इत्यनेन परियोजनानि जीवने आनयन्तु ।
सम्प्रति v5.2.1 · डाउनलोड् · v4.6.x docs · सर्वाणि विमोचनानि
Bootstrap इत्यनेन सह भवने एव कूर्दन्तु—CDN इत्यस्य उपयोगं कुर्वन्तु, संकुलप्रबन्धकद्वारा संस्थापयन्तु, अथवा स्रोतसङ्केतं डाउनलोड् कुर्वन्तु ।
Bootstrap इत्यस्य स्रोतः Sass तथा JavaScript सञ्चिकाः npm, RubyGems, Composer, अथवा Meteor इत्येतयोः माध्यमेन संस्थापयन्तु । संकुल प्रबन्धित संस्थापनेषु दस्तावेजीकरणं वा अस्माकं पूर्णनिर्माणलिपिः वा न भवति । npm मार्गेण शीघ्रं Bootstrap परियोजनां जनयितुं भवान् अस्माकं npm template repo इत्यस्य अपि उपयोगं कर्तुं शक्नोति ।
npm install [email protected]gem install bootstrap -v 5.2.1अधिकसूचनार्थं अतिरिक्तसङ्कुलप्रबन्धकानां च कृते अस्माकं संस्थापनदस्तावेजान् पठन्तु ।
यदा भवन्तः केवलं Bootstrap इत्यस्य संकलितं CSS अथवा JS समाविष्टं कर्तुं शक्नुवन्ति तदा भवन्तः jsDelivr इत्यस्य उपयोगं कर्तुं शक्नुवन्ति । See it in action with our simple quick start , अथवा स्वस्य अग्रिमप्रकल्पस्य jumpstart कर्तुं उदाहरणानि ब्राउज् कुर्वन्तु । भवान् Popper अपि च अस्माकं 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 इत्यस्य उपयोगं करोति । केवलं भवद्भ्यः आवश्यकानि घटकानि आयातयन्तु, gradients तथा shadows इत्यादीन् वैश्विकविकल्पान् सक्षमं कुर्वन्तु, अस्माकं चरैः, मानचित्रैः, कार्यैः, मिक्सिन्भिः च सह स्वस्य 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 इत्यनेन सह Bootstrap इत्यस्य उपयोगविषये अधिकं ज्ञातुं शक्नुवन्ति .
वैश्विकविषयशैल्याः, व्यक्तिगतघटकानाम्, अपि च उपयोगितानां कृते CSS चरानाम् उत्तमं उपयोगं कर्तुं प्रत्येकं विमोचनेन सह बूटस्ट्रैप् 5 विकसितं भवति । :rootवयं कुत्रापि उपयोगाय एकस्मिन् स्तरे वर्णानाम्, font शैलीनां, अधिकानां च दशकशः चराः प्रदामः । घटकेषु उपयोगितासु च CSS चराः प्रासंगिकवर्गं प्रति व्याप्ताः भवन्ति तथा च सुलभतया परिवर्तयितुं शक्यन्ते ।
नूतनानि शैल्यानि लिखितुं अस्माकं कस्यापि वैश्विकचरस्य उपयोगं कुर्वन्तु :root। CSS चराः var(--bs-variableName)वाक्यविन्यासस्य उपयोगं कुर्वन्ति तथा च children elements द्वारा उत्तराधिकारं प्राप्तुं शक्यन्ते ।
.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);
}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;
}Bootstrap 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,
)
)
);
सहजतया टॉगल-योग्य-गुप्त-तत्त्वानि, मोडल्स् तथा offcanvas मेनू, popovers तथा tooltips, इत्यादीनि अपि च योजयन्तु-सर्वं jQuery विना। dataBootstrap मध्ये JavaScript HTML-प्रथमम् अस्ति, यस्य अर्थः अस्ति यत् प्लगिन्स् योजयितुं एट्रिब्यूट् योजयितुं इव सुलभम् अस्ति । अधिकं नियन्त्रणस्य आवश्यकता अस्ति वा ? प्रोग्रामेटिकरूपेण व्यक्तिगतप्लगिन्स् समावेशयन्तु।
यदा भवान् HTML लिखितुं शक्नोति तदा अधिकं जावास्क्रिप्ट् किमर्थं लिखितव्यम्? Bootstrap इत्यस्य प्रायः सर्वेषु जावास्क्रिप्ट् प्लगिन्स् मध्ये प्रथमश्रेणीयाः डाटा एपिआइ दृश्यते, यत् केवलं 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>
अस्माकं जावास्क्रिप्ट् विषये अधिकं ज्ञातुं मॉड्यूलरूपेण तथा च प्रोग्रामेटिक एपिआइ इत्यस्य उपयोगेन .
Bootstrap इत्यत्र एकदर्जनं प्लगिन्स् अस्ति यत् भवान् कस्मिन् अपि परियोजनायां पातयितुं शक्नोति । तान् सर्वान् एकदा एव पातयतु, अथवा भवतः आवश्यकानि एव चिनुत ।
Bootstrap Icons इति एकः मुक्तस्रोतः SVG चिह्नपुस्तकालयः अस्ति यस्मिन् 1,500 तः अधिकानि ग्लिफ्-चित्राणि सन्ति, यत्र प्रत्येकं विमोचनं अधिकानि योजितानि सन्ति । ते कस्मिन् अपि परियोजनायां कार्यं कर्तुं विनिर्मिताः सन्ति, भवान् स्वयमेव Bootstrap इत्यस्य उपयोगं करोति वा न वा। तान् SVGs अथवा icon fonts इत्यस्य रूपेण उपयुज्यताम्—उभयविकल्पः CSS मार्गेण vector scaling तथा सुलभं अनुकूलनं ददाति ।
आधिकारिक Bootstrap विषयवस्तुविपण्यस्थानात् प्रीमियम विषयवस्तुभिः सह Bootstrap अग्रिमस्तरं प्रति नेतुम् . विषयवस्तुः Bootstrap इत्यत्र स्वकीयविस्तारितरूपरेखारूपेण निर्मिताः सन्ति, नूतनघटकैः प्लगिन्स् च, दस्तावेजैः, शक्तिशालिभिः निर्माणसाधनैः च समृद्धाः सन्ति ।
