Feb 14

Bootstrap Case: নেভিগেশান বার যোগ করা (Adding a Navigation Bar)

শেখ মাহফুজুর রহমান

 

নেভিগেশান বার একটি নেভিগেশান বার হলো একটি নেভিগেশান হেডার যা পেজের উপরের দিকে যোগ করা হয়। বুটস্ট্র্যাপের মাধ্যমে একটি নেভিগেশান বারকে স্ক্রিনের সাইজ অনুযায়ী এক্সট্যান্ড অথবা কলাপ্স করা যায়। অর্থাৎ ডিভাইসের ধরণ অনুসারে সুবিধামতো নেভিগেশান বারকে সেটাপ করা যায়। <nav class=”navbar navbar-default”> এর সাহাজ্যে একটি সাধারণ নেভিগেশান বার তৈরি করা যায়। নিচের উদাহরণে কিভাবে পেজের টপে নেভিগেশান বার যোগ করতে হয় তা দেখানো হয়েছেঃ

<body>
 <nav class="navbar navbar-default">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li> 
         <li><a href="#">Page 3</a></li> 
       </ul>
     </div>
   </div>
 </nav>
 <body>

 

নোটঃ এই টিউটোরিয়ালটির সবগুলো উদাহরণই একটি নেভিগেশান বার তৈরি করবে যা ছোট স্ক্রিনে অনেক বেশি জায়গা দখল করে (যাহোক, বড় স্ক্রিনে নেভিগেশান বারটি শুধু এক লাইনের হিসেবে দেখাবে – কারণ বুটস্ট্র্যাপ রেসপন্সিভ হয়ে থাকে)। ছোট স্ক্রিনের এই সমস্যাটি এই চ্যাপ্টারের সর্বশেষ উদাহরণে সমধান করা হবে। ইনভার্টেড নেভিগেশান বার আপনি যদি ডিফল্ট নেভিগেশান বারের স্টাইল পছন্দ না করেন, বুটস্ট্র্যাপে এজন্য একটি অল্টারনেটিভ রয়েছে। শুধু .navbar-inverse এর মধ্যে .navbar-default ক্লাসটি পরিবর্তন করে দিনঃ

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

ফিক্সড নেভিগেশান বার নেভিগেশান বারটি পেজের উপরে বা নিচে ফিক্সড হতে পারে। ফিক্সড নেভিগেশান বার পেজ স্ক্রল করা হলেও একটি জায়গায় ফিক্সড বা স্থির থাকে। .navbar-fixed-top ক্লাসটি নেভিগেশান বারকে পেজের উপরে ফিক্সড করে রাখেঃ

<nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

.navbar-fixed-bottom ক্লাসটি নেভিগেশান বারকে পেজের নিচের দিকে ফিক্সড করে দেয়ঃ

<nav class="navbar navbar-inverse navbar-fixed-bottom">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>

 

ড্রপডাউনসহ নেভিগেশান বার নেভিগেশান বার ড্রপডাউন মেন্যুকেও ধারণ করতে পারে। নিচের উদাহরণটি “Page 1” বাটনের জন্য একটি ড্রপডাউন মেন্যু যোগ করেঃ

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
           <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">Page 1-1</a></li>
             <li><a href="#">Page 1-2</a></li>
             <li><a href="#">Page 1-3</a></li>
           </ul>
         </li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

রাইট-অ্যালাইন্ড নেভিগেশান বার .navbar-right ক্লাসটি নেভিগেশান বার বাটনগুলোকে পেজের ডানদিকে অ্যালাইন করতে ব্যবহৃত হয়। নিচের উদাহরণে আমরা নেভিগেশান বারের ডান দিকে একটি “Sign Up” এবং একটি “Login” বাটন যোগ করি। প্রত্যেকটি নতুন বাটনে আমরা একটি গ্লাইফিকোনও যোগ করিঃ

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

নেভিগেশান বারকে কলাপস করা নেভিগেশান বার একটি ছোট স্ক্রিনে( যেমন মোবাইল) অনেক বেশি জায়গা নিয়ে নেয়। আমদের উচিত নেভিগেশান বারটিকে কলাপস বা হাইড করে রাখা এবং যখন দরকার তখন দেখানো। নিচের উদাহরণে নেভিগেশান বারটি উপরের ডান দিকের একটি বাটন দ্বারা প্রতিস্থাপিত হয়েছে। যখন বাটনটিতে ক্লিক করা হয় তখনই নেভিগেশান বারটি দেখা যায়ঃ

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" 
       data-target="#myNavbar">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span> 
       </button>
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div class="collapse navbar-collapse" id="myNavbar">
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li> 
         <li><a href="#">Page 3</a></li> 
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
       </ul>
     </div>
   </div>
 </nav>

Feb 14

Bootstrap Case: একটি মেনু যোগ করার পদ্ধতি (Adding a Menu)

মেনু

অধিকাংশ ওয়েব পেইজ এর ই কিছু Menu রয়েছে।

Html এ, একটি মেনু প্রায়ই একটি unordered তালিকা <ul> এর মধ্যে সংজ্ঞায়িত করা হয়।

উদাহরনণঃ

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
 </ul>

 

Bootstrap উপরের Menu প্রদর্শনের জন্য দুইটি উপায় অবলম্বন করে, যেমনঃ tabs and pills.

Tabs

Tabs নির্মিত হয় <ul class=”nav nav-tabs”> নিয়ে।

বিঃদ্রঃ এ ছাড়াও বর্তমান পেইজেও <li class=”active”> চিহ্নিত ।

নীচের উদাহরণ গুলো navigation tabs তৈরি করেঃ

উদাহরনঃ

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

Tabs With Dropdown

ট্যাব গুলোতে dropdown Menu রাখা যায়।

নিম্নলিখিত উদাহরণে “মেনু 1” এ একটি ড্রপডাউন মেনু যোগ করা হয়েছে।
উদাহরনঃ

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="#">Submenu 1-1</a></li>
    <li><a href="#">Submenu 1-2</a></li>
    <li><a href="#">Submenu 1-3</a></li>
    </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

Pills

Pills নির্মিত হয় <ul class=”nav nav-pills”> দ্বারা । এ ছাড়াও <li class=”active”> বর্তমান page এ চিহ্নিত ।
উদাহরনঃ

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

Vertical Pills

Pills লম্বালম্বি ভাবেও প্রদর্শিত হতে পারে। এই ক্ষেত্রে শুধু “.nav-stacked” class টি ব্যবহার করতে হবে।

নিম্নলিখিত উদাহরণে উলম্ব Pill Menu টিকে শেষ কলামের মধ্যে রাখা হয়েছে। তাই বড় পর্দায় মেনুটি ডান পাশে প্রদর্শিত হবে। কিন্তু একটি ছোট পর্দায়, বিষয়বস্তু স্বয়ংক্রিয়ভাবে একটি একক কলামের বিন্যাস মধ্যে নিজেই সমন্বয় করে নিবে।

উদাহরনঃ

 <div class="col-md-3">
     <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Menu 1</a></li>
         <li><a href="#">Menu 2</a></li>
         <li><a href="#">Menu 3</a></li>
     </ul>
 </div>

 

 

Pills With Dropdown Menu

Pills এর মধ্যেও Dropdown রাখা যায়।

নিম্নলিখিত উদাহরণে “মেনু 1” এ একটি ড্রপডাউন মেনু যোগ করা হয়েছে।

উদাহরনঃ

 <ul class="nav nav-pills nav-stacked">

 <li class="active"><a href="#">Home</a></li>
     <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
     <span class="caret"></span></a>
   <ul class="dropdown-menu">
     <li><a href="#">Submenu 1-1</a></li>
     <li><a href="#">Submenu 1-2</a></li>
     <li><a href="#">Submenu 1-3</a></li>
   </ul>
 </li>

     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>

 </ul>

 

Feb 14

Bootstrap Case: একাধিক কলাম এর বিন্যাস (Multicolumn Layout)

একাধিক কলাম এর বিন্যাস

Bootstrap ব্যবহার করে সহজেই multicolumn layout তৈরি করা যায় ।

Bootstrap একটি প্রতিক্রিয়াশীল এবং mobile-first 12-column grid system দিয়ে থাকে।

বিভিন্ন স্ক্রীন সাইজে কলাম গুলো নিজেদের মধ্যে পুনরায় সজ্জিত হয়।

Grid এর লিছু নিয়মাবলিঃ

  • একটি ধারক দিয়ে শুরু করুন ।
  • <div class=”row”> দ্বারা এর মধ্যে সারি তৈরি করুন।
  • দ্রুত Grid column তৈরির জন্য কিছু পূর্বনির্ধারিত ক্লাস যেমন .col-md-4, .col-md-6 ইত্যাদি ব্যবহার করুন।
  • আপনার ইচ্ছা অনুযায়ী যেকোনো ১২ টি কলাম জুড়ে Grid কলাম তৈরি হয়।যেমনঃ তিনটি সমান কলামে তিনটি .col-MD-4 কলাম ব্যবহার করতে হবে
  • .col – *- * ক্লাস এর মধ্যের সংখ্যা গুলো সবসময় প্রতিটি সারির 12 পর্যন্ত যোগ করা উচিত।
  • বিষয়বস্তু Grid কলাম এর ভিতরে স্থাপন করা হয়।

উদাহরনঃ

 <div class="row">

      <div class="col-md-3">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod              
           tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <div class="col-md-3">
           <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
           ut aliquip ex ea commodo consequat.</p>
      </div>

      <div class="col-md-3">
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
           accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>

      <div class="col-md-3">
           <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae 
           vitae dicta sunt explicabo.</p>
      </div>

 </div>

ভিন্ন প্রশস্ততা বিশিষ্ট কলাম

এখন আমরা ভিন্ন ভিন্ন প্রশস্ততা বিশিষ্ট কলাম তৈরি করতে চাই।

নিম্নলিখিত উদাহরণটি একটি তিন কলাম বিশিষ্ট কাঠামো তৈরি করে যেখানে মাঝখানের কলামটি প্রথম ও দ্বিতীয় কলাম থেকে বেশি প্রশস্থ।

উদাহরনঃ

<div class="row">

     <div class="col-md-3">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
          tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>

     <div class="col-md-6">
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
          ut aliquip ex ea commodo consequat.</p>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
          accusantium doloremque laudantium, totam rem aperiam.</p>
     </div>

     <div class="col-md-3">
          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
          dicta sunt explicabo.</p>
     </div>

 </div>

 

Feb 14

Bootstrap Case: বাটন ও আইকন যোগ করা (Adding Button and Icon)

বাটন যুক্ত করা

বাটন ক্লাস গুলোতে <a>, <button>, or <input> এই উপাদান সমুহে ব্যবহৃত হতে পারে।

নিম্নলিখিত উদাহরণে Jumbotron এর মধ্যে একটি বড় এবং হালকা নীল “Search” বাটন দেওয়া হল। এই effect টি পেতে হলে আমাদের .btn-lg এবং .btn-info ক্লাস গুলো ব্যবহার করতে হবে।
উদাহরনঃ

 <div class="jumbotron">
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <a href="#" class="btn btn-info btn-lg">Search</a>
 </div

বিঃদ্রঃ কেন আমরা লিঙ্কের href attribute এর মধ্যে একটি # রাখলাম?

খালি পেজ অথবা “404” বার্তা না পেতে চাইলে আমরা লিঙ্ক হিসেবে # ব্যবহার করব। বাস্তবে অবশ্যই আমরা “Search” পেজ এ আসল লিঙ্ক ব্যবহার করব।

 

আইকন যুক্ত করা

Bootstrap ২০০ Glyphicons দিয়ে থাকে।

Glyphicons প্রদর্শন করতে লিখুনঃ

<span class="glyphicon glyphicon-print"></span>

কোড লাইন উপরে একটি মুদ্রণ আইকন প্রদর্শন করবে।

নিম্নলিখিত উদাহরণে “Search” বাটনে একটি সার্চ আইকন যুক্ত করা হয়েছেঃ

 <div class="jumbotron">
      <h1>My first Bootstrap website!</h1>
      <p>This page will grow as we add more and more components from Bootstrap...</p>
      <a href="#" class="btn btn-info btn-lg">
      <span class="glyphicon glyphicon-search"></span> Search
      </a>
 </div>

 

Feb 14

Bootstrap Case: আমার প্রথম বুটস্ট্র্যাপ ওয়েবসাইট (My First Bootstrap Website)

অনুবাদ করেছেন Abu Jubair Mahin

 

স্ক্র্যাচ থেকে একটি বুটস্ট্র্যাপ ওয়েব পৃষ্ঠা তৈরি করুন

নিচের পৃষ্ঠায় Scratch (স্ক্র্যাচ) থেকে একটি বুটস্ট্র্যাপ ওয়েবসাইট কিভাবে নির্মাণ করা হয় সেটা প্রদর্শন করা হবে

আমরা একটি সহজ HTML পৃষ্ঠা দিয়ে শুরু করব, এবং পরে আমরা অনেক বেশি বেশি components সেখানে যোগ করব,
যতক্ষণ না আমরা একটি সম্পূর্ণরূপে কার্যকরী এবং প্রতিক্রিয়াশীল ওয়েবসাইট পাব ।

আমরা নিম্নলিখিত HTML পৃষ্ঠা দিয়ে শুরু করব:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 </head>
<body>
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </body>
 </html>

 

 

Bootstrap CDN যোগ এবং Containers এর ভিতরে বিভিন্ন উপাদান যুক্ত করা

আমাদের প্রথম কাজ হল Bootstrap CDN যুক্ত করা এবং jQuery তে একটি লিঙ্ক যুক্ত করা

পরবর্তীতে আমরা <body> এর ভিতর সকল HTML উপাদানগুলো যোগ করব এবং এর ভিতরে <div class=”container”> ও থাকবেঃ

উদাহরনঃ

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</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.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container">
      <h1>My first Bootstrap website!</h1>
      <p>This page will grow as we add more and more components from Bootstrap...</p>
      <p>This is another paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

 

টিপস: সম্পূর্ণ স্কিনটা পেইজ দিয়ে Fill করতে চাইলে .container কে পরিবর্তন করে .container-fluid লিখুনঃ

উদাহরনঃ

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</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.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
<div class="container-fluid">
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

ধন্যবাদ , আশা করি বুঝতে পেরেছেন।

Feb 14

বু্টস্ট্র্যাপ গ্রিড উদাহরণ (Bootstrap Grid Examples)

নিচে Bootstrap grid layouts এর কিছু উদাহহরন লক্ষ্য করা যাকঃ

Three Equal Columns (তিনটি সমান কলামের জন্য)

নিম্নলিখিত উদাহরণের মাধ্যমে দেখা যাবে কিভাবে একটি তিন সমান প্রস্থ কলাম ট্যাবলেট এ শুরু হয় এবং সেটা বড় ডেস্কটপের স্কেলিং পায়, মোবাইলে কলামগুলো স্বয়ংক্রিয় ভাবে স্থান পায় ।

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

ফলাফল : তিনটি সমান কলামের জন্য

 

Three Unequal Columns (তিনটি অসমান কলামের জন্য)

নিম্নলিখিত উদাহরণের মাধ্যমে দেখা যাবে কিভাবে তিনটি ভিন্ন প্রস্থের কলাম ট্যাবলেট এ শুরু হয় এবং সেটা বড় ডেস্কটপের স্কেলিং পায়ঃ

উদাহরনঃ

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

ফলাফল : তিনটি অসমান কলামের জন্য

 

Two Unequal Columns (দুইটি অসমান কলামের জন্য)

নিম্নলিখিত উদাহরণের মাধ্যমে দেখা যাবে কিভাবে দুটি ভিন্ন প্রস্থের কলাম ট্যাবলেট এ শুরু হয় এবং সেটা বড় ডেস্কটপের স্কেলিং পায়ঃ

উদাহরনঃ

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

ফলাফল : দুইটি অসমান কলামের জন্য

 

দুইটি নেস্টেড কলাম এর সাথে দুইটি কলাম (Two Columns With Two Nested Columns)

নিম্নলিখিত উদাহরণে দেখা যাবে যে কিভাবে two columns ট্যাবলেট এ শুরু এবং বড় ডেস্কটপে সেটা Scaling করবে যা বড় কলামের মধ্যে অন্য দুটি কলাম (সমান প্রস্থ) (মোবাইল ফোন, এই কলাম এবং তাদের nested
কলাম stackহবে)

উদাহরনঃ

<div class="row">
  <div class="col-sm-8">
    .col-sm-8
    <div class="row">
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-6">.col-sm-6</div>
    </div>
  </div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

ফলাফল : দুইটি নেস্টেড কলাম এর সাথে দুই কলাম

 

মিশ্র: মোবাইল এবং ডেস্কটপ (Mixed: Mobile And Desktop)

Bootstrap grid সিস্টেমের চারটি ক্লাস আছেঃ xs (phones), sm (tablets), md (desktops), এবং lg (larger desktops) এই class গুলো ব্যবহার করে আরো গতিশীল এবং নমনীয় লেআউট তৈরি করা যায়।

টিপ: প্রতিটি Class বর্গাকার, তাই আপনি xs এবং sm জন্য একই প্রস্থ সেট করতে চান তাহলে আপনাকে শুধুমাত্র xs নির্দিষ্ট করতে হবে.

উদাহরনঃ

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
ফলাফল : মিশ্র: মোবাইল এবং ডেস্কটপ

টিপস: মনে রাখবেন, গ্রিড কলামে একটি সারি জন্য বারো পর্যন্ত যোগ করা যেতে পারে, এর বেশি হলে কলাম কোন ব্যাপার viewport স্ট্যাক করবে না ।

 

মিশ্র: মোবাইল, ট্যাবলেট এবং ডেস্কটপ (Mixed: Mobile, Tablet And Desktop)

উদাহরনঃ

<div class="row">
  <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
  <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ফলাফল : মিশ্র: মোবাইল, ট্যাবলেট এবং ডেস্কটপ

 

Clear Floats

নির্দিষ্ট ব্রেকপয়েন্ট এ Clear floats (.clearfix class এর সঙ্গে) ব্যবহার করা হয় যাতে uneven content এর সাথে strange wrapping প্রতিরোধ করা যায় ।

উদাহরনঃ

<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>

ফলাফল : Clear Float

 

ভারসাম্য করা কলাম (Offsetting Columns)

.col-md-offset-* classes ব্যবহার করা কলামকে ডান পাশ্র সরিয়ে নেয়া হয় ।

এই ক্লাস * কলাম এর সাহায্যে কলামের বাম মার্জিন বৃদ্ধি করে:

উদাহরনঃ

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
  .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

ফলাফল : Offsetting Column

 

ধাক্কা ও টানা – কলামের ক্রম পরিবর্তন (Push And Pull – Change Column Ordering)

.col-md-push-* এবং .col-md-pull-* classes এর সাহায্যে grid columns এর order পরিবর্তন করা হয় ।

উদাহরনঃ

<div class="row">
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>

ফলাফল : Push And Pull

 

ধন্যবাদ মনযোগ সহকারে টিউটোরিয়ালটি পরার জন্য। আশা করি বুঝতে পেরেছেন ।

 

Feb 14

বুটস্ট্র্যাপ গ্রিড – বড় ডিভাইস । Bootstrap Grid – Large Devices

পূর্বের অধ্যায়ে আমরা ছোট (small) এবং মাঝারি (medium) device এর জন্য class সহ grid এর উদাহরণ আলোচনা করেছি। সেখানে দুইটি div রেখে হয়, যাদের ছোট device এর জন্য ২৫% /৭৫% এবং মাঝারি device এর জন্য ৫০% /৫০% ভাগে ভাগ (split) করা হয়।

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

 

তবে বড় (Large) device এর ক্ষেত্রে দুইটি div-কে ৩৩% /৬৬% ভাগে ভাগ করা যেতে পারে।

টিপস: বড় device এর ক্ষেত্রে সাধারণত screen এর width 1200 pixel বা তার বেশি হিসাবে গণনা করা হয়।

বড় device এর ক্ষেত্রে .col-lg-* class ব্যবহার করা হয়।

এখন আমরা বড় device এর ক্ষেত্রে column এর width যোগ করবো:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

 

সুতরাং Bootstrap আলোচনার এই পর্যায়ে দেখা যাচ্ছে যে, ছোট (small) device এর ক্ষেত্রে -sm-, মাঝারি (medium) device এর ক্ষেত্রে -md-এবং বড় (Large) device এর ক্ষেত্রে -lg- class ব্যবহার করা উত্তম।

নিম্নোক্ত উদাহরণে দেখানো হয়েছে যে, div দুইটি, ছোট (small) device এর ক্ষেত্রে ২৫% /৭৫%, মাঝারি (medium) device এর ক্ষেত্রে ৫০% /৫০% এবং বড় (Large) device এর ক্ষেত্রে ৩৩% /৬৬% এ বিভক্ত (split) হয়ে যায়:

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:lavender;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:lavenderblush;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

ফলাফল : ছোট, মাঝারি ও বড় ডিভাইস

 

Feb 14

বুটস্ট্র্যাপ গ্রিড – মধ্যম ডিভাইস । Bootstrap Grid – Medium Devices

পূর্ববর্তী অধ্যায়ে আমরা ছোট ডিভাইসের জন্য Class সহ একটি Grid এর উদাহরন দেখিয়েছিলাম।

আমরা সেখানে দুইটি divs (কলাম ) ব্যবহার করেছিলাম এবুং আমরা সেখানে 25%/75% এর বিভক্তি দেখিয়েছি।

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

 

কিন্তু মাঝারি ডিভাইসের জন্য সব থেকে ভাল হবে যদি 50%/50% ব্যবহার করা হয়।

নির্দেশনাঃ মাঝারি রকমের ডিভাইসের Screen সাইজ সাধারণত 992 pixels থেকে 1199 pixels হয়ে থাকে ।

মাঝারি ডিভাইসের জন্য আমরা .col-md-* classes ব্যবহার করব।

এখন আমরা Medium Device এর জন্য কলাম এর বিস্তার ব্যবহার করা দেখবঃ

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

 

এখন Bootstrap এর মতে বলা যায়, Small সাইজের জন্য খেয়াল কর আমরা -sm- class ব্যবহার করেছি। Medium সাইজের জন্য খেয়াল কর আমরা -md- class ব্যবহার করেছি।

নিচের উদাহরন Small Device এর জন্য 25%/75% Split ফলাফল প্রদর্শন করবে আর। Medium Device এর জন্য 50%/50% Split ফলাফল প্রদর্শন করবেঃ

উদাহরনঃ

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:lavender;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:lavenderblush;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

ফলাফল : ছোট ও মাঝারি ডিভাইস

 

Feb 14

বুটস্ট্র্যাপ গ্রিড – স্ট্যাকড-টু-হরাইজন্টাল (Bootstrap Grid – Stacked-to-horizontal)

শেখ মাহফুজুর রহমান

 

বুটস্ট্র্যাপ গ্রিডের উদাহরণঃ স্ট্যাকড থেকে হরাইজন্টাল

আমরা একটি সাধারণ গ্রিড সিস্টেম তৈরি করবো যা মোবাইল/টেবলেট-এ স্ট্যাকড বা স্তুপাকারে (একটির উপর আরেকটি) দেখাবে, কিন্তু মাঝারী/বড় ডিভাইস যেমন ডেস্কটপে হরাইজন্টাল হয়ে যাবে।

নিচের উদাহরণটি একটি খুবই সাধারণ “stacked-to-horizontal” লেআউট তৈরি করেঃ

উদাহরণঃ Stacked-to-horizontal

<div class="container">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

ফলাফল : Stacked-to-horizontal

টিপসঃ .col-sm-* ক্লাসের নাম্বারগুলো কতটি column এ div টি প্রসারিত হবে তা নির্দেশ করে (১২টির মধ্যে)। তাই, .col-sm-1 এক কলাম পর্যন্ত প্রসারিত হয়, .col-sm-4 চার কলাম পর্যন্ত প্রসারিত হয়, .col-sm-6 ছয় কলাম পর্যন্ত প্রসারিত হয় ইত্যাদি।

নোটঃ নিশ্চিত করতে হবে যেন মোট কলাম সংখ্যা ১২ এর মধ্যে থাকে।

টিপসঃ ক্লাস .container কে .container-fluid তে পরিবর্তন করে আপনি যেকোন ফিক্সড-উইডথ লেআউটকে ফুল-উইডথ লেআউটে পরিবর্তন করতে পারবেনঃ

উদাহরণঃ Fluid container

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

ফলাফল : Fluid container

 

Feb 14

বুটস্ট্র্যাপ গ্রিড সিস্টেম (Bootstrap Grid System)

শেখ মাহফুজুর রহমান

 

বুটস্ট্র্যাপের গ্রিড সিস্টেম একটি পেজে ১২টি পর্যন্ত কলাম যোগ করতে দেয়। আপনি যদি আলাদাভাবে সবগুলো (১২টি) কলাম ব্যবহার করতে না চান তাহলে কিছু কলামকে গ্রুপ বা গুচ্ছাকৃত করে প্রশস্তততর কলাম তৈরি করতে পারবেনঃ

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 4

span 4

span 4

span 4

span 8

span 6

span 6

span 12

বুটস্ট্র্যাপ গ্রিড সিস্টেম রেস্পন্সিভ হয়ে থাকে এবং স্ক্রিনের আকার অনুযায়ী কলামগুলো পুনরায় সজ্জিত হয়ঃ বড় স্ক্রিনে তিনটি কলামের মধ্যে কন্টেন্টগুলো সাজালে দেখতে ভালো লাগে কিন্তু ছোট স্ক্রিনে কন্টেন্টগুলো একটি আরেকটির উপর স্তুপাকারে সজ্জিত হলে দেখতে ভালো লাগবে।

টিপসঃ মনে রখবেন একটি রো বা সারির জন্য ১২টি পর্যন্ত গ্রিড কলাম যোগ করতে হবে। এর চেয়ে বেশি কলাম যোগ করা হলে, স্ক্রিন যত বড়ই হোক না কেন, সেগুলো স্তুপাকার হয়ে যাবে।

 

গ্রিড ক্লাস

বুটস্ট্র্যাপ গ্রিড সিস্টেমের চারটি ক্লাস রয়েছেঃ

  • xs (ফোনের জন্য)
  • sm (টেবলেটের জন্য)
  • md (ডেস্কটপের জন্য)
  • lg (বড় ডেস্কটপের জন্য)

 

উপরের ক্লাসগুলো একসাথে করে আরও ডাইনামিক এবং ফ্ল্যাক্সিবল লেআউট তৈরি করা সম্ভব।

টিপসঃ প্রত্যেকটি ক্লাস মাপ অনুযায়ী হয়ে থাকে, তাই আপনি যদি xs এবং sm এর জন্য একই উইডথ (প্রস্থ্য) ঠিক করতে চান তাহলে আপনাকে শুধু xs কে নির্দিষ্ট করে দিলেই হবে।

 

গ্রিড সিস্টেমের নিয়ম

কিছু বুটস্ট্র্যাপ গ্রিড সিস্টেমের নিয়ম:

সঠিক অ্যালাইনম্যান্ট ও প্যাডিং এর জন্য রো’গুলোকে অবশ্যই .container (এর প্রস্থ্য পরিবর্তিত হয়না) অথবা .container-fluid (প্রস্থ্য পুরো স্ক্রিনে প্রসারিত হতে পারে) এর ভিতরে রাখতে হবে।

  • কতগুলো কলাম নিয়ে একটি হরাইজন্টাল গ্রুপ তৈরি করতে রো ব্যবহার করুন।
  • কন্টেন্টকে অবশ্যই কলামের ভিতরে রাখতে হবে এবং কলামগুলোই শুধুমাত্র রো এর ইমিডিয়েট চাইল্ড হতে পারে।
  • .row এবং .col-sm-4 এর মতো পুর্ব-সংজ্ঞায়িত ক্লাসগুলো তাৎক্ষণিকভাবে তৈরি গ্রিড লেআউটের জন্য ব্যবহার করা যায়।
  • কলাম এর কন্টেন্টগুলোর মধ্যে প্যাডিং এর মাধ্যমে ফাঁক তৈরি করে। এই প্যাডিং .rows এর উপর নেগেটিভ মার্জিনের মাধ্যমে প্রথম ও শেষ কলামের এর জন্য রো’তে অফসেট থাকে।
  • আপনি কতটি কলামে প্রসারিত করবেন তা ১২টি কলামের নাম্বার নির্দিষ্ট করে দেয়ার মাধ্যমে গ্রিড কলাম তৈরি করতে পারবেন। উদাহরণস্বরূপ, তিনটি সমান কলাম তিনটি .col-sm-4 ব্যবহার করবেন।

 

একটি বুটস্ট্র্যাপ গ্রিডের বেসিক স্ট্রাকচার

নিচে একটি বুটস্ট্যাপ গ্রিডের বেসিক স্ট্রাকচার দেয়া হলোঃ

<div class="container">
  <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>
</div>

 

আপনার ইচ্ছে মতো লেআউট তৈরি করতে চাইলে প্রথমে একটি কন্টেইনার তৈরি করুন (<div class="container">)। তারপর একটি রো তৈরি করুন (<div class="row">)। এরপরে, ইচ্ছেমতো কলাম সংখ্যা যোগ করুন ( সঠিক .col-*-* ক্লাসসহ ট্যাগ)। খেয়াল রাখবেন, .col-*-* এর নাম্বারগুলো প্রত্যেক রো এর জন্য ১২ পর্যন্ত হতে হবে।

 

গ্রিড অপশান

বিভিন্ন ডিভাইসে বুটস্ট্র্যাপ গ্রিড সিস্টেম কিভাবে কাজ করে তা নিচের ছকে ব্যাখ্যা করা হলোঃ

অতি ছোট ডিভাইস

ফোন

(<768px)

ছোট ডিভাইস

ট্যাবলেট (>=768px)

মাঝারি ডিভাইস

ডেস্কটপ

(>=992px)

বড় ডিভাইস

ডেস্কটপ

(>=1200px)
গ্রিড এর আচরন

সব সময়ে অনুভূমিক

শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক

শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক

শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক
ধারক এর প্রস্থ

নাই (স্বয়ংক্রিয়)

750px

970px

1170px
ক্লাস প্রিফিক্স

.col-xs-

.col-sm-

.col-md-

.col-lg-
কলাম সংখ্যা

12

12

12

12
কলামের প্রসস্থতা

স্বয়ংক্রিয়

~62px

~81px

~97px
গুটার প্রস্থ

30px (কলামের প্রতিটি পার্শ্বে 15px)

30px (কলামের প্রতিটি পার্শ্বে 15px)

30px (কলামের প্রতিটি পার্শ্বে 15px)

30px (কলামের প্রতিটি পার্শ্বে 15px)
Nestable

হ্যাঁ

হ্যাঁ

হ্যাঁ

হ্যাঁ
অফসেটস

হ্যাঁ

হ্যাঁ

হ্যাঁ

হ্যাঁ
কলাম ক্রম

হ্যাঁ

হ্যাঁ

হ্যাঁ

হ্যাঁ