• March 27, 2021
Bootstrap Basics

Bootstrap Basics Part-I (বুটস্ট্রাপ বেসিকস পার্ট -১)

বুটস্ট্রাপ(Bootstrap Basics) কি?

বুটস্ট্রাপ একটি ফ্রন্ট-এন্ড Open Source ওয়েব ফ্রেমওয়ার্ক। ওয়েব ফ্রেমওয়ার্ক এমন একটি ফ্রেমওয়ার্ক যা ওয়েব অ্যাপ্লিকেশন তথা ওয়েবসাইট তৈরিতে একটি সাধারণ অবকাঠামো হিসেবে ব্যবহৃত হয়। এখন চলো Bootstrap Basics জেনে নিই।

  • একটি ওয়েব ডেভেলপমেন্ট ফ্রেমওয়ার্ক
  • এইসটিএমএল, সিএসএস ভিত্তিক টেম্পলেট ডিজাইন
  • খুব সহজে রেস্পন্সিভ ডিজাইন করা যায়

রেস্পন্সিভ ডিজাইন বলতে সেই ডিজাইনকেই বুঝায় যা সকল ডিভাইসের সাথে মানিয়ে নিতে পারে।

বুটস্ট্রাপের (Bootstrap Basics) ইতিহাস

মার্ক অট্টো ও জ্যাকব থর্টনের হাত ধরে বুটস্ট্রাপের যাত্রা শুরু হয়। এটি ২০১১ সালে ওপেন সোর্স প্রোডাক্ট হিসেবে গিটহাবে যুক্ত হয় এবং ২০১৪ সালের জুনে ১নং প্রোডাক্ট হিসেবে স্বীকৃতি পায় ।

বুটস্ট্রাপ (Bootstrap) কেন ব্যবহার করবেন?

  • >> এইসটিএমএল, সিএসএস এর বেসিক জানা থাকলে বুটস্ট্রাপে কাজ করা যায়।
  • >> বু্টস্ট্রাপ ডিজাইন খুব সহজেই মোবাইল, ট্যাবলেট এবং ডেক্সটপের সাথে মানিয়ে নেয়।
  • >> বুটস্ট্রাপ প্রায় সকল ব্রাউজারে সাপোর্ট করে ।যেমনঃ chrome, Firefox, Internet Explorer, Safari, Opera etc.

 

আপনি যদি আপনার ডিজাইনটি অপলাইনে ব্যবহার হবে তাহলে বুটস্ট্রাপ ডাউনলোড করে লোকালি ব্যবহার করতে পারেন।আর যদি অনলাইনে ব্যবহার করতে চান তাহলে Html এর <head> এ cdn link ব্যবহার করলে হবে।

Download Bootstrap from here. Or Bootstrap cdn link.

<!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

বুটস্ট্রাপ সিডিএন ব্যবহার করলে ওয়েবসাইট দ্রুত লোড হয়।

Structure

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
</body>
 
</html>

Html ডিজাইনের সাথে এটার মুল পার্থক্য হল এখানে দুইটা ব্যবহার করা হয় ।যেগুলো মুলত ব্যবহার করা হয় ডিভাইসের সাইজ অনুযায়ী প্রস্থ সেট করার জন্য এবং দ্রুত ডাটা লোড হওয়ার জন্য।

বুটস্ট্রাপের প্রথম পেইজ ডিজাইন

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech World</title>
</head>

<body>
    <h1>Hello Learners</h1>
    <h3>Welcome to Tech World</h3>
</body>

</html>

Output

Bootstrap Basic

Flutter App Development Introduction

4 thoughts on “Bootstrap Basics Part-I (বুটস্ট্রাপ বেসিকস পার্ট -১)

Leave a Reply

Your email address will not be published. Required fields are marked *