Feb 13

বুটস্ট্র্যাপ লিস্ট গ্রুপ্স (Bootstrap List Groups)

নাম-শরিফুল ইসলাম

Job category-Php Coder

 

basic list group তৈরি করার জন্য আমাদের <ul> এর মধ্যে .list-group ব্যবহার করতে হবে। এবং <li> এর মধ্যে .list-group-item ব্যবহার করতে হবে।

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

ফলাফল :

 

আমরা list-group এর সাথে badges যুক্ত করতে পারি। এইগুলো অটোমেটিক ভাবে ডান দিকে পজিশন নেয়। badge তৈরি করার জন্য span এর সাথে badge ক্লাস যোগ করতে হবে।

<ul class="list-group">
  <li class="list-group-item"><span class="badge">12</span> New</li>
  <li class="list-group-item"><span class="badge">5</span> Deleted</li>
  <li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul>

ফলাফল :

 

লিস্ট গ্রুপ এর মধ্যে আইটেম গুলোকে hyperlink করা যাবে। এই জন্য আমাদের <ul> এর পরিবর্তে div ব্যবহার করতে হবে। এবং <li>এর পরিবর্তে <a> ব্যবহার করতে হবে।

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

ফলাফল :

 

কোন আইটেম কে disable করে রাখার জন্য

<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

ফলাফল :

 

Contextual classes ব্যবহার করার জন্য আমাদের .list-group-item-success, list-group-item-info, list-group-item-warning, এবং .list-group-item-danger এই ক্লাস গুলো ব্যবহার করতে হবে

<ul class="list-group">
  <li class="list-group-item list-group-item-success">First item</li>
  <li class="list-group-item list-group-item-info">Second item</li>
  <li class="list-group-item list-group-item-warning">Third item</li>
  <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>

ফলাফল :

 

Bootstrap এ .list-group-item-heading এবং .list-group-item-text ক্লাস গুলো ব্যবহার করে কোড নিম্মরুপ

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>

ফলাফল :

 

 

Feb 13

বুটস্ট্র্যাপ পেজার (Bootstrap Pager)

Pager কি ???

Pager দিয়ে সাধারণত কত নাম্বার পেইজ সেটা বোঝানো হয় ( এই সন্মন্ধে পূর্ববর্তী অধ্যায়ে আলোচনা করা হয়েছে )

Pager এর কাজ previous (পূর্ববর্তী ) এবং next (পরবর্তী) পেইজের buttons প্রদর্শিত করা

previous/next buttons তৈরি করার জন্য .pager Class, <ul> element এর মাঝে স্থাপন করতে হয়

উদাহরনঃ

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

ফলাফলঃ

 

Align Buttons

.previous এবং .next class ব্যবহার করা হয় button দুইটিকে পেইজের দুই পার্শে স্থাপন করার জন্য

উদাহরনঃ

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

ফলাফলঃ

 

আশা করি সকলেই বুঝতে পেরেছেন। কয়েক বার চেস্টা করলেই বিষয়টি পরিস্কার হয়ে যাবে ।

 

Feb 13

Bootstrap Pagination

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

Bootstrap Pagination

Pagination বলতে পত্রাঙ্কন বুঝায় , সহজ ভাবে বলতে গেলে এক পেইজ থেকে অন্য পেইজে সহজ ভাবে যাওয়াকে বুঝায় ।

আপনার যদি একটা web site থাকে যাতে পেইজের সংখ্যা অনেক তাহলে আপনি প্রত্যেক পেইজে ছোট করে pagination ব্যবহার করতে পারেন ।

সাধারণত Bootstrap এ নিচের মত pagination দেখা যায়।

pagination তৈরি করার জন্য <ul> element এর ভিতরে .pagination class যুক্ত করতে হয়

উদাহরনঃ

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

 

সক্রিয় অবস্থা

সক্রিয় অবস্থা/Active State দ্বারা আপনি বর্তমানে কোণ পেইজে আছেন সেটা বোঝা যায়, আর সেটা নিচের মত দেখাবেঃ

.active ক্লাস ব্যবহার করলে, ব্যবহারকারি জানতে পারবে বর্তমানে সে কোণ পেইজে অবস্থান করছে

উদাহরনঃ

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

 

 

নিষ্ক্রিয় অবস্থা

নিষ্ক্রিয় অবস্থা/Disabled State ব্যবহার করলে সেটাতে ক্লিক করা সম্ভব নয়।

.disabled ক্লাস ব্যবহার করলে লিঙ্ক আর কাজ করবে না

উদাহরনঃ

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

 

 

Pagination Sizing

এটা দিয়ে Pagination blocks ছোট হবে না বড় হবে সেটা বুঝানো হয়

.pagination-lg class ব্যবহার করা হয় ব্লক বড় করার জন্য আর .pagination-sm ব্যবহার করা হয় ব্লক ছোট করার জন্য

উদাহরনঃ

বড় blocks এর জন্য

<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

 

ছোট blocks এর জন্য

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

 

 

Feb 13

বুটস্ট্র্যাপ প্রগ্রেস বার (Bootstrap Progress Bars)

প্রোগ্রেস বার ব্যবহার করা হয় যাতে সহজে বোঝা যায় ইউজার এর কাজের প্রক্রিয়া কতদুর সম্মন্ন হয়েছে। Bootstrap এ কয়েক ধরনের প্রোগ্রেস বার লক্ষ্য করা যায়। আমরা যদি একটি উদাহরণ দেখি। একটি ডিফল্ট প্রোগ্রেস বার দেখার জন্য .progress class <div> এর মধ্যে যুক্ত করতে হবে। এরপর ব্রাউজার এ রান করলে একটি নিল বার আমরা পাব। যা ৭০% পর্যন্ত লক্ষ্য করা যাবে।

কোড :

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

 

লেবেল সহকারে প্রসেস বার

লেবেল সহ প্রসেস বার দেখার জন্য কোড থেকে .sr-only class টি মুছে দিতে হবে।

 

রঙীন প্রোগ্রেস বার

এখন আমরা একটি উদাহরন এর মাধ্যমে বিভিন্ন কালার এর প্রোগ্রেস বার ব্যবহার করব।
প্রোগ্রেস বার এর সাথে contextual classes গুলো হল

  • .progress-bar-success (সবুজ কালার)
  • .progress-bar-info (নিল কালার)
  • .progress-bar-warning (অরেঞ্জ কালার)
  • .progress-bar-danger (লাল কালার)

কোড

 <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

 

Stripe প্রোগ্রেস বার

প্রোগ্রেস বারের সাথে stripe যোগ করতে চাইলে .progress-bar-striped ক্লাস যোগ করতে হবে

কোড :

 <div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

 

Animated প্রোগ্রেস বার

Animated প্রোগ্রেস বার পেতে চাইলে .active ক্লাস অ্যাড করতে হবে

কোড :

 <div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>

 

Stacked প্রোগ্রেস বার


বিভিন্ন কালার এর stacked প্রোগ্রেস বার এর জন্য কোড নিম্মরুপ

 <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>

 

Feb 13

বুটস্ট্র্যাপ গ্লাইফাইকন এবং ব্যাজ বা লেবেল (Bootstrap Glyphicons and Badges/Level)

লিখেছেন সুদীপ্ত সাহা

 

গ্লাইফাইকনস

গ্লাইফাইকনের সেটে বুটস্ট্র্যাপের ২০০ আইকন রয়েছে।

টেক্সট, বাটন, টুলবার, নেভিগেশন, ফর্ম এরকম বিভিন্ন জায়গায় গ্লাইফাইকন ব্যবহার করা হয়।

কিছু গ্লাইফাইকনের উদাহরণ হলঃ

 

গ্লাইফাইকনের সিনট্যাক্স

গ্লাইফাইকন সেট করার জন্য নিচের সিনট্যাক্স ব্যবহার করতে হয়ঃ

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

সিনট্যাক্সের নেম এর অংশে অবশ্যই একটি সঠিক গ্লাইফাইকনের নাম দিতে হবে।

 

গ্লাইফাইকনের উদাহরণঃ

গ্লাইফাইকনকে বিভিন্নভাবে ব্যবহার করার পদ্ধতি নিচের উদাহরণে দেখানো হলঃ
উদাহরণঃ

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Print
  </a>
</p>

 

ব্যাজ

কোন একটি লিঙ্কে বর্তমানে কতগুলো নতুন আইটেম বিদ্যমান আছে তা বোঝানোর জন্য ব্যাজ ব্যবহার করা হয়। যেমনঃ

এখানে (5, 10 এবং 2) এই নাম্বারগুলো হচ্ছে ব্যাজ।

 

ব্যাজ তৈরির জন্য <span> ইলিমেন্টের ক্লাস .badge দিতে হয়ঃ
উদাহরণঃ

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

 

অন্য কোন ইলিমেন্টের ভেতরেও ব্যাজ ব্যবহার করা যায়, যেমন বাটনের ভেতরে ব্যাজ ব্যবহার করাঃ

 

কিভাবে একটি বাটনের ভেতরে ব্যাজ তৈরি করতে হয় তা নিচের উদাহরণে দেখানো হলঃ
উদাহরণঃ

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span>
</button>

 

লেবেল

লেবেল কোন কিছু সম্পর্কে অতিরিক্ত তথ্য প্রদান করার জন্য ব্যবহৃত হয় :

.label ক্লাসটি <span> এলিমেন্ট এর ভিতরে ৬ টি প্রাসঙ্গিক ক্লাস .label-default, .label-primary, .label-success, .label-info, .label-warning বা .label-danger এর যেকোনটির সাথে ব্যবহার করা যাবে:

 

উদাহরণ :

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>

 

নিচের উদাহরণটিতে সকল প্রাসঙ্গিক ক্লাস ব্যবহারের ফলাফল দেখাচ্ছে:

 

এর উদাহরণ :

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

 

 

Feb 13

পিএইচপি – সিম্পল-এক্সএমএল পার্সার (PHP SimpleXML Parser in Bangla)

সিম্পল-এক্সএমএল (SimpleXML) হলো একটি পিএইচপি এক্সটেনশান যা আমাদেরকে সহজে এক্সএমএল ডাটা ম্যান্যুপিউলেট করতে এবং পেতে (get) সাহাজ্য করে।

সিম্পল-এক্সএমএল পার্সার

সিম্পল-এক্সএমএল একটি ট্রি-বেজড বা ট্রি নির্ভর পার্সার। যদি আপনি এক্সএমএল ডকুমেন্ট’টির স্ট্রাকচার বা লেআউট সম্পর্কে জেনে থাকেন তাহলে সিম্পল-এক্সএমএল একটি এলিমেন্টের নাম, এট্রিবিট এবং টেকচুয়াল ( টেক্সট) কন্টেন্টকে সহজেই পেতে সাহাজ্য করে।

সিম্পল-এক্সএমএল একটি এক্সএমএল ডকুমেন্টকে ডাটা স্ট্রাকচারে রূপান্তরিত করে যাকে নিয়ে আপনি এক গুচ্ছ এরে ( arrays ) বা অবজেক্টের মতো বারবার কাজ করতে পারেন। DOM অথবা এক্সপ্যাট পার্সারের তুলনায় সিম্পল-এক্সএমএল একটি এলিমেন্ট থেকে টেক্সট ডাটা পড়তে অল্প কিছু কোড লাইন নিয়ে কাজ করে।

ইন্সটলেশান

পিএইচপি-ফাইভ এ সিম্পল-এক্সএমএল ফাংশনগুলো পিএইচপি কোরেরই অংশ। এই ফাংশনগুলো ব্যবহার করতে কোন প্রকার ইন্টলেশনের দরকার পড়েনা।

পিএইচপি সিম্পল-এক্সএমএল – স্ট্রিং থেকে পড়া

পিএইচপি simplexml_load_string() ফাংশনটি একটি স্ট্রিং থেকে এক্সএমএল ডাটা পড়তে ব্যবহৃত হয়। মনে করি, নিচেরটির মতো আমাদের একটি এক্সএমএল ভ্যারিয়েবল রয়েছে যা এক্সএমএল ডাটা ধারণ করেঃ

$myXMLData =
"<?xml version='1.0' encoding='UTF-8'?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>";

 

নিচের উদাহরণটি আমাদের দেখায়, কিভাবে simplexml_load_string() ফাংশনটিকে ব্যবহার করে একটি স্ট্রিং থেকে এক্সএমএল ডাটা পড়তে হয়ঃ

<?php
$myXMLData =
"<?xml version='1.0' encoding='UTF-8'?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>";

$xml=simplexml_load_string($myXMLData) or die("Error: Cannot create object");
print_r($xml);
?>

 

উপরের কোডটির আউটপুট হবেঃ

SimpleXMLElement Object ( [to] => Tove [from] => Jani [heading] => Reminder [body] => Don’t forget me this weekend! )

 

এরর হ্যান্ডল করার টিপসঃ ডকুমেন্ট লোড করার সময় libxml ফাংশানালিটিকে সবগুলো এক্সএমএল এরর ত্রুটিকে ফিরে পেতে ব্যবহার করুন এবং তারপর এররগুলো সারানোর উপর কাজ করুনঃ

<?php
libxml_use_internal_errors(true);
$myXMLData =
"<?xml version='1.0' encoding='UTF-8'?>
<document>
<user>John Doe</wronguser>
<email>john@example.com</wrongemail>
</document>";

$xml = simplexml_load_string($myXMLData);
if ($xml === false) {
    echo "Failed loading XML: ";
    foreach(libxml_get_errors() as $error) {
        echo "<br>", $error->message;
    }
} else {
    print_r($xml);
}
?>

 

উপরের কোডটির আউটপুট হবেঃ

Failed loading XML:
Opening and ending tag mismatch: user line 3 and wronguser
Opening and ending tag mismatch: email line 4 and wrongemail

 

পিএইচপি সিম্পল-এক্সএমএল – ফাইল থেকে পড়া

পিএইচপি simplexml_load_file() ফাংশনটি একটি ফাইল থেকে এক্সএমএল ডাটা পড়তে ব্যবহৃত হয়। মনে করি আমাদের “note.xml” নামের একটি ফাইল রয়েছে যা নিচের মতো দেখায়ঃ

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

 

নিচের উদাহরণটি আমাদেরকে দেখায়, কিভাবে simplexml_load_file() ফাংশনটি ব্যবহার করে ফাইল থেকে এক্সএমএল ডাটা পড়তে হয়ঃ

<?php
$xml=simplexml_load_file("note.xml") or die("Error: Cannot create object");
print_r($xml);
?>

 

উপরের কোডটির আউটপুট হবেঃ

SimpleXMLElement Object ( [to] => Tove [from] => Jani [heading] => Reminder [body] => Don’t forget me this weekend! )

 

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

Feb 12

বুটস্ট্র্যাপ বাটন (Bootstrap Buttons)

Button স্টাইল

Bootstrap এ সাতটি স্টাইলের button ব্যবহৃত হয়, যথা:

এই সাতটি স্টাইলের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

  • Default – .btn-default
  • Primary – .btn-primary
  • Success – .btn-success
  • Info – .btn-info
  • Warning – .btn-warning
  • Danger – .btn-danger
  • Link – .btn-link

 

নিম্নোক্ত উদাহরণে ভিন্ন ভিন্ন button এর স্টা্ইলের দেখানো হলো:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

 

button এর class গুলো সাধারণত <a>, </a><button><a> কিংবা <input type="text" /> এলিমেন্টে যোগ করা হয়। যেমন:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

 

কেন <a> এলিমেন্টের href এট্রিবিউটে # ব্যবহার করা হয়েছে?

যেহেতু যোগ করার মতো আমাদের হাতে এখনো কোন link নেই এবং লিংক না থাকার কারণে যে “404” message দেখানো হয় সেটাও দেখাতে চাই না কাজেই এখানে # ব্যবহার করা হয়েছে। তবে বাস্তব ক্ষেত্রে অবশ্যই # এর পরিবর্তে একটি লিংক যোগ করতে হবে।

 

বাটনের আকার

Bootstrap এ চারটি সাইজের Button ব্যবহৃত হয়, যথা:

Button এর এই চারটি সাইজের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

  • Large – .btn-lg
  • Medium – .btn-md
  • Small- .btn-sm
  • XSmall – .btn-xs

নিম্নোক্ত উদাহরণে Button এর ভিন্ন ভিন্ন চারটি সাইজ দেখানো হলো:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

 

Block Level Buttons

parent element এর পুরো width জুড়ে Button তৈরি করাকে Block Level Buttons বলা হয়।

Block Level Buttons তৈরি করতে .btn-block class টি যোগ করা হয়। যেমন:

<button type="button" class="btn btn-primary btn-block">Button 1</button>

 

Active/Disabled Buttons

কোনো Button এর status এমনভাবে set করা যেতে পারে যেন তা active (যা active রয়েছে এমন) বা disabled (যা Click করা যায় না এমন) হতে পারে।

active Button তৈরি করার জন্য .active class এবং disabled Button তৈরি করার জন্য .disabled class যোগ করতে হয়। যেমন:

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

 

Feb 12

বুটস্ট্র্যাপ জাম্বট্রন এবং পেজ হেডার (Bootstrap Jumbotron and Page Header)

বুটস্ট্র্যাপ জাম্বট্রন এবং পেজ হেডার

জাম্বট্রন তৈরির পদ্ধতি

কোন স্পেশাল কন্টেন্ট বা তথ্যের প্রতি ইউজারের মনোযোগ আকর্ষণের জন্য ওয়েবপেজে বড় স্পেস বা বক্সকে নির্দেশ করাই হচ্ছে জাম্বট্রন।

জাম্বট্রনের ব্যাকগ্রাউন্ড কালার সাধারনত গ্রে হয়ে থাকে এবং এর কর্নারগুলো একটু রাউন্ড আকৃতির হয়।

জাম্বট্রনের ভেতরে যেই টেক্সটগুলো থাকে সেগুলো সেগুলোর ফন্টসাইজও স্বয়ংক্রিয়ভাবে বড় হয়ে থাকে।

টিপসঃ জাম্বট্রনের ভেতরে আপনি ভ্যালিড HTML এর ইলিমেন্ট এবং বুটস্ট্র্যাপের অন্যান্য ইলিমেন্ট ও ক্লাস ব্যবহার করতে পারবেন।

জাম্বট্রন তৈরির জন্য .jumbotron ক্লাসসহ <div> ইলিমেন্ট ব্যবহার করতে হয়।

 

কন্টেইনারের মধ্যে জাম্বট্রন তৈরির পদ্ধতি

আপনি যদি এরকম চান যেন জাম্বট্রন স্ক্রিনের একটি নির্দিষ্ট সীমার বাইরে বিস্তৃত না হয়, তাহলে জাম্বট্রনকে আপনার নির্দিষ্ট করা <div class="container"> এর ভেতরে সেট করতে হবেঃ

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

ফলাফল : কন্টেইনারের মধ্যে জাম্বট্রন তৈরি

 

কন্টেইনারের বাহিরে জাম্বট্রন তৈরির পদ্ধতি

জাম্বট্রনকে ডিফল্টভাবে স্ক্রিনে শো করাতে চাইলে <div class="container"> এর বাইরে জাম্বট্রনকে সেট করতে হবেঃ

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for 
  developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

ফলাফল : কন্টেইনারের বাহিরে জাম্বট্রন তৈরি

 

পেজের হেডার তৈরির পদ্ধতি

পেজ হেডার অনেকটা সেকশন ডিভাইডারের মতো .page-header ক্লাস হেডিং লাইনের নিচে একটি লম্বা দাগের মতো অনুভূমিক লাইন তৈরি করে একইসাথে কিছু ইলিমেন্টের চারদিকে কিছুটা স্পেস দখল করে।

 

পেজ হেডারের উদাহরণঃ

পেজ হেডার তৈরির জন্য <div> ইলিমেন্টের ক্লাস .page-header হতে হবেঃ

<div class="page-header">
  <h1>Example Page Header</h1>
</div>

ফলাফল : পেজ হেডার

 

Feb 12

বুটস্ট্র্যাপ ইমেজেস (Bootstrap Images)

বুটস্ট্র্যাপ ইমেজ আকৃতি

Bootstrap এর সাহায্যে সহজেই Image কে তিন প্রকার Shape এ দেখানো যায়, যথা:

  1. গোলাকৃতির কোণ
  2. বৃত্ত
  3. থাম্বনেল

 

গোলাকৃতির কোণ

Image এর চারপাশে Rounded Corner তৈরি করার জন্য .img-rounded class টিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Corner সাপোর্ট করে না।

উদাহরণ:

 <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" 
height="236">

 

বৃত্ত

Image কে বৃত্তাকার বা Circle Shape এ দেখানোর জন্য .img-circle classটিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Cornerসাপোর্ট করে না।

উদাহরণ:

 <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" 
 height="236">

 

থাম্বনেল

Thumbnail Shape এ দেখানোর জন্য .img-thumbnail classটিকে যোগ করা হয়।
উদাহরণ:

 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" 
 height="236">

 

প্রতিক্রিয়াশীল ইমেজ

সাধারণত Image এবং screen এর size ভিন্ন ভিন্ন হতে পারে। আবার, রেসপন্সিভ ইমেজ (Responsive Images) screen এর size অনুযায়ী image কে resize করে parent element এর সাথে সামঞ্জস্য রেখে screen এ ডিসপ্লে করে। রেসপন্সিভ ইমেজ তৈরি করার জন্য .img-responsive class টিতে <img> ট্যাগে যোগ করা হয়। উল্লেখ্য যে, .img-responsive class এর ক্ষেত্রে max-width: 100%; এবং height: auto; প্রযোজ্য হয়।

উদাহরণ:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

ফলাফল : প্রতিক্রিয়াশীল ইমেজ

 

Image Gallery বা গ্যালারী তৈরি

Bootstrap’s grid system এ .thumbnail class যোগ করেও ইমেজ গ্যালারী তৈরি করা যায়।
উদাহরণ:

 <div class="row">
  <div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of 
      France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" 
      style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.
      </p>
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>
</div>

ফলাফল : ইমেজ গ্যালারী

 

প্রতিক্রিয়াশীল Embed

যে কোনো রকম videos বা slideshows রেসপন্সিভ হিসাবে যোগ করা যেতে পারে। এক্ষেত্রে সরাসরি <iframe>, <embed>, <video>, এবং <object> এলিমেন্ট এ class যোগ করা যায়।

নিম্নোক্ত উদাহরণে <iframe> ট্যাগে .embed-responsive-item class টি যোগ করে video টিকে রেসপন্সিভ আকারে উপস্থাপন করা হয়েছে। এক্ষেত্রে ভিডিওটির containing <div> টি হলো ভিডিওটির parent element, কাজেরই <div> এর মাধ্যমে video টির ratio নির্ধারিত হবে।

উদাহরণ :

 <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ফলাফল : প্রতিক্রিয়াশীল Embed

 

aspect ratio বলতে কি বোঝায়?

কোনো image এর width ও height এর মধ্যকার আনুপাতিক হার বা সম্পর্কই হচ্ছে aspect ratio. সাধারণত দুই প্রকারের video aspect ratios ব্যবহৃত হয় যথা: ৪:৩ (বিংশ শতাব্দীর universal ভিডিও ফরমেট) এবং ১৬:৯ (HD televisio n ও European digital television এর universal ভিডিও ফরমেট)। সম্পূর্ণ Bootstrap Image রেফারেন্স: image এর সকল class এর পরিপূর্ণ রেফারেন্স পেতে Bootstrap Image Reference অধ্যায়টি দেখুন।

 

Feb 12

বুটস্ট্র্যাপ টেবিল (Bootstrap Tables)

Bootstrap বেসিক টেবিল

সাধারণত Bootstrap বেসিক টেবিলে light padding বা সামান্য প্যাডিং ও horizontal বা আনুভূমিক divider থাকে। এক্ষেত্রে divider বলতে Row এর bottom-border কে বোঝানো হয়েছে।
.table class ব্যবহার করে টেবিলের basic styling করা হয়। যেমন:

কোড :

<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal 
dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

উল্লেখ্য : এই অনুচ্ছেদের সকল উদাহরণের ক্ষেত্রে বা সকল বুটস্ট্র্যাপ কোড নিয়ে কাজ করার সময় অবশ্যই হেড সেকশনে নিম্নোক্ত কোড টাইপ করতে হবে :

<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>

 

Striped Rows

.table-striped class ব্যবহার করে টেবিলে zebra-stripes যোগ করা হয়। যেমন:

কোড:

<div class="container">     
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Bordered Table

.table-bordered class ব্যবহার করে টেবিলের ও সেলের চারদিকে বর্ডার যোগ করা হয়। যেমন:

কোড : 

<div class="container">     
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Hover Rows

টেবিলের row বা সারিতে hover ইফেক্ট দেবার জন্য .table-hover class টি যোগ করা হয়। যেমন:

কোড :

<div class="container">         
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Condensed Table

.table-condensed class টি ব্যবহার করলে টেবিলের সেল সাধারণ প্যাডিং অর্ধেক পরিমাণে কমে যায়। যেমন:

কোড :

<div class="container">         
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Contextual Classes

সাধারণত কোনো টেবিলের rows (<tr>) কিংবা cells (<td>) এ color দেবার জন্য Contextual Classes ব্যবহার করা হয়। যেমন:

কোড :

<div class="container">        
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Contextual Class গুলো সাধারণত নির্দিষ্ট কিছু color কে নির্দেশ করে। যেসকল Contextual Class ব্যবহৃত হয় সেগুলো হলো:

 

.active কোনো টেবিলের row বা টেবিলের cell এর জন্য hover color এর জন্য ব্যবহৃত হয়।
.success সফল (successful ) বা ইতিবাচক (positive) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
.info নিরপেক্ষ বা তথ্যপূর্ণ (neutral informative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
.warning মনোযোগ আকর্ষণ করার জন্য বা সতর্কতামূলক (warning) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
.danger বিপদজনক বা নেতিবাচক (dangerous or potentially negative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।