Bootstrap 5 ইনট্রোডাকশন

বুথস্ট্যাপ কী বোঝায়?

  • বুথস্ট্যাপ একটি মুক্ত ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টকে আরও দ্রুত এবং সহজ করে তোলে
  • বুথস্ট্যাপ একটি হুমকির ডিজাইন টেমপ্লেট প্রদান করে, যা হুমকির প্রস্তুতি, ফর্ম, বাটন, টেবিল, নেভিগেশন, মডাল, ইমেজ ক্রসফলেশন ইত্যাদির জন্য ব্যবহার করা যায়
  • বুথস্ট্যাপ একটি সমৃদ্ধ জেভাস্ক্রিপ্ট প্লাগইন প্রদান করে
  • বুথস্ট্যাপ আপনাকে সহজেই রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করে

রেসপন্সিভ ওয়েব ডিজাইন কী বোঝায়?

রেসপন্সিভ ওয়েব ডিজাইন হল এমন একটি সাইট তৈরির কথা যা সমস্ত ডিভাইসের জন্য স্বচালিতভাবে সমায়ায়িত হয়, কিন্তু সবচেয়ে বেশি মোবাইল এবং বড় টেবিলেট কম্পিউটারের জন্য

বুথস্ট্যাপ ৫ ইস্ট্যান্স

<div class="container-fluid p-5 bg-primary text-white text-center">
  
我的第一张 Bootstrap 页面
<div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>কলাম 1: বসন্ত</h3> <p>শুষ্কবস্তু অনুসারে বৈচিত্র্য অনুসারে, একবার নতুন সময় এসেছে。</p> <p>সহজেই পশ্চিমবঙ্গের মুখ জানতে পারেন, সবসময় সবজনের রঙের আলোক গ্রীষ্ম</p>
<div class="col-sm-4"> <h3>কলাম 2: প্রথম গ্রীষ্ম</h3> <p>সবসময় লাল এবং বাদামী ধূলিত হয়েছে, গোলাপের আলোকে গ্রীষ্মের নতুন সময় আসছে。</p> <p>সবসময় সংযোগ কৃষি হয়েছে, শুরু করে আপনার স্বাধীনতা জানতে পারেন。</p>
<div class="col-sm-4"> <h3>কলাম 3: পাহাড়ের পথ</h3> <p>দূরত্বে হিমালয়ের পাহাড়ের কক্ষকে সুতোয়, বাদামী আকাশে কোনও বাড়ি আছে。</p> <p>আটকে আছেন ফেংকলের রাত্রিতে, শীতলা কলা আগস্টের ফুলের সমান লাল হয়েছে。</p>

亲自试一试

Bootstrap সংস্করণ

Bootstrap 5 (2021 সালে প্রকাশিত) হল Bootstrap-এর সর্বশেষ সংস্করণ (2013 সালে প্রকাশিত); নতুন কম্পোনেন্ট, দ্রুততর স্টাইলশিট, দ্রুত প্রতিক্রিয়ামূলকতা প্রদান করে。

Bootstrap 5 সব প্রধান ব্রাউজার এবং প্ল্যাটফর্মের সর্বশেষ স্থায়ী সংস্করণকে সমর্থন করে, কিন্তু Internet Explorer 11 এবং তার আগের সংস্করণকে সমর্থন করে না。

Bootstrap 5 এবং Bootstrap 3 & 4-এর মধ্যে মূল পার্থক্য হল যে Bootstrap 5 জিনিস জাভাস্ক্রিপ্টের পক্ষে চলে গেছে, না জুলি জুলি এক্সপ্রেসসিওন

মন্তব্য:তার দল Bootstrap 3 এবং Bootstrap 4-এর কীভাবে গুরুত্বপূর্ণ ত্রুটি সংশোধন এবং ডকুমেন্টেশন পরিবর্তন সমর্থন করে, তাদের কাজ করা সুরক্ষিত, কিন্তু তাদের মধ্যে কোনও নতুন বৈশিষ্ট্য যোগ করা হবে না。

কেন Bootstrap-এর ব্যবহার করবেন?

Bootstrap-এর সুবিধা:

মনযোগ দিন:আপনি IE11 এবং তার আগের সংস্করণকে সমর্থন করতে হলে, BS4 বা BS3 ব্যবহার করতে হবে。

Bootstrap 5 কোথা থেকে পাবেন?

আপনার নিজস্ব ওয়েবসাইটে Bootstrap 5 ব্যবহার করার জন্য দুইটি পদ্ধতি রয়েছে。

আপনি করতে পারেন:

Bootstrap 5 CDN

যদি আপনি নিজেই Bootstrap 5-এর ডাউনলোড এবং হোস্টিং করতে চান না, তবে CDN (কনটেন্ট ডেলিভারি নেটওয়ার্ক) থেকে তা উদ্ধৃত করতে পারেন

CodeW3C.com Bootstrap-এর CSS এবং JavaScript-এর CDN সমর্থন প্রদান করে

MaxCDN:

<!-- সর্বশেষ কম্পাইলড এবং কম্প্রেসড CSS -->

<!-- সর্বশেষ কম্পাইলড JavaScript -->

Bootstrap 5 CDN-র একটি সুবিধা:

অনেক ব্যবহারকারী জিসডেলিভার থেকে Bootstrap 5-এর জন্য প্রথমবার সাইট পরিদর্শন করার সময় ডাউনলোড করেছেন। তাই, তারা আপনার সাইট পরিদর্শন করার সময়, তা ক্যাশে থেকে লোড হবে, যার ফলে লোড সময় হ্রাস পাবে। এছাড়া, অধিকাংশ CDN-এর সাথে, যখন ব্যবহারকারী ফাইল চাইতে যায়, তখন তা তাদের সবচেয়ে কাছের সার্ভার থেকে সেবা প্রদান করা হবে, যার ফলে আরও দ্রুত লোড সময় হবে

JavaScript?

Bootstrap 5 JavaScript-এর বিভিন্ন কম্পোনেন্ট (যেমন মডাল, টুলটিপ, পপআপ ইত্যাদি) ব্যবহার করে। কিন্তু, আপনি শুধুমাত্র Bootstrap-এর CSS অংশকেই ব্যবহার করছেন তবে, তাদের প্রয়োজন নেই

Bootstrap 5 ডাউনলোড

আপনি যদি Bootstrap 5-এর নিজেই ডাউনলোড করে হোস্টিং করতে চান, তবে এখানে পরিদর্শন করুন https://getbootstrap.com/এরপর, সেখানকার নির্দেশ অনুসারে কাজ করুন

Bootstrap 5 দিয়ে আপনার প্রথম ওয়েবপেজ তৈরি করুন

1. HTML5 ডকুমেন্ট টাইপ যোগ করুন

Bootstrap 5 HTML5 doctype-র প্রয়োজনীয় এলিমেন্ট এবং CSS এবং প্রতিযোগিতা প্রয়োজন

সবসময় HTML5 doctype এবং lang এবং সঠিক শিরোনাম, চার্যুক্তি অন্তর্ভুক্ত করুন



  
    <title>Bootstrap 5 প্রয়োগ</title>

2. Bootstrap 5 মোবাইল প্রথম

Bootstrap 5-এর নকশা লক্ষ্য হল প্রতিক্রিয় মোবাইল ডিভাইস

সঠিক প্রদর্শন এবং টাচ স্কেলিং নিশ্চিত করতে, এখানে প্রবেশ করুন এই উপাদানের ভিতরে নিম্নলিখিত যোগ করুন <meta> ট্যাগ:

width=device-width পাতার প্রস্থটি সমায় সমায় ডিভাইসের screen-width-এর অনুসারে নির্ধারণ করা হয়

initial-scale=1 ব্রাউজার প্রথমবার পাতা লোড করার সময় প্রাথমিক স্কেল সমায়

3. কন্টেনার

Bootstrap 5 একটি উপাদানকে সাইট কনটেন্টকে প্যাকেজ করার জন্য প্রয়োজন

有两种容器类可供选择：

  1. .container 类提供了一个响应式的固定宽度容器
  2. .container-fluid 类提供了一个全宽容器，跨越视口的整个宽度

两张基本的 Bootstrap 5 页面

container 实例

下例展示了基本 Bootstrap 5 页面（带有响应式固定宽度容器）的代码：




  Bootstrap 实例
  
  
  
  




  
我的第一张 Bootstrap 页面

  
这部分在 .container 类中。

  
.container 类提供了响应式固定宽度的容器。

亲自试一试

Container Fluid 实例

下例展示了基本 Bootstrap 5 页面（带有全宽容器）的代码：




  Bootstrap 实例
  
  
  
  




  
我的第一张 Bootstrap 页面

  
这部分在 .container-fluid 类中。

  
.container-fluid 类提供全宽容器，跨越视口的整个宽度。

亲自试一试