মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
in English

পাতনি

Bootstrap ৰ সৈতে আৰম্ভ কৰক, প্ৰতিক্ৰিয়াশীল, মোবাইল-প্ৰথম চাইটসমূহ নিৰ্মাণৰ বাবে বিশ্বৰ আটাইতকৈ জনপ্ৰিয় কাঠামো, jsDelivr আৰু এটা সাঁচ আৰম্ভণি পৃষ্ঠাৰ সৈতে।

এই পৃষ্ঠাত

দ্ৰুত আৰম্ভণি

আপোনাৰ প্ৰকল্পত Bootstrap দ্ৰুতভাৱে যোগ কৰিব বিচাৰিছেনে? jsDelivr ব্যৱহাৰ কৰক, এটা বিনামূলীয়া মুক্ত উৎস CDN । এটা সৰঞ্জাম ব্যৱস্থাপক ব্যৱহাৰ কৰি আছে নে উৎস নথিপত্ৰসমূহ ডাউনল'ড কৰিব লাগিব? ডাউনলোডসমূহ পৃষ্ঠালৈ যাওক ।

চি এছ এছ

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

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

জে এছ

আমাৰ বহুতো উপাদানে কাম কৰিবলৈ জাভাস্ক্রিপ্টৰ ব্যৱহাৰৰ প্ৰয়োজন হয়। বিশেষকৈ, সিহঁতৰ বাবে আমাৰ নিজৰ জাভাস্ক্রিপ্ট প্লাগইন আৰু Popper ৰ প্ৰয়োজন । আপোনাৰ পৃষ্ঠাসমূহৰ শেষৰ ওচৰত, বন্ধ কৰা টেগৰ ঠিক আগত, নিম্নলিখিত <script>s সমূহৰ এটা ৰাখক </body>, সিহতক সামৰ্থবান কৰিবলে।

বাণ্ডিল

আমাৰ দুটা বাণ্ডিলৰ এটাৰ সৈতে প্ৰতিটো Bootstrap JavaScript প্লাগইন আৰু নিৰ্ভৰশীলতা অন্তৰ্ভুক্ত কৰক। দুয়োটা bootstrap.bundle.jsআৰু আমাৰ টুলটিপছ আৰু পপঅভাৰৰ বাবে পপাৰ অন্তৰ্ভুক্তbootstrap.bundle.min.js কৰা হৈছে। Bootstrap ত কি অন্তৰ্ভুক্ত কৰা হৈছে তাৰ বিষয়ে অধিক তথ্যৰ বাবে, অনুগ্ৰহ কৰি আমাৰ বিষয়বস্তু অংশ চাওক।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

পৃথক

যদি আপুনি পৃথক স্ক্ৰিপ্ট সমাধানৰ সৈতে যাবলৈ সিদ্ধান্ত লয়, Popper প্ৰথমে আহিব লাগিব (যদি আপুনি সঁজুলি টিপছ বা popovers ব্যৱহাৰ কৰিছে), আৰু তাৰ পিছত আমাৰ JavaScript প্লাগইনসমূহ।

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

মডিউলসমূহ

যদি আপুনি ব্যৱহাৰ কৰে <script type="module">, অনুগ্ৰহ কৰি আমাৰ বুটষ্ট্ৰেপক এটা মডিউল হিচাপে ব্যৱহাৰ কৰা অংশ চাওক ।

উপাদানসমূহ

আমাৰ জাভাস্ক্রিপ্ট আৰু পপাৰৰ কোনবোৰ উপাদানৰ বাবে স্পষ্টভাৱে প্ৰয়োজন? তলৰ show components লিংকটোত ক্লিক কৰক। যদি আপুনি সাধাৰণ পৃষ্ঠা গঠনৰ বিষয়ে একেবাৰেই নিশ্চিত নহয়, এটা উদাহৰণ পৃষ্ঠা সাঁচৰ বাবে পঢ়ি থাকিব।

জাভাস্ক্রিপ্টৰ প্রয়োজনীয় উপাদানসমূহ দেখুৱাওক
  • চাকৰিৰ পৰা বৰ্খাস্ত কৰাৰ বাবে সতৰ্কবাণী
  • টগলিং অৱস্থা আৰু চেকবক্স/ৰেডিঅ' কাৰ্য্যকৰীতাৰ বাবে বুটামসমূ���
  • সকলো স্লাইড আচৰণ, নিয়ন্ত্ৰণ, আৰু সূচকৰ বাবে কেৰউজেল
  • বিষয়বস্তুৰ দৃশ্যমানতা টগল কৰাৰ বাবে সংকুচিত কৰক
  • প্ৰদৰ্শন আৰু অৱস্থানৰ বাবে ড্ৰপডাউনসমূহ ( Popper ৰ প্ৰয়োজনো আছে )
  • প্ৰদৰ্শন, অৱস্থান, আৰু স্ক্ৰল আচৰণৰ বাবে মডালসমূহ
  • প্ৰতিক্ৰিয়াশীল আচৰণ প্ৰণয়ন কৰিবলে আমাৰ সংকুচিত প্লাগইন সম্প্ৰসাৰণৰ বাবে Navbar
  • প্ৰদৰ্শন, অৱস্থান, আৰু স্ক্ৰল আচৰণৰ বাবে অফকেনভাছসমূহ
  • প্ৰদৰ্শন আৰু নিষ্কাশনৰ বাবে টোষ্ট
  • প্ৰদৰ্শন আৰু অৱস্থানৰ বাবে সঁজুলিৰ টিপছ আৰু পপঅভাৰসমূহ ( পপাৰৰ প্ৰয়োজনো )
  • স্ক্ৰল আচৰণ আৰু নেভিগেচন আপডেইটসমূহৰ বাবে স্ক্ৰলস্পাই

আৰম্ভণি সাঁচ

আপোনাৰ পৃষ্ঠাসমূহ শেহতীয়া ডিজাইন আৰু বিকাশ মানদণ্ডৰ সৈতে স্থাপন কৰাটো নিশ্চিত কৰক। অৰ্থাৎ এটা HTML5 doctype ব্যৱহাৰ কৰা আৰু সঠিক প্ৰতিক্ৰিয়াশীল আচৰণৰ বাবে এটা viewport মেটা টেগ অন্তৰ্ভুক্ত কৰা। সকলোবোৰ একেলগে ৰাখিলে আপোনাৰ পৃষ্ঠাবোৰ এনেকুৱা হ'ব লাগে:

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

পৰৱৰ্তী পদক্ষেপসমূহৰ বাবে, আপোনাৰ চাইটৰ বিষয়বস্তু আৰু উপাদানসমূহ বিন্যাস কৰা আৰম্ভ কৰিবলৈ পৰিকল্পনা নথিপত্ৰসমূহ বা আমাৰ চৰকাৰী উদাহৰণসমূহ চাওক।

গুৰুত্বপূৰ্ণ গ্লোবেলসমূহ

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

HTML5 ডক্টটাইপ

বুটষ্ট্ৰেপৰ বাবে HTML5 doctype ৰ ব্যৱহাৰৰ প্ৰয়োজন। ইয়াৰ অবিহনে আপুনি কিছুমান ফাংকি অসম্পূৰ্ণ ষ্টাইলিং দেখিব, কিন্তু ইয়াক অন্তৰ্ভুক্ত কৰিলে কোনো যথেষ্ট হিচকিব নালাগে।

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

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

Bootstrap is developed mobile first , এটা কৌশল য'ত আমি প্ৰথমে মোবাইল ডিভাইচসমূহৰ বাবে ক'ড অনুকূল কৰিম আৰু তাৰ পিছত CSS মিডিয়া প্ৰশ্ন ব্যৱহাৰ কৰি প্ৰয়োজন অনুসৰি উপাদানসমূহ স্কেল আপ কৰোঁ। সকলো ডিভাইচৰ বাবে সঠিক ৰেণ্ডাৰ আৰু স্পৰ্শ জুমিং সুনিশ্চিত কৰিবলে, আপোনাৰ ত প্ৰতিক্ৰিয়াশীল দৰ্শনপৰ্ট মেটা টেগ যোগ কৰক <head>।

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

আপুনি ইয়াৰ এটা উদাহৰণ আৰম্ভণি সাঁচত কাৰ্য্যত চাব পাৰে ।

বক্স-চাইজিং

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

আপুনি ইয়াক অভাৰৰাইড কৰিবলগীয়া হোৱা বিৰল অনুষ্ঠানত, নিম্নলিখিতৰ দৰে কিবা এটা ব্যৱহাৰ কৰক:

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

ওপৰৰ স্নিপেটৰ ​​সৈতে, নেষ্ট কৰা উপাদানসমূহে—আমাৰ যোগেদি সৃষ্টি কৰা বিষয়বস্তু অন্তৰ্ভুক্ত কৰি— ::beforeসকলোৱে তাৰ বাবে ::afterধাৰ্য্য কৰা উত্তৰাধিকাৰী হ'ব ।box-sizing.selector-for-some-widget

CSS Tricks ত বাকচ মডেল আৰু আকাৰ নিৰ্ধাৰণৰ বিষয়ে অধিক শিকিব ।

পুনৰাৰম্ভ কৰক

উন্নত ক্ৰছ-ব্ৰাউজাৰ ৰেণ্ডাৰৰ বাবে, আমি ব্ৰাউজাৰ আৰু ডিভাইচসমূহৰ মাজত অসামঞ্জস্যতাসমূহ সংশোধন কৰিবলে Reboot ব্যৱহাৰ কৰো আৰু সাধাৰণ HTML উপাদানসমূহলে অলপ অধিক মতামতযুক্ত ৰিছেটসমূহ প্ৰদান কৰোঁ।

সমুদায়

Bootstrap ৰ বিকাশৰ বিষয়ে আপডেট হৈ থাকক আৰু এই সহায়ক সম্পদসমূহৰ সৈতে সম্প্ৰদায়ৰ সৈতে যোগাযোগ কৰক।

  • অফিচিয়েল বুটষ্ট্ৰেপ ব্লগ পঢ়ক আৰু চাবস্ক্ৰাইব কৰক ।
  • IRC ত সহযোগী Bootstrappers ৰ সৈতে আড্ডা কৰক। irc.libera.chatচাৰ্ভাৰত, চেনেলত #bootstrap।
  • প্ৰণয়ন সহায় ষ্টেক অভাৰফ্ল' (টেগ কৰা bootstrap-5) ত পোৱা যাব পাৰে।
  • বিকাশকসকলে সৰ্বাধিক আৱিষ্কাৰযোগ্যতাৰ বাবে npmbootstrap বা অনুৰূপ বিতৰণ ব্যৱস্থাসমূহৰ যোগেদি বিতৰণ কৰাৰ সময়ত Bootstrap ৰ কাৰ্য্যকৰীতা পৰিবৰ্তন বা যোগ কৰা পেকেইজসমূহত চাবিশব্দ ব্যৱহাৰ কৰিব লাগে ।

শেহতীয়া গছিপ আৰু ভয়ংকৰ মিউজিক ভিডিঅ’ৰ বাবে আপুনি টুইটাৰত @getbootstrap কো অনুসৰণ কৰিব পাৰে ।