বুটস্ট্র্যাপ দিয়ে শুরু করুন

বুটস্ট্র্যাপ একটি শক্তিশালী, বৈশিষ্ট্যযুক্ত ফ্রন্টএন্ড টুলকিট। প্রোটোটাইপ থেকে প্রোডাকশন পর্যন্ত - মিনিটে কিছু তৈরি করুন।

এই পৃষ্ঠায়

দ্রুত শুরু

বুটস্ট্র্যাপের উৎপাদন-প্রস্তুত সিএসএস এবং জাভাস্ক্রিপ্ট CDN এর মাধ্যমে কোনো বিল্ড পদক্ষেপের প্রয়োজন ছাড়াই অন্তর্ভুক্ত করে শুরু করুন। এই বুটস্ট্র্যাপ কোডপেন ডেমো দিয়ে অনুশীলনে এটি দেখুন ।

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- <link>এর জন্য ট্যাগটি এবং আমাদের জাভাস্ক্রিপ্ট বান্ডেলের জন্য ট্যাগটি (পজিশনিং ড্রপডাউন, পপার এবং টুলটিপগুলির জন্য পপার সহ) বন্ধ করার আগে রাখুন । আমাদের 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>

আপনি আলাদাভাবে পপার এবং আমাদের JS অন্তর্ভুক্ত করতে পারেন । আপনি যদি ড্রপডাউন, পপোভার বা টুলটিপ ব্যবহার করার পরিকল্পনা না করেন, তাহলে পপারকে অন্তর্ভুক্ত না করে কিছু কিলোবাইট সংরক্ষণ করুন।

<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>

ওহে বিশ্ব! আপনার বুটস্ট্র্যাপড পৃষ্ঠা দেখতে আপনার পছন্দের ব্রাউজারে পৃষ্ঠাটি খুলুন। এখন আপনি আপনার নিজস্ব লেআউট তৈরি করে, ডজন ডজন উপাদান যোগ করে এবং আমাদের অফিসিয়াল উদাহরণগুলি ব্যবহার করে বুটস্ট্র্যাপ দিয়ে নির্মাণ শুরু করতে পারেন ।

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 ব্যবহার করতে পারেন ৷

পরবর্তী পদক্ষেপ

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

জেএস উপাদান

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

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

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

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

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

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 উপাদানগুলিতে সামান্য বেশি মতামতযুক্ত রিসেট প্রদান করার সময় ব্রাউজার এবং ডিভাইস জুড়ে অসঙ্গতিগুলি সংশোধন করতে রিবুট ব্যবহার করি।

সম্প্রদায়

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

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

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