স্কিপ করে মূল কন্টেন্ট এ যাও
Check
v5.2-এ নতুন CSS ভেরিয়েবল, প্রতিক্রিয়াশীল অফক্যানভাস, নতুন ইউটিলিটি এবং আরও অনেক কিছু! বুটস্ট্র্যাপ

বুটস্ট্র্যাপ দিয়ে দ্রুত, প্রতিক্রিয়াশীল সাইট তৈরি করুন

শক্তিশালী, এক্সটেনসিবল, এবং বৈশিষ্ট্য-প্যাকড ফ্রন্টএন্ড টুলকিট। Sass এর সাথে তৈরি এবং কাস্টমাইজ করুন, প্রি-বিল্ট গ্রিড সিস্টেম এবং উপাদানগুলি ব্যবহার করুন এবং শক্তিশালী জাভাস্ক্রিপ্ট প্লাগইনগুলির সাথে প্রকল্পগুলিকে প্রাণবন্ত করুন৷

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

আরও তথ্য এবং অতিরিক্ত প্যাকেজ পরিচালকের জন্য আমাদের ইনস্টলেশন ডক্স পড়ুন ।

CDN এর মাধ্যমে অন্তর্ভুক্ত করুন

যখন আপনাকে শুধুমাত্র বুটস্ট্র্যাপের সংকলিত 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 এর সাথে সবকিছু কাস্টমাইজ করুন

বুটস্ট্র্যাপ একটি মডুলার এবং কাস্টমাইজযোগ্য আর্কিটেকচারের জন্য 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 এর সাথে বুটস্ট্র্যাপ ব্যবহার সম্পর্কে আরও জানুন ।

সিএসএস ভেরিয়েবলের সাথে রিয়েল-টাইমে তৈরি করুন এবং প্রসারিত করুন

বুটস্ট্র্যাপ 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 ভেরিয়েবলের মাধ্যমে কাস্টমাইজ করা

আপনার পছন্দ মতো বুটস্ট্র্যাপ কাস্টমাইজ করতে গ্লোবাল, কম্পোনেন্ট বা ইউটিলিটি ক্লাস ভেরিয়েবল ওভাররাইড করুন। প্রতিটি নিয়ম পুনরায় ঘোষণা করার দরকার নেই, শুধুমাত্র একটি নতুন পরিবর্তনশীল মান।

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 পূরণ করু���

বুটস্ট্র্যাপ 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 লিখতে পারেন তখন কেন আরও জাভাস্ক্রিপ্ট লিখবেন? প্রায় সমস্ত বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট প্লাগইন একটি প্রথম-শ্রেণীর ডেটা API বৈশিষ্ট্যযুক্ত, যা আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করার অনুমতি দেয় শুধুমাত্র 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>

আমাদের জাভাস্ক্রিপ্ট মডিউল হিসাবে এবং প্রোগ্রাম্যাটিক API ব্যবহার করে সম্পর্কে আরও জানুন ।

প্লাগইনগুলির ব্যাপক সেট

বুটস্ট্র্যাপে এক ডজন প্লাগইন রয়েছে যা আপনি যেকোনো প্রকল্পে ড্রপ করতে পারেন। এগুলি একবারে ড্রপ করুন, অথবা আপনার প্রয়োজনীয়গুলি বেছে নিন।

সতর্কতা

আপনার ব্যবহারকারীদের সতর্কতা বার্তা দেখান এবং লুকান।

বোতাম

প্রোগ্রাম্যাটিকভাবে বোতামগুলির জন্য সক্রিয় অবস্থা নিয়ন্ত্রণ করুন।

ক্যারোসেল

ক্রসফেডের জন্য সমর্থন সহ যেকোনো পৃষ্ঠায় স্লাইডশো যোগ করুন।

সঙ্কুচিত

বিষয়বস্তুর ক্ষেত্রগুলিকে প্রসারিত এবং সঙ্কুচিত করুন বা অ্যাকর্ডিয়ন তৈরি করুন৷

ড্রপডাউন

লিঙ্ক, ক্রিয়া, ফর্ম এবং আরও অনেক কিছুর মেনু তৈরি করুন।

মোডাল

আপনার প্রকল্পে নমনীয় এবং প্রতিক্রিয়াশীল ডায়ালগ যোগ করুন।

অফক্যানভাস

যেকোন পৃষ্ঠায় লুকানো সাইডবার তৈরি এবং টগল করুন।

পপওভার

কাস্টম ওভারলে তৈরি করুন। পপারের উপর নির্মিত।

স্ক্রলস্পাই

পৃষ্ঠা স্ক্রলের উপর ভিত্তি করে সক্রিয় নেভি লিঙ্কগুলি স্বয়ংক্রিয়ভাবে আপডেট করুন।

ট্যাব

বুটস্ট্র্যাপ নেভি উপাদানগুলিকে বিষয়বস্তু টগল করার অনুমতি দিন।

টোস্ট

আপনার দর্শকদের বিজ্ঞপ্তিগুলি দেখান এবং লুকান৷

টুলটিপ

কাস্টম দিয়ে ব্রাউজার টুলটিপ প্রতিস্থাপন করুন। পপারের উপর নির্মিত।

বুটস্ট্র্যাপ আইকন দিয়ে এটি ব্যক্তিগতকৃত করুন

বুটস্ট্র্যাপ আইকন হল একটি ওপেন সোর্স SVG আইকন লাইব্রেরি যেখানে 1,500 টিরও বেশি গ্লিফ রয়েছে, প্রতি রিলিজে আরও যোগ করা হয়েছে। আপনি নিজে বুটস্ট্র্যাপ ব্যবহার করুন বা না করুন, এগুলি যে কোনও প্রকল্পে কাজ করার জন্য ডিজাইন করা হয়েছে। এগুলিকে এসভিজি বা আইকন ফন্ট হিসাবে ব্যবহার করুন—উভয় বিকল্পই আপনাকে ভেক্টর স্কেলিং এবং CSS এর মাধ্যমে সহজ কাস্টমাইজেশন দেয়।

বুটস্ট্র্যাপ আইকন পান

বুটস্ট্র্যাপ আইকন

অফিসিয়াল বুটস্ট্র্যাপ থিম দিয়ে এটিকে নিজের করে নিন

অফিসিয়াল বুটস্ট্র্যাপ থিম মার্কেটপ্লেস থেকে প্রিমিয়াম থিম সহ বুটস্ট্র্যাপকে পরবর্তী স্তরে নিয়ে যান ৷ থিমগুলি বুটস্ট্র্যাপে তাদের নিজস্ব বর্ধিত ফ্রেমওয়ার্ক হিসাবে তৈরি করা হয়েছে, নতুন উপাদান এবং প্লাগইন, ডকুমেন্টেশন এবং শক্তিশালী বিল্ড টুলস সমৃদ্ধ।

বুটস্ট্র্যাপ থিম ব্রাউজ করুন

বুটস্ট্র্যাপ থিম