পাতনি

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

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

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

চি এছ এছ

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

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

জে এছ

আমাৰ বহুতো উপাদানে কাম কৰিবলৈ জাভাস্ক্রিপ্টৰ ব্যৱহাৰৰ প্ৰয়োজন হয়। বিশেষকৈ, তেওঁলোকক jQuery , Popper.js , আৰু আমাৰ নিজৰ জাভাস্ক্রিপ্ট প্লাগইনসমূহৰ প্ৰয়োজন। আমি jQuery ৰ স্লিম বিল্ড ব্যৱহাৰ কৰো , কিন্তু সম্পূৰ্ণ সংস্কৰণটোও সমৰ্থিত।

আপোনাৰ পৃষ্ঠাসমূহৰ শেষৰ ওচৰত, বন্ধ কৰা টেগৰ ঠিক আগত, নিম্নলিখিত <script>s সমূহৰ এটা ৰাখক </body>, সিহতক সামৰ্থবান কৰিবলে। jQuery প্ৰথমে আহিব লাগিব, তাৰ পিছত Popper.js, আৰু তাৰ পিছত আমাৰ জাভাস্ক্রিপ্ট প্লাগইনসমূহ।

বাণ্ডিল

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

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

পৃথক

যদি আপুনি পৃথক স্ক্ৰিপ্ট সমাধানৰ সৈতে যাবলৈ সিদ্ধান্ত লয়, Popper.js প্ৰথমে আহিব লাগিব, আৰু তাৰ পিছত আমাৰ জাভাস্ক্রিপ্ট প্লাগইনসমূহ।

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

উপাদানসমূহ

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

জাভাস্ক্রিপ্টৰ প্রয়োজনীয় উপাদানসমূহ দেখুৱাওক

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

আৰম্ভণি সাঁচ

আপোনাৰ পৃষ্ঠাসমূহ শেহতীয়া ডিজাইন আৰু বিকাশ মানদণ্ডৰ সৈতে স্থাপন কৰাটো নিশ্চিত কৰক। অৰ্থাৎ এটা 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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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, shrink-to-fit=no">

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

বক্স-চাইজিং

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 ৰ বিকাশৰ বিষয়ে আপডেট হৈ থাকক আৰু এই সহায়ক সম্পদসমূহৰ সৈতে সম্প্ৰদায়ৰ সৈতে যোগাযোগ কৰক।

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

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