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

উপাদান

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

মাথা আপ! এই নথিগুলি v2.3.2 এর জন্য, যা আর আনুষ্ঠানিকভাবে সমর্থিত নয়৷ বুটস্ট্র্যাপের সর্বশেষ সংস্করণটি দেখুন!

বোতাম গ্রুপ

উদাহরণ

দুটি মৌলিক বিকল্প, আরও দুটি নির্দিষ্ট বৈচিত্র সহ।

একক বোতাম গ্রুপ

.btnসঙ্গে বোতাম একটি সিরিজ মোড়ানো .btn-group.

  1. <div class = "btn-group" > 
  2.   <button class = "btn" > বাম </ বোতাম> 
  3.   <button class = "btn" > মধ্য </ বোতাম> 
  4.   <বাটন ক্লাস = "btn" > ডান </ বোতাম> 
  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>

উল্লম্ব বোতাম গ্রুপ

বোতামগুলির একটি সেট অনুভূমিকভাবে না করে উল্লম্বভাবে স্ট্যাক করা প্রদর্শিত করুন।

  1. <div class = "btn-group btn-group-vertical" > 
  2.   ...
  3. </div>

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

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

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

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

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

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

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

  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.

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

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

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

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

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

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

মাপ

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

  1. <div class = "btn-group" > 
  2.   <বোতাম ক্লাস = "btn btn-mini" > অ্যাকশন </ বোতাম> 
  3.   <বোতাম ক্লাস = "btn btn-mini dropdown-toggle" data-toggle = "ড্রপডাউন" >  
  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 দ্বারা অনুপ্রাণিত সহজ পৃষ্ঠা সংখ্যা, অ্যাপ এবং অনুসন্ধান ফলাফলের জন্য দুর্দান্ত। বড় ব্লক মিস করা কঠিন, সহজেই মাপযোগ্য, এবং বড় ক্লিক এলাকা প্রদান করে।

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

অপশন

অক্ষম এবং সক্রিয় রাষ্ট্র

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

  1. <div class = "পৃষ্ঠা সংখ্যা" > 
  2.   <ul>
  3.     <li ক্লাস = "অক্ষম" ><a href = "#" > « </a></li>  
  4.     <li ক্লাস = "সক্রিয়" ><a href = "#" > 1 </a></li>  
  5.     ...
  6.   </ul>
  7. </div>

আপনি ইচ্ছাকৃত শৈলী বজায় রেখে ক্লিক কার্যকারিতা অপসারণ করতে স্প্যানগুলির জন্য ঐচ্ছিকভাবে সক্রিয় বা অক্ষম অ্যাঙ্করগুলিকে অদলবদল করতে পারেন।

  1. <div class = "পৃষ্ঠা সংখ্যা" > 
  2.   <ul>
  3.     <li ক্লাস = "অক্ষম" ><span> « </span></li> 
  4.     <li class = "active" ><span> 1 </span></li> 
  5.     ...
  6.   </ul>
  7. </div>

মাপ

বড় বা ছোট পৃষ্ঠা সংখ্যা অভিনব? যোগ করুন .pagination-large, .pagination-smallবা .pagination-miniঅতিরিক্ত আকারের জন্য।

  1. <div class = "পেজিনেশন পেজিনেশন-লার্জ" > 
  2.   <ul>
  3.     ...
  4.   </ul>
  5. </div>
  6. <div class = "পৃষ্ঠা সংখ্যা" > 
  7.   <ul>
  8.     ...
  9.   </ul>
  10. </div>
  11. <div class = "পেজিনেশন পেজিনেশন-small" > 
  12.   <ul>
  13.     ...
  14.   </ul>
  15. </div>
  16. <div class = "প্যাজিনেশন পেজিনেশন-মিনি" > 
  17.   <ul>
  18.     ...
  19.   </ul>
  20. </div>

প্রান্তিককরণ

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

  1. <div class = "পৃষ্ঠা সংখ্যা পৃষ্ঠা-কেন্দ্রিক" > 
  2.   ...
  3. </div>
  1. <div class = "পৃষ্ঠা পৃষ্ঠায় পৃষ্ঠা-রাইট" > 
  2.   ...
  3. </div>

পেজার

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

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

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

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

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

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

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

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

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

  1. <ul class = "পেজার" > 
  2.   <li ক্লাস = "আগের অক্ষম" > 
  3.     <a href = "#" > ← পুরাতন </a> 
  4.   </li>
  5.   ...
  6. </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>

ব্যাজ

নাম উদাহরণ মার্কআপ
ডিফল্ট 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>

সহজে সঙ্কুচিত

সহজ বাস্তবায়নের জন্য, লেবেল এবং ব্যাজগুলি কেবল ভেঙে পড়বে (CSS-এর :emptyনির্বাচকের মাধ্যমে) যখন কোনও বিষয়বস্তুর মধ্যে নেই।

টাইপোগ্রাফিক উপাদান

হিরো ইউনিট

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

ওহে বিশ্ব!

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

আরও জানুন

  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> উদাহরণ পৃষ্ঠা শিরোনাম <small> শিরোনামের জন্য সাবটেক্সট </small></h1>
  3. </div>

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

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

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

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

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

  • 300x200

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

    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.

    কর্ম কর্ম

  • 300x200

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

    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.

    কর্ম কর্ম

  • 300x200

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

    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 = "span4" > 
  3.     <a href = "#" ক্লাস = "থাম্বনেল" >  
  4.       <img data-src = "holder.js/300x200" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

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

  1. <ul class = "থাম্বনেল" > 
  2.   <li class = "span4" > 
  3.     <div class = "thumbnail" > 
  4.       <img data-src = "holder.js/300x200" alt = "" >  
  5.       <h3> থাম্বনেইল লেবেল </h3>
  6.       <p> থাম্বনেইল ক্যাপশন... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

আরো উদাহরণ

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

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

ডিফল্ট সতর্কতা

.alertএকটি মৌলিক সতর্কতা সতর্কতা বার্তার জন্য যেকোন পাঠ্য এবং একটি ঐচ্ছিক খারিজ বোতাম মোড়ানো ।

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

খারিজ বোতাম

data-dismiss="alert"মোবাইল সাফারি এবং মোবাইল অপেরা ব্রাউজার, অ্যাট্রিবিউট ছাড়াও, ট্যাগ href="#"ব্যবহার করার সময় সতর্কতা বরখাস্ত করার জন্য একটি প্রয়োজন।<a>

  1. <a href = "#" ক্লাস = "বন্ধ" ডেটা-খারিজ = "সতর্কতা" > × </a>

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

  1. <বোতামের ধরন = "বাটন" ক্লাস = "বন্ধ" ডেটা-খারিজ = "সতর্কতা" > &সময়; </ বোতাম>

জাভাস্ক্রিপ্টের মাধ্যমে সতর্কতা খারিজ করুন

সতর্কতা দ্রুত এবং সহজে খারিজ করার জন্য সতর্কতা jQuery প্লাগইন ব্যবহার করুন ।

অপশন

দীর্ঘ বার্তাগুলির জন্য, যোগ করে সতর্কতা মোড়কের উপরে এবং নীচে প্যাডিং বাড়ান .alert-block।

সতর্কতা !

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

  1. <div ক্লাস = "সতর্ক সতর্কতা-ব্লক" > 
  2.   <বোতামের ধরন = "বাটন" ক্লাস = "বন্ধ" ডেটা-খারিজ = "সতর্কতা" > &সময়; </ বোতাম>   
  3.   <h4> সতর্কতা! </h4>
  4.   নিজেকে পরীক্ষা করে দেখুন, আপনি নন...
  5. </div>

প্রাসঙ্গিক বিকল্প

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

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

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

সফলতা

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

তথ্য

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

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

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

মৌলিক

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

  1. <div ক্লাস = "প্রগতি" > 
  2.   <div class = "bar" style = " প্রস্থ : 60 %; " ></div>   
  3. </div>

ডোরাকাটা

একটি ডোরাকাটা প্রভাব তৈরি করতে একটি গ্রেডিয়েন্ট ব্যবহার করে। IE7-8 এ উপলব্ধ নয়।

  1. <div class = "progress progress-striped" > 
  2.   <div class = "bar" style = " প্রস্থ : 20 %; " ></div>   
  3. </div>

অ্যানিমেটেড

ডান থেকে বামে স্ট্রাইপগুলি অ্যানিমেট করতে .activeযোগ করুন । .progress-stripedIE এর সমস্ত সংস্করণে উপলব্ধ নয়।

  1. <div class = "progress progress-striped active" > 
  2.   <div class = "bar" style = " প্রস্থ : 40 %; " ></div>   
  3. </div>

স্তুপীকৃত

.progressতাদের স্ট্যাক করতে একই মধ্যে একাধিক বার রাখুন ।

  1. <div ক্লাস = "প্রগতি" > 
  2.   <div class = "bar bar-success" style = " প্রস্থ : 35 %; " ></div>   
  3.   <div class = "bar bar-warning" style = " প্রস্থ : 20 %; " ></div>   
  4.   <div class = "bar bar-danger" style = " প্রস্থ : 10 %; " ></div>   
  5. </div>

অপশন

অতিরিক্ত রং

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

  1. <div class = "progress progress-info" > 
  2.   <div class = "bar" style = " প্রস্থ : 20 % " ></div>   
  3. </div>
  4. <div class = "progress progress-success" > 
  5.   <div class = "bar" style = " প্রস্থ : 40 % " ></div>   
  6. </div>
  7. <div class = "progress progress-warning" > 
  8.   <div class = "bar" style = " প্রস্থ : 60 % " ></div>   
  9. </div>
  10. <div class = "progress progress-danger" > 
  11.   <div class = "bar" style = " প্রস্থ : 80 % " ></div>   
  12. </div>

ডোরাকাটা বার

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

  1. <div class = "progress progress-info progress-striped" > 
  2.   <div ক্লাস = "বার"  style = " প্রস্থ : 20 % " ></div> 
  3. </div>
  4. <div class = "progress progress-success progress-striped" > 
  5.   <div ক্লাস = "বার" শৈলী =  " প্রস্থ : 40 % " ></div> 
  6. </div>
  7. <div class = "progress progress-warning progress-striped" > 
  8.   <div ক্লাস = "বার" শৈলী = "  প্রস্থ : 60 % " ></div> 
  9. </div>
  10. <div  class = "progress progress-danger progress-striped" >
  11.   <div ক্লাস = "বার" শৈলী = " প্রস্থ  : 80 % " ></div> 
  12. </div>

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

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

ইন্টারনেট এক্সপ্লোরার 10 এবং অপেরা 12 এর আগের সংস্করণগুলি অ্যানিমেশন সমর্থন করে না।

মিডিয়া অবজেক্ট

বিভিন্ন ধরণের উপাদান (যেমন ব্লগ মন্তব্য, টুইট ইত্যাদি) তৈরির জন্য বিমূর্ত বস্তু শৈলী যা পাঠ্য বিষয়বস্তুর পাশাপাশি বাম-বা ডান-সারিবদ্ধ চিত্র বৈশিষ্ট্যযুক্ত।

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

ডিফল্ট মিডিয়া একটি বিষয়বস্তু ব্লকের বাম বা ডানে একটি মিডিয়া অবজেক্ট (ছবি, ভিডিও, অডিও) ভাসতে দেয়।

64x64

মিডিয়া শিরোনাম

Cras বসে amet nibh libero, in gravida nulla. নল্লা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।
64x64

মিডিয়া শিরোনাম

Cras বসে amet nibh libero, in gravida nulla. নল্লা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।
64x64

মিডিয়া শিরোনাম

Cras বসে amet nibh libero, in gravida nulla. নল্লা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস। 
  1. <div ক্লাস = "মিডিয়া" > 
  2.   <a class = "pull-left" href = "#" >  
  3.     <img class = "media-object" data-src = "holder.js/64x64" >  
  4.   </a>
  5.   <div ক্লাস = "মিডিয়া-বডি" > 
  6.     <h4 ক্লাস = "মিডিয়া-শিরোনাম" > মিডিয়া শিরোনাম </h4> 
  7.     ...
  8.  
  9.     <!-- নেস্টেড মিডিয়া অবজেক্ট -->
  10.     <div ক্লাস = "মিডিয়া" > 
  11.       ...
  12.     </div>
  13.   </div>
  14. </div>

মিডিয়া তালিকা

একটু অতিরিক্ত মার্কআপ দিয়ে, আপনি তালিকার ভিতরে মিডিয়া ব্যবহার করতে পারেন (মন্তব্য থ্রেড বা নিবন্ধের তালিকার জন্য দরকারী)।

  • 64x64

    মিডিয়া শিরোনাম

    Cras বসে amet nibh libero, in gravida nulla. নল্লা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    নেস্টেড মিডিয়া শিরোনাম

    Cras বসে amet nibh libero, in gravida nulla. নল্লা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    নেস্টেড মিডিয়া শিরোনাম

    Cras বসে amet nibh libero, in gravida nulla. নল্লা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    নেস্টেড মিডিয়া শিরোনাম

    Cras বসে amet nibh libero, in gravida nulla. নল্লা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    মিডিয়া শিরোনাম

    Cras বসে amet nibh libero, in gravida nulla. নল্লা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
  1. <ul class = "media-list" > 
  2.   <li ক্লাস = "মিডিয়া" > 
  3.     <a class = "pull-left" href = "#" >  
  4.       <img class = "media-object" data-src = "holder.js/64x64" >  
  5.     </a>
  6.     <div ক্লাস = "মিডিয়া-বডি" > 
  7.       <h4 ক্লাস = "মিডিয়া-শিরোনাম" > মিডিয়া শিরোনাম </h4> 
  8.       ...
  9.  
  10.       <!-- নেস্টেড মিডিয়া অবজেক্ট -->
  11.       <div ক্লাস = "মিডিয়া" > 
  12.         ...
  13.      </div>
  14.     </div>
  15.   </li>
  16. </ul>

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

ওয়েলস

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

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

ঐচ্ছিক ক্লাস

দুটি ঐচ্ছিক পরিবর্তনকারী ক্লাস সহ প্যাডিং এবং গোলাকার কোণগুলি নিয়ন্ত্রণ করুন।

দেখো, আমি একটা কূপে আছি! 
  1. <div ক্লাস = "ভাল ভাল-বড়" > 
  2.   ...
  3. </div>
দেখো, আমি একটা কূপে আছি! 
  1. <div ক্লাস = "ভাল ভাল-ছোট" > 
  2.   ...
  3. </div>

ক্লোজ আইকন

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

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

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

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

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

ছোট প্রদর্শন বা আচরণ পরিবর্তনের জন্য সহজ, ফোকাসড ক্লাস।

টানুন-বাম

একটি উপাদান বাম ভাসা

  1. ক্লাস = "বামে টানুন"
  1. . টান - বাম {
  2.   float : বাম ;
  3. }

ডানদিকে টানুন

একটি উপাদান ডান ভাসা

  1. ক্লাস = "ডানে টানুন"
  1. . টান - ডান {
  2.   ভাসা : ডান ;
  3. }

.নিঃশব্দ

একটি উপাদান এর রঙ পরিবর্তন করুন#999

  1. ক্লাস = "নিঃশব্দ"
  1. . নিঃশব্দ {
  2.   রঙ : #999; 
  3. }

.ক্লিয়ারফিক্স

floatযেকোনো উপাদানের উপর সাফ করুন

  1. ক্লাস = "ক্লিয়ারফিক্স"
  1. . ক্লিয়ারফিক্স {
  2.   * জুম : 1 ; 
  3.   &: আগে ,
  4.   &: পরে {
  5.     প্রদর্শন : টেবিল ;
  6.     বিষয়বস্তু : "" ; 
  7.   }
  8.   &: পরে {
  9.     পরিষ্কার : উভয় ;
  10.   }
  11. }