Bootstrap কি ????
- Bootstrap হল ফ্রি front-end framework, সহজ এবং দ্রুত গতির web development এর জন্য
- Bootstrap হল HTML এবং CSS নির্ভর মুদ্রণবিদ্যা, ফর্ম, বাটন, টেবিল, নেভিগেটর, মডালস, ইমেজ carousels এবং আরও অনেক কিছু, জাভা স্ক্রিপ্ট প্লাগিন সহ ডিজাইন templates তরির মাধ্যম
- Bootstrap এর সাহায্যে তুমি যে কোন Responsive ডিজাইন ও করতে পারবে
Responsive Web Design কি?
Responsive Web Design হল ওয়েব সাইট তৈরি, যা সংক্রিয় ভাবে যে কোন ডিভাইসের জন্য নিজেদের সেরাটা উপস্থাপন করে, সেটা মোবাইল থেকে শুরু করে যে কোন বড় কম্পিউটারই হোক না কেন ।
Bootstrap ইতিহাস
Bootstrap প্রতিষ্ঠা লাভ করে Mark Otto and Jacob Thornton এর Twitter এর হাত ধরে এবং এটা সর্ব সাধারনের জন্য উন্মুক্ত করে দেয়া হয় August 2011 on GitHub ।
২০১৪ সালে এটা GitHub এর ১ নাম্বার প্রজেক্ট হিসাবে খ্যাতি লাভ করে ।
কেন Bootstrap ব্যবহার করবেন ?
Bootstrap এর উপকারিতাঃ
- সহজলভ্যতাঃ HTML এবং CSS এর ব্যসিক ধারনা থাকলে যে কেউ Bootstrap ব্যবহার করা শুরু করতে পারেন
- উল্লেখযোগ্য বৈশিস্টঃ Bootstrap's responsive CSS মোবাইল, ট্যাব্লেট এবং ডেস্কটপের সাথে মানিয়ে নিতে পারে
- Mobile-first approach: Bootstrap ৩ তে ব্যবহার করা হয়েছে core framework
- ব্রাউজার উপযুক্ততা: Bootstrap বর্তমানে সকল ব্রাজারে কাজ করতে পারে
কোথায় Bootstrap পাওয়া যাবে ??
দুইটা উপায়ে Bootstrap ব্যবহার শুরু করা যায়
- getbootstrap.com থেকে Bootstrap ডাউনলোড করে
- CDN থেকেও Bootstrap করা যায়
ডাউনলোড Bootstrap
আপনি যদি Bootstrap ডাউনলোড করতে চান তাহলে ভিসিট করুন getbootstrap.com এবং নিয়মাবলি অনুসরণ করুন।
Bootstrap CDN
আপনি যদি Bootstrap ডাউনলোড করতে না চান তাহলে আপনি CDN ( Content Delivery Network ) এর সাথে যুক্ত হতে পারেন।
Bootstrap's CSS and JavaScript এর জন্য CDN কে সহযোগিতা দেয় MaxCDN.
MaxCDN:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap. min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Bootstrap CDN ব্যবহারের একটি উপকারিতা
অন্যান্য সাইটে ভিজিট করার সময় অকেক ভিজিটর ইতিমধ্যেই MaxCDN থেকে Bootstrap ডাউনলোড করে ফেলেছে। এর ফলে তারা যখন আপনার সাইটে ভিজিট করে তখন cache থেকেই এটা লোড হয় যা আপনার সাইট দ্রুত লোড হওয়ার সহায়ক। অনেক CDN's নিশ্চিত করেছে যে, যখন তারা একটা ফাইলের জন্য আবেদন করে তখন এটা সবচেয়ে কাছের সার্ভার থেকে লোড হয়, এটাও আপনার সাইট দ্রুত কাজ করার সহায়ক।
Bootstrap দিয়ে আপনার প্রথম ওয়েব সাইট তৈরি করুন
1. doctype হিসেবে HTML5 যোগ করুন
Bootstrap; HTML এলিমেন্ট এবং CSS প্রোপার্টি ব্যবহার করে, ফলে এর জন্য দরকার হয় HTML5 doctype
সবসময় পেজের শুরুতে lang attribute এবং সঠিক character set সাথে HTML5 doctype ব্যবহার করুন।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html>
2. Bootstrap 3 প্রথমত মোবাইল এর জন্য।
Bootstrap 3 ডিজাইন করা হয়েছে Responsive Mobile Devices এর জন্য । Mobile-first স্টাইল কোর ফ্রেমওয়ার্ক এর অংশ।
সঠিক পরিবেশনা এবং টাচ জুমিং নিশ্চিত করার জন্য <head> এলিমেন্টের ভিতরে নিম্নোক্ত <meta> যুক্ত করুন:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width অংশ ডিভাইস এর স্ক্রিন এর প্রসস্থতাকে অনুসরণ করে পেজ এর প্রসস্থতা নির্ধারণ করে (যা ডিভাইসের উপর নির্ভর করে পরিবর্তিত হয়)।
3. Containers বা ধারক
সাইটের উপাদানগুলো মোড়ানোর জন্য Bootstrap এর জন্য একটি ধারক এলিমেন্ট এর প্রয়োজন হয়।
এর জন্য দুই ধরনের ধারক রেয়েছে:
- .container class টি fixed width container প্রদান করে
- .container-fluid class টি full width container প্রদান করে। ভিউ পয়েন্টকে সাপেক্ষে প্রদত্ত প্রসস্থতাকে চক্রাকারে ঘুরানোর জন্য।
বি.দ্রঃ Containers প্রতিস্থাপন যোগ্য নহে ।
দুইটি সাধারণ Bootstrap পেজ
নিচের উদাহরনটি একটি সাধারণ Bootstrap page প্রদর্শন করে (একটি fixed width ধারক পরিবেশনা):
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> </body> </html>
ফলাফল : একটি fixed width ধারক পরিবেশনা
নিচের উদাহরনটি একটি সাধারণ Bootstrap page প্রদর্শন করে (একটি পূর্ণ প্রস্থ ধারক এর সাথে):
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> </body> </html>
ফলাফল : একটি পূর্ণ প্রস্থ ধারক এর সাথে
