ভূমিকা

jsDelivr এবং একটি টেমপ্লেট স্টার্টার পৃষ্ঠা সহ প্রতিক্রিয়াশীল, মোবাইল-প্রথম সাইট তৈরির জন্য বিশ্বের সবচেয়ে জনপ্রিয় ফ্রেমওয়ার্ক বুটস্ট্র্যাপ দিয়ে শুরু করুন৷

এই পৃষ্ঠায়

দ্রুত শুরু

আপনার প্রকল্পে দ্রুত বুটস্ট্র্যাপ যোগ করতে খুঁজছেন? jsDelivr ব্যবহার করুন, একটি বিনামূল্যের ওপেন সোর্স CDN। একটি প্যাকেজ ম্যানেজার ব্যবহার করছেন বা উৎস ফাইল ডাউনলোড করতে হবে? ডাউনলোড পৃষ্ঠায় যান ।

সিএসএস

আমাদের CSS লোড করতে অন্য সব স্টাইলশীটের আগে <link>আপনার স্টাইলশীটটি কপি-পেস্ট করুন ।<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

জেএস

আমাদের অনেক উপাদানের কাজ করার জন্য JavaScript ব্যবহার করতে হয়। বিশেষভাবে, তাদের আমাদের নিজস্ব জাভাস্ক্রিপ্ট প্লাগইন এবং পপার প্রয়োজন । আপনার পৃষ্ঠাগুলির শেষের কাছে নিম্নলিখিতগুলির একটি<script> রাখুন , ক্লোজিং </body>ট্যাগের ঠিক আগে, সেগুলিকে সক্ষম করতে৷

পাঁজা

আমাদের দুটি বান্ডিলের একটির সাথে প্রতিটি বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট প্লাগইন এবং নির্ভরতা অন্তর্ভুক্ত করুন। উভয়ই bootstrap.bundle.jsএবং আমাদের টুলটিপ এবং পপোভারের জন্য পপারbootstrap.bundle.min.js অন্তর্ভুক্ত করে। বুটস্ট্র্যাপে কী অন্তর্ভুক্ত রয়েছে সে সম্পর্কে আরও তথ্যের জন্য, অনুগ্রহ করে আমাদের বিষয়বস্তু বিভাগটি দেখুন।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

আলাদা

আপনি যদি পৃথক স্ক্রিপ্ট সমাধানের সাথে যাওয়ার সিদ্ধান্ত নেন, তাহলে পপারকে অবশ্যই প্রথমে আসতে হবে (যদি আপনি টুলটিপ বা পপওভার ব্যবহার করেন), এবং তারপরে আমাদের জাভাস্ক্রিপ্ট প্লাগইন।

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

মডিউল

আপনি যদি ব্যবহার <script type="module">করেন, তাহলে অনুগ্রহ করে আমাদের বুটস্ট্র্যাপকে মডিউল বিভাগ হিসেবে ব্যবহার করুন।

উপাদান

কৌতূহলী কোন উপাদানগুলির জন্য স্পষ্টভাবে আমাদের জাভাস্ক্রিপ্ট এবং পপার প্রয়োজন? নীচের শো উপাদান লিঙ্ক ক্লিক করুন. আপনি যদি সাধারণ পৃষ্ঠার গঠন সম্পর্কে নিশ্চিত না হন তবে একটি উদাহরণ পৃষ্ঠা টেমপ্লেটের জন্য পড়তে থাকুন।

জাভাস্ক্রিপ্ট প্রয়োজন এমন উপাদান দেখান

বরখাস্ত করার জন্য সতর্কতা
রাজ্য এবং চেকবক্স/রেডিও কার্যকারিতা টগল করার জন্য বোতাম
সমস্ত স্লাইড আচরণ, নিয়ন্ত্রণ এবং সূচকগুলির জন্য ক্যারোজেল৷
সামগ্রীর দৃশ্যমানতা টগল করার জন্য সঙ্কুচিত করুন৷
প্রদর্শন এবং অবস্থানের জন্য ড্রপডাউন (এছাড়াও পপার প্রয়োজন )
প্রদর্শন, অবস্থান, এবং স্ক্রোল আচরণের জন্য মডেল
প্রতিক্রিয়াশীল আচরণ বাস্তবায়নের জন্য আমাদের সঙ্কুচিত প্লাগইন প্রসারিত করার জন্য Navbar
প্রদর্শন এবং খারিজ জন্য টোস্ট
প্রদর্শন এবং অবস্থানের জন্য টুলটিপ এবং পপভার (এছাড়াও পপার প্রয়োজন )
স্ক্রোল আচরণ এবং নেভিগেশন আপডেটের জন্য Scrollspy

স্টার্টার টেমপ্লেট

আপনার পৃষ্ঠাগুলি লেটেস্ট ডিজাইন এবং ডেভেলপমেন্ট স্ট্যান্ডার্ডের সাথে সেট আপ করা নিশ্চিত করুন৷ এর মানে হল একটি HTML5 ডকটাইপ ব্যবহার করা এবং যথাযথ প্রতিক্রিয়াশীল আচরণের জন্য একটি ভিউপোর্ট মেটা ট্যাগ সহ। এটি সব একসাথে রাখুন এবং আপনার পৃষ্ঠাগুলি এইরকম হওয়া উচিত:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

পরবর্তী ধাপগুলির জন্য, আপনার সাইটের বিষয়বস্তু এবং উপাদানগুলি সাজানো শুরু করতে লেআউট ডক্স বা আমাদের অফিসিয়াল উদাহরণগুলিতে যান৷

গুরুত্বপূর্ণ বিশ্ব

বুটস্ট্র্যাপ একটি মুষ্টিমেয় গুরুত্বপূর্ণ বিশ্বব্যাপী শৈলী এবং সেটিংস নিয়োগ করে যা এটি ব্যবহার করার সময় আপনাকে সচেতন হতে হবে, যার সবগুলি প্রায় একচেটিয়াভাবে ক্রস ব্রাউজার শৈলীর স্বাভাবিককরণের দিকে তৈরি। এর মধ্যে ডুব দিন.

HTML5 ডকটাইপ

বুটস্ট্র্যাপের জন্য HTML5 ডকটাইপ ব্যবহার করা প্রয়োজন। এটি ছাড়া, আপনি কিছু মজাদার অসম্পূর্ণ স্টাইলিং দেখতে পাবেন, তবে এটি সহ কোনও উল্লেখযোগ্য হেঁচকি সৃষ্টি করা উচিত নয়।

<!doctype html>
<html lang="en">
  ...
</html>

প্রতিক্রিয়াশীল মেটা ট্যাগ

বুটস্ট্র্যাপ মোবাইল ফার্স্ট ডেভেলপ করা হয়েছে , একটি কৌশল যেখানে আমরা প্রথমে মোবাইল ডিভাইসের জন্য কোড অপ্টিমাইজ করি এবং তারপর CSS মিডিয়া ক্যোয়ারী ব্যবহার করে প্রয়োজনীয় উপাদানগুলি স্কেল করি। সমস্ত ডিভাইসের জন্য সঠিক রেন্ডারিং এবং টাচ জুমিং নিশ্চিত করতে, আপনার তে প্রতিক্রিয়াশীল ভিউপোর্ট মেটা ট্যাগ যোগ করুন <head>।

<meta name="viewport" content="width=device-width, initial-scale=1">

আপনি স্টার্টার টেমপ্লেটে এটির একটি উদাহরণ দেখতে পারেন ।

বক্স-সাইজিং

CSS-এ আরও সহজবোধ্য আকার দেওয়ার জন্য, আমরা বৈশ্বিক box-sizingমান থেকে content-boxতে পরিবর্তন করি border-box। এটি নিশ্চিত paddingকরে যে একটি উপাদানের চূড়ান্ত গণনাকৃত প্রস্থকে প্রভাবিত করে না, তবে এটি Google মানচিত্র এবং Google কাস্টম সার্চ ইঞ্জিনের মতো কিছু তৃতীয় পক্ষের সফ্টওয়্যারের সাথে সমস্যা সৃষ্টি করতে পারে।

বিরল অনুষ্ঠানে আপনাকে এটিকে ওভাররাইড করতে হবে, নিম্নলিখিতগুলির মতো কিছু ব্যবহার করুন:

.selector-for-some-widget {
  box-sizing: content-box;
}

উপরের স্নিপেটের সাথে, নেস্টেড উপাদানগুলি-এর মাধ্যমে তৈরি করা সামগ্রী সহ ::beforeএবং -এর জন্য ::afterনির্দিষ্ট করা সমস্ত উত্তরাধিকারী হবে ৷box-sizing.selector-for-some-widget

CSS ট্রিকসে বক্স মডেল এবং সাইজিং সম্পর্কে আরও জানুন ।

রিবুট করুন

উন্নত ক্রস-ব্রাউজার রেন্ডারিংয়ের জন্য, আমরা সাধারণ HTML উপাদানগুলিতে সামান্য বেশি মতামতযুক্ত রিসেট প্রদান করার সময় ব্রাউজার এবং ডিভাইস জুড়ে অসঙ্গতিগুলি সংশোধন করতে রিবুট ব্যবহার করি।

সম্প্রদায়

বুটস্ট্র্যাপের বিকাশ সম্পর্কে আপ টু ডেট থাকুন এবং এই সহায়ক সংস্থানগুলির সাথে সম্প্রদায়ের কাছে পৌঁছান৷

অফিসিয়াল বুটস্ট্র্যাপ ব্লগ পড়ুন এবং সদস্যতা নিন ।
IRC-তে সহকর্মী বুটস্ট্র্যাপারদের সাথে চ্যাট করুন। সার্ভারে irc.libera.chat, #bootstrapচ্যানেলে।
bootstrap-5স্ট্যাক ওভারফ্লো (ট্যাগ করা ) এ বাস্তবায়ন সহায়তা পাওয়া যেতে পারে ।
বিকাশকারীদের প্যাকেজগুলিতে কীওয়ার্ড ব্যবহার করা উচিত যা সর্বাধিক আবিষ্কারযোগ্যতার জন্য npm বা অনুরূপ বিতরণ ব্যবস্থার bootstrapমাধ্যমে বিতরণ করার সময় বুটস্ট্র্যাপের কার্যকারিতা পরিবর্তন বা যোগ করে ।

আপনি সর্বশেষ গসিপ এবং দুর্দান্ত মিউজিক ভিডিওগুলির জন্য টুইটারে @getbootstrap অনুসরণ করতে পারেন ।