Bootstrap 3 হল একটি জনপ্রিয় front-end framework, যা ব্যবহারকারীদের দ্রুত এবং সহজে responsive এবং mobile-first ওয়েব ডিজাইন তৈরি করতে সাহায্য করে। এটি CSS এবং JavaScript এর একটি সেট যা ওয়েবসাইটের লেআউট, কম্পোনেন্ট, টুলস এবং গ্রিড সিস্টেমে সাজানোর জন্য ব্যবহৃত হয়।
এখানে একটি Bootstrap 3 Tutorial দেওয়া হলো, যা আপনাকে Bootstrap 3 Basic বিষয়গুলি বুঝতে সাহায্য করবে।
Bootstrap 3 Overview:
- Responsive Grid System:
- Bootstrap 3 এর মূল বৈশিষ্ট্য হল এর responsive grid system, যা ওয়েবসাইটকে মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসে সঠিকভাবে উপস্থাপন করতে সাহায্য করে।
- এটি 12-column grid-এ কাজ করে, যেখানে আপনি আপনার কন্টেন্টের জন্য একাধিক কলাম তৈরি করতে পারেন এবং এটি ডিভাইসের স্ক্রীনের আকার অনুযায়ী সামঞ্জস্যপূর্ণ হবে।
- Predefined CSS Classes:
- Bootstrap 3 বিভিন্ন ধরনের CSS classes প্রদান করে, যা খুব সহজে বিভিন্ন স্টাইল এবং লেআউট তৈরিতে সাহায্য করে। উদাহরণস্বরূপ, আপনি খুব সহজেই একটি button, alert box, form, অথবা navbar তৈরি করতে পারবেন।
- JavaScript Plugins:
- Bootstrap 3 এর সাথে JavaScript plugins যেমন modals, tooltips, carousel, popover, ইত্যাদি অন্তর্ভুক্ত রয়েছে। এগুলো ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য নানা ধরনের উপাদান যোগ করতে ব্যবহৃত হয়।
Bootstrap 3 Basic Tutorial:
Step 1: Bootstrap 3 Setup
প্রথমে Bootstrap 3 ব্যবহার করতে আপনাকে নিচের স্ক্রিপ্ট এবং CSS ফাইলগুলো আপনার HTML ডকুমেন্টে যোগ করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Example</title>
<!-- Bootstrap 3 CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content goes here -->
<!-- Bootstrap 3 JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Step 2: Bootstrap 3 Grid System
Bootstrap 3 এ grid system ব্যবহার করে আপনি responsive লেআউট তৈরি করতে পারেন।
- container: প্রাইমারি কনটেইনার, যা পেজের ভিতরের সব কিছু রাখে।
- row: কলামগুলোকে রিগুলেট করতে ব্যবহৃত হয়।
- col-xx-xx: কলামের আকার নির্ধারণ করে। এখানে
xxএর পরিবর্তে বিভিন্ন সাইজ ব্যবহার করা হয় যেমনcol-xs-12,col-sm-6,col-md-4,col-lg-3।
Example: Basic Grid Layout
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="panel panel-default">
<div class="panel-body">
Column 1
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="panel panel-default">
<div class="panel-body">
Column 2
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="panel panel-default">
<div class="panel-body">
Column 3
</div>
</div>
</div>
</div>
</div>
- এখানে
col-xs-12অর্থাৎ মোবাইল স্ক্রীনে সম্পূর্ণ প্রস্থে কলাম,col-sm-6অর্থাৎ ট্যাবলেট স্ক্রীনে ৬০% প্রস্থ এবংcol-md-4অর্থাৎ ডেস্কটপ স্ক্রীনে ৪০% প্রস্থ।
Step 3: Bootstrap Buttons
Buttons তৈরি করা খুবই সহজ, Bootstrap আপনাকে বিভিন্ন স্টাইল ও সাইজের বাটন দেওয়ার সুবিধা দেয়।
<!-- Basic Button -->
<button class="btn btn-default">Default Button</button>
<!-- Primary Button -->
<button class="btn btn-primary">Primary Button</button>
<!-- Success Button -->
<button class="btn btn-success">Success Button</button>
<!-- Danger Button -->
<button class="btn btn-danger">Danger Button</button>
Step 4: Bootstrap Navbar
Bootstrap 3 এ Navbar একটি খুবই জনপ্রিয় কম্পোনেন্ট। এটি ব্যবহারকারীদের একটি নেভিগেশন মেনু বা বার তৈরি করতে সাহায্য করে।
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">BrandName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
- এখানে,
navbar navbar-defaultক্লাস ব্যবহার করা হয়েছে যা একটি সাদা ব্যাকগ্রাউন্ডের নেভিগেশন বার তৈরি করবে। navbar-headerক্লাসের মধ্যে ব্র্যান্ড নাম এবং মেনু আইটেমগুলির জন্যnav navbar-navক্লাস ব্যবহৃত হয়েছে।
Step 5: Bootstrap Alerts
Bootstrap 3 ব্যবহার করে বিভিন্ন ধরনের এলার্ট তৈরি করা সম্ভব, যেমন success, info, warning, danger।
<div class="alert alert-success">
<strong>Success!</strong> This is a success alert.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This is a danger alert.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This is an info alert.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This is a warning alert.
</div>
Step 6: Bootstrap Forms
Bootstrap 3 এর ফর্ম তৈরি করা খুবই সহজ, এবং এটি বিভিন্ন ইনপুট ফিল্ড এবং লেবেল দিয়ে প্রক্রিয়া করা যায়।
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
এই Bootstrap 3 Basic Tutorial আপনাকে শুরু করার জন্য কিছু মৌলিক ধারণা দিয়েছে। Bootstrap 3 এর Grid System, Buttons, Navbar, Forms, এবং Alerts সহ অন্যান্য UI Components ব্যবহার করে আপনি দ্রুত এবং সহজে একটি সুন্দর ও responsive ওয়েব পেজ তৈরি করতে পারেন।
Bootstrap 3 একটি খুবই জনপ্রিয় এবং সহজ-to-use প্ল্যাটফর্ম, এবং এটি ডেভেলপারদের এবং ডিজাইনারদের কাজকে অনেক সহজ করে দেয়।
বুটস্ট্রাপ টিউটোরিয়াল: আমাদের এই বুটস্ট্রাপ টিউটোরিয়ালটিতে খুব সহজভাবে বুটস্ট্রাপ এর সমস্ত কম্পোনেন্ট আলোচনা করা হয়েছে। যেন আপনিও খুব সহজেই বুঝতে পারেন।
রেসপন্সিভ এবং মোবাইল-ফার্স্ট ওয়েবসাইট ডেভেলপ করার ক্ষেত্রে টুইটার বুটস্ট্রাপ হলো এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এর সবচেয়ে জনপ্রিয় ফ্রেমওয়ার্ক।
এটি ডাউনলোড এবং ব্যবহার সম্পূর্ণ ফ্রি!
আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copy করার একটি অপশন দেখতে পাবেন। copy অপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।
আপনি আপনার এডিটর ওপেন করে copy করা কোড paste করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।\
kt_satt_skill_example_id=759
বুটস্ট্রাপ কি?
- দ্রুত এবং সহজতর ওয়েব ডেভেলপমেন্টের জন্য বুটস্ট্রাপ হলো একটি ফ্রি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক।
- বুটস্ট্রাপ হলো টাইপোগ্রাফি, ফরম, বাটন, টেবিল, নেভিগেশন, মোডাল, ইমেজ ক্যারোসেল এবং জাভাস্ক্রিপ্ট প্লাগ-ইন সমৃদ্ধ এইচটিএমএল এবং সিএসএস ভিত্তিক টেমপ্লেট ডিজাইন।
- খুব সহজে রেসপন্সিভ ডিজাইন তৈরি করার জন্য বুটস্ট্রাপ ব্যবহার করা হয়।
রেসপন্সিভ ওয়েব ডিজাইন কি?
রেসপন্সিভ ওয়েব ডিজাইন হচ্ছে ওয়েবসাইটের জন্য এমন একটি ডিজাইন যেটি সকল ডিভাইস যেমন ছোট ফোন থেকে বড় ডেস্কটপ সব কিছুতেই সহজেই এডজাস্ট করে নিতে পারে।
বুটস্ট্রাপের ইতিহাস
বুটস্ট্রাপ মার্ক অট্টো ও জ্যাকব থর্টন দ্বারা টুইটারে ডেভেলোপ হয় এবং ২০১১ সালে গিটহাবে ওপেন সোর্স প্রোডাক্ট হিসেবে মুক্তি পায়।
২০১৪ সালের জুন মাসে বুটস্ট্রাপ গিটহাবে ১ নম্বর প্রোজেক্টে হিসেবে বিবেচিত হয়!
বুটস্ট্রাপ কেনো ব্যবহার করবেন?
বুটস্ট্রাপ এর সুবিধাঃ
- সহজ ব্যবহারঃ যেকেউ এইচটিএমএল এবং সিএসএস জানলে বুটস্ট্রাপ ব্যবহার শুরু করতে পারবেন।
- রেসপন্সিভ ফিচারঃ বুটস্ট্রাপের রেসপন্সিভ সিএসএস ফোন, ট্যাবলেট এবং ডেস্কটপে সহজেই এডজাস্ট করে।
- মোবাইল-ফার্স্ট প্রায়োরিটিঃ বুটস্ট্রাপ(৩) এ, মোবাইল-ফার্স্ট স্টাইল কোর ফ্রেমওয়ার্ক এর একটি অংশ।
- ব্রাউজার সাপোর্টঃ বুটস্ট্রাপ প্রায় সকল আধুনিক ব্রাউজারেই সাপোর্ট করে।(chrome, Firefox, Internet Explorer, Safari, এবং Opera)
বুটস্ট্রাপ কোথায় পাবেন?
আপনার ওয়েব সাইটে বুটস্ট্রাপ ব্যবহার করার জন্য দুইটি পদ্ধতি আছে।
যেভাবে পাবেনঃ
getbootstrap.comথেকে ডাউনলোড করে- সিডিএন(CDN) থেকে বুটস্ট্রাপ যুক্ত করে
বুটস্ট্রাপ ডাউনলোড
যদি আপনি নিজের বুটস্ট্রাপ ডাউনলোড এবং হোস্ট করতে চান তাহলে getbootstrap.com, এ যান এবং পদ্ধতিগুলো অনুসরন করুন।
বুটস্ট্রাপ সিডিএন
যদি আপনি নিজে থেকে ডাউনলোড এবং হোস্ট করতে না চান তাহলে আপনি এটি সিডিএন থেকে যুক্ত করতে পারবেন (CDN = Content Delivery Network)।
MaxCDN বুটস্ট্রাপ সিএসএস এবং জাভাস্ক্রিপ্ট এর সিডিএন সাপোর্ট এর জন্য সহযোগিতা করে। এগুলোর পাশাপাশি এছাড়াও আপনাকে অবশ্যই জেকুয়েরি লাইব্রেরি যুক্ত করতে হবেঃ
kt_satt_skill_example_id=761
বুটস্ট্রাপ দিয়ে প্রথম ওয়েব পেজ তৈরি করুন
১। এইচটিএমএল(৫) DOCTYPE যুক্ত করুন।
বুটস্ট্রাপে এইচটিএমএল এলিমেন্ট এবং সিএসএস প্রোপার্টি ব্যবহৃত হয়, যার জন্য এইচটিএমএল(৫) DOCTYPE নির্ধারন করা বাধ্যতামূলক।
সবসময়ই পেজের শুরুতেই এইচটিএমএল(৫) DOCTYPE যুক্ত করুনঃ
kt_satt_skill_example_id=763
২। বুটস্ট্রাপ(৩) মোবাইল-ফার্স্ট
বুটস্ট্রাপ(৩) মোবাইল ডিভাইসকে বেশি গুরুত্ব দিয়ে রেসপন্সিভ করা হয়েছে। মোবাইল-ফার্স্ট স্টাইল, কোর ফ্রেমওয়ার্কের একটি অংশ।
যথাযথ আউটপুট এবং টাচ জুমিং এর জন্য <head> এলিমেন্টের মধ্যে <meta> ট্যাগ নিশ্চিত করুনঃ
kt_satt_skill_example_id=764
ডিভাইসের স্ক্রিন-প্রস্থের উপর ভিত্তি করে পেজের প্রস্থ সেট করার জন্য width=device-width ব্যবহার করা হয়েছে (যা ডিভাইসের উপর নির্ভর করে)।
পেইজ যখন ব্রাউজার দ্বারা প্রথম লোড হয় তখন এর ইনিশিয়াল জুম সেট করার জন্য initial-scale=1 ব্যবহার করা হয়েছে।
৩। কন্টেইনার
বুটস্ট্রাপে এলিমেন্টকে একটি কন্টেইনারের মধ্যে রাখার প্রয়োজন হয়।
বুটস্ট্রাপে দুই ধরনের কন্টেইনার রয়েছে। আপনার প্রয়োজন অনুযায়ী কন্টেইনার বাচাই করে নিনঃ
- রেসপন্সিভ ফিক্সড প্রস্থের কন্টেইনার তৈরি করার জন্য
.containerক্লাস ব্যবহার করুন। - ভিউপোর্টের সম্পূর্ণ প্রস্থ মেপে পূর্ণ প্রস্থের কন্টেইনার করার জন্য
.container-fluidক্লাস ব্যবহার করুন।
নোটঃ কন্টেইনারগুলো নেস্টেবল নয় (আপনি চাইলেই কন্টেইনারের মধ্যে কন্টেইনার রাখতে পারবেন না)।
দুটি বেসিক বুটস্ট্রাপ পেজ
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (ফিক্সড প্রস্থের কন্টেইনার সহ)
kt_satt_skill_example_id=765
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (পূর্ণ প্রস্থের কন্টেইনার সহ)
kt_satt_skill_example_id=766
বুটস্ট্রাপ রেফারেন্স
স্যাট একাডেমীতে বুটস্ট্রাপ সিএসএস ক্লাস, কম্পোনেন্ট এবং জাভাস্ক্রিপ্ট প্লাগ-ইনের সম্পূর্ণ রেফারেন্স রয়েছে। এছাড়াও প্রত্যেক অধ্যায়কেই "নিজে চেষ্টা করি " উদাহরণ দিয়ে সাজানো হয়েছে:
- বুটস্ট্রাপ সিএসএস বেসিক টেক্সট
- বুটস্ট্রাপ সিএসএস বাটন
- বুটস্ট্রাপ সিএসএস ফরম
- বুটস্ট্রাপ সিএসএস ইমেজ
- বুটস্ট্রাপ সিএসএস টেবিল
- বুটস্ট্রাপ গ্লিফ কম্পোনেন্ট
- বুটস্ট্রাপ ড্রপডাউন কম্পোনেন্ট
- বুটস্ট্রাপ ন্য্যাভ কম্পোনেন্ট
- বুটস্ট্রাপ জেএস এফিক্স
- বুটস্ট্রাপ জেএস এলার্ট
- বুটস্ট্রাপ জেএস বাটন
- বুটস্ট্রাপ জেএস ক্যারোসেল
- বুটস্ট্রাপ জেএস কলাপ্স
- বুটস্ট্রাপ জেএস ড্রপডাউন
- বুটস্ট্রাপ জেএস মোডাল
- বুটস্ট্রাপ জেএস পপওভার
- বুটস্ট্রাপ জেএস স্ক্রলস্পাই
- বুটস্ট্রাপ জেএস ট্যাব
- বুটস্ট্রাপ জেএস টুলটিপ
বুটস্ট্রাপ গ্রীড সিস্টেম
বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে ওয়েবপেজকে ১২ কলামে ভাগ করা যায়।
আপনি যদি ১২ কলামের মধ্যে সবগুলো কলাম একত্রে ব্যবহার করতে না চান, তাহলে আপনি কলামগুলোর বিভিন্ন গ্রুপ তৈরি করে অধিক প্রস্থের কলাম তৈরি করতে পারবেনঃ
| span 12 | |||||||||||
| span 6 | span 6 | ||||||||||
| span 4 | span 8 | ||||||||||
| span 4 | span 4 | span 4 | |||||||||
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
বুটস্ট্রাপের গ্রীড সিস্টেম সম্পূর্ণ রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়।
বুটস্ট্রাপ গ্রীড ক্লাস
বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছেঃ
- xs (মোবাইলের জন্য)
- sm ( ট্যাবলেটের জন্য)
- md (ল্যাপটপের জন্য)
- lg (বড় ডেস্কটপের জন্য)
অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।
বুটস্ট্রাপ গ্রীডের সিস্টেমের বেসিক গঠন
নিচে বুটস্ট্রাপ গ্রীডের বেসিক গঠন দেখানো হলোঃ
kt_satt_skill_example_id=767
প্রথমত; আপনি যে লে-আউট অর্জন করতে চান সেটি তৈরি পাওয়ার জন্য একটি কন্টেইনার তৈরি করুন ( < div class="container">)। তারপর, একটি সারি তৈরি করুন (< div class="row">) এবং প্রয়োজনমতো কলামের সংখ্যা যুক্ত করুন। ( .col-*-* ক্লাসের সাহায্যে)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করা যায়।
নিচে বুটস্ট্রাপ বেসিক গ্রীড লে-আউটের কিছু উদাহরণ দেয়া হলো।
সমান প্রস্থ বিশিষ্ট তিনটি কলাম
নিম্নলিখিত উদাহরনে সমান প্রস্থের তিনটি কলাম তৈরি করা হলো যা ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপে সমান তিন ভাগে ভাগ হবে কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটির পর একটি নিচে নিচে অবস্থান করবেঃ
kt_satt_skill_example_id=769
দুইটি অসমান কলাম
নিম্নলিখিত উদাহরনে কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপের জন্য তৈরি করা যায় তা দেখানো হলোঃ
kt_satt_skill_example_id=770
Read more
