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>

 

Permanent link to this article: http://bangla.sitestree.com/bootstrap-case-adding-button-and-icon/