মূল বিষয়বস্তুলৈ এৰি যাওক
Check
v5.2 ত নতুন CSS চলকসমূহ, প্ৰতিক্ৰিয়াশীল অফকেনভাছ, নতুন সঁজুলিসমূহ, আৰু অধিক! বুটষ্ট্ৰেপ

Bootstrap ৰ সৈতে দ্ৰুত, প্ৰতিক্ৰিয়াশীল চাইটসমূহ নিৰ্মাণ কৰক

শক্তিশালী, সম্প্ৰসাৰণযোগ্য, আৰু বৈশিষ্ট্য-পেক কৰা ফ্ৰন্টএণ্ড সঁজুলিকিট। Sass ৰ সৈতে নিৰ্মাণ আৰু স্বনিৰ্বাচিত কৰক, পূৰ্বনিৰ্মিত গ্ৰীড ব্যৱস্থাপ্ৰণালী আৰু উপাদানসমূহ ব্যৱহাৰ কৰক, আৰু শক্তিশালী JavaScript প্লাগইনসমূহৰ সৈতে প্ৰকল্পসমূহক জীৱন্তলৈ আনে।

npm i [email protected]
ডক্স পঢ়ক

বৰ্তমান v5.2.1 · ডাউনলোড কৰক · v4.6.x docs · সকলো উন্মোচন

আপুনি বিচৰা ধৰণে আৰম্ভ কৰক

Bootstrap ৰ সৈতে নিৰ্মাণলৈ যাওক—CDN ব্যৱহাৰ কৰক, পেকেইজ ব্যৱস্থাপকৰ যোগেদি সংস্থাপন কৰক, বা উৎস ক'ড ডাউনল'ড কৰক ।

সংস্থাপনৰ নথিপত্ৰসমূহ পঢ়ক

সৰঞ্জাম ব্যৱস্থাপকৰ যোগেদি সংস্থাপন কৰক

Bootstrap ৰ উৎস Sass আৰু JavaScript নথিপত্ৰসমূহ npm, RubyGems, Composer, বা Meteor ৰ যোগেদি সংস্থাপন কৰক। পেকেইজ পৰিচালিত সংস্থাপনসমূহে আলেখ্যন বা আমাৰ সম্পূৰ্ণ নিৰ্মাণ স্ক্ৰিপ্টসমূহ অন্তৰ্ভুক্ত নকৰে। আপুনি আমাৰ npm সাঁচ repo ব্যৱহাৰ কৰিব পাৰে npm ৰ যোগেদি এটা Bootstrap প্ৰকল্প দ্ৰুতভাৱে সৃষ্টি কৰিবলে ।

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

অধিক তথ্য আৰু অতিৰিক্ত সৰঞ্জাম ব্যৱস্থাপকৰ বাবে আমাৰ সংস্থাপন নথিপত্ৰসমূহ পঢ়ক ।

CDN ৰ জৰিয়তে অন্তৰ্ভুক্ত কৰক

যেতিয়া আপুনি কেৱল Bootstrap ৰ কমপাইল কৰা CSS বা JS অন্তৰ্ভুক্ত কৰিব লাগে, আপুনি jsDelivr ব্যৱহাৰ কৰিব পাৰে । আমাৰ সৰল দ্ৰুত আৰম্ভণিৰ সৈতে ইয়াক কাৰ্য্যত চাওক , বা আপোনাৰ পৰৱৰ্তী প্ৰকল্প জাম্পষ্টাৰ্ট কৰিবলৈ উদাহৰণসমূহ ব্ৰাউজ কৰক। আপুনি 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>

আমাৰ আৰম্ভণিৰ গাইডসমূহ পঢ়ক

আমাৰ অফিচিয়েল গাইডসমূহৰ সৈতে এটা নতুন প্ৰকল্পত Bootstrap ৰ উৎস নথিপত্ৰসমূহ অন্তৰ্ভুক্ত কৰাৰ এটা জাম্প পাওক।

ৱেবপেক পাৰ্চেল ভিটে

Sass ৰ সৈতে সকলো কাষ্টমাইজ কৰক

বুটষ্ট্ৰেপে এটা মডিউলাৰ আৰু স্বনিৰ্বাচিত স্থাপত্যৰ বাবে Sass ব্যৱহাৰ কৰে। কেৱল আপুনি প্ৰয়োজনীয় উপাদানসমূহ আমদানি কৰক, গ্ৰেডিয়েন্ট আৰু ছাঁৰ দৰে গোলকীয় বিকল্পসমূহ সামৰ্থবান কৰক, আৰু আমাৰ চলকসমূহ, মেপসমূহ, ফাংচনসমূহ, আৰু মিক্সিনসমূহৰ সৈতে আপোনাৰ নিজৰ CSS লিখক।

কাষ্টমাইজিঙৰ বিষয়ে অধিক জানক

Bootstrap ৰ Sass ৰ সকলো অন্তৰ্ভুক্ত কৰক

এটা ষ্টাইলশ্বীট আমদানি কৰক আৰু আপুনি আমাৰ 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 প্ৰতিটো উন্মোচনৰ সৈতে বিকশিত হৈ আছে গোলকীয় থিম শৈলীসমূহ, ব্যক্তিগত উপাদানসমূহ, আৰু আনকি সঁজুলিসমূহৰ বাবে CSS চলকসমূহ ভালদৰে ব্যৱহাৰ কৰিবলে। :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 চলকসমূহৰ যোগেদি স্বনিৰ্বাচিত কৰা

আপুনি বিচৰা ধৰণে 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;
}

উপাদানসমূহ, ইউটিলিটি API পূৰণ কৰক

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 অবিহনে শক্তিশালী জাভাস্ক্রিপ্ট প্লাগইনসমূহ

সহজে টগলযোগ্য লুকাই থকা উপাদানসমূহ, মডালসমূহ আৰু অফকেনভাছ মেনুসমূহ, পপঅভাৰসমূহ আৰু সঁজুলি টিপসমূহ, আৰু বহুতো যোগ কৰক—এই সকলোবোৰ jQuery অবিহনে। dataবুটষ্ট্ৰেপত জাভাস্ক্রিপ্ট HTML-প্ৰথম, যাৰ অৰ্থ হৈছে প্লাগইনসমূহ যোগ কৰাটো বৈশিষ্ট্যসমূহ যোগ কৰাৰ দৰেই সহজ । অধিক নিয়ন্ত্ৰণৰ প্ৰয়োজন? ব্যক্তিগত প্লাগইনসমূহ প্ৰগ্ৰামেটিকভাৱে অন্তৰ্ভুক্ত কৰক।

বুটষ্ট্ৰেপ জাভাস্ক্রিপ্টৰ বিষয়ে অধিক জানক

ডাটা বৈশিষ্ট্য API

HTML লিখিব পাৰিলে অধিক জাভাস্ক্রিপ্ট কিয় লিখক? Bootstrap ৰ প্ৰায় সকলো JavaScript প্লাগইনসমূহে এটা প্ৰথম শ্ৰেণীৰ ডাটা 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 ব্যৱহাৰ কৰাৰ বিষয়ে অধিক শিকিব ।

প্লাগইনসমূহৰ বিস্তৃত ছেট

বুটষ্ট্ৰেপত এটা ডজন প্লাগইন আছে যি আপুনি যিকোনো প্ৰকল্পত ড্ৰপ কৰিব পাৰে । একেলগে সকলোবোৰ ড্ৰপ কৰক, বা কেৱল আপুনি প্ৰয়োজনীয়বোৰ বাছি লওক।

সতৰ্ক

আপোনাৰ ব্যৱহাৰকাৰীসকলক সতৰ্কবাণী বাৰ্তাসমূহ দেখুৱাওক আৰু লুকুৱাওক।

বুটাম

বুটামসমূহৰ বাবে সক্ৰিয় অৱস্থা প্ৰগ্ৰেমেটিকভাৱে নিয়ন্ত্ৰণ কৰক।

কেৰউজেল

যিকোনো পৃষ্ঠাত স্লাইডশ্বো যোগ কৰক, ক্ৰছফেডৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰি।

পতন হোৱা

বিষয়বস্তুৰ অঞ্চলসমূহ প্ৰসাৰিত আৰু সংকুচিত কৰক, বা একৰ্ডিয়ন সৃষ্টি কৰক।

ড্ৰপডাউন

সংযোগ, কাৰ্য্য, প্ৰপত্ৰ, আৰু অধিক মেনু সৃষ্টি কৰক।

মোডাল

আপোনাৰ প্ৰকল্পত নমনীয় আৰু সঁহাৰিজনক সংলাপসমূহ যোগ কৰক।

অফকেনভাছ

যিকোনো পৃষ্ঠাত লুকাই থকা চাইডবাৰসমূহ নিৰ্মাণ আৰু টগল কৰক।

Popover

কাষ্টম অভাৰলে সৃষ্টি কৰক। পপাৰৰ ওপৰত নিৰ্মিত।

স্ক্ৰলস্পাই

পৃষ্ঠা স্ক্ৰলৰ ওপৰত ভিত্তি কৰি সক্ৰিয় nav সংযোগসমূহ স্বয়ংক্ৰিয়ভাৱে আপডেট কৰক।

টেব

Bootstrap nav অংশসমূহক বিষয়বস্তুসমূহ টগল কৰিবলে অনুমতি দিয়ক।

ট’ষ্ট

আপোনাৰ দৰ্শকসকলক জাননীসমূহ দেখুৱাওক আৰু লুকুৱাওক।

টুলটিপ

ব্ৰাউজাৰ টুলটিপসমূহ কাষ্টম টুলটিপসমূহৰ সৈতে সলনি কৰক। পপাৰৰ ওপৰত নিৰ্মিত।

বুটষ্ট্ৰেপ আইকনসমূহৰ সৈতে ইয়াক ব্যক্তিগতকৰণ কৰক

বুটষ্ট্ৰেপ আইকনসমূহ এটা মুক্ত উৎস SVG আইকন লাইব্ৰেৰী যি 1,500 তকৈ অধিক গ্লিফ বৈশিষ্ট্যযুক্ত, প্ৰতিটো উন্মোচনত অধিক যোগ কৰা হৈছে। আপুনি নিজেই Bootstrap ব্যৱহাৰ কৰক বা নকৰক, যিকোনো প্ৰকল্পত কাম কৰিবলে ডিজাইন কৰা হৈছে। সিহতক SVGs বা আইকন ফন্ট হিচাপে ব্যৱহাৰ কৰক—দুয়োটা বিকল্পই আপোনাক ভেক্টৰ স্কেলিং আৰু CSS ৰ যোগেদি সহজ স্বনিৰ্বাচন দিয়ে।

বুটষ্ট্ৰেপ আইকনসমূহ পাওক

বুটষ্ট্ৰেপ আইকনসমূহ

অফিচিয়েল Bootstrap থিমসমূহৰ সৈতে ইয়াক আপোনাৰ কৰক

অফিচিয়েল বুটষ্ট্ৰেপ থিমসমূহ বজাৰৰ পৰা প্ৰিমিয়াম থিমসমূহৰ সৈতে বুটষ্ট্ৰেপক পৰৱৰ্তী স্তৰলৈ লৈ যাওক । থিমসমূহ Bootstrap ত নিজৰ সম্প্ৰসাৰিত কাঠামো হিচাপে নিৰ্মাণ কৰা হয়, নতুন উপাদানসমূহ আৰু প্লাগ-ইনসমূহ, আলেখ্যন, আৰু শক্তিশালী নিৰ্মাণ সঁজুলিসমূহৰ সৈতে সমৃদ্ধ।

বুটষ্ট্ৰেপ থিমসমূহ ব্ৰাউজ কৰক

বুটষ্ট্ৰেপ থিমসমূহ