উদাহরণ

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

<ul class = "ড্রপডাউন-মেনু" ভূমিকা = "মেনু" aria-labelledby = "ড্রপডাউন মেনু" >   
  <li><a tabindex = "-1" href = "#" > অ্যাকশন </a></li>  
  <li><a tabindex = "-1" href = "#" > আরেকটি ক্রিয়া </a></li>  
  <li><a tabindex = "-1" href = "#" > এখানে অন্য কিছু </a></li>  
  <li ক্লাস = "ডিভাইডার" ></li> 
  <li><a tabindex = "-1" href = "#" > পৃথক লিঙ্ক </a></li>  
</ul>

মার্কআপ

শুধু ড্রপডাউন মেনুর দিকে তাকিয়ে, এখানে প্রয়োজনীয় HTML আছে। আপনাকে ড্রপডাউনের ট্রিগার এবং ড্রপডাউন মেনুটি .dropdown, বা ঘোষণা করে এমন অন্য উপাদানটি মোড়ানো দরকার position: relative;। তারপর শুধু মেনু তৈরি করুন।

<div class = "ড্রপডাউন" > 
  <!-- ড্রপডাউন টগল করতে লিঙ্ক বা বোতাম -->
  <ul class = "ড্রপডাউন-মেনু" ভূমিকা = "মেনু" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > অ্যাকশন </a></li>  
    <li><a tabindex = "-1" href = "#" > আরেকটি ক্রিয়া </a></li>  
    <li><a tabindex = "-1" href = "#" > এখানে অন্য কিছু </a></li>  
    <li ক্লাস = "ডিভাইডার" ></li> 
    <li><a tabindex = "-1" href = "#" > পৃথক লিঙ্ক </a></li>  
  </ul>
</div>

অপশন

ডানদিকে মেনু সারিবদ্ধ করুন এবং ড্রপডাউনের অতিরিক্ত স্তর অন্তর্ভুক্ত করুন।

মেনু সারিবদ্ধ করা

ড্রপডাউন মেনুটি ডানদিকে সারিবদ্ধ করুন এ যোগ করুন .pull-right।.dropdown-menu

<ul class = "ড্রপডাউন-মেনু পুল-রাইট" ভূমিকা = "মেনু" aria-labelledby = "dLabel" >   
  ...
</ul>

ড্রপডাউনে সাব মেনু

ড্রপডাউন মেনুগুলির একটি অতিরিক্ত স্তর যোগ করুন, কিছু সাধারণ মার্কআপ সংযোজন সহ OS X এর মতো হোভারে প্রদর্শিত হবে। স্বয়ংক্রিয় স্টাইলিংয়ের জন্য বিদ্যমান ড্রপডাউন মেনুতে .dropdown-submenuযেকোনো একটিতে যোগ করুন ।li

<ul class = "ড্রপডাউন-মেনু" ভূমিকা = "মেনু" aria-labelledby = "dLabel" >   
  ...
  <li ক্লাস = "ড্রপডাউন-সাবমেনু" > 
    <a tabindex = "-1" href = "#" > আরও বিকল্প </a>  
    <ul class = "ড্রপডাউন-মেনু" > 
      ...
    </ul>
  </li>
</ul>

উদাহরণ

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

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

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

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

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

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

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

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

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

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "ড্রপডাউন" href = "#" >   
    কর্ম
    <span ক্লাস = "ক্যারেট" ></span> 
  </a>
  <ul class = "ড্রপডাউন-মেনু" > 
    <!-- ড্রপডাউন মেনু লিঙ্ক -->
  </ul>
</div>

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

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

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

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

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

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

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

<div class = "btn-group" > 
  <বাটন ক্লাস = "btn" > অ্যাকশন </ বোতাম> 
  <বোতাম ক্লাস = "বিটিএন ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" >  
    <span ক্লাস = "ক্যারেট" ></span> 
  </ বোতাম>
  <ul class = "ড্রপডাউন-মেনু" > 
    <!-- ড্রপডাউন মেনু লিঙ্ক -->
  </ul>
</div>

মাপ

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

<div class = "btn-group" > 
  <বোতাম ক্লাস = "btn btn-mini" > অ্যাকশন </ বোতাম> 
  <বোতাম ক্লাস = "btn btn-mini dropdown-toggle" data-toggle = "ড্রপডাউন" >  
    <span ক্লাস = "ক্যারেট" ></span> 
  </ বোতাম>
  <ul class = "ড্রপডাউন-মেনু" > 
    <!-- ড্রপডাউন মেনু লিঙ্ক -->
  </ul>
</div>

ড্রপআপ মেনু

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

<div class = "btn-গ্রুপ ড্রপআপ" > 
  <button class = "btn" > ড্রপআপ </ বোতাম> 
  <বোতাম ক্লাস = "বিটিএন ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" >  
    <span ক্লাস = "ক্যারেট" ></span> 
  </ বোতাম>
  <ul class = "ড্রপডাউন-মেনু" > 
    <!-- ড্রপডাউন মেনু লিঙ্ক -->
  </ul>
</div>

লাইটওয়েট ডিফল্ট একই মার্কআপ, বিভিন্ন ক্লাস

এখানে সমস্ত নেভি উপাদান — ট্যাব, বড়ি এবং তালিকা — ক্লাসের মাধ্যমে একই বেস মার্কআপ এবং শৈলী শেয়ার করে.nav ৷

মৌলিক ট্যাব

নিয়মিত <ul>লিঙ্ক নিন এবং যোগ করুন .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li ক্লাস = "সক্রিয়" > 
    <a href="#" > হোম </a> ৷ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

মৌলিক বড়ি

একই HTML নিন, কিন্তু .nav-pillsপরিবর্তে ব্যবহার করুন:

<ul class = "nav nav-pills" > 
  <li ক্লাস = "সক্রিয়" > 
    <a href="#" > হোম </a> ৷ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

প্রতিবন্ধী রাষ্ট্র

যেকোন নেভি কম্পোনেন্ট (ট্যাব, পিল বা তালিকা) এর .disabledজন্য ধূসর লিঙ্ক যোগ করুন এবং কোন হোভার ইফেক্ট নেই । লিঙ্কগুলি ক্লিকযোগ্য থাকবে, তবে, যতক্ষণ না কাস্টম জাভাস্ক্রিপ্ট সেই ক্লিকগুলি প্রতিরোধ করার জন্য প্রয়োগ করা হয়।

<ul class = "nav nav-pills" > 
  ...
  <li ক্লাস = "অক্ষম" ><a href = "#" > হোম </a></li> ৷  
  ...
</ul>

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

নেভি লিঙ্কগুলি সারিবদ্ধ করতে, .pull-leftবা .pull-rightইউটিলিটি ক্লাসগুলি ব্যবহার করুন। উভয় ক্লাসই নির্দিষ্ট দিক দিয়ে একটি CSS ফ্লোট যোগ করবে।

স্ট্যাকযোগ্য

যেহেতু ট্যাব এবং পিলগুলি ডিফল্টরূপে অনুভূমিক থাকে, .nav-stackedসেগুলিকে উল্লম্বভাবে স্ট্যাক করা দেখানোর জন্য শুধুমাত্র একটি দ্বিতীয় শ্রেণী যোগ করুন।

স্ট্যাক করা ট্যাব

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

স্তুপীকৃত বড়ি

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

ড্রপডাউন

একটু অতিরিক্ত HTML এবং ড্রপডাউন জাভাস্ক্রিপ্ট প্লাগইন সহ ড্রপডাউন মেনু যোগ করুন ।

ড্রপডাউন সহ ট্যাব

<ul class = "nav nav-tabs" > 
  <li class = "ড্রপডাউন" > 
    <a ক্লাস = "ড্রপডাউন-টগল" 
       ডেটা-টগল = "ড্রপডাউন"
       href = "#" >
        ড্রপডাউন
        <b ক্লাস = "ক্যারেট" ></b> 
      </a>
    <ul class = "ড্রপডাউন-মেনু" > 
      <!-- লিঙ্ক -->
    </ul>
  </li>
</ul>

ড্রপডাউন সঙ্গে বড়ি

<ul class = "nav nav-pills" > 
  <li class = "ড্রপডাউন" > 
    <a ক্লাস = "ড্রপডাউন-টগল" 
       ডেটা-টগল = "ড্রপডাউন"
       href = "#" >
        ড্রপডাউন
        <b ক্লাস = "ক্যারেট" ></b> 
      </a>
    <ul class = "ড্রপডাউন-মেনু" > 
      <!-- লিঙ্ক -->
    </ul>
  </li>
</ul>

ন্যাভি তালিকা

ঐচ্ছিক শিরোনাম সহ নেভি লিঙ্কের গ্রুপ তৈরি করার একটি সহজ এবং সহজ উপায়। এগুলি ওএস এক্স-এর ফাইন্ডারের মতো সাইডবারে সবচেয়ে ভাল ব্যবহার করা হয়।

ন্যাভি তালিকার উদাহরণ

লিঙ্কগুলির একটি তালিকা নিন এবং যোগ করুন class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > তালিকা শিরোনাম </li> 
  <li class = "active" ><a href = "#" > হোম </a></li>  
  <li><a href = "#" > লাইব্রেরি </a></li> 
  ...
</ul>

দ্রষ্টব্যclass="nav nav-list" একটি নেভি তালিকার মধ্যে নেস্ট করার জন্য, যেকোনো নেস্টেডে অন্তর্ভুক্ত করুন <ul>।

অনুভূমিক বিভাজক

ক্লাসের সাথে একটি খালি তালিকা আইটেম তৈরি করে একটি অনুভূমিক বিভাজক যোগ করুন .divider, যেমন:

<ul class = "nav nav-list" > 
  ...
  <li ক্লাস = "ডিভাইডার" ></li> 
  ...
</ul>

Tabbable nav

ট্যাবের মাধ্যমে বিষয়বস্তুর মধ্যে টগল করার জন্য একটি সাধারণ প্লাগইন দিয়ে আপনার ট্যাবগুলিকে প্রাণবন্ত করুন৷ বুটস্ট্র্যাপ ট্যাবযোগ্য ট্যাবগুলিকে চারটি শৈলীতে সংহত করে: উপরে (ডিফল্ট), ডান, নীচে এবং বাম।

ট্যাবযোগ্য উদাহরণ

ট্যাবগুলি ট্যাবেবল করতে, .tab-paneপ্রতিটি ট্যাবের জন্য একটি অনন্য আইডি তৈরি করুন এবং সেগুলিকে মোড়ানো করুন .tab-content৷

<div class = "tabbable" > <!-- শুধুমাত্র বাম/ডান ট্যাবের জন্য প্রয়োজন -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > বিভাগ 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > বিভাগ 2 </a></li>  
  </ul>
  <div class = "ট্যাব-সামগ্রী" > 
    <div ক্লাস = "ট্যাব-প্যান সক্রিয়" আইডি = "ট্যাব1" >  
      <p> আমি সেকশন 1 এ আছি। </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> হাউডি, আমি সেকশন 2 এ আছি। </p>
    </div>
  </div>
</div>

ট্যাবে বিবর্ণ

ট্যাবগুলিকে বিবর্ণ করতে, .fadeপ্রতিটিতে যোগ করুন .tab-pane।

jQuery প্লাগইন প্রয়োজন

সমস্ত ট্যাবযোগ্য ট্যাব আমাদের লাইটওয়েট jQuery প্লাগইন দ্বারা চালিত হয়। জাভাস্ক্রিপ্ট ডক্স পৃষ্ঠায় ট্যাবযোগ্য ট্যাবগুলিকে কীভাবে প্রাণবন্ত করা যায় সে সম্পর্কে আরও পড়ুন ।

যে কোন দিকে ট্যাব করা যায়

নীচে ট্যাব

HTML এর ক্রমটি ফ্লিপ করুন এবং নীচে ট্যাব রাখতে একটি ক্লাস যুক্ত করুন।

<div ক্লাস = "ট্যাবেবল ট্যাব-নীচে" > 
  <div class = "ট্যাব-সামগ্রী" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

বাম দিকে ট্যাব

বাম দিকে ট্যাব রাখতে ক্লাস অদলবদল করুন।

<div ক্লাস = "ট্যাবেবল ট্যাব-বাম" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ট্যাব-সামগ্রী" > 
    ...
  </div>
</div>

ডানদিকে ট্যাব

ডানদিকে ট্যাব রাখতে ক্লাস অদলবদল করুন।

<div ক্লাস = "ট্যাবেবল ট্যাব-রাইট" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ট্যাব-সামগ্রী" > 
    ...
  </div>
</div>

মৌলিক নববার

শুরু করার জন্য, নেভিবারগুলি স্থির (শীর্ষে স্থির নয়) এবং একটি প্রকল্পের নাম এবং মৌলিক নেভিগেশনের জন্য সমর্থন অন্তর্ভুক্ত করে। একটি এর মধ্যে যেকোনো জায়গায় একটি রাখুন .container, যা আপনার সাইট এবং বিষয়বস্তুর প্রস্থ নির্ধারণ করে।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > শিরোনাম </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > হোম </a></li>  
      <li><a href = "#" > লিঙ্ক </a></li> 
      <li><a href = "#" > লিঙ্ক </a></li> 
    </ul>
  </div>
</div>

Navbar উপাদান

ব্র্যান্ড

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

<a class = "brand" href = "#" > প্রকল্পের নাম </a>  

নেভি লিঙ্ক

ন্যাভি আইটেমগুলি সাজানো তালিকার মাধ্যমে যোগ করা সহজ।

<ul class = "nav" > 
  <li ক্লাস = "সক্রিয়" > 
    <a href="#" > হোম </a> ৷ _ 
  </li>
  <li><a href = "#" > লিঙ্ক </a></li> 
  <li><a href = "#" > লিঙ্ক </a></li> 
</ul>

আপনি একটি খালি তালিকা আইটেম এবং একটি সাধারণ ক্লাস সহ আপনার নেভি লিঙ্কগুলিতে সহজেই বিভাজক যুক্ত করতে পারেন। শুধু লিঙ্কগুলির মধ্যে এটি যোগ করুন:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

ফর্ম

একটি ফর্ম সঠিকভাবে স্টাইল করতে এবং ন্যাভবারে অবস্থান করতে, নীচে দেখানো হিসাবে উপযুক্ত ক্লাসগুলি যোগ করুন। একটি ডিফল্ট ফর্মের জন্য, অন্তর্ভুক্ত করুন .navbar-formএবং হয় .pull-leftবা .pull-rightসঠিকভাবে সারিবদ্ধ করুন।

<form class = "navbar-form pull-left" > 
  <ইনপুট প্রকার = "টেক্সট" ক্লাস = "স্প্যান2" >  
  <button type = "submit" class = "btn" > জমা দিন </button>  
</form>

অনুসন্ধান ফর্ম

আরও কাস্টমাইজড সার্চ ফর্মের জন্য, navbar-এ বিশেষ শৈলীর জন্য ইনপুটে এবং যোগ .navbar-searchকরুন ।form.search-query

<form class = "navbar-search pull-left" > 
  <ইনপুট প্রকার = "টেক্সট" ক্লাস = "সার্চ-কোয়েরি" স্থানধারক = "অনুসন্ধান" >   
</form>

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

ন্যাভি লিঙ্ক, অনুসন্ধান ফর্ম, বা পাঠ্য সারিবদ্ধ করুন, .pull-leftবা .pull-rightইউটিলিটি ক্লাস ব্যবহার করুন। উভয় ক্লাসই নির্দিষ্ট দিক দিয়ে একটি CSS ফ্লোট যোগ করবে।

ড্রপডাউন ব্যবহার করে

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

<ul class = "nav" > 
  <li class = "ড্রপডাউন" > 
    <a href = "#" ক্লাস = "ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" >   
      হিসাব
      <b ক্লাস = "ক্যারেট" ></b> 
    </a>
    <ul class = "ড্রপডাউন-মেনু" > 
      ...
    </ul>
  </li>
</ul>

কলিং ড্রপডাউন সম্পর্কে আরও মার্কআপ এবং তথ্যের জন্য জাভাস্ক্রিপ্ট ড্রপডাউন ডকুমেন্টেশন দেখুন।

পাঠ্য

সঠিক লিডিং এবং রঙের জন্য .navbar-textসাধারণত একটি ট্যাগের সাথে একটি উপাদানে পাঠ্যের স্ট্রিংগুলি মোড়ানো ।<p>

ঐচ্ছিক প্রদর্শন বৈচিত্র

ভিউপোর্টের উপরের বা নীচে নেভিবারটিকে সবচেয়ে বাইরের ডিভিতে একটি অতিরিক্ত ক্লাস দিয়ে ঠিক করুন .navbar।

শীর্ষে স্থির

যোগ করুন .navbar-fixed-topএবং মনে রাখবেন যে এটিতে অন্তত 40px যোগ করে এটির নীচে লুকানো অঞ্চলের জন্য হিসাব paddingকরুন <body>৷ কোর বুটস্ট্র্যাপ CSS এর পরে এবং ঐচ্ছিক প্রতিক্রিয়াশীল CSS এর আগে এটি যোগ করতে ভুলবেন না।

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

নীচে স্থির

পরিবর্তে যোগ .navbar-fixed-bottomকরুন.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

স্ট্যাটিক শীর্ষ নেভিবার

একটি পূর্ণ-প্রস্থ ন্যাভিবার তৈরি করুন যা যোগ করে পৃষ্ঠার সাথে স্ক্রোল করে .navbar-static-top। ক্লাসের বিপরীতে .navbar-fixed-top, আপনাকে কোনো প্যাডিং পরিবর্তন করতে হবে না body।

<div class = "navbar navbar-static-top" > 
  ...
</div>

প্রতিক্রিয়াশীল নববার

একটি ভেঙে পড়া প্রতিক্রিয়াশীল navbar বাস্তবায়ন করতে, আপনার navbar বিষয়বস্তুকে একটি div-এ মোড়ানো .nav-collapse.collapse, এবং navbar টগল বোতাম যোগ করুন .btn-navbar।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar ধসে পড়া navbar সামগ্রীর জন্য টগল হিসাবে ব্যবহৃত হয় -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span ক্লাস = "আইকন-বার" ></span> 
        <span ক্লাস = "আইকন-বার" ></span> 
        <span ক্লাস = "আইকন-বার" ></span> 
      </a>
 
      <!-- ব্র্যান্ডটিকে সেখানে রেখে যেতে ভুলবেন না যদি আপনি এটি প্রদর্শন করতে চান -->
      <a class = "brand" href = "#" > প্রকল্পের নাম </a>  
 
      <!-- আপনি যা কিছু লুকিয়ে রাখতে চান তা 940px বা তার কম, এখানে রাখুন -->
      <div class = "nav-collaps" > 
        <!-- .nav, .navbar-অনুসন্ধান, .navbar-ফর্ম, ইত্যাদি -->
      </div>
 
    </div>
  </div>
</div>

উল্টানো প্রকরণ

যোগ করে নববারের চেহারা পরিবর্তন করুন .navbar-inverse।

<div class = "navbar navbar-inverse" > 
  ...
</div>

উদাহরণ

এটি একাধিক পৃষ্ঠা জুড়ে প্রদর্শিত হতে পারে হিসাবে দেখানো একটি একক উদাহরণ।

<ul class = "ব্রেডক্রাম্ব" > 
  <li><a href = "#" > হোম </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > লাইব্রেরি </a> <span class = "divider" > / </span></li>   
  <li class = "active" > ডেটা </li> 
</ul>

স্ট্যান্ডার্ড পেজিনেশন

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

<div class = "পৃষ্ঠা সংখ্যা" > 
  <ul>
    <li><a href = "#" > আগের </a></li> 
    <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 = "#" > পরবর্তী </a></li> 
  </ul>
</div>

অপশন

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

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

<div class = "পৃষ্ঠা সংখ্যা" > 
  <ul>
    <li ক্লাস = "অক্ষম" ><a href = "#" > আগের </a></li>  
    <li ক্লাস = "সক্রিয়" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

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

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

<div class = "পৃষ্ঠা পৃষ্ঠায় পৃষ্ঠা-রাইট" > 
  ...
</div>

পেজার

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

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

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

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

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

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

<ul class = "পেজার" > 
  <li ক্লাস = "আগের" > 
    <a href = "#" > ← পুরাতন </a> 
  </li>
  <li ক্লাস = "পরবর্তী" > 
    <a href = "#" > নতুন → </a> 
  </li>
</ul>

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

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

<ul class = "পেজার" > 
  <li ক্লাস = "আগের অক্ষম" > 
    <a href = "#" > ← পুরাতন </a> 
  </li>
  ...
</ul>

লেবেল

ব্যাজ

হিরো ইউনিট

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

<div class = "hero-unit" > 
  <h1> শিরোনাম </h1>
  <p> ট্যাগলাইন </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      আরও জানুন
    </a>
  </p>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

মার্কআপ

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

<ul class = "থাম্বনেল" > 
  <li class = "span4" > 
    <a href = "#" ক্লাস = "থাম্বনেল" >  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "থাম্বনেল" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> থাম্বনেইল লেবেল </h3>
      <p> থাম্বনেইল ক্যাপশন... </p>
    </div>
  </li>
  ...
</ul>

আরো উদাহরণ

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

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

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

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

খারিজ বোতাম

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

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

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

<বোতামের ধরন = "বাটন" ক্লাস = "বন্ধ" ডেটা-খারিজ = "সতর্কতা" > × </ বোতাম>   

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

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

অপশন

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

<div ক্লাস = "সতর্ক সতর্কতা-ব্লক" > 
  <বোতামের ধরন = "বাটন" ক্লাস = "বন্ধ" ডেটা-খারিজ = "সতর্কতা" > × </ বোতাম>   
  <h4> সতর্কতা! </h4>
  নিজেকে পরীক্ষা করে দেখুন, আপনি নন...
</div>

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

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

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

<div ক্লাস = "সতর্ক সতর্কতা-ত্রুটি" > 
  ...
</div>

সফলতা

<div class = "সতর্ক সতর্কতা-সাফল্য" > 
  ...
</div>

তথ্য

<div class = "সতর্ক সতর্কতা-তথ্য" > 
  ...
</div>

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

মৌলিক

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

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

ডোরাকাটা

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

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

অ্যানিমেটেড

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

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

স্তুপীকৃত

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

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

অপশন

অতিরিক্ত রং

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " প্রস্থ : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " প্রস্থ : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " প্রস্থ : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " প্রস্থ : 80 % " ></div>   
</div>

ডোরাকাটা বার

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " প্রস্থ : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " প্রস্থ : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " প্রস্থ : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " প্রস্থ : 80 % " ></div>   
</div>

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

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

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

ওয়েলস

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

<div class = "ভাল" > 
  ...
</div>

ঐচ্ছিক ক্লাস

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

<div ক্লাস = "ভাল ভাল-বড়" > 
  ...
</div>

<div ক্লাস = "ভাল ভাল-ছোট" > 
  ...
</div>

ক্লোজ আইকন

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

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

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

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

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

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

টানুন-বাম

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

ক্লাস = "বামে টানুন"

. টান - বাম {
  float : বাম ;
}

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

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

ক্লাস = "ডানে টানুন"

. টান - ডান {
  ভাসা : ডান ;
}

.নিঃশব্দ

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

ক্লাস = "নিঃশব্দ"

. নিঃশব্দ {
  রঙ : #999; 
}

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

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

ক্লাস = "ক্লিয়ারফিক্স"

. ক্লিয়ারফিক্স {
  * জুম : 1 ; 
  &: আগে ,
  &: পরে {
    প্রদর্শন : টেবিল ;
    বিষয়বস্তু : "" ; 
  }
  &: পরে {
    পরিষ্কার : উভয় ;
  }
}