Bootstrap ৰ সৈতে আৰম্ভ কৰক

বুটষ্ট্ৰেপ এটা শক্তিশালী, বৈশিষ্ট্য-পেকড ফ্ৰন্টএণ্ড সঁজুলিকিট। যিকোনো বস্তু নিৰ্মাণ কৰক—প্ৰট’টাইপৰ পৰা প্ৰডাকচনলৈকে—মিনিটৰ ভিতৰতে।

এই পৃষ্ঠাত

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

কোনো নিৰ্মাণ পদক্ষেপৰ প্ৰয়োজন নোহোৱাকৈ CDN ৰ যোগেদি Bootstrap ৰ উৎপাদন-প্ৰস্তুত CSS আৰু JavaScript অন্তৰ্ভুক্ত কৰি আৰম্ভ কৰক । এই Bootstrap CodePen ডেমোৰ সৈতে ইয়াক ব্যৱহাৰত চাওক ।

index.htmlআপোনাৰ প্ৰকল্পৰ মূলত এটা নতুন নথিপত্ৰ সৃষ্টি কৰক । মোবাইল ডিভাইচসমূহত সঠিক প্ৰতিক্ৰিয়াশীল আচৰণৰ<meta name="viewport"> বাবে টেগটোও অন্তৰ্ভুক্ত কৰক ।
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```
বুটষ্ট্ৰেপৰ CSS আৰু JS অন্তৰ্ভুক্ত কৰক। আমাৰ CSS <link>ৰ বাবে টেগটো ৰাখক , আৰু আমাৰ জাভাস্ক্রিপ্ট বাণ্ডিলৰ বাবে টেগটো (ড্ৰপডাউনসমূহ, পপাৰসমূহ, আৰু সঁজুলি টিপসমূহৰ অৱস্থানৰ বাবে Popper অন্তৰ্ভুক্ত কৰি) বন্ধ কৰাৰ আগতে ৰাখক । আমাৰ CDN লিংকসমূহৰ বিষয়ে অধিক জানক ।<head><script></body>
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <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">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>
```
আপুনি পপাৰ আৰু আমাৰ জে এছকো পৃথকে পৃথকে অন্তৰ্ভুক্ত কৰিব পাৰে। যদি আপুনি ড্ৰপডাউন, পপঅভাৰ, বা সঁজুলিটিপ ব্যৱহাৰ কৰাৰ পৰিকল্পনা কৰা নাই, Popper অন্তৰ্ভুক্ত নকৰাকৈ কিছুমান কিলোবাইট সংৰক্ষণ কৰক।
```
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
```
নমস্কাৰ, পৃথিৱী! আপোনাৰ বুটষ্ট্ৰেপড পৃষ্ঠা চাবলৈ আপোনাৰ পছন্দৰ ব্ৰাউজাৰত পৃষ্ঠা খোলক । এতিয়া আপুনি আপোনাৰ নিজৰ পৰিকল্পনা সৃষ্টি কৰি, ডজন ডজন উপাদান যোগ কৰি, আৰু আমাৰ চৰকাৰী উদাহৰণসমূহ ব্যৱহাৰ কৰি Bootstrap ৰ সৈতে নিৰ্মাণ আৰম্ভ কৰিব পাৰিব ।

CDN সংযোগসমূহ

ৰেফাৰেন্স হিচাপে, ইয়াত আমাৰ প্ৰাথমিক CDN লিংকসমূহ দিয়া হৈছে।

বিৱৰণ	URL
চি এছ এছ	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
জে এছ	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

আপুনি CDN ব্যৱহাৰ কৰিব পাৰে বিষয়বস্তু পৃষ্ঠাত তালিকাভুক্ত আমাৰ যিকোনো অতিৰিক্ত নিৰ্মাণ আনিবলৈ ।

পৰৱৰ্তী পদক্ষেপসমূহ

Bootstrap এ ব্যৱহাৰ কৰা কিছুমান গুৰুত্বপূৰ্ণ গোলকীয় পৰিৱেশ সংহতিসমূহৰ বিষয়ে অলপ অধিক পঢ়ক ।
আমাৰ বিষয়বস্তু অংশত Bootstrap ত কি অন্তৰ্ভুক্ত কৰা হৈছে আৰু তলত JavaScript প্ৰয়োজনীয় উপাদানসমূহৰ তালিকা পঢ়ক।
অলপ বেছি শক্তিৰ প্ৰয়োজন? সৰঞ্জাম ব্যৱস্থাপকৰ যোগেদি উৎস নথিপত্ৰসমূহ অন্তৰ্ভুক্ত কৰি Bootstrap ৰ সৈতে নিৰ্মাণ কৰাৰ কথা চিন্তা কৰক ।
Bootstrap ৰ সৈতে এটা মডিউল হিচাপে ব্যৱহাৰ কৰিব বিচাৰিছেনে <script type="module">? অনুগ্ৰহ কৰি আমাৰ Bootstrap ব্যৱহাৰ কৰা এটা মডিউল অংশ হিচাপে চাওক ।

JS উপাদানসমূহ

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

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

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

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

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

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

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

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