طاقتور، وسعت وارو، ۽ خصوصيت سان ڀريل فرنٽ اينڊ ٽول ڪٽ. Sass سان ٺاهيو ۽ ڪسٽمائيز ڪريو، اڳ ۾ ٺهيل گرڊ سسٽم ۽ اجزاء استعمال ڪريو، ۽ طاقتور JavaScript پلگ ان سان پروجيڪٽس کي زندگي ۾ آڻيو.
في الحال v5.2.1 · ڊائون لوڊ · v4.6.x دستاويز · سڀ رليز
بوٽ اسٽريپ سان بلڊنگ ۾ ساڄي وڃو- CDN استعمال ڪريو، انسٽال ڪريو پيڪيج مئنيجر ذريعي، يا سورس ڪوڊ ڊائون لوڊ ڪريو.
انسٽال ڪريو Bootstrap جو ذريعو Sass ۽ JavaScript فائلون npm، RubyGems، ڪمپوزر، يا Meteor ذريعي. پيڪيج منظم ٿيل تنصيب ۾ دستاويز يا اسان جي مڪمل تعمير اسڪرپٽ شامل نه آهن. توھان پڻ استعمال ڪري سگھو ٿا اسان جو npm ٽيمپليٽ ريپو جلدي ٺاھيو بوٽ اسٽريپ پروجيڪٽ npm ذريعي.
npm install [email protected]gem install bootstrap -v 5.2.1وڌيڪ معلومات ۽ اضافي پيڪيج مينيجرز لاءِ اسان جي انسٽاليشن ڊيڪس کي پڙهو .
جڏهن توهان کي صرف Bootstrap جي مرتب ڪيل 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>
بوٽ اسٽريپ استعمال ڪري ٿو ساس کي ماڊلر ۽ ڪسٽمائيز فن تعمير لاءِ. صرف اهي حصا درآمد ڪريو جيڪي توهان کي گهربل آهن، عالمي اختيارن کي چالو ڪريو جهڙوڪ گريڊينٽس ۽ شيڊز، ۽ پنهنجو CSS لکو اسان جي متغيرن، نقشن، ڪمن ۽ ميڪسين سان.
ھڪڙي اسٽائل شيٽ درآمد ڪريو ۽ توھان اسان جي سي ايس ايس جي ھر خصوصيت سان ريس ڏانھن وڃو.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
اسان جي عالمي Sass اختيارن بابت وڌيڪ سکو .
بوٽ اسٽريپ کي ترتيب ڏيڻ جو آسان طريقو- صرف سي ايس ايس شامل ڪريو جيڪو توهان کي گهربل آهي.
// 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 استعمال ڪرڻ بابت وڌيڪ سکو .
Bootstrap 5 ترقي ڪري رهيو آهي هر رليز سان گڏ CSS متغيرن کي عالمي موضوع جي طرز، انفرادي اجزاء، ۽ جيتوڻيڪ افاديت لاءِ بهتر استعمال ڪرڻ لاءِ. اسان رنگن، فونٽ اسلوب ۽ وڌيڪ لاءِ درجن وارا متغير مهيا ڪريون ٿا هڪ :rootسطح تي ڪٿي به استعمال لاءِ. اجزاء ۽ افاديت تي، سي ايس ايس متغير لاڳاپيل طبقي تائين اسڪوپ ٿيل آهن ۽ آساني سان تبديل ڪري سگھجن ٿيون.
نون اسلوب لکڻ لاءِ اسان جو ڪو به عالمي :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 پاران ٺاهيل آهن . اسان ان کي هڪ خصوصيت سان ڀريل ساس نقشي جي طور تي ٺاهيو جيڪو جلدي ۽ آساني سان ترتيب ڏئي سگهجي ٿو. ڪنهن به يوٽيلٽي ڪلاس کي شامل ڪرڻ، ختم ڪرڻ يا تبديل ڪرڻ ڪڏهن به آسان نه رهيو آهي. يوٽيلٽيز کي جوابي بڻايو، pseudo-class variants شامل ڪريو، ۽ انھن کي حسب ضرورت نالا ڏيو.
// 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 کان سواءِ. بوٽ اسٽريپ ۾ جاوا اسڪرپٽ HTML-پهرين آهي، جنهن جو مطلب آهي پلگ ان شامل ڪرڻ جيترو آسان آهي dataخاصيتون شامل ڪرڻ جيترو. وڌيڪ ڪنٽرول جي ضرورت آهي؟ انفرادي پلگ ان کي پروگرام طور شامل ڪريو.
وڌيڪ جاوا اسڪرپٽ ڇو لکو جڏهن توهان HTML لکي سگهو ٿا؟ لڳ ڀڳ سڀئي بوٽ اسڪرپٽ جا جاوا اسڪرپٽ پلگ ان هڪ فرسٽ ڪلاس ڊيٽا API جي خصوصيت رکن ٿا، جيڪا توهان کي صرف dataخاصيتون شامل ڪندي 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 يا آئڪن فونٽس طور استعمال ڪريو- ٻئي اختيار توهان کي سي ايس ايس ذريعي ویکٹر اسڪيلنگ ۽ آسان ڪسٽمائيزيشن ڏين ٿا.
Bootstrap کي ايندڙ ليول تي وٺي وڃو پريميئم موضوعن سان سرڪاري Bootstrap Themes مارڪيٽ مان . موضوع بوٽ اسٽريپ تي ٺهيل آهن انهن جي پنهنجي وڌايل فريم ورڪ جي طور تي، نئين اجزاء ۽ پلگ ان، دستاويزن، ۽ طاقتور تعميراتي اوزار سان مالا مال.
