Feb 13

বুটস্ট্র্যাপ ফরম ইনপুট (Bootstrap Form Inputs)

মো: আসাদুজ্জামান মিলন
আইটি ইন্সট্রাক্টর,
এমএসআইটি, কুড়িগ্রাম।

 

সমর্থিত ফরম কন্ট্রোল

বুটস্ট্র্যাপ নিম্নলিখিত ফর্ম কন্ট্রোলগুলো সমর্থন করে

  • input
  • textarea
  • checkbox
  • radio
  • select

 

বুটস্ট্র্যাপ ইনপুট

বুটস্ট্র্যাপ এইচটিএমএল ৫ এর সকল ইনপুট টাইপ, যেমন : text, password, time, color. datetime, datetime-local, date, month, week, number, email, url ইত্যাদি সর্মথন করে।

নিচের উধাহরনে দুই প্রকারের এইচটিএমএল ৫ ইনপুট যথাঃ text ও password এর ব্যবহার দেখান হল।

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

 

বুটস্ট্র্যাপ টেক্সটএরিয়া


ওয়েবপেজের যে অংশে ব্যবহার কারী তার মতামত বা মনের কথা লিখতে পারে সেটিকে টেক্সট এরিয়া বলে। নিচের উদাহরনে টেক্সটএরিয়া এর ব্যবহার দেখান হল।

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

 

বুটস্ট্র্যাপ চেকবক্স


ওয়েবপেজে চেকবক্স ব্যবহার করা হয় যাতে ব্যবহারকারী অনেক গুলি অপশন থেকে তার পছন্দের এক বা একাধিক অপশন বেছে নিতে পারে । এর মাধ্যমে ব্যবহার কারী অনেকগুলি র্পূব নির্ধারিত বিষয় থেকে তার পছন্দের বিষয়টি বা বিষয়গুলি র্নিবাচন করতে পারেন। নিচের উদাহরন থেকে বিষয়টি বোঝা যাবে।

<div class="checkbox">
  <label><input type="checkbox" value="">Dhaka</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Rangpur</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Bai Jing</label>
</div>

উপরের উধাহরনে দেখা যাচ্ছে, একজন ব্যবহার কারী তার পছন্দের শহর র্নিবাচনের জন্য ঢাকা, রংপুর এবং বেইজিং নামক তিনটি অপশন পাবেন যার মধ্যে বেইজিং অপশনটি নিস্ক্রিয় থাকবে।

যদি সবগুলি চেকবক্স একই লাইনে প্রদর্শন করার প্রয়োজন হয়, তবে checkbox-inline ক্লাস এর ব্যবহার করা যায়। নিচের উধাহরনে বিষয়টি বোঝা যাবে।

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

 

বুটস্ট্র্যাপ রেডিও বাটন


ওয়েবপেজে রেডিও বাটন ব্যবহার করা হয়, যাতে ব্যবহার কারী অনেক গুলি অপশন থেকে তার পছন্দের একটি মাত্র অপশন বেছে নিতে পারে। উদাহরনঃ

<div class="radio">
  <label><input type="radio" name="optradio">Dhaka</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Rangpur</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Bai Jing</label>
</div>

উপরের উধাহরনে দেখা যাচ্ছে, একজন ব্যবহার কারী তার পছন্দের শহর র্নিবাচনের জন্য ঢাকা, রংপুর এবং বেইজিং নামক তিনটি শহর থেকে ঢাকা ও রংপুর এর যেকোন একটি নির্বাচনের সুযোগ পাবেন। বেইজিং নামক অপশনটি নিস্ক্রিয় দেথানো হয়েছে।যদি সবগুলি রেডিও বাটন একই লাইনে প্রদর্শন করার প্রয়োজন হয়, তবে radio-inline ক্লাস এর ব্যবহার করা যায়।

 

বুটস্ট্র্যাপ সিলেক্ট লিষ্ট


ব্যবহারকারীকে অনেকগুলি বিষয়ের একটি তালিকা থেকে একটি বিষয় বাছাই করার সুযোগ দিতে সিলেক্ট লিষ্ট ব্যবহার করতে হয। নিচের উধাহরনে বিষয়টি বোঝা যাবে।

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

 

 

Feb 13

বুটস্ট্র্যাপ ফর্মস (Bootstrap Forms)

বুটস্ট্র্যাপ এর ডিফল্ট সেটিংস

বুটস্ট্র্যাপ ফর্মস কন্ট্রোলগুলো স্বয়ংক্রিয়ভাবে কিছু global styling নেয়:

সকল Textual .form-control Class এর <input>, <textarea>, এবং <select> এলিমেন্টগুলোর  বিস্তার ১০০%

 

বুটস্ট্র্যাপ ফরম লেআউট

Bootstrap তিন ধরনের ফর্ম layouts প্রদর্শন করেঃ

  • Vertical form বা উল্লম্ব ফর্ম (এটি ডিফল্ট হিসেবে থাকে)
  • Horizontal form বা আড়াআড়ি ফর্ম
  • Inline form

এই সকল ফর্ম layouts এর জন্য কিছু আদর্শ বিধিমালা আছে

  • সবসময় <form role=”form”> ব্যবহার করতে হবে (স্ক্রিন রিডার ব্যবহার করে মানুষের জন্য প্রবেশযোগ্যতা উন্নত করতে সাহায্য করে)
  • ফর্ম গুছাতে এবং নিয়ন্ত্রন করতে <div class=”form-group”> ব্যবহার করতে হয় (সর্বোত্তম ফাঁকা স্থান দেয়ার জন্য প্রয়োজন)
  • সকল টেক্সট বেজ এলিমেন্ট <input>, <textarea>, এবং <select> এর জন্য .form-control ক্লাস কোয করা হয়।

 

বুটস্ট্র্যাপ উল্লম্ব ফরম Vertical Form (default)

দুইটা input fields, একটি চেকবক্স এবং একটি submit button এর সাহায্যে নিচের উদাহরন এর মতো একটি উলম্ব ফর্ম গঠন করা যায়:

উদাহরনঃ

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

 

বুটস্ট্র্যাপ ইনলাইন ফরম

একটি inline form এ সকল উপাদানগুলো একটা সরল রেখায় থাকে , left-aligned, এবং লেবেল পাশাপাশি থাকে

বিশেষ দ্রস্টব্যঃ এটা শুধু মাত্র তখনই প্রদর্শিত হবে যখন viewports এর প্রসস্থতা 768px হবে।

কিছু অতিরিক্ত নিয়ম আছে এটা ব্যবহার করার জন্যঃ

  • .form-inline class টা <form> এর মাঝে স্থাপন করতে হয়

উদাহরনঃ

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ফলাফল : Bootstrap Inline Form

 

সতর্কতাঃ প্রত্যেক input এর জন্য যদি label ব্যবহার না করা হয় তাহলে screen readers ফর্ম গঠনে সমস্যা করতে পারে ।

শধু মাত্র screen reader ছাড়া .sr-only class ব্যবহার করে সকল devices এর জন্য labels hide করে রাখা যাবে।

উদাহরনঃ

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ফলাফল : Inline form with sr-only class

 

বুটস্ট্র্যাপ অনুভূমিক ফর্ম

A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of the form.

উভয় markup এবং presentation ফর্ম এর ক্ষেত্রে আড়াআড়ি ফর্ম গুলো অন্য ফর্মগুলো থেকে দূরত্ব বজায় রাখে

টা ব্যবহার করার কিছু নিয়ম আছে:

  • <form> এলিমেন্ট এর মধ্যে .form-horizontal class স্থাপন করতে হয়
  • সকল <label> এলিমেন্ট এর মাঝে .control-label class ব্যবহার করতে হয়

উদাহরনঃ

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

ফলাফল : Bootstrap Horizontal Form

 

 

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>

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