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

উপাদান

নেভিগেশন, সতর্কতা, পপওভার এবং আরও অনেক কিছু প্রদানের জন্য কয়েক ডজন পুনঃব্যবহারযোগ্য উপাদান বুটস্ট্র্যাপে তৈরি করা হয়েছে।

বোতাম গোষ্ঠী আরও টুলবারের মতো কার্যকারিতার জন্য বোতামগুলিতে যোগ দিন

বোতাম গ্রুপ

একটি যৌগিক উপাদান হিসাবে একসাথে একাধিক বোতামে যোগ দিতে বোতাম গোষ্ঠীগুলি ব্যবহার করুন। একটি সিরিজ <a>বা <button>উপাদান দিয়ে তাদের তৈরি করুন.

সেরা অনুশীলন

আমরা বোতাম গ্রুপ এবং টুলবার ব্যবহার করার জন্য নিম্নলিখিত নির্দেশিকা সুপারিশ করি:

  • সর্বদা একটি একক বোতাম গ্রুপে একই উপাদান ব্যবহার করুন, <a>বা <button>.
  • একই বোতাম গ্রুপে বিভিন্ন রঙের বোতাম মিশ্রিত করবেন না।
  • টেক্সট ছাড়াও বা পরিবর্তে আইকন ব্যবহার করুন, কিন্তু যেখানে উপযুক্ত সেখানে Alt এবং শিরোনাম টেক্সট অন্তর্ভুক্ত করতে ভুলবেন না।

ড্রপডাউন সহ সম্পর্কিত বোতাম গোষ্ঠীগুলিকে (নীচে দেখুন) আলাদাভাবে ডাকতে হবে এবং উদ্দেশ্যমূলক আচরণ নির্দেশ করার জন্য সর্বদা একটি ড্রপডাউন ক্যারেট অন্তর্ভুক্ত করতে হবে।

ডিফল্ট উদাহরণ

অ্যাঙ্কর ট্যাগ বোতামগুলির সাথে তৈরি একটি স্ট্যান্ডার্ড বোতাম গ্রুপের জন্য HTML কীভাবে দেখায় তা এখানে:

  1. <div class = "btn-group" > 
  2.   <বাটন ক্লাস = "বিটিএন" > 1 </ বোতাম> 
  3.   <বাটন ক্লাস = "বিটিএন" > 2 </ বোতাম> 
  4.   <বাটন ক্লাস = "বিটিএন" > 3 </ বোতাম> 
  5. </div>

টুলবার উদাহরণ

আরো জটিল উপাদানের জন্য <div class="btn-group">a এর সেটগুলিকে একত্রিত করুন।<div class="btn-toolbar">

  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     ...
  4.   </div>
  5. </div>

চেকবক্স এবং রেডিও স্বাদ

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

জাভাস্ক্রিপ্ট পান »

বোতাম গ্রুপে ড্রপডাউন

মাথা আপ! সঠিক রেন্ডারিংয়ের জন্য ড্রপডাউন সহ বোতামগুলিকে পৃথকভাবে .btn-groupএকটি এর মধ্যে মোড়ানো উচিত।.btn-toolbar

বোতাম ড্রপডাউন মেনু প্রাসঙ্গিক মেনু প্রদান করার জন্য বোতাম গোষ্ঠীর উপর নির্মিত

বোতাম ড্রপডাউন

ওভারভিউ এবং উদাহরণ

একটি ড্রপডাউন মেনু ট্রিগার করার জন্য যেকোন বোতামটি একটি এর মধ্যে রেখে .btn-groupএবং সঠিক মেনু মার্কআপ প্রদান করে ব্যবহার করুন।

উদাহরণ মার্কআপ

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

  1. <div class = "btn-group" > 
  2.   <a class = "btn dropdown-toggle" data-toggle = "ড্রপডাউন" href = "#" >   
  3.     কর্ম
  4.     <span ক্লাস = "ক্যারেট" ></span> 
  5.   </a>
  6.   <ul class = "ড্রপডাউন-মেনু" > 
  7.     <!-- ড্রপডাউন মেনু লিঙ্ক -->
  8.   </ul>
  9. </div>

সমস্ত বোতাম আকারের সাথে কাজ করে

বোতাম ড্রপডাউন যেকোনো আকারে কাজ করে। আপনার বোতামের আকার .btn-large, .btn-smallবা.btn-mini

জাভাস্ক্রিপ্ট প্রয়োজন

বোতাম ড্রপডাউনগুলির কাজ করার জন্য বুটস্ট্র্যাপ ড্রপডাউন প্লাগইন প্রয়োজন।

কিছু ক্ষেত্রে—যেমন মোবাইল—ড্রপডাউন মেনু ভিউপোর্টের বাইরে প্রসারিত হবে। আপনাকে ম্যানুয়ালি বা কাস্টম জাভাস্ক্রিপ্টের সাথে সারিবদ্ধকরণটি সমাধান করতে হবে।


স্প্লিট বোতাম ড্রপডাউন

ওভারভিউ এবং উদাহরণ

বোতামের গ্রুপ শৈলী এবং মার্কআপের উপর ভিত্তি করে, আমরা সহজেই একটি বিভক্ত বোতাম তৈরি করতে পারি। স্প্লিট বোতামে প্রাসঙ্গিক লিঙ্ক সহ বাম দিকে একটি স্ট্যান্ডার্ড অ্যাকশন এবং ডানদিকে একটি ড্রপডাউন টগল রয়েছে৷

মাপ

অতিরিক্ত বোতাম ক্লাস ব্যবহার করুন .btn-mini, .btn-smallবা .btn-largeসাইজিংয়ের জন্য।

  1. <div class = "btn-group" > 
  2.   ...
  3.   <ul class = "ড্রপডাউন-মেনু টান-ডান" > 
  4.     <!-- ড্রপডাউন মেনু লিঙ্ক -->
  5.   </ul>
  6. </div>

উদাহরণ মার্কআপ

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

  1. <div class = "btn-group" > 
  2.   <বাটন ক্লাস = "btn" > অ্যাকশন </ বোতাম> 
  3.   <বোতাম ক্লাস = "বিটিএন ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" >  
  4.     <span ক্লাস = "ক্যারেট" ></span> 
  5.   </ বোতাম>
  6.   <ul class = "ড্রপডাউন-মেনু" > 
  7.     <!-- ড্রপডাউন মেনু লিঙ্ক -->
  8.   </ul>
  9. </div>

ড্রপআপ মেনু

ড্রপডাউন মেনুগুলিকে এর অবিলম্বে অভিভাবকের সাথে একটি একক শ্রেণী যোগ করে নীচে থেকে উপরে টগল করা যেতে পারে .dropdown-menu৷ এটির দিকটি ফ্লিপ করবে .caretএবং উপরে নিচের পরিবর্তে নিচ থেকে উপরে সরানোর জন্য মেনুটিকেই পুনরায় অবস্থান করবে।

  1. <div class = "btn-গ্রুপ ড্রপআপ" > 
  2.   <button class = "btn" > ড্রপআপ </ বোতাম> 
  3.   <বোতাম ক্লাস = "বিটিএন ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" >  
  4.     <span ক্লাস = "ক্যারেট" ></span> 
  5.   </ বোতাম>
  6.   <ul class = "ড্রপডাউন-মেনু" > 
  7.     <!-- ড্রপডাউন মেনু লিঙ্ক -->
  8.   </ul>
  9. </div>

পেজিনেশন বিষয়বস্তুর মাধ্যমে পেজ করার জন্য দুটি বিকল্প

মাল্টিকন-পেজ পেজিনেশন

কখন ব্যবহার করতে হবে

Rdio দ্বারা অনুপ্রাণিত অতি সরল এবং ন্যূনতম স্টাইলযুক্ত পৃষ্ঠা সংখ্যা, অ্যাপ এবং অনুসন্ধান ফলাফলের জন্য দুর্দান্ত। বড় ব্লক মিস করা কঠিন, সহজেই মাপযোগ্য, এবং বড় ক্লিক এলাকা প্রদান করে।

রাষ্ট্রীয় পৃষ্ঠা লিঙ্ক

লিঙ্কগুলি কাস্টমাইজযোগ্য এবং সঠিক শ্রেণীর সাথে বিভিন্ন পরিস্থিতিতে কাজ করে। .disabledআনক্লিকযোগ্য লিঙ্কের .activeজন্য এবং বর্তমান পৃষ্ঠার জন্য।

নমনীয় প্রান্তিককরণ

পেজিনেশন লিঙ্কের প্রান্তিককরণ পরিবর্তন করতে দুটি ঐচ্ছিক ক্লাসের যে কোনো একটি যোগ করুন: .pagination-centeredএবং .pagination-right।

উদাহরণ

ডিফল্ট পেজিনেশন কম্পোনেন্ট নমনীয় এবং বিভিন্ন বৈচিত্রের মধ্যে কাজ করে।

মার্কআপ

একটিতে মোড়ানো <div>, পৃষ্ঠা সংখ্যা শুধু একটি <ul>।

  1. <div class = "পৃষ্ঠা সংখ্যা" > 
  2.   <ul>
  3.     <li><a href = "#" > আগের </a></li> 
  4.     <li ক্লাস = "সক্রিয়" > 
  5.       <a href = "#" > 1 </a> 
  6.     </li>
  7.     <li><a href = "#" > 2 </a></li> 
  8.     <li><a href = "#" > 3 </a></li> 
  9.     <li><a href = "#" > 4 ​​</a></li> 
  10.     <li><a href = "#" > পরবর্তী </a></li> 
  11.   </ul>
  12. </div>

দ্রুত পূর্ববর্তী এবং পরবর্তী লিঙ্কগুলির জন্য পেজার

পেজার সম্পর্কে

পেজার কম্পোনেন্ট হল হালকা মার্কআপ এবং এমনকি হালকা শৈলী সহ সহজ পেজিনেশন বাস্তবায়নের জন্য লিঙ্কগুলির একটি সেট। এটি ব্লগ বা ম্যাগাজিনের মতো সাধারণ সাইটের জন্য দুর্দান্ত৷

ঐচ্ছিক অক্ষম রাষ্ট্র

.disabledপেজার লিঙ্কগুলিও পেজিনেশন থেকে সাধারণ ক্লাস ব্যবহার করে ।

ডিফল্ট উদাহরণ

ডিফল্টরূপে, পেজার লিঙ্কগুলিকে কেন্দ্র করে।

  1. <ul class = "পেজার" > 
  2.   <li>
  3.     <a href="#" > আগের </a> _ _ 
  4.   </li>
  5.   <li>
  6.     <a href="#" > পরবর্তী </a> _ _ 
  7.   </li>
  8. </ul>

সারিবদ্ধ লিঙ্ক

বিকল্পভাবে, আপনি পাশের প্রতিটি লিঙ্ক সারিবদ্ধ করতে পারেন:

  1. <ul class = "পেজার" > 
  2.   <li ক্লাস = "আগের" > 
  3.     <a href = "#" > ← পুরাতন </a> 
  4.   </li>
  5.   <li ক্লাস = "পরবর্তী" > 
  6.     <a href = "#" > নতুন → </a> 
  7.   </li>
  8. </ul>

ইনলাইন লেবেল লেবেল এবং টেক্সট টীকা

লেবেল মার্কআপ
ডিফল্ট <span class="label">Default</span>
সফলতা <span class="label label-success">Success</span>
সতর্কতা <span class="label label-warning">Warning</span>
গুরুত্বপূর্ণ <span class="label label-important">Important</span>
তথ্য <span class="label label-info">Info</span>
বিপরীত <span class="label label-inverse">Inverse</span>

ব্যাজ সূচক এবং অপঠিত সংখ্যা

সম্পর্কিত

ব্যাজ হল ছোট, সরল উপাদান যা কোনো সূচক বা কোনো ধরনের গণনা প্রদর্শনের জন্য। এগুলি সাধারণত Mail.app-এর মতো ইমেল ক্লায়েন্টগুলিতে বা পুশ বিজ্ঞপ্তিগুলির জন্য মোবাইল অ্যাপগুলিতে পাওয়া যায়৷

উপলব্ধ ক্লাস

নাম উদাহরণ মার্কআপ
ডিফল্ট 1 <span class="badge">1</span>
সফলতা 2 <span class="badge badge-success">2</span>
সতর্কতা 4 <span class="badge badge-warning">4</span>
গুরুত্বপূর্ণ 6 <span class="badge badge-important">6</span>
তথ্য 8 <span class="badge badge-info">8</span>
বিপরীত 10 <span class="badge badge-inverse">10</span>

টাইপোগ্রাফিক উপাদান পৃষ্ঠা শিরোনাম এবং বিষয়বস্তু ভাগ করার জন্য হিরো ইউনিট

হিরো ইউনিট

বুটস্ট্র্যাপ আপনার সাইটে সামগ্রী প্রদর্শনের জন্য হিরো ইউনিট নামে একটি হালকা, নমনীয় উপাদান সরবরাহ করে। এটি মার্কেটিং এবং কন্টেন্ট-ভারী সাইটগুলিতে ভাল কাজ করে।

মার্কআপ

আপনার বিষয়বস্তুকে divএমনভাবে মোড়ানো:

  1. <div class = "hero-unit" > 
  2.   <h1> শিরোনাম </h1>
  3.   <p> ট্যাগলাইন </p>
  4.   <p>
  5.     <a class = "btn btn-primary btn-large" > 
  6.       আরও জানুন
  7.     </a>
  8.   </p>
  9. </div>

ওহে বিশ্ব!

এটি একটি সাধারণ নায়ক ইউনিট, বৈশিষ্ট্যযুক্ত বিষয়বস্তু বা তথ্যের প্রতি অতিরিক্ত মনোযোগ দেওয়ার জন্য একটি সাধারণ জাম্বোট্রন-স্টাইলের উপাদান।

আরও জানুন

পেজের উপরের অংশ

h1একটি পৃষ্ঠার বিষয়বস্তুর যথাযথভাবে স্থান বের করতে এবং সেগমেন্ট করার জন্য একটি সাধারণ শেল । এটি h1এর ডিফল্ট small, উপাদানের পাশাপাশি বেশিরভাগ অন্যান্য উপাদান (অতিরিক্ত শৈলী সহ) ব্যবহার করতে পারে।

উদাহরণ পৃষ্ঠা শিরোনাম শিরোনাম জন্য সাবটেক্সট

  1. <div ক্লাস = "পৃষ্ঠা-শিরোনাম" > 
  2.   <h1> উদাহরণ পৃষ্ঠা শিরোনাম </h1>
  3. </div>

ছবি, ভিডিও, পাঠ্য এবং আরও অনেক কিছুর থাম্বনেইল গ্রিড

ডিফল্ট থাম্বনেল

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

অত্যন্ত কাস্টমাইজযোগ্য

একটু অতিরিক্ত মার্কআপের সাহায্যে, থাম্বনেইলে শিরোনাম, অনুচ্ছেদ বা বোতামের মতো যেকোনো ধরনের HTML সামগ্রী যোগ করা সম্ভব।

  • থাম্বনেইল লেবেল

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    কর্ম কর্ম

  • থাম্বনেইল লেবেল

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    কর্ম কর্ম

কেন থাম্বনেইল ব্যবহার

থাম্বনেইলগুলি (আগে .media-gridv1.4 পর্যন্ত) ফটো বা ভিডিওগুলির গ্রিড, চিত্র অনুসন্ধান ফলাফল, খুচরা পণ্য, পোর্টফোলিও এবং আরও অনেক কিছুর জন্য দুর্দান্ত৷ এগুলি লিঙ্ক বা স্ট্যাটিক কন্টেন্ট হতে পারে।

সহজ, নমনীয় মার্কআপ

থাম্বনেইল মার্কআপ সহজ—এটি ulযেকোন সংখ্যক liউপাদান সহ যা প্রয়োজন। এটি অত্যন্ত নমনীয়, আপনার বিষয়বস্তুগুলিকে মোড়ানোর জন্য একটু বেশি মার্কআপ সহ যেকোনো ধরনের সামগ্রীর অনুমতি দেয়৷

গ্রিড কলামের আকার ব্যবহার করে

সবশেষে, থাম্বনেইল কম্পোনেন্ট বিদ্যমান গ্রিড সিস্টেম ক্লাস ব্যবহার করে—যেমন .span2বা .span3—থাম্বনেইলের মাত্রা নিয়ন্ত্রণের জন্য।

মার্কআপ

পূর্বে উল্লিখিত হিসাবে, থাম্বনেইলের জন্য প্রয়োজনীয় মার্কআপ হালকা এবং সোজা। এখানে লিঙ্ক করা ইমেজগুলির জন্য ডিফল্ট সেটআপটি দেখুন :

  1. <ul class = "থাম্বনেল" > 
  2.   <li class = "span3" > 
  3.     <a href = "#" ক্লাস = "থাম্বনেল" >  
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

থাম্বনেইলে কাস্টম HTML সামগ্রীর জন্য, মার্কআপ সামান্য পরিবর্তিত হয়। যেকোনো জায়গায় ব্লক লেভেল কন্টেন্টের অনুমতি দিতে, আমরা লাইকের <a>জন্য অদলবদল করি <div>:

  1. <ul class = "থাম্বনেল" > 
  2.   <li class = "span3" > 
  3.     <div class = "thumbnail" > 
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.       <h5> থাম্বনেইল লেবেল </h5>
  6.       <p> থাম্বনেইল ক্যাপশন এখানে... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

আরো উদাহরণ

আপনার জন্য উপলব্ধ বিভিন্ন গ্রিড ক্লাস সহ আপনার সমস্ত বিকল্পগুলি অন্বেষণ করুন৷ এছাড়াও আপনি বিভিন্ন আকার মিশ্রিত এবং মিলাতে পারেন।

সাফল্য, সতর্কতা এবং ত্রুটি বার্তার জন্য সতর্কতা শৈলী

লাইটওয়েট ডিফল্ট

পুনর্লিখিত বেস ক্লাস

বুটস্ট্র্যাপ 2 এর সাথে, আমরা বেস ক্লাসকে সরলীকৃত করেছি: .alertপরিবর্তে .alert-message। আমরা ন্যূনতম প্রয়োজনীয় মার্কআপও কমিয়ে দিয়েছি— <p>ডিফল্টরূপে কোনো প্রয়োজন নেই, শুধুমাত্র বাইরের <div>।

একক সতর্কতা বার্তা

কম কোড সহ আরও টেকসই উপাদানের জন্য, আমরা ব্লক সতর্কতা, আরও প্যাডিং এবং সাধারণত আরও পাঠ্য সহ আসা বার্তাগুলির জন্য পার্থক্যকারী চেহারা সরিয়ে দিয়েছি। শ্রেণীও পরিবর্তিত হয়েছে .alert-block।

জাভাস্ক্রিপ্টের সাথে দুর্দান্ত যায়

বুটস্ট্র্যাপ একটি দুর্দান্ত jQuery প্লাগইন সহ আসে যা সতর্কতা বার্তাগুলিকে সমর্থন করে, সেগুলি দ্রুত এবং সহজে খারিজ করে দেয়৷

প্লাগইন পান »

উদাহরণ সতর্কতা

আপনার বার্তা এবং একটি ঐচ্ছিক ক্লোজ আইকনকে সাধারণ ক্লাস সহ একটি ডিভিতে মোড়ানো।

সতর্কতা ! নিজেকে ভালো করে দেখুন, আপনি খুব ভালো দেখাচ্ছেন না। 
  1. <div class = "সতর্কতা" > 
  2.   <বাটন ক্লাস = "ক্লোজ" ডেটা-ডিসমিস = "সতর্ক" > × </ বোতাম>  
  3.   <strong> সতর্কতা! </strong> সর্বোত্তম চেক ইয়ো নিজেকে, আপনি খুব ভাল দেখাচ্ছে না.
  4. </div>

মাথা আপ! আইওএস ডিভাইসে href="#"সতর্কতা খারিজ করার জন্য একটি প্রয়োজন। অ্যাঙ্কর ক্লোজ আইকনগুলির জন্য এটি এবং ডেটা অ্যাট্রিবিউট অন্তর্ভুক্ত করতে ভুলবেন না। বিকল্পভাবে, আপনি <button>ডেটা অ্যাট্রিবিউট সহ একটি উপাদান ব্যবহার করতে পারেন, যা আমরা আমাদের ডক্সের জন্য বেছে নিয়েছি। ব্যবহার করার সময় <button>, আপনাকে অবশ্যই অন্তর্ভুক্ত করতে হবে type="button"বা আপনার ফর্ম জমা নাও হতে পারে।

দুটি ঐচ্ছিক ক্লাস সহ স্ট্যান্ডার্ড সতর্কতা বার্তাটি সহজে প্রসারিত করুন: .alert-blockআরও প্যাডিং এবং পাঠ্য নিয়ন্ত্রণের .alert-headingজন্য এবং একটি মিল শিরোনামের জন্য।

সতর্কতা !

নিজেকে ভালো করে দেখুন, আপনি খুব ভালো দেখাচ্ছেন না। নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু। প্রেজেন্ট কমোডো কার্সাস ম্যাগনা, vel scelerisque nisl consectetur et.

  1. <div ক্লাস = "সতর্ক সতর্কতা-ব্লক" > 
  2.   <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  3.   <h4 ক্লাস = "সতর্ক-শিরোনাম" > সতর্কতা! </h4> 
  4.   নিজেকে পরীক্ষা করে দেখুন, আপনি নন...
  5. </div>

প্রাসঙ্গিক বিকল্প একটি সতর্কতার অর্থ পরিবর্তন করতে ঐচ্ছিক ক্লাস যোগ করুন

ত্রুটি বা বিপদ

ওহ স্ন্যাপ! কিছু জিনিস পরিবর্তন করুন এবং আবার জমা দেওয়ার চেষ্টা করুন। 
  1. <div ক্লাস = "সতর্ক সতর্কতা-ত্রুটি" > 
  2.   ...
  3. </div>

সফলতা

সাবাশ! আপনি সফলভাবে এই গুরুত্বপূর্ণ সতর্কতা বার্তা পড়েছেন৷ 
  1. <div ক্লাস = "সতর্ক সতর্কতা-সাফল্য" > 
  2.   ...
  3. </div>

তথ্য

মাথা আপ! এই সতর্কতা আপনার মনোযোগ প্রয়োজন, কিন্তু এটি খুব গুরুত্বপূর্ণ নয়. 
  1. <div class = "সতর্ক সতর্কতা-তথ্য" > 
  2.   ...
  3. </div>

লোডিং, রিডাইরেক্ট বা অ্যাকশন স্ট্যাটাসের জন্য অগ্রগতি বার

উদাহরণ এবং মার্কআপ

মৌলিক

একটি উল্লম্ব গ্রেডিয়েন্ট সহ ডিফল্ট অগ্রগতি বার।

  1. <div ক্লাস = "প্রগতি" > 
  2.   <div ক্লাস = "বার" 
  3.        স্টাইল = " প্রস্থ : 60 %; " ></div> 
  4. </div>

ডোরাকাটা

একটি ডোরাকাটা প্রভাব তৈরি করতে একটি গ্রেডিয়েন্ট ব্যবহার করে (আইই নেই)।

  1. <div class = "progress progress-striped" > 
  2.   <div ক্লাস = "বার" 
  3.        স্টাইল = " প্রস্থ : 20 %; " ></div> 
  4. </div>

অ্যানিমেটেড

ডোরাকাটা উদাহরণ নেয় এবং এটিকে অ্যানিমেট করে (কোনও IE)।

  1. <div class = "অগ্রগতি অগ্রগতি-স্ট্রিপড 
  2.      সক্রিয়" >
  3.   <div ক্লাস = "বার" 
  4.        স্টাইল = " প্রস্থ : 40 %; " ></div> 
  5. </div>

বিকল্প এবং ব্রাউজার সমর্থন

অতিরিক্ত রং

অগ্রগতি বারগুলি সামঞ্জস্যপূর্ণ শৈলীর জন্য একই বোতাম এবং সতর্কতা ক্লাসের কিছু ব্যবহার করে।

ডোরাকাটা বার

কঠিন রঙের অনুরূপ, আমাদের বিভিন্ন ডোরাকাটা অগ্রগতি বার রয়েছে।

আচরণ

অগ্রগতি বারগুলি CSS3 ট্রানজিশন ব্যবহার করে, তাই আপনি যদি জাভাস্ক্রিপ্টের মাধ্যমে গতিশীলভাবে প্রস্থ সামঞ্জস্য করেন, তাহলে এটি মসৃণভাবে আকার পরিবর্তন করবে।

আপনি যদি .activeক্লাস ব্যবহার করেন, আপনার .progress-stripedঅগ্রগতি বারগুলি বাম থেকে ডানে স্ট্রাইপগুলিকে অ্যানিমেট করবে।

ব্রাউজার সমর্থন

অগ্রগতি বারগুলি তাদের সমস্ত প্রভাব অর্জন করতে CSS3 গ্রেডিয়েন্ট, ট্রানজিশন এবং অ্যানিমেশন ব্যবহার করে। এই বৈশিষ্ট্যগুলি IE7-9 বা ফায়ারফক্সের পুরানো সংস্করণগুলিতে সমর্থিত নয়৷

Opera এবং IE এই সময়ে অ্যানিমেশন সমর্থন করে না।

বিবিধ লাইটওয়েট ইউটিলিটি উপাদান

ওয়েলস

একটি ইনসেট প্রভাব দিতে একটি উপাদানের উপর একটি সাধারণ প্রভাব হিসাবে ভাল ব্যবহার করুন।

দেখ, আমি একটা কূপে আছি! 
  1. <div class = "ভাল" > 
  2.   ...
  3. </div>

ক্লোজ আইকন

মডেল এবং সতর্কতার মত বিষয়বস্তু খারিজ করার জন্য জেনেরিক ক্লোজ আইকন ব্যবহার করুন।

  1. <বোতাম ক্লাস = "বন্ধ" > × </ বোতাম>

iOS ডিভাইসে ক্লিক ইভেন্টের জন্য একটি href="#" প্রয়োজন যদি আপনি একটি অ্যাঙ্কর ব্যবহার করেন৷

  1. <a class = "close" href = "#" > × </a>