বুটস্ট্রাপ টিউটোরিয়াল | Bootstrap Tutorial
বুটস্ট্রাপ টিউটোরিয়াল: আমাদের এই বুটস্ট্রাপ টিউটোরিয়ালটিতে খুব সহজভাবে বুটস্ট্রাপ এর সমস্ত কম্পোনেন্ট আলোচনা করা হয়েছে। যেন আপনিও খুব সহজেই বুঝতে পারেন।
রেসপন্সিভ এবং মোবাইল-ফার্স্ট ওয়েবসাইট ডেভেলপ করার ক্ষেত্রে টুইটার বুটস্ট্রাপ হলো এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এর সবচেয়ে জনপ্রিয় ফ্রেমওয়ার্ক।
এটি ডাউনলোড এবং ব্যবহার সম্পূর্ণ ফ্রি!
আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copy করার একটি অপশন দেখতে পাবেন। copy অপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।
আপনি আপনার এডিটর ওপেন করে copy করা কোড paste করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page-header text-center">
<h1>This is my first page by Bootstrap</h1>
<p>Resize the browser window to show the change!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Hello Learners!</h3>
<p>Bootstrap is a popular free frontend framework on html, css and javascript.</p>
<p>Bootstrap is fun! We hope you are enjoying this.</p>
</div>
<div class="col-sm-4">
<h3>Hello Learners!</h3>
<p>Bootstrap is a popular free frontend framework on html, css and javascript.</p>
<p>Bootstrap is fun! We hope you are enjoying this.</p>
</div>
<div class="col-sm-4">
<h3>Hello Learners!</h3>
<p>Bootstrap is a popular free frontend framework on html, css and javascript.</p>
<p>Bootstrap is fun! We hope you are enjoying this.</p>
</div>
</div>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ কি?
- দ্রুত এবং সহজতর ওয়েব ডেভেলপমেন্টের জন্য বুটস্ট্রাপ হলো একটি ফ্রি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক।
- বুটস্ট্রাপ হলো টাইপোগ্রাফি, ফরম, বাটন, টেবিল, নেভিগেশন, মোডাল, ইমেজ ক্যারোসেল এবং জাভাস্ক্রিপ্ট প্লাগ-ইন সমৃদ্ধ এইচটিএমএল এবং সিএসএস ভিত্তিক টেমপ্লেট ডিজাইন।
- খুব সহজে রেসপন্সিভ ডিজাইন তৈরি করার জন্য বুটস্ট্রাপ ব্যবহার করা হয়।
রেসপন্সিভ ওয়েব ডিজাইন কি?
রেসপন্সিভ ওয়েব ডিজাইন হচ্ছে ওয়েবসাইটের জন্য এমন একটি ডিজাইন যেটি সকল ডিভাইস যেমন ছোট ফোন থেকে বড় ডেস্কটপ সব কিছুতেই সহজেই এডজাস্ট করে নিতে পারে।
বুটস্ট্রাপের ইতিহাস
বুটস্ট্রাপ মার্ক অট্টো ও জ্যাকব থর্টন দ্বারা টুইটারে ডেভেলোপ হয় এবং ২০১১ সালে গিটহাবে ওপেন সোর্স প্রোডাক্ট হিসেবে মুক্তি পায়।
২০১৪ সালের জুন মাসে বুটস্ট্রাপ গিটহাবে ১ নম্বর প্রোজেক্টে হিসেবে বিবেচিত হয়!
বুটস্ট্রাপ কেনো ব্যবহার করবেন?
বুটস্ট্রাপ এর সুবিধাঃ
- সহজ ব্যবহারঃ যেকেউ এইচটিএমএল এবং সিএসএস জানলে বুটস্ট্রাপ ব্যবহার শুরু করতে পারবেন।
- রেসপন্সিভ ফিচারঃ বুটস্ট্রাপের রেসপন্সিভ সিএসএস ফোন, ট্যাবলেট এবং ডেস্কটপে সহজেই এডজাস্ট করে।
- মোবাইল-ফার্স্ট প্রায়োরিটিঃ বুটস্ট্রাপ(৩) এ, মোবাইল-ফার্স্ট স্টাইল কোর ফ্রেমওয়ার্ক এর একটি অংশ।
- ব্রাউজার সাপোর্টঃ বুটস্ট্রাপ প্রায় সকল আধুনিক ব্রাউজারেই সাপোর্ট করে।(chrome, Firefox, Internet Explorer, Safari, এবং Opera)
বুটস্ট্রাপ কোথায় পাবেন?
আপনার ওয়েব সাইটে বুটস্ট্রাপ ব্যবহার করার জন্য দুইটি পদ্ধতি আছে।
যেভাবে পাবেনঃ
getbootstrap.comথেকে ডাউনলোড করে- সিডিএন(CDN) থেকে বুটস্ট্রাপ যুক্ত করে
বুটস্ট্রাপ ডাউনলোড
যদি আপনি নিজের বুটস্ট্রাপ ডাউনলোড এবং হোস্ট করতে চান তাহলে getbootstrap.com, এ যান এবং পদ্ধতিগুলো অনুসরন করুন।
বুটস্ট্রাপ সিডিএন
যদি আপনি নিজে থেকে ডাউনলোড এবং হোস্ট করতে না চান তাহলে আপনি এটি সিডিএন থেকে যুক্ত করতে পারবেন (CDN = Content Delivery Network)।
MaxCDN বুটস্ট্রাপ সিএসএস এবং জাভাস্ক্রিপ্ট এর সিডিএন সাপোর্ট এর জন্য সহযোগিতা করে। এগুলোর পাশাপাশি এছাড়াও আপনাকে অবশ্যই জেকুয়েরি লাইব্রেরি যুক্ত করতে হবেঃ
<!-- Update bootstrap css minified file -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Update jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Update bootstrap js minified file -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
বুটস্ট্রাপ সিডিএন ব্যবহারের একটি সুবিধাঃ
যখন ইউজাররা অন্যান্য সাইট ভিজিট করে তখন MaxCDN থেকে বুটস্ট্রাপ ডাউনলোড হয়ে যায়। এর ফলে, যখন তারা আপনার ওয়েবসাইটে ভিজিট করবে তখন এটি cache থেকে লোড হবে যা দ্রুততর লোডিং নিশ্চিত করবে।
বুটস্ট্রাপ দিয়ে প্রথম ওয়েব পেজ তৈরি করুন
১। এইচটিএমএল(৫) DOCTYPE যুক্ত করুন।
বুটস্ট্রাপে এইচটিএমএল এলিমেন্ট এবং সিএসএস প্রোপার্টি ব্যবহৃত হয়, যার জন্য এইচটিএমএল(৫) DOCTYPE নির্ধারন করা বাধ্যতামূলক।
সবসময়ই পেজের শুরুতেই এইচটিএমএল(৫) DOCTYPE যুক্ত করুনঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
২। বুটস্ট্রাপ(৩) মোবাইল-ফার্স্ট
বুটস্ট্রাপ(৩) মোবাইল ডিভাইসকে বেশি গুরুত্ব দিয়ে রেসপন্সিভ করা হয়েছে। মোবাইল-ফার্স্ট স্টাইল, কোর ফ্রেমওয়ার্কের একটি অংশ।
যথাযথ আউটপুট এবং টাচ জুমিং এর জন্য <head> এলিমেন্টের মধ্যে <meta> ট্যাগ নিশ্চিত করুনঃ
<meta name="viewport" content="width=device-width, initial-scale=1">
ডিভাইসের স্ক্রিন-প্রস্থের উপর ভিত্তি করে পেজের প্রস্থ সেট করার জন্য width=device-width ব্যবহার করা হয়েছে (যা ডিভাইসের উপর নির্ভর করে)।
পেইজ যখন ব্রাউজার দ্বারা প্রথম লোড হয় তখন এর ইনিশিয়াল জুম সেট করার জন্য initial-scale=1 ব্যবহার করা হয়েছে।
৩। কন্টেইনার
বুটস্ট্রাপে এলিমেন্টকে একটি কন্টেইনারের মধ্যে রাখার প্রয়োজন হয়।
বুটস্ট্রাপে দুই ধরনের কন্টেইনার রয়েছে। আপনার প্রয়োজন অনুযায়ী কন্টেইনার বাচাই করে নিনঃ
- রেসপন্সিভ ফিক্সড প্রস্থের কন্টেইনার তৈরি করার জন্য
.containerক্লাস ব্যবহার করুন। - ভিউপোর্টের সম্পূর্ণ প্রস্থ মেপে পূর্ণ প্রস্থের কন্টেইনার করার জন্য
.container-fluidক্লাস ব্যবহার করুন।
নোটঃ কন্টেইনারগুলো নেস্টেবল নয় (আপনি চাইলেই কন্টেইনারের মধ্যে কন্টেইনার রাখতে পারবেন না)।
দুটি বেসিক বুটস্ট্রাপ পেজ
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (ফিক্সড প্রস্থের কন্টেইনার সহ)
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello Learners!</h1>
<p>Bootstrap is popular free frontend framework on html, css and javascript.</p>
<p>Bootstrap is fun! We hope you are enjoying this.</p>
</div>
</body>
</html>
ফলাফল
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (পূর্ণ প্রস্থের কন্টেইনার সহ)
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello Learners!</h1>
<p>Bootstrap is popular free frontend framework on html, css and javascript.</p>
<p>Bootstrap is fun! We hope you are enjoying this.</p>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ রেফারেন্স
স্যাট একাডেমীতে বুটস্ট্রাপ সিএসএস ক্লাস, কম্পোনেন্ট এবং জাভাস্ক্রিপ্ট প্লাগ-ইনের সম্পূর্ণ রেফারেন্স রয়েছে। এছাড়াও প্রত্যেক অধ্যায়কেই "নিজে চেষ্টা করি " উদাহরণ দিয়ে সাজানো হয়েছে:
- বুটস্ট্রাপ সিএসএস বেসিক টেক্সট
- বুটস্ট্রাপ সিএসএস বাটন
- বুটস্ট্রাপ সিএসএস ফরম
- বুটস্ট্রাপ সিএসএস ইমেজ
- বুটস্ট্রাপ সিএসএস টেবিল
- বুটস্ট্রাপ গ্লিফ কম্পোনেন্ট
- বুটস্ট্রাপ ড্রপডাউন কম্পোনেন্ট
- বুটস্ট্রাপ ন্য্যাভ কম্পোনেন্ট
- বুটস্ট্রাপ জেএস এফিক্স
- বুটস্ট্রাপ জেএস এলার্ট
- বুটস্ট্রাপ জেএস বাটন
- বুটস্ট্রাপ জেএস ক্যারোসেল
- বুটস্ট্রাপ জেএস কলাপ্স
- বুটস্ট্রাপ জেএস ড্রপডাউন
- বুটস্ট্রাপ জেএস মোডাল
- বুটস্ট্রাপ জেএস পপওভার
- বুটস্ট্রাপ জেএস স্ক্রলস্পাই
- বুটস্ট্রাপ জেএস ট্যাব
- বুটস্ট্রাপ জেএস টুলটিপ