বুটস্ট্রাপ ব্যবহার করে রেসপনসিভ ওয়েবসাইট ডিজাইন ও ডেভেলপমেন্ট (USING OPEN SOURCE FRAMEWORK IN BOOTSTRAP)?
দ্রুত এবং সহজতর ওয়েব ডেভেলপমেন্টের জন্য বুটস্ট্রাপ হলো একটি ফ্রি ফ্রন্ট-ইন্ড ফ্রেমওয়ার্ক। বুটস্ট্রাপ টাইপোগ্রাফি, ফরম, বাটন, টেবিল, নেভিগেশন, মোডাল, ইমেজ ক্যারোসেল এবং জাভাস্ক্রিপ্ট প্লাগ-ইন-সমৃদ্ধ এইচটিএমএল এবং সিএসএস-ভিত্তিক টেমপ্লেট ডিজাইন । খুব সহজে রেসপন্সিভ ডিজাইন তৈরি করার জন্য বুটস্ট্রাপ ব্যবহার করা হয়। বুটস্ট্রাপ মার্ক অট্টো ও জ্যাকব থর্টন দ্বারা টুইটারে ডেভেলপ হয় এবং ২০১১ সালে গিটহাবে ওপেন সোর্স প্রোডাক্ট হিসেবে মুক্তি
পায়। ২০১৪ সালের জুন মাসে বুটস্ট্রাপ গিটহাবে ১ নম্বর প্রোজেক্ট হিসেবে বিবেচিত হয়।
বুটস্ট্রাপ-এর সুবিধা ঃ
সহজ ব্যবহার ঃ যে-কেউ এইচটিএমএল এবং সিএসএস জানলে বুটস্ট্রাপ ব্যবহার করতে পারবে।
রেসপন্সিভ ফিচার : বুটস্ট্রাপের রেসপন্সিভ সিএসএস ফোন, ট্যাবলেট এবং ডেস্কটপে সহজেই অ্যাডজাস্ট করে।
মোবাইল-ফার্স্ট প্রায়োরিটি ঃ বুটস্ট্রাপ (৩) এ, মোবাইল-ফার্স্ট স্টাইল কোর ফ্রেমওয়ার্ক-এর একটি অংশ।
ব্রাউজার পাপোর্ট : বুটস্ট্রাপ প্রায় সকল আধুনিক ব্রাউজারেই সাপোর্ট করে। (Chrome, Firefox, Internet Explorer, Safari,Brave এবং Opera)
বুটস্ট্রাপ ফাইল স্ট্রাকচারঃ
bootstrap
| css/
| - •• bootstrap.css
| - •• bootstrap.min.css
| - js/
| -•• bootstrap.js
| -•• bootstrap.min.js
|-..img/
|- glyphicons-halflings.png
|•• glyphicons-halflings-white.png
••• README.md
বুটস্ট্র্যাপ ডাউনলোডে তিনটি ফোল্ডার রয়েছে CSS, JS, এবং IMC ইত্যাদি। প্রকল্পের রুটে এগুলো যোগ করতে হবে। এছাড়াও সিএসএস এবং জাভাস্ক্রিপ্ট-এর minified সংস্করণ এতে অন্তর্ভুক্ত করা হয়। এটি অসম্পূর্ণ এবং minified উভয় সংস্করণ অন্তর্ভূক্ত করা আবশ্যক নয়।
বুটস্ট্যাপের সাথে, CSS স্টাইল শিট এবং জাভাস্ক্রিপ্টের বেসিক ফরম্যাট---
<!DOCTYPE html> shtml>
<head>
<title> Bootstrap 101 Template</title> <link href="css/ bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hi,its me!</h1>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
বুটস্ট্র্যাপ-এর প্রয়োজনীয়তা (Necessity of bootstrap) :
বুটস্ট্র্যাপ একটি ফ্রন্ট-ইন্ড ফ্রেমওয়ার্ক, যা ডায়নামিক ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করার জন্য তৈরি করা হয়েছে। এটি একটি সর্বাধিক পছন্সের ফ্রন্ট-ইন্ড কাঠামোর মধ্যে একটি, কারণ এটি ওয়েবসাইট বিকাশের জন্য সহজ এবং দ্রুত প্রক্রিয়াকরণকে সহায়তা করে। এটি সব মেইন ব্রাউজার এবং দ্রুত লোড হয় এমন প্রতিক্রিয়াশীল ওয়েব সমর্থন করে। বুটস্ট্র্যাপ বিভিন্ন ইন্টারফেস উপাদানগুলোর জন্য এইচটিএমএল এবং সিএসএস নকশাভিত্তিক টেমপ্লেটগুলো ধারণ করে এবং ওয়েব ডেভেলপমেন্টকে সহজ করে তুলতে সাহায্য করে, সিএসএস আপডেট করে। ডেভেলপারদের ইন্টারঅ্যাকশন উপাদানগুলোর উপর মনোযোগী হতে হয় কারণ বুটস্ট্র্যাপ নিজেই ডাটা স্ট্যান্ডার্ড মানগুলোর যত্ন নেয়, যা পরে পরিবর্তন করা যায়। বুটস্ট্যাপ ইন্টারনেট এক্সপ্লোরার, গুগল ক্রোম, অপেরা, ফায়ারফক্স এবং সাফারি ইত্যাদি ব্রাউজার-এর সর্বশেষ সংস্করণের সাথে প্রায়ই সামঞ্জস্যপূর্ণ। এই প্রতিক্রিয়াশীল ওয়েব ডিজাইনকে সমর্থন করে এবং ডিজাইসের বৈশিষ্ট্যগুলো বিবেচনা করে গতিশীলভাবে ওয়েব পেজের বিন্যাস সমন্বয় করে। নিম্নে বুটস্ট্রাপ-এর কয়েকটি সুবিধা বা প্রয়োজনীয়তা তুলে ধরা হলো ঃ
স্পিড ডেভেলপমেন্ট (Speed divelopment)ঃ উন্নয়ন গতি হচ্ছে প্রধান সুবিধার একটি। যদি কোনো অ্যাপ্লিকেশন বা ওয়েবসাইট অবিলম্বে বিকাশ করতে হয়, তবে বুটস্ট্র্যাপ ব্যবহার করা আবশ্যক। এটি স্ক্র্যাচ থেকে কোড গঠন করার পরিবর্তে কম CSS কার্যকারিতা এবং কোডের প্রাক-নির্মিত ব্লকগুলো সরবরাহ করে কোডিং প্রচেষ্টাকে সংরক্ষণ করতে সহায়তা করে। বুটস্ট্র্যাপের তৈরি থিমগুলো দ্রুততর রুটের মাধ্যমে চাহিদাগুলো অর্জন করতে সহায়তা করবে।
সংবেদনশীলতা (Responsiveness)ঃ CSS পূর্বাভাস অনুসারে 2013 থেকে 2018 সালের মধ্যে বিশ্বব্যাপী মোবাইল ডাটা ট্র্যাফিক 11 গুণ বৃদ্ধি পাবে । এই পরিসংখ্যান বিভিন্ন ধরনের মোবাইল ডিভাইসগুলোতে প্রতিক্রিয়াশীল ওয়েবসাইটের প্রয়োজনীয়তার দিক নির্দেশ করে।
বুটস্ট্র্যাপ প্রতিক্রিয়াশীল লে-আউট এবং 12-কলাম গ্রিড সিস্টেমের সাথে সজ্জিত করা হয়েছে, যা ওয়েবসাইটকে গতিশীলভাবে উপযুক্ত স্ক্রিন রেজোলুশন-এ সামঞ্জস্য করতে সহায়তা করে। বুটস্ট্র্যাপের প্রতিক্রিয়াশীল ইউটিলিটি ক্লাস' বৈশিষ্ট্যটি বিশেষ ক্রিমের আকারের নির্দিষ্ট বিভাগের সামগ্রী লুকানো বা প্রদর্শনে সক্ষম।
দৃঢ়তা Consistency) : কনসিসটেন্সি বুটস্ট্র্যাপ প্রবর্তনের পিছনে মৌলিক নীতি ছিল। এটা ডিজাইনার/বিকাশকারী নির্বিশেষে কাজ করে,.যা চূড়ান্ত ধারাবাহিকতা নিশ্চিত করে। তা ছাড়া, ফলাফল বিভিন্ন ব্রাউজারজুড়ে অভিন্নভাবে কাজ করে এবং আউটপুট একই থাকে।
স্বনির্ধারিত (Customizable) : বুটস্ট্র্যাপ প্রচুর কাস্টমাইজেশন সহজতর এবং তাদের নির্দিষ্টকরণ অনুযায়ী ওয়েবসাইট ডিজাইনারদের টেলর তৈরিতে সাহায্য করে। একটি কাস্টমাইজড ওয়েবসাইট তৈরি করতে যে-কোনো বৈশিষ্ট্য নির্বাচন করার সুবিধা রয়েছে। এই বৈশিষ্ট্য দিয়ে তারা যা প্রয়োজন তা পরিত্রাণ পেতে পারে।
সমর্থন (Support) : বুটস্ট্যাপ একটি অসীম সমর্থন সম্প্রদায়ের সাথে অবিলম্বে সমস্যার সমাধান করতে সাহায্য করে। বুটস্ট্যাপ কোনো নতুন সমস্যা সমাধানের জন্য ক্রমাগত আপডেটগুলো প্রকাশ করে। বর্তমানে এটি 9000টির বেশি এবং 500 অবদানকারীর সাথে গিথহাব দ্বারা ডেভেলপ, হোস্ট এবং রক্ষণাবেক্ষণ করা হচ্ছে। বুটস্ট্র্যাপ স্বতন্ত্র কাঠমোসমৃদ্ধ। এটি প্রতিক্রিয়াশীল উন্নয়নের জন্য উদ্ভাবনের সর্বশেষতম ওয়েবসাইট এবং অ্যাপ্লিকেশনগুলোর নকশাকে দ্রুততর, সহজ এবং আরও ভালো করতে সহায়তা করে।
বুটস্ট্রাপ দিয়ে ওয়েব পেজ তৈরি (Creat web page by using bootstrap) :
(i) এইচটিএমএল (৫) DOCTYPE যুক্ত করুন : বুটস্ট্রাপে এইচটিএমএল এলিমেন্ট এবং সিএসএস প্রোপাটি ব্যবহৃত হয়, যার জন্য এইচটিএমএল (৫) DOCTYPE নির্ধারণ করা বাধ্যতামূলক। সবসময়ই পেজের শুরুতেই এইচটিএমএল (৫) DOCTYPE
যুক্ত করতে হবেঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
(II) বুটস্ট্রাপ (4) মোবাইল-ফার্স্ট ঃ বুটস্ট্রাপ (4) মোবাইল ডিভাইসকে বেশি গুরুত্ব দিয়ে রেসপন্সিভ করা হয়েছে। মোবাইল-ফার্স্ট স্টাইল, কোর ফ্রেমওয়ার্কের একটি অংশ। যথাযথ আউটপুট এবং টাচ জুমিং-এর জন্য <head> এলিমেন্টের মধ্যে <meta> ট্যাগ নিশ্চিত করতে হবেঃ
<meta name="viewport" content="width=device-width, Initial-scale=1">
ডিভাইসের স্ক্রিন-প্রস্থের উপর ভিত্তি করে পেজের প্রস্থ সেট করার জন্য width=device-width ব্যবহার করা হয়েছে (যা ডিভাইসের উপর নির্ভর করে)। পেজ যখন ব্রাউজার দ্বারা প্রথম লোড হয় তখন এর ইনিশিয়াল জুম সেট করার জন্য initial-scale=1 ব্যবহার করা হয়েছে।
(iii) কন্টেইনার ঃ বুটস্ট্রাপে এলিমেন্টকে একটি কন্টেইনারের মধ্যে রাখার প্রয়োজন হয়। বুটস্ট্রাপে দুই ধরনের কন্টেইনার রয়েছে। প্রয়োজন অনুযায়ী কন্টেইনার বাছাই করে নিতে হবে।
• রেসপন্সিভ ফিক্সড প্রস্তের কন্টেইনার তৈরি করার জন্য container ক্লাস ব্যবহার করতে হবে।
* ভিউপোর্টের সম্পূর্ণ প্রস্থ মেপে পূর্ণ প্রস্থের কন্টেইনার করার জন্য .contanier-fluid ক্লাস ব্যবহার করতে হবে।
বুটস্ট্রাপ সিডিএন (Bootstrap CDN) : যদি আপনি নিজে থেকে ডাউনলোড এবং হোস্ট করতে না চান তাহলে আপনি এটি সিডিএন থেকে যুক্ত করতে পারবেন (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/33.7/js/bootstrap.min.js"></script>
বুটস্ট্রাপ সিডিএন ব্যবহারের একটি সুবিধা : যখন ইউজাররা অন্যান্য সাইট ভিজিট করে তখন MaxCDN থেকে বুটস্ট্রাপ ডাউনলোড হয়ে যায়। এর ফলে, যখন তারা অন্যের ওয়েবসাইটে ভিজিট করবে তখন এটি cache থেকে লোড হবে, যা দ্রুততর লোডিং নিশ্চিত করবে।
কাস্টমাইজ ইনস্টলেশন (Customize installation):
বুটস্ট্র্যাপ কাস্টমাইজ করার বিভিন্ন কারণ রয়েছে। বিদ্যমান বুটস্ট্র্যাপ শৈলী (যেমনঃ রং, ফন্ট বা সীমানা) পরিবর্তন করা। বুটস্ট্রাস্ট গ্রিড বিন্যাস (যেমন ঃ ব্রেকপয়েন্ট বা গাটার প্রস্থসমূহ) পরিবর্তন করা। নতুন কাস্টম ক্লাসের সাথে বুটস্ট্যাপ ক্লাসের বর্ধন করা (যেমনঃ বিটিএন-কাস্টম) ইত্যাদি। বুটস্ট্র্যাপ কাস্টমাইজ করার ২টি উপায় রয়েছে-
1. CSS ব্যবহার কম শক্তিশালী এবং
2.SASS ব্যবহার করে উন্নত পদ্ধতি।
(1) সিম্পল সিএসএস ওভার রিড (Simple CSS Overrides):
এ পদ্ধতিটি CSS বিধিগুলোকে সংজ্ঞায়িত করে কাজ করে, যা বুটস্ট্যাপের সিএসএস নিয়মগুলোর সাথে মিলে যায়, যা রুলকে “ওভাররাইড” করে। এই পদ্ধতিটি বজায় রাখা সহজ এবং কাস্টমাইজড রুলস ভাঙা ছাড়াই বুটস্ট্র্যাপের ভবিষ্যত ক্ষুদ্র সংস্করণগুলোতে আপগ্রেড করার অনুমতি দেয়। সিএসএস অর্ডার মেটারে সিএসএস রুলের সর্বশেষ সংজ্ঞা পূর্বনির্ধারিত কোনো বিধিগুলোকে ওভাররাইড করবে, যেখানে CSS সিলেক্টর এবং বৈশিষ্ট্যগুলো মিলবে। সিএসএস কাস্টমাইজেশন একটি পৃথক custom.css ফাইলে রাখা হয়, যাতে bootstrap.css unmodified থাকে। Custom.css এর রেফারেন্স বুটস্ট্রাপ, CSS অনুসরণ করে, যা ওভাররাইড কাজ করে।
link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css"> custom.css file যোগ করতে হবে। পরিবর্তন-এর প্রয়োজন হলে পরবর্তী সময়ে পরিবর্তন করা সম্ভব।
(ii) SASS ব্যবহার করে বুটস্ট্র্যাপ কাস্টমাইজ (Customize Bootstrap using SASS):
SASS একটি স্টাইলশিট ভাষা এবং CSS প্রাক-প্রসেসর। কোনো ওয়েব ব্রাউজার দ্বারা বুঝার জন্য CSS-এ সংকলিত হওয়া আবশ্যক। SASS-এ লেখা ফাইলগুলোতে সাধারণত .scss extension থাকে। সমগ্র বুটস্ট্যাপ 4 CSS উৎস SASS-এ লেখা হয়। যেহেতু সম্পূর্ণ বুটস্ট্র্যাপ 4 সিএসএস উৎস SASS ভাষাতে লেখা হয়েছে, তাই বুটস্ট্যাপ 4 সিএসএস ফাইলগুলো SASS কম্পাইলার (AKA প্রি-প্রসেসর) ব্যবহার করে সংকলিত হয়। অতএব, এটি কেবলমাত্র বুঝে যে SASS বুটস্ট্র্যাপ কাস্টমাইজ করার প্রস্তাবিত উপায়।
বুটস্ট্র্যাপ 4 SASS ফাইল এবং ফোল্ডার গঠন নিম্নরূপ
--\bootstrap
|--\scss
II-- \mixins
II - \utilities
।। -- functions.scss
|| |--variables.acsa
|| (..more bootstrap scss source files)
|| - bootstrap-grid.scss.
|| - bootstrap-reboot.acs
|| - bootstrap.scss
Bootstrap.scss ফাইলটি "প্রধান” ফাইল, যা SASS@import ".." বিবৃতি ব্যবহার করে অন্যান্য সমস্ত SCSS@import ফাইলগুলোকে উল্লেখ করে।
-Variables.scss ফাইলে সমস্ত SASS ভেরিয়েবল রয়েছে, যা কাস্টমাইজ এবং ওভাররাইড করতে সক্ষম।
-Variables.scss ভেরিয়েবল রয়েছে, যা functions.scss এবং -- mixins.scss ফাইলগুলোতে নির্ভরশীল।
বুটস্ট্র্যাপ CSS গ্রিড (bootstrap-grid.scss) এর সাথে বা ছাড়াও কম্পাইল এবং রিবুট (বুটস্ট্র্যাপ রিবুট. সিএসএস) করা যায়।
রেসপন্সিভ ডিজাইন (Responsive design): রেসপপিত ওয়েব ডিজাইন হচ্ছে ওয়েবসাইটের জন্য এমন একটি ডিজাইন, যেটি সকল ডিভাইস যেমন ছোট ফোন থেকে বড় ডেস্কটপ সব কিছুতেই সহজেই অ্যাডজাস্ট করে নিতে পারে। রেসপন্সিভ ডিজাইন ওয়েব পেজ তৈরির একটি পদ্ধতি, যা ফ্লেক্সিবল লে-আউট, ফ্লেক্সিবল চিত্র এবং ক্যাসকেডিং স্টাইল শিট মিডিয়া কুয়েরি ব্যবহার করে। প্রতিক্রিয়াশীল নকশার (Responsive design) লক্ষ্য ওয়েব পেজ তৈরি করা, যা দর্শকদের স্ক্রিনের আকার এবং অভিযোজন শনাক্ত করে এবং সেই অনুযায়ী লে-আউটটি পরিবর্তন করে।
কন্টেইনার ক্লাস (Container class)ঃ
বুটস্ট্র্যাপে কন্টেইনার লে-আউটের রেসপন্সিভ বিহেভিয়ার-এর সাথে সম্পর্কিত কন্টেন্ট মার্জিন সেট করে ব্যবহার করা হয়। এতে সারি উপাদান রয়েছে এবং সারি উপাদান হলো কলামের ধারক (গ্রিড সিস্টেম হিসাবে পরিচিত)।কন্টেইনার ক্লাস বক্সড কন্টেন্ট তৈরি করতে ব্যবহার করা হয়।
বুটস্ট্যাপে দুটি কন্টেইনার ক্লাস রয়েছে:
(1) কন্টেইনার
(2) কন্টেইনার-ফ্লুইড।
একটি কন্টেইনার-এর বেসিক লে-আউট নিম্নে দেয়া হলো---
1. <html>
2. <body>
3. <div class="container">
4. <div class="row">
5.
6. <div class="col-md-xx'></div>
7. </div>
8. <div class="row">
9. <div class="col-md-xx"></div>
10.
11. </div>
12. </div>
13. </body>
14. </html>
বুটস্ট্রাপ গ্রিড (BOOTSTRAP GRID):
গ্রিড ক্লাস (Grid class) :
বুটস্ট্রাপের গ্রিড সিস্টেমের মাধ্যমে ওয়েবপেজকে ১২ কলামে ভাগ করা যায়।যদি ১২ কলামের মধ্যে সবগুলো কলাম একত্রে ব্যবহার করা না হয় তাহলে কলামগুলোর বিভিন্ন গ্রুপ তৈরি করে অধিক গ্রন্থের কলাম তৈরি করা সম্ভব।বুটস্ট্রাপের গ্রিড সিস্টেম সম্পূর্ণ রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়।
বুটস্ট্রাপ গ্রিড সিস্টেমে চারটি ক্লাস রয়েছে—'
(i) xs (মোবাইলের জন্য )
(ii) sm (ট্যাবলেটের জন্য)
(iii) md (ল্যাপটপের জন্য)
(iv) lg (বড় ডেস্কটপের জন্য)
অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাসগুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।
নিচে বুটস্ট্রাপ গ্রিডের বেসিক গঠন দেখানো হলো--
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-'-"></div>
</div>
<div class="row">...</div>
বুটস্ট্যাপ গ্রিড সিস্টেমের নিয়মঃ
সঠিক অ্যালাইনমেন্ট ও প্যাডিং-এর জন্য রো-গুলোকে অবশ্যই container (এর প্রস্থ পরিবর্তিত হয় না) অথবা
• container-fluid ( গ্রন্থ পুরো স্ক্রিনে প্রসারিত হতে পারে) এর ভিতরে রাখতে হবে।
•কতকগুলো কলাম নিয়ে একটি হরিজন্টাল গ্রুপ তৈরি করতে রো ব্যবহার করতে হবে।
• কন্টেন্টকে অবশ্যই কলামের ভিতরে রাখতে হবে এবং কলামগুলোই শুধুমাত্র রো-এর ইমিডিয়েট চাইল্ড হতে পারে।
• .row এবং col-sm-4 এর মতো পূর্ব-সংজ্ঞায়িত ক্লাসগুলো তাৎক্ষণিকভাবে তৈরি গ্রিড লে-আউটের জন্য ব্যবহার করা যায়।
• কলাম-এর কন্টেন্টগুলোর মধ্যে প্যাডিং এর মাধ্যমে ফাঁক তৈরি করে। এই প্যাডিং rows এর উপর নেগেটিভ মার্জিনের মাধ্যমে প্রথম ও শেষ কলামের জন্য রোতে অফসেট থাকে।
• কতটি কলামে প্রসারিত করবো তা ১২টি কলামের নাম্বার নির্দিষ্ট করে দেয়ার মাধ্যমে গ্রিড কলাম তৈরি করতে পারা যায।উদাহরণস্বরূপ- তিনটি সমান কলাম তিনটি col-sm-4 ব্যবহার করতে হবে।
প্রথমত যে লে-আউট অর্জন করতে হবে সেটি পাওয়ার জন্য একটি কন্টেইনার তৈরি করতে হবে (<div class="container">)!
তারপর, একটি সারি তৈরি করতে হবে (<div class="row">) এবং প্রয়োজনমতো কলামের সংখ্যা যুক্ত করতে হবে। (.col-..
ক্লাসের সাহায্যে। মনে রাখতে হবে, প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করা যায়।
কলাম অফসেট (column offset) : কলামকে ডানদিকে সরিয়ে নেয়ার জন্য col-*-offset- ক্লাস ব্যবহার করতে হবে। এটি কলামের বাম দিকের মাজিন বৃদ্ধি (কলামের গ্রন্থের সমান) করে। নিম্নে উদাহরণ দেওয়া হলো --
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid 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="container-fluid">
<h1>Hello Learners!</h1>
<div class="row">
<div class="col-sm-5 col-md-6" style="background colour:#ff9999;colour:white;">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" style="background colour:#c299ff;colour.wiite;">.col-sm-5 col-sm-offset-2 col-md-6 .col-md-offset-0</div>
</div>
</div>
</body>
</html>
পুশ এবং পুল কলাম (Push and pull column):
গ্রিড কলামের ক্রম পরিবর্তন করার জন্য. col-*-push- ক্লাস ব্যবহার করতে হবে। উদাহরণ নিম্নরূপ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid 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="container-fluid"> <h1>Hello Learners!</h1>
<div class="row">
<div class="col-sm-4 col-sm-push-8" style="background colour:#ff9999;colour:white;">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4" style="background colour:#c299ff;colour:white;">.col-sm-8 .col-sm-pull-4</div>
</div>
</div>
</body> </html>
নেস্টেড কলাম (Nested column) :
দুটি কলামের মধ্যে আরো দুটি নেস্টেড কলাম ব্যবহার করা যায়। নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে, ছোট স্ক্রিনের জন্য কীভাবে ভিন্ন প্রস্থবিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় ক্রিনের জন্য একইভাবে কাজ করবে। দুটি কলামের মধ্যে বড় কলামটিকে আবার সমান দুই ভাগে ভাগ করা হয়েছে। মোবাইল ডিভাইসের ক্ষেত্রে সবগুলো কলামই নিচে নিচে অবস্থান করবে :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid 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="container-fluid">
<h1>Hello Learners!</h1>
<div class="row">
<div class="col-sm-9" style="background-colour:#ff9999;colour:white;">nine column
<div class="row">
<div class="col-sm-4" style="background-colour:red;colour:white;">four column</div>
<div class="col-sm-8" style="background-colour.green;colour:white;">eight column</div>
</div>
</div>
<div class="col-sm-3" style="background-colour:#c299ff;colour:white;">three column</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment