शक्तिशाली, एक्स्टेन्सिबल, र सुविधा-प्याक फ्रन्टएन्ड टूलकिट। Sass को साथ निर्माण र अनुकूलन गर्नुहोस्, पूर्वनिर्मित ग्रिड प्रणाली र कम्पोनेन्टहरू प्रयोग गर्नुहोस्, र शक्तिशाली JavaScript प्लगइनहरूसँग परियोजनाहरूलाई जीवनमा ल्याउनुहोस्।
हाल v5.2.1 · डाउनलोड गर्नुहोस् · v4.6.x कागजातहरू · सबै रिलीजहरू
बुटस्ट्र्यापको साथ निर्माणमा जानुहोस्—CDN प्रयोग गर्नुहोस्, प्याकेज प्रबन्धक मार्फत स्थापना गर्नुहोस्, वा स्रोत कोड डाउनलोड गर्नुहोस्।
npm, RubyGems, कम्पोजर, वा Meteor मार्फत Bootstrap को स्रोत Sass र JavaScript फाइलहरू स्थापना गर्नुहोस्। प्याकेज व्यवस्थित स्थापनाहरूले कागजात वा हाम्रो पूर्ण निर्माण लिपिहरू समावेश गर्दैन। तपाईले हाम्रो 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 सँग बुटस्ट्र्याप प्रयोग गर्ने बारे थप जान्नुहोस् ।
Bootstrap 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;
}Bootstrap 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 बिना। dataबुटस्ट्र्यापमा जाभास्क्रिप्ट HTML-पहिलो हो, जसको मतलब प्लगइनहरू थप्न एट्रिब्यूटहरू थप्न जत्तिकै सजिलो छ । थप नियन्त्रण चाहिन्छ? प्रोग्रामेटिक रूपमा व्यक्तिगत प्लगइनहरू समावेश गर्नुहोस्।
HTML लेख्न सक्ने हुँदा किन थप जाभास्क्रिप्ट लेख्ने? 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>
हाम्रो जाभास्क्रिप्ट मोड्युलको रूपमा र प्रोग्रामेटिक API प्रयोग गर्ने बारे थप जान्नुहोस् ।
बुटस्ट्र्यापले एक दर्जन प्लगइनहरू समावेश गर्दछ जुन तपाइँ कुनै पनि परियोजनामा छाड्न सक्नुहुन्छ। ती सबैलाई एकैचोटि छाड्नुहोस्, वा तपाईलाई चाहिने मात्र छनौट गर्नुहोस्।
Bootstrap Icons एक खुला स्रोत SVG आइकन लाइब्रेरी हो जसमा 1,500 भन्दा बढी ग्लिफहरू छन्, प्रत्येक रिलीजमा थप थपिएको छ। तिनीहरू कुनै पनि परियोजनामा काम गर्न डिजाइन गरिएका छन्, चाहे तपाइँ बुटस्ट्र्याप आफै प्रयोग गर्नुहुन्छ वा नगर्नुहोस्। तिनीहरूलाई SVGs वा आइकन फन्टहरूको रूपमा प्रयोग गर्नुहोस्—दुबै विकल्पहरूले तपाईंलाई भेक्टर स्केलिङ र CSS मार्फत सजिलो अनुकूलन दिन्छ।
आधिकारिक बुटस्ट्र्याप थिम मार्केटप्लेसबाट प्रिमियम थिमहरूको साथ बुटस्ट्र्यापलाई अर्को स्तरमा लैजानुहोस् । विषयवस्तुहरू बुटस्ट्र्यापमा आफ्नै विस्तारित फ्रेमवर्कको रूपमा बनाइएका छन्, नयाँ कम्पोनेन्टहरू र प्लगइनहरू, कागजातहरू, र शक्तिशाली निर्माण उपकरणहरूसँग समृद्ध।
