Tag Archives: বাটন

এইচটিএমএল HTML

এইচটিএমএল ইনপুট ধরন (HTML Input Types)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

-মাসুদ-

 

আজকে আমরা জানবো এইচটিএমএল ইনপুট সম্পর্কে।

টেক্সট ইনপুট

সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়। এধরনের ইনপুট এক লাইনের হয়ে থাকে।

 <form>
 First name:<br>
 <input type="text" name="firstname">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

First name:

Last name:

 

পাসওয়ার্ড ইনপুট

পাসওয়ার্ড গ্রহণের জন্য এ ধরনের ইনপুট ফিল্ড ব্যবহৃত হয়।

<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

User name:
User password:

পাসওয়ার্ড এর ঘরটিতে কোনকিছু লিখলে তা মাস্কিং হয়ে থাকবে অর্থ্যাত লেখাগুলো দেখা যাবেনা।

 

সাবমিট বাটন

ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।

যেমনঃ

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Masud">
<br>
Last name:<br>
<input type="text" name="lastname" value="Rana">
<br><br>
<input type="submit" value="Submit">
</form>

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

First name:

Last name:

 

চেকবক্স

চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।

<form>
 <input type="checkbox" name="vehicle" value="Bike">I have a cycle
 <br>
 <input type="checkbox" name="vehicle" value="Car">I have a motorcycle
 </form>

 

 উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

I have a cycle
I have a motorcycle

 

রেডিও বাটন

রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়।লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ

 <form>
 <input type="radio" name="sex" value="male" checked>Male
 <br>
 <input type="radio" name="sex" value="female">Female
 </form>

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

Male
Female

 

JQuery : জেকুএরি

জেকোয়েরি দিয়ে মোবাইল টুলবার এর বাটন বানানো . jQuery Mobile Toolbars

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি দিয়ে মোবাইল বাটন বানানো

লেখকঃ মোস্তাফিজুর ফিরোজ ।

আমরা প্রত্যেক সাইটে ঢুকলে অনেক ধরণের বাটন দেখি । এগুলো আমাদের সাইটটিকে খুব সহজে ভিজিট করতে আর এক পেজ থেকে হোম পেজ অথবা অন্য কোন পেজে নেভিগেশনে সাহায্য করে । আসুন আজ খুব সহজে জেকোয়েরি দিয়ে বাটন বানানো শিখবো ।

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

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

<div data-role="header">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>

উপরের কোডটুকু আপনাকে পেজের বাম সাইডে একটা হোম বাটন এবং ডান সাইডে একটা খোঁজ বাটন যুক্ত করতে সাহায্য করবে ।

<div data-role="header">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div>

এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের বাম সাইডে একটা বাটন যুক্ত করতে পারবেন ।

<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div>

এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের ডান সাইডে একটা বাটন যুক্ত করতে পারবেন ।

মনে রাখবেন হেডারে আপনি একসাথে দুইটির বেশি বাটন রাখতে পারবেন না । কিন্তু ফুটারে বাটনের কোনো সীমাবদ্ধতা নেই । আপনি আপনার ইচ্ছামত বাটন ব্যবহার করতে পারবেন ।

ফুটার বারের কোড সমূহ
একটি পেজের সবথেকে নিচের অংশকে ফুটার বলা হয় । ফুটার হেডারের চেয়ে বেশি পরিবর্তন করা সহজ । এতে বেশি পেজ লিংক, বাটন ইত্যাদি যোগ করে একে আরো বেশি আকর্ষণীয় করে তোলা যায় ।

<div data-role="footer">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>

এই কোডটি ফুটারে বসিয়ে আপনি খুব সহজে ফেসবুক, টুইটার, ইন্সটাগ্রামের বাটন যোগ করতে পারবেন ।

কিন্তু ফুটারের বাটনগুলো সাধারণত মাঝখানে বসে না । তাই এই জন্য আপনাকে নিচের সিএসএস কোড দিয়ে পরিবর্তন করে নিতে হবে ।
<div data-role="footer" style="text-align:center;">

তাছাড়া আপনি গুরুপ বাটন গুলো ফুটারে নিচের কোড দিয়ে সমান্তরালে অথবা আনুভূমিকভাবে ব্যবহার করতে পারবেন ।

<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div>

হেডার এবং ফুটারের পজিশন ঠিক করা
হেডার এবং ফুটারের পজিশন তিনভাবে ঠিক করা যায় ।
১। ইনলাইনঃ এটা ডিফল্টভাবে যেটা দেয়া থাকে । মানে হেডার এবং ফুটার পেজের উপাদানের সাথে একই লাইনে থাকে ।

২। ফিক্সডঃ হেডার এবং ফুটার যথাক্রমে পেজের উপরে এবং নিচে থাকে ।

৩। ফুল স্ক্রীনঃ এটা ফিক্সড পজিশনের মত । কিন্তু এতে হেডার এবং ফুটার পেজের উপাদান সমূহের উপরে থাকে ।

আসুন তাহলে এবার কোড গুলো দেখে নেই ।
১। ইনলাইন পজিশনের কোডঃ
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

২। ফিক্সড পজিশনের কোডঃ
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

৩। ফুল স্ক্রীন পজিশনের কোডঃ
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

এতে উপরের মত data-position="fixed" রাখতে হবে ।
ফুল স্ক্রীন পজিশন ছবি, ভিডিও সাইটের জন্য খুব উপযোগী ।

আর এরই ভিতর কিন্তু আমরা খুব সহজে জেকোয়েরি দিয়ে মোবাইল বাটন বানানো শিখে গেলাম । খুব সহজ তাই না । হুম, আমার কাছেও এটা খুব সহজ লাগে । তবুও কোথাও না বুঝলে কমেন্ত করতে ভুলবেন না কিন্তু ।

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

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

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

বাটন ক্লাস গুলোতে <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>

 

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

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

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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>