উদাহৰণ

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

<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 class = "বিভাজক" </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 class = "বিভাজক" </li> 
    <li><a tabindex = "-1" href = "#" > পৃথক কৰা সংযোগ </a></li>  
  </ul>
</div>

বিকল্পসমূহ

মেনুসমূহ সোঁফালে প্ৰান্তিককৰণ কৰক আৰু যোগ কৰক ড্ৰপডাউনসমূহৰ অতিৰিক্ত স্তৰসমূহ অন্তৰ্ভুক্ত কৰক।

মেনুসমূহ প্ৰান্তিককৰণ কৰা

.pull-righta ৰ পৰা সোঁফালে যোগ কৰক .dropdown-menuড্ৰপডাউন মেনু প্ৰান্তিককৰণ কৰক।

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

মেনু বিকল্পসমূহ নিষ্ক্ৰিয় কৰা হৈছে

লিংকটো নিষ্ক্ৰিয় কৰিবলৈ ড্ৰপডাউনত .disableda ত যোগ কৰক ।<li>

<ul class = "ড্ৰপডাউন-মেনু" ভূমিকা = "মেনু" aria-labelledby = "ড্ৰপডাউনমেনু" >   
  <li><a tabindex = "-1" href = "#" > নিয়মীয়া সংযোগ </a></li>  
  <li class = "অক্ষম" ><a tabindex = "-1" href = "#" > নিষ্ক্ৰিয় সংযোগ </a></li>   
  <li><a tabindex = "-1" href = "#" > অন্য এটা সংযোগ </a></li>  
</ul>

ড্ৰপডাউনসমূহত উপ মেনুসমূহ

OS X ৰ দৰে হোভাৰত উপস্থিত হোৱা ড্ৰপডাউন মেনুসমূহৰ এটা অতিৰিক্ত স্তৰ যোগ কৰক, কিছুমান সৰল মাৰ্কআপ সংযোজনৰ সৈতে। স্বয়ংক্ৰিয় ষ্টাইলিঙৰ বাবে এটা বৰ্তমানৰ ড্ৰপডাউন মেনুত .dropdown-submenuযিকোনো এটাত যোগ কৰক ।li

ডিফল্ট

ড্ৰপআপ

বাওঁফালৰ উপমেনু

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

উদাহৰণ

দুটা মূল বিকল্প, লগতে আৰু দুটা নিৰ্দিষ্ট ভিন্নতা।

একক বুটাম গোট

.btnin ৰ সৈতে বুটামৰ এটা শৃংখলা মোহাৰি দিয়ক .btn-group।

<div শ্ৰেণী = "btn-গোট" > 
  <button class = "btn" > বাওঁফালে </button> 
  <button class = "btn" > মাজৰ </button > 
  <button class = "btn" > সোঁ </button> 
</div>

একাধিক বুটাম গোট

অধিক জটিল উপাদানসমূহৰ বাবে <div class="btn-group">এটাত ৰ ছেটসমূহ একত্ৰিত কৰক ।<div class="btn-toolbar">

<div class = "btn-সঁজুলিবাৰ" > 
  <div শ্ৰেণী = "btn-গোট" > 
    ...
  </div>
</div>

উলম্ব বুটাম গোটসমূহ

বুটামৰ এটা গোট অনুভূমিকভাৱে নহয় উলম্বভাৱে ষ্টেক কৰা দেখা দিয়ক।

<div class = "btn-গোট btn-গোট-উলম্ব" > 
  ...
</div>

চেকবক্স আৰু ৰেডিঅ'ৰ সোৱাদ

বুটাম গোটসমূহে ৰেডিঅ' হিচাপেও কাম কৰিব পাৰে, য'ত কেৱল এটা বুটাম সক্ৰিয় হ'ব পাৰে, বা চেকবাক্স, য'ত যিকোনো সংখ্যক বুটাম সক্ৰিয় হ'ব পাৰে। তাৰ বাবে জাভাস্ক্রিপ্ট নথিপত্ৰসমূহ চাওক ।

বুটাম গোটসমূহত ড্ৰপডাউনসমূহ

মুৰ ডাঙি!ড্ৰপডাউনৰ সৈতে বুটামসমূহক সঠিক ৰেণ্ডাৰৰ বাবে .btn-groupএটাৰ ভিতৰত পৃথকে পৃথকে নিজৰ মাজত ৰেপ কৰিব লাগিব ।.btn-toolbar

আভাস আৰু উদাহৰণ

এটা ড্ৰপডাউন মেনু ট্ৰিগাৰ কৰিবলে যিকোনো বুটাম ব্যৱহাৰ কৰক ইয়াক এটাৰ ভিতৰত ৰাখি .btn-groupআৰু সঠিক মেনু মাৰ্কআপ প্ৰদান কৰি।

<div শ্ৰেণী = "btn-গোট" > 
  <a class = "btn ড্ৰপডাউন-টগল" data-toggle = "ড্ৰপডাউন" href = "#" >   
    কাৰ্য কৰা
    <span class = "কেৰেট" </span> 
  </a>
  <ul class = "ড্ৰপডাউন-মেনু" > 
    <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  </ul>
</div>

সকলো বুটামৰ আকাৰৰ সৈতে কাম কৰে

বুটাম ড্ৰপডাউনসমূহে যিকোনো আকাৰত কাম কৰে: .btn-large, .btn-small, বা .btn-mini.

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

বুটাম ড্ৰপডাউনসমূহক কাৰ্য্য কৰিবলে বুটষ্ট্ৰেপ ড্ৰপডাউন প্লাগইনৰ প্ৰয়োজন ।

কিছুমান ক্ষেত্ৰত—মোবাইলৰ দৰে—ড্ৰপডাউন মেনুসমূহ ভিউপ’ৰ্টৰ বাহিৰত বিস্তৃত হ’ব। আপুনি প্ৰান্তিককৰণ হস্তচালিতভাৱে বা স্বনিৰ্বাচিত জাভাস্ক্রিপ্টৰ সৈতে সমাধান কৰিব লাগিব।

বিভাজিত বুটাম ড্ৰপডাউনসমূহ

বুটাম গ্ৰুপ ষ্টাইল আৰু মাৰ্কআপৰ ওপৰত নিৰ্মাণ কৰি আমি সহজেই এটা স্প্লিট বুটাম তৈয়াৰ কৰিব পাৰো। বিভক্ত বুটামসমূহে বাওঁফালে এটা প্ৰামাণিক কাৰ্য্য আৰু সোঁফালে এটা ড্ৰপডাউন টগল প্ৰসংগভিত্তিক সংযোগসমূহৰ সৈতে বৈশিষ্ট্য প্ৰদান কৰে।

<div শ্ৰেণী = "btn-গোট" > 
  <button class = "btn" > কাৰ্য্য </button> 
  <button class = "btn ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >  
    <span class = "কেৰেট" </span> 
  </বুটাম>
  <ul class = "ড্ৰপডাউন-মেনু" > 
    <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  </ul>
</div>

আকাৰসমূহ

অতিৰিক্ত বুটাম শ্ৰেণীসমূহ ব্যৱহাৰ কৰক .btn-mini, .btn-small, বা .btn-largeআকাৰ নিৰ্ধাৰণৰ বাবে।

<div শ্ৰেণী = "btn-গোট" > 
  <button class = "btn btn-mini" > কাৰ্য্য </button> 
  <button class = "btn btn-mini ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >  
    <span class = "কেৰেট" </span> 
  </বুটাম>
  <ul class = "ড্ৰপডাউন-মেনু" > 
    <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  </ul>
</div>

ড্ৰপআপ মেনুসমূহ

ড্ৰপডাউন মেনুসমূহক তলৰ পৰা ওপৰলৈ টগল কৰিব পাৰি ৰ তাৎক্ষণিক অভিভাৱকত এটা শ্ৰেণী যোগ কৰি .dropdown-menu। ই ৰ দিশটো উলটিব .caretআৰু মেনুটো নিজেই পুনৰ স্থাপন কৰিব যাতে ওপৰৰ পৰা তললৈ যোৱাৰ পৰিৱৰ্তে তলৰ পৰা ওপৰলৈ যাব পাৰে।

<div class = "btn-গোট ড্ৰপআপ" > 
  <button class = "btn" > ড্ৰপআপ </button> 
  <button class = "btn ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >  
    <span class = "কেৰেট" </span> 
  </বুটাম>
  <ul class = "ড্ৰপডাউন-মেনু" > 
    <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  </ul>
</div>

লঘু অবিকল্পিতসমূহ একেটা মাৰ্কআপ, বিভিন্ন শ্ৰেণীসমূহ

ইয়াত সকলো nav উপাদান—টেব, বড়ি, আৰু তালিকাসমূহ— শ্ৰেণীৰ যোগেদি একেটা ভিত্তি মাৰ্কআপ আৰু শৈলীসমূহ অংশীদাৰী কৰে ।.nav

মূল টেবসমূহ

<ul>লিংকসমূহৰ এটা নিয়মীয়া লওক আৰু যোগ কৰক .nav-tabs:

<ul class = "nav nav-টেবসমূহ" > 
  <li শ্ৰেণী = "সক্ৰিয়" > 
    <a href = "#" > ঘৰ </a> 
  </li>
  <li><a href = "#" > ... </a></li> ৰ দ্বাৰা প্ৰকাশিত 
  <li><a href = "#" > ... </a></li> ৰ দ্বাৰা প্ৰকাশিত 
</ul>

মৌলিক বড়ি

সেই একেটা HTML লওক, কিন্তু .nav-pillsইয়াৰ পৰিৱৰ্তে ব্যৱহাৰ কৰক:

<ul class = "নৱ নাভ-বড়ি" > 
  <li শ্ৰেণী = "সক্ৰিয়" > 
    <a href = "#" > ঘৰ </a> 
  </li>
  <li><a href = "#" > ... </a></li> ৰ দ্বাৰা প্ৰকাশিত 
  <li><a href = "#" > ... </a></li> ৰ দ্বাৰা প্ৰকাশিত 
</ul>

অক্ষম অৱস্থা

যিকোনো nav উপাদানৰ বাবে (টেব, বড়ি, বা তালিকা), ধূসৰ সংযোগসমূহৰ.disabled বাবে যোগ কৰক আৰু কোনো হোভাৰ প্ৰভাৱ নাই । সংযোগসমূহ ক্লিকযোগ্য হৈ থাকিব, অৱশ্যে, যেতিয়ালৈকে আপুনি বৈশিষ্ট্যটো আঁতৰাই পেলায়। বৈকল্পিকভাৱে, আপুনি সেই ক্লিকসমূহ প্ৰতিৰোধ কৰিবলে স্বনিৰ্বাচিত জাভাস্ক্রিপ্ট প্ৰণয়ন কৰিব পাৰিব।href

<ul class = "নৱ নাভ-বড়ি" > 
  ...
  <li class = "অক্ষম" ><a href = "#" > ঘৰ </a></li>  
  ...
</ul>

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

nav সংযোগসমূহ প্ৰান্তিককৰণ কৰিবলে, .pull-leftবা .pull-rightসঁজুলি শ্ৰেণীসমূহ ব্যৱহাৰ কৰক। দুয়োটা শ্ৰেণীয়ে নিৰ্দিষ্ট দিশত এটা CSS ফ্ল'ট যোগ কৰিব।

ষ্টেকযোগ্য

টেব আৰু পিলসমূহ অবিকল্পিতভাৱে অনুভূমিক হোৱাৰ বাবে, মাত্ৰ এটা দ্বিতীয় শ্ৰেণী যোগ কৰক, .nav-stacked, সিহতক উলম্বভাৱে ষ্টেক কৰা যেন দেখুৱাবলৈ।

ষ্টেক কৰা টেবসমূহ

<ul class = "nav nav-tabs nav-ষ্টেক কৰা হৈছে" > 
  ...
</ul>

ষ্টেক কৰা বড়ি

<ul class = "nav nav-pills nav-ষ্টেক কৰা হৈছে" > 
  ...
</ul>

ড্ৰপডাউনসমূহ

অলপ অতিৰিক্ত HTML আৰু ড্ৰপডাউনসমূহ JavaScript প্লাগইনৰ সৈতে ড্ৰপডাউন মেনুসমূহ যোগ কৰক ।

ড্ৰপডাউনৰ সৈতে টেবসমূহ

<ul class = "nav nav-টেবসমূহ" > 
  <li class = "ড্ৰপডাউন" > 
    <a class = "ড্ৰপডাউন-টগল" 
       data-toggle = "ড্ৰপডাউন"
       href = "#" >
        ড্ৰপডাউন
        <b class = "কেৰেট" </b> 
      </a>
    <ul class = "ড্ৰপডাউন-মেনু" > 
      <!-- সংযোগসমূহ -->
    </ul>
  </li>
</ul>

ড্ৰপডাউনৰ সৈতে বড়ি

<ul class = "নৱ নাভ-বড়ি" > 
  <li class = "ড্ৰপডাউন" > 
    <a class = "ড্ৰপডাউন-টগল" 
       data-toggle = "ড্ৰপডাউন"
       href = "#" >
        ড্ৰপডাউন
        <b class = "কেৰেট" </b> 
      </a>
    <ul class = "ড্ৰপডাউন-মেনু" > 
      <!-- সংযোগসমূহ -->
    </ul>
  </li>
</ul>

Nav তালিকাসমূহ

বৈকল্পিক হেডাৰসমূহৰ সৈতে nav সংযোগসমূহৰ গোটসমূহ নিৰ্মাণ কৰাৰ এটা সহজ আৰু সহজ উপায়। OS X ত Finder ৰ দৰে চাইডবাৰত ব্যৱহাৰ কৰাটো ভাল।

উদাহৰণ nav তালিকা

লিংকৰ তালিকা এখন লওক আৰু যোগ কৰক class="nav nav-list":

<ul class = "nav nav-তালিকা" > 
  <li class = "nav-header" > তালিকাৰ হেডাৰ </li> 
  <li class = "সক্ৰিয়" ><a href = "#" > ঘৰ </a></li>  
  <li><a href = "#" > লাইব্ৰেৰী </a></li> 
  ...
</ul>

টোকাএটা nav তালিকাৰ ভিতৰত নেষ্টিং কৰাৰ বাবে, class="nav nav-list"যিকোনো nested ত অন্তৰ্ভুক্ত কৰক <ul>।

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

শ্ৰেণীৰ সৈতে এটা খালী তালিকা বস্তু সৃষ্টি কৰি এটা অনুভূমিক বিভাজক যোগ কৰক .divider, যেনে:

<ul class = "nav nav-তালিকা" > 
  ...
  <li class = "বিভাজক" </li> 
  ...
</ul>

Tabbable nav

টেবসমূহৰ যোগেদি বিষয়বস্তুৰ মাজত টগল কৰিবলে এটা সৰল প্লাগইনৰ সৈতে আপোনাৰ টেবসমূহক জীৱন্ত কৰক। বুটষ্ট্ৰেপে টেবেবল টেবসমূহক চাৰিটা শৈলীত সংহতি কৰে: ওপৰ (অবিকল্পিত), সোঁ, তল, আৰু বাওঁ ।

টেবেবলৰ উদাহৰণ

টেবসমূহক টেবযোগ্য কৰিবলৈ, .tab-paneপ্ৰতিটো টেবৰ বাবে একক ID ৰ সৈতে এটা সৃষ্টি কৰক আৰু সিহতক ত ৰেপ কৰক .tab-content।

মই ১ নং খণ্ডত আছো।

হাউডি, মই ২ নং খণ্ডত আছো।

ৱাট আপ ছোৱালী, এইটো ছেকচন ৩।

<div class = "tabbable" > <!-- কেৱল বাওঁ/সোঁ টেবৰ বাবে প্ৰয়োজনীয় -->  
  <ul class = "nav nav-টেবসমূহ" > 
    <li class = "সক্ৰিয়" ><a href = "#tab1" data-toggle = "টেব" > অংশ 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "টেব" > অংশ ২ </a></li>  
  </ul>
  <div class = "টেব-সামগ্ৰী" > 
    <div class = "টেব-পেন সক্ৰিয়" id = "টেব1" >  
      <p> মই ১ নং খণ্ডত আছো। </p>
    </div>
    <div class = "টেব-পেন" id = "টেব 2" >  
      <p> হাউডি, মই ২ নং খণ্ডত আছো। </p>
    </div>
  </div>
</div>

টেবসমূহত ম্লান কৰক

টেবসমূহ ফেইড ইন .fadeকৰিবলৈ, প্ৰতিটো ত যোগ কৰক .tab-pane।

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

সকলো টেবেবল টেব আমাৰ লঘু jQuery প্লাগইনৰ দ্বাৰা চালিত। জাভাস্ক্রিপ্ট নথিপত্ৰ পৃষ্ঠাত টেবেবল টেবসমূহক কেনেকৈ জীৱন্ত কৰি তুলিব লাগে তাৰ বিষয়ে অধিক পঢ়ক ।

যিকোনো দিশত টেব কৰিব পৰা যায়

তলত টেবসমূহ

HTML ৰ ক্ৰম ফ্লিপ কৰক আৰু তলত টেব ৰাখিবলৈ এটা ক্লাছ যোগ কৰক।

মই ক ছেকচনত আছো।

হাউডি, মই ছেকচন বিত আছো।

ৱাট আপ ছোৱালী, এইটো ছেকচন চি।

<div class = "টেববুল টেব-তলত" > 
  <div class = "টেব-সামগ্ৰী" > 
    ...
  </div>
  <ul class = "nav nav-টেবসমূহ" > 
    ...
  </ul>
</div>

বাওঁফালে থকা টেবসমূহ

বাওঁফালে টেব ৰাখিবলৈ ক্লাছটো শ্বেপ কৰক।

মই ক ছেকচনত আছো।

হাউডি, মই ছেকচন বিত আছো।

ৱাট আপ ছোৱালী, এইটো ছেকচন চি।

<div class = "টেব কৰিব পৰা টেবসমূহ-বাওঁফালে" > 
  <ul class = "nav nav-টেবসমূহ" > 
    ...
  </ul>
  <div class = "টেব-সামগ্ৰী" > 
    ...
  </div>
</div>

সোঁফালে থকা টেববোৰ

সোঁফালে টেব ৰাখিবলৈ শ্ৰেণীটো শ্বেপ কৰক।

মই ক ছেকচনত আছো।

হাউডি, মই ছেকচন বিত আছো।

ৱাট আপ ছোৱালী, এইটো ছেকচন চি।

<div class = "টেব কৰিব পৰা টেবসমূহ-সোঁফালে" > 
  <ul class = "nav nav-টেবসমূহ" > 
    ...
  </ul>
  <div class = "টেব-সামগ্ৰী" > 
    ...
  </div>
</div>

মৌলিক নৱবাৰ

আৰম্ভ কৰিবলে, navbars স্থিতিশীল (ওপৰত স্থিৰ নহয়) আৰু এটা প্ৰকল্পৰ নাম আৰু মূল নেভিগেচনৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰে। এটা ৰ ভিতৰত যিকোনো ঠাইত ৰাখক .container, যি আপোনাৰ চাইট আৰু বিষয়বস্তুৰ প্ৰস্থ নিৰ্ধাৰণ কৰে।

<div class = "নৱবাৰ" > 
  <div class = "নৱবাৰ-অভ্যন্তৰীণ" > 
    <a class = "brand" href = "#" > শিৰোনাম </a>  
    <ul শ্ৰেণী = "nav" > 
      <li class = "সক্ৰিয়" ><a href = "#" > ঘৰ </a></li>  
      <li><a href = "#" > সংযোগ </a></li> 
      <li><a href = "#" > সংযোগ </a></li> 
    </ul>
  </div>
</div>

নৱবাৰৰ উপাদানসমূহ

ব্ৰেণ্ড

আপোনাৰ ব্ৰেণ্ড বা প্ৰজেক্টৰ নাম দেখুৱাবলৈ এটা সহজ লিংকৰ বাবে কেৱল এটা এংকৰ টেগৰ প্ৰয়োজন।

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

Nav লিংকসমূহ

Nav বস্তুসমূহ অক্ৰমবিহীন তালিকাৰ জৰিয়তে যোগ কৰাটো সহজ।

<ul শ্ৰেণী = "nav" > 
  <li শ্ৰেণী = "সক্ৰিয়" > 
    <a href = "#" > ঘৰ </a> 
  </li>
  <li><a href = "#" > সংযোগ </a></li> 
  <li><a href = "#" > সংযোগ </a></li> 
</ul>

আপুনি এটা খালী তালিকা বস্তু আৰু এটা সৰল শ্ৰেণীৰ সৈতে আপোনাৰ nav সংযোগসমূহত সহজে বিভাজকসমূহ যোগ কৰিব পাৰিব। মাত্ৰ এইটো সংযোগসমূহৰ মাজত যোগ কৰক:

<ul শ্ৰেণী = "nav" > 
  ...
  <li class = "বিভাজক-উলম্ব" </li> 
  ...
</ul>

প্ৰপত্ৰসমূহ

navbar ৰ ভিতৰত এটা ফৰ্ম সঠিকভাৱে শৈলী আৰু অৱস্থান কৰিবলে, তলত দেখুওৱাৰ দৰে উপযুক্ত শ্ৰেণীসমূহ যোগ কৰক। এটা অবিকল্পিত প্ৰপত্ৰৰ বাবে, অন্তৰ্ভুক্ত কৰক .navbar-formআৰু হয় .pull-leftবা .pull-rightইয়াক সঠিকভাৱে প্ৰান্তিককৰণ কৰিবলৈ ।

<form class = "navbar-ফৰ্ম টানি-বাওঁফালে" > 
  <ইনপুট ধৰণ = "পাঠ" শ্ৰেণী = "span2" >  
  <button type = "জমা দিয়ক" class = "btn" > জমা দিয়ক </button>  
</form>

সন্ধান ফৰ্ম

এটা অধিক স্বনিৰ্বাচিত সন্ধান প্ৰপত্ৰৰ বাবে, navbar ত বিশেষ শৈলীসমূহৰ বাবে ইনপুটত আৰু যোগ .navbar-searchকৰক ।form.search-query

<form class = "navbar-অন্বেষণ টানি-বাওঁফালে" > 
  <input type = "text" class = "সন্ধান-প্ৰশ্ন" স্থানধাৰী = "সন্ধান" >   
</form>

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

nav সংযোগসমূহ, সন্ধান প্ৰপত্ৰ, বা লিখনী প্ৰান্তিককৰণ কৰক, .pull-leftবা .pull-rightসঁজুলি শ্ৰেণীসমূহ ব্যৱহাৰ কৰক। দুয়োটা শ্ৰেণীয়ে নিৰ্দিষ্ট দিশত এটা CSS ফ্ল'ট যোগ কৰিব।

ড্ৰপডাউন ব্যৱহাৰ কৰি

ড্ৰপডাউনসমূহ আৰু ড্ৰপআপসমূহ nav ত যোগ কৰক এটা বিট মাৰ্কআপ আৰু ড্ৰপডাউনসমূহ JavaScript প্লাগইনৰ সৈতে ।

<ul শ্ৰেণী = "nav" > 
  <li class = "ড্ৰপডাউন" > 
    <a href = "#" class = "ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >   
      একাউণ্ট
      <b class = "কেৰেট" </b> 
    </a>
    <ul class = "ড্ৰপডাউন-মেনু" > 
      ...
    </ul>
  </li>
</ul>

অধিক মাৰ্কআপ আৰু ড্ৰপডাউনসমূহ কল কৰাৰ বিষয়ে তথ্যৰ বাবে JavaScript ড্ৰপডাউনসমূহ আলেখ্যন চাওক ।

পাঠ্য

ৰ সৈতে এটা উপাদানত লিখনীৰ ষ্ট্ৰিংসমূহ ৰেপ কৰক .navbar-text, সাধাৰণতে <p>সঠিক লিডিং আৰু ৰঙৰ বাবে এটা টেগত।

বৈকল্পিক প্ৰদৰ্শন ভিন্নতাসমূহ

navbar ক দৰ্শনপৰ্টৰ ওপৰত বা তললৈ ঠিক কৰক আটাইতকৈ বাহিৰৰ div ত এটা অতিৰিক্ত শ্ৰেণীৰ সৈতে, .navbar.

ওপৰত স্থিৰ কৰা হৈছে

যোগ কৰক .navbar-fixed-topআৰু মনত ৰাখিব ইয়াৰ তলৰ লুকাই থকা অঞ্চলটোৰ বাবে হিচাপ দিবলৈ অন্ততঃ 40px যোগ paddingকৰি <body>। এইটো মূল Bootstrap CSS ৰ পিছত আৰু বৈকল্পিক প্ৰতিক্ৰিয়াশীল CSS ৰ আগত যোগ কৰাটো নিশ্চিত কৰক ।

<div class = "navbar navbar-নিৰ্দিষ্ট-শীৰ্ষ" > 
  ...
</div>

তলত স্থিৰ কৰা হৈছে

.navbar-fixed-bottomইয়াৰ পৰিৱৰ্তে যোগ কৰক ।

<div class = "নৱবাৰ নৱবাৰ-নিৰ্দিষ্ট-তল" > 
  ...
</div>

ষ্টেটিক টপ নাভবাৰ

এটা সম্পূৰ্ণ-প্ৰস্থ নভবাৰ সৃষ্টি কৰক যি যোগ কৰি পৃষ্ঠাৰ সৈতে স্ক্ৰ'ল কৰে .navbar-static-top। .navbar-fixed-topক্লাছৰ দৰে নহয় , আপুনি body.

<div class = "navbar নৱবাৰ-স্থিতিশীল-শীৰ্ষ" > 
  ...
</div>

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

এটা সংকুচিত প্ৰতিক্ৰিয়াশীল navbar প্ৰণয়ন কৰিবলে, আপোনাৰ navbar বিষয়বস্তু এটা ধাৰণকাৰী div, .nav-collapse.collapse, ত ৰেপ কৰক আৰু navbar টগল বুটাম যোগ কৰক, .btn-navbar.

<div class = "নৱবাৰ" > 
  <div class = "নৱবাৰ-অভ্যন্তৰীণ" > 
    <div class = "পাত্ৰ" > 
 
      <!-- .btn-navbar ক সংকুচিত navbar বিষয়বস্তুৰ বাবে টগল হিচাপে ব্যৱহাৰ কৰা হয় -->
      <a class = "btn btn-navbar" ডাটা-টগল = "সংকোচন" ডাটা-লক্ষ্য = ".nav-সংকোচন" >   
        <span class = "আইকন-বাৰ" </span> 
        <span class = "আইকন-বাৰ" </span> 
        <span class = "আইকন-বাৰ" </span> 
      </a>
 
      <!-- ব্ৰেণ্ডটো দেখুৱাব বিচাৰিলে নিশ্চয়কৈ বাহিৰত এৰি দিয়ক -->
      <a class = "brand" href = "#" > প্ৰকল্পৰ নাম </a>  
 
      <!-- আপুনি বিচৰা সকলো বস্তু 940px বা তাতকৈ কমত লুকুৱাই ৰাখিব, ইয়াৰ ভিতৰত ৰাখক -->
      <div class = "nav-সংকোচন সংকোচন" > 
        <!-- .নৱ, .নৱবাৰ-অন্বেষণ, .নৱবাৰ-ফৰ্ম, ইত্যাদি -->
      </div>
 
    </div>
  </div>
</div>

মুৰ ডাঙি! প্ৰতিক্ৰিয়াশীল navbar ৰ বাবে সংকুচিত প্লাগইন আৰু প্ৰতিক্ৰিয়াশীল Bootstrap CSS নথিপত্ৰৰ প্ৰয়োজন ।

ওলোটা তাৰতম্য

যোগ কৰি navbar ৰ ৰূপ পৰিবৰ্তন কৰক .navbar-inverse।

<div class = "নৱবাৰ নৱবাৰ-বিপৰীত" > 
  ...
</div>

উদাহৰণ

এটা উদাহৰণ দেখুওৱা হৈছে যিদৰে ই একাধিক পৃষ্ঠাত প্ৰদৰ্শিত হ'ব পাৰে।

<ul class = "ব্ৰেডক্ৰাম" > 
  <li><a href = "#" > ঘৰ </a> <span class = "বিভাজক" > / </span></li>   
  <li><a href = "#" > লাইব্ৰেৰী </a> <span class = "বিভাজক" > / </span></li>   
  <li class = "সক্ৰিয়" > তথ্য </li> 
</ul>

মানক পৃষ্ঠাকৰণ

Rdio দ্বাৰা অনুপ্ৰাণিত সৰল পৃষ্ঠাকৰণ, এপ আৰু সন্ধান ফলাফলৰ বাবে অতি উত্তম। ডাঙৰ ব্লকটো মিছ কৰাটো কঠিন, সহজে স্কেলেবল, আৰু ডাঙৰ ক্লিক এৰিয়া প্ৰদান কৰে।

<div class = "পৃষ্ঠাকৰণ" > 
  <ul>
    <li><a href = "#" > পূৰ্বৰ </a></li> 
    <li><a href = "#" > ১ </a></li> 
    <li><a href = "#" > ২ </a></li> 
    <li><a href = "#" > ৩ </a></li> 
    <li><a href = "#" > ৪ </a></li> 
    <li><a href = "#" > ৫ </a></li> 
    <li><a href = "#" > পৰৱৰ্তী </a></li> 
  </ul>
</div>

বিকল্পসমূহ

অক্ষম আৰু সক্ৰিয় অৱস্থাসমূহ

বিভিন্ন পৰিস্থিতিৰ বাবে লিংকসমূহ কাষ্টমাইজ কৰিব পৰা যায়। .disabledক্লিক কৰিব নোৱাৰা সংযোগসমূহৰ বাবে আৰু .activeবৰ্তমান পৃষ্ঠাটো সূচাবলৈ ব্যৱহাৰ কৰক ।

<div class = "পৃষ্ঠাকৰণ" > 
  <ul>
    <li class = "অক্ষম" ><a href = "#" > « </a></li>  
    <li class = "সক্ৰিয়" ><a href = "#" > ১ </a></li>  
    ...
  </ul>
</div>

আপুনি বৈকল্পিকভাৱে সক্ৰিয় বা নিষ্ক্ৰিয় এংকৰসমূহ স্পেনসমূহৰ বাবে শ্বেপ আউট কৰিব পাৰে ক্লিক কাৰ্য্যকৰীতা আঁতৰাবলৈ উদ্দেশ্যপ্ৰণোদিত শৈলীসমূহ ধৰি ৰাখে।

<div class = "পৃষ্ঠাকৰণ" > 
  <ul>
    <li class = "অক্ষম" ><span> « </span></li> ৰ দ্বাৰা প্ৰকাশিত 
    <li শ্ৰেণী = "সক্ৰিয়" ><span> ১ </span></li> 
    ...
  </ul>
</div>

আকাৰসমূহ

ডাঙৰ বা সৰু পৃষ্ঠাকৰণৰ আড়ম্বৰপূৰ্ণ? অতিৰিক্ত আকাৰৰ বাবে .pagination-large, .pagination-small, বা যোগ কৰক ।.pagination-mini

<div class = "পৃষ্ঠা পৃষ্ঠা-বৃহৎ" > 
  <ul>
    ...
  </ul>
</div>
<div class = "পৃষ্ঠাকৰণ" > 
  <ul>
    ...
  </ul>
</div>
<div class = "পৃষ্ঠা পৃষ্ঠা পৃষ্ঠা-সৰু" > 
  <ul>
    ...
  </ul>
</div>
<div class = "পৃষ্ঠা পৃষ্ঠা পৃষ্ঠা-মিনি" > 
  <ul>
    ...
  </ul>
</div>

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

পৃষ্ঠা সংযোগসমূহৰ প্ৰান্তিককৰণ সলনি কৰিবলে দুটা বৈকল্পিক শ্ৰেণীৰ এটা যোগ কৰক: .pagination-centeredআৰু .pagination-right.

<div class = "পৃষ্ঠা পৃষ্ঠা-কেন্দ্ৰিক" > 
  ...
</div>

<div class = "পৃষ্ঠা পৃষ্ঠা পৃষ্ঠা-সোঁ" > 
  ...
</div>

পেজাৰ

পোহৰ মাৰ্কআপ আৰু শৈলীসমূহৰ সৈতে সৰল পৃষ্ঠা প্ৰণয়নসমূহৰ বাবে দ্ৰুত পূৰ্বৱৰ্তী আৰু পৰৱৰ্তী সংযোগসমূহ। ব্লগ বা আলোচনীৰ দৰে সৰল চাইটৰ বাবে ই অতি উত্তম।

অবিকল্পিত উদাহৰণ

অবিকল্পিতভাৱে, পেজাৰে সংযোগসমূহক কেন্দ্ৰ কৰে।

<ul শ্ৰেণী = "পেজাৰ" > 
  <li><a href = "#" > পূৰ্বৱৰ্তী </a></li> 
  <li><a href = "#" > পৰৱৰ্তী </a></li> 
</ul>

প্ৰান্তিককৃত সংযোগসমূহ

বৈকল্পিকভাৱে, আপুনি প্ৰতিটো সংযোগক কাষলৈ প্ৰান্তিককৰণ কৰিব পাৰে:

<ul শ্ৰেণী = "প���জাৰ" > 
  <li class = "পূৰ্বৰ" > 
    <a href = "#" > ← পুৰণি </a> 
  </li>
  <li class = "পৰৱৰ্তী" > 
    <a href = "#" > নতুন → </a> 
  </li>
</ul>

বৈকল্পিক নিষ্ক্ৰিয় অৱস্থা

পেজাৰ সংযোগসমূহে পৃষ্ঠাকৰণৰ .disabledপৰা সাধাৰণ উপযোগিতা শ্ৰেণীটোও ব্যৱহাৰ কৰে।

<ul শ্ৰেণী = "পেজাৰ" > 
  <li class = "পূৰ্বৰ নিষ্ক্ৰিয়" > 
    <a href = "#" > ← পুৰণি </a> 
  </li>
  ...
</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>`

বেজ

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

সহজে ভাঙিব পৰা

সহজ প্ৰণয়নৰ বাবে, লেবেল আৰু বেজসমূহ কেৱল সংকুচিত হ'ব (CSS ৰ :emptyনিৰ্বাচকৰ যোগেদি) যেতিয়া ভিতৰত কোনো বিষয়বস্তু নাই।

নায়ক ইউনিট

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

নমস্কাৰ, পৃথিৱী!

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

অধিক জানক

<div class = "হিৰো-ইউনিট" > 
  <h1> শিৰোনাম </h1>
  <p> টেগলাইন </p>
  <p>
    <a class = "btn btn-প্ৰাথমিক btn-বৃহৎ" > 
      অধিক জানক
    </a>
  </p>
</div>

পৃষ্ঠাৰ হেডাৰ

h1এটা পৃষ্ঠাত বিষয়বস্তুৰ অংশসমূহ উপযুক্তভাৱে স্পেচ আউট আৰু ছেগমেণ্ট কৰিবলৈ এটাৰ বাবে এটা সৰল শ্বেল । ই h1's অবিকল্পিত small, উপাদানৰ লগতে বেছিভাগ অন্য উপাদান (অতিৰিক্ত শৈলীৰ সৈতে) ব্যৱহাৰ কৰিব পাৰে।

<div class = "পৃষ্ঠা-হেডাৰ" > 
  <h1> উদাহৰণ পৃষ্ঠা হেডাৰ <small> হেডাৰৰ বাবে উপপাঠ্য </small></h1>
</div>

অবিকল্পিত থাম্বনেইলসমূহ

অবিকল্পিতভাৱে, Bootstrap ৰ থাম্বনেইলসমূহ নূন্যতম প্ৰয়োজনীয় মাৰ্কআপৰ সৈতে সংযুক্ত প্ৰতিমুৰ্তিসমূহ প্ৰদৰ্শন কৰিবলে ডিজাইন কৰা হৈছে।

অতি কাষ্টমাইজেবল

অলপ অতিৰিক্ত মাৰ্কআপৰ সৈতে, যিকোনো ধৰণৰ HTML বিষয়বস্তু যেনে শিৰোনাম, অনুচ্ছেদ, বা বুটাম থাম্বনেইলত যোগ কৰা সম্ভৱ।

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

ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

কাৰ্য কৰা কাৰ্য কৰা
থাম্বনেইল লেবেল

ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

কাৰ্য কৰা কাৰ্য কৰা
থাম্বনেইল লেবেল

ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

কাৰ্য কৰা কাৰ্য কৰা

থাম্বনেইল কিয় ব্যৱহাৰ কৰিব লাগে

থাম্বনেইলসমূহ (পূৰ্বতে .media-gridv1.4 লৈকে) ফটো বা ভিডিঅ'ৰ গ্ৰীড, ছবি সন্ধান ফলাফল, খুচুৰা সামগ্ৰী, পৰ্টফলিঅ', আৰু বহুতোৰ বাবে অতি উত্তম। সেইবোৰ লিংক বা ষ্টেটিক কন্টেন্ট হ’ব পাৰে।

সৰল, নমনীয় মাৰ্কআ��

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

গ্ৰীড স্তম্ভৰ আকাৰ ব্যৱহাৰ কৰে

শেষত, থাম্বনেইলসমূহ উপাদানে বৰ্ত্তমানৰ গ্ৰীড চিস্টেম শ্ৰেণীসমূহ ব্যৱহাৰ কৰে—যেনে .span2বা .span3—থাম্বনেইল মাত্ৰাসমূহ নিয়ন্ত্ৰণৰ বাবে।

মাৰ্কআপ

পূৰ্বে উল্লেখ কৰা অনুসৰি থাম্বনেইলৰ বাবে প্ৰয়োজনীয় মাৰ্কআপ লঘু আৰু পোনপটীয়া। ইয়াত সংযুক্ত ছবিসমূহৰ বাবে অবিকল্পিত প্ৰতিষ্ঠা চাওক :

<ul class = "থাম্বনেইলসমূহ" > 
  <li শ্ৰেণী = "span4" > 
    <a href = "#" শ্ৰেণী = "থাম্বনেইল" >  
      <img data-src = "ধাৰী.js/৩০০x২০০" alt = "" >  
    </a>
  </li>
  ...
</ul>

থাম্বনেইলত কাষ্টম HTML বিষয়বস্তুৰ বাবে, মাৰ্কআপ অলপ সলনি হয়। <a>যিকোনো ঠাইতে ব্লক স্তৰৰ বিষয়বস্তুৰ অনুমতি দিবলৈ, আমি এটা পছন্দৰ বাবে শ্বেপ কৰোঁ <div>:

<ul class = "থাম্বনেইলসমূহ" > 
  <li শ্ৰেণী = "span4" > 
    <div class = "থাম্বনেইল" > 
      <img data-src = "ধাৰী.js/৩০০x২০০" alt = "" >  
      <h3> থাম্বনেইল লেবেল </h3>
      <p> থাম্বনেইল কেপচন... </p>
    </div>
  </li>
  ...
</ul>

অধিক উদাহৰণ

আপোনাৰ বাবে উপলব্ধ বিভিন্ন গ্ৰীড শ্ৰেণীসমূহৰ সৈতে আপোনাৰ সকলো বিকল্পসমূহ অন্বেষণ কৰক। আপুনি বিভিন্ন আকাৰৰ মিহলাই মিলাইও কৰিব পাৰে।

অবিকল্পিত সতৰ্কবাণী

.alertএটা মূল সতৰ্কবাণী সতৰ্কবাণী বাৰ্তাৰ বাবে যিকোনো লিখনী আৰু এটা বৈকল্পিক খাৰিজ বুটাম ৰেপ কৰক ।

সতৰ্কবাণী! Best check yo self, আপুনি বেছি ভাল দেখা নাই।

<div class = "সতৰ্কবাণী" > 
  <বুটামৰ ধৰণ = "বুটাম" শ্ৰেণী = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" > × </বুটাম>   
  <strong> সতৰ্কবাণী! </strong> বেষ্ট চেক ইয়ো চেল্ফ, আপুনি বেছি ভাল দেখা নাই।
</div>

বাতিল কৰক বুটামসমূহ

মোবাইল ছাফাৰী আৰু মোবাইল অপেৰা ব্ৰাউজাৰসমূহত, data-dismiss="alert"বৈশিষ্ট্যৰ উপৰিও, এটা টেগ href="#"ব্যৱহাৰ কৰাৰ সময়ত সতৰ্কবাণীসমূহ খাৰিজ কৰাৰ বাবে এটাৰ প্ৰয়োজন হয়।<a>

<a href = "#" class = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" > × </a>

বৈকল্পিকভাৱে, আপুনি <button>ডাটা বৈশিষ্ট্যৰ সৈতে এটা উপাদান ব্যৱহাৰ কৰিব পাৰে, যিটো আমি আমাৰ নথিপত্ৰসমূহৰ বাবে কৰিবলৈ বাছি লৈছো। ব্যৱহাৰ কৰাৰ <button>সময়ত আপুনি অন্তৰ্ভুক্ত কৰিব লাগিব type="button"বা আপোনাৰ প্ৰ-পত্ৰসমূহ জমা নিদিবও পাৰে।

<বুটামৰ ধৰণ = "বুটাম" শ্ৰেণী = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" > × </বুটাম>

জাভাস্ক্রিপ্টৰ যোগেদি সতর্কতাসমূহ খাৰিজ কৰক

সতৰ্কবাণীসমূহৰ দ্ৰুত আৰু সহজ বাতিলৰ বাবে সতৰ্কবাণীসমূহ jQuery প্লাগইন ব্যৱহাৰ কৰক ।

বিকল্পসমূহ

দীঘল বাৰ্তাৰ বাবে, যোগ কৰি সতৰ্কবাণী ৰেপাৰৰ ওপৰত আৰু তলত পেডিং বৃদ্ধি কৰক .alert-block।

সতৰ্কবাণী!

Best check yo self, আপুনি বেছি ভাল দেখা নাই। Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট।

<div class = "সতৰ্কবাণী-ব্লক" > 
  <বুটামৰ ধৰণ = "বুটাম" শ্ৰেণী = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" > × </বুটাম>   
  <h4> সতৰ্কবাণী! </h4>
  Best check yo self, আপনি নহয়...
</div>

প্ৰসংগভিত্তিক বিকল্প

এটা সতৰ্কবাণীৰ অৰ্থ সলনি কৰিবলে বৈকল্পিক শ্ৰেণীসমূহ যোগ কৰক।

ভুল বা বিপদ

অ' স্নেপ! কেইটামান কথা সলনি কৰি আকৌ জমা দিবলৈ চেষ্টা কৰক।

<div class = "সতৰ্কবাণী-ত্ৰুটি" > 
  ...
</div>

সফলতা

বঢ়িয়া! আপুনি এই গুৰুত্বপূৰ্ণ সতৰ্কবাণী বাৰ্তাটো সফলতাৰে পঢ়িছে।

<div class = "সতৰ্কবাণী-সফলতা" > 
  ...
</div>

তথ্য

মুৰ ডাঙি! এই সতৰ্কবাণীটো আপোনাৰ মনোযোগৰ প্ৰয়োজন, কিন্তু ই ছুপাৰ ইম্পৰটেণ্ট নহয়।

<div class = "সতৰ্কবাণী-তথ্য" > 
  ...
</div>

উদাহৰণ আৰু মাৰ্কআপ

প্ৰাথমিক

এটা উলম্ব গ্ৰেডিয়েন্টৰ সৈতে অবিকল্পিত অগ্ৰগতি বাৰ।

<div class = "অগ্ৰগতি" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ৬০ %; " ></div>   
</div>

ডাঠ

এটা ষ্ট্ৰাইপড ইফেক্ট সৃষ্টি কৰিবলৈ এটা গ্ৰেডিয়েণ্ট ব্যৱহাৰ কৰে। IE7-8 ত উপলব্ধ নহয়।

<div class = "অগ্ৰগতি-ষ্ট্ৰাইপড" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ২০ %; " ></div>   
</div>

এনিমেটেড

ষ্ট্ৰাইপবোৰ সোঁফালৰ পৰা বাওঁফালে এনিমেট কৰিবলৈ .activeযোগ কৰক । .progress-stripedIE ৰ সকলো সংস্কৰণত উপলব্ধ নহয়।

<div class = "অগ্ৰগতি-ষ্ট্ৰাইপড সক্ৰিয়" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ৪০ %; " ></div>   
</div>

ষ্টেক কৰা হৈছে

একেটাতে একাধিক বাৰ ৰাখক .progressযাতে সিহতক ষ্টেক কৰিব পাৰে।

<div class = "অগ্ৰগতি" > 
  <div class = "বাৰ বাৰ-সফলতা" শৈলী = " প্ৰস্থ : ৩৫ %; " ></div>   
  <div class = "বাৰ বাৰ-সতৰ্কবাণী" শৈলী = " প্ৰস্থ : ২০ %; " ></div>   
  <div class = "বাৰ বাৰ-বিপদ" শৈলী = " প্ৰস্থ : ১০ %; " ></div>   
</div>

বিকল্পসমূহ

অতিৰিক্ত ৰং

প্ৰগ্ৰেছ বাৰসমূহে একে বুটাম আৰু সতৰ্কতা শ্ৰেণীসমূহৰ কিছুমান ব্যৱহাৰ কৰে সামঞ্জস্যপূৰ্ণ শৈলীসমূহৰ বাবে।

<div class = "অগ্ৰগতি-তথ্য" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ২০ % " ></div>   
</div>
<div class = "অগ্ৰগতি-সফলতা" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ৪০ % " ></div>   
</div>
<div class = "অগ্ৰগতি-সতৰ্কবাণী" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ৬০ % " ></div>   
</div>
<div class = "অগ্ৰগতি-বিপদ" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ৮০ % " ></div>   
</div>

ডাঠ বাৰ

কঠিন ৰঙৰ দৰেই আমাৰ ওচৰত বিভিন্ন ধৰণৰ ডাঠ প্ৰগ্ৰেছ বাৰ আছে।

<div class = "অগ্ৰগতি-অগ্ৰগতি-তথ্য অগ্ৰগতি-ষ্ট্ৰাইপড" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ২০ % " ></div>   
</div>
<div class = "প্ৰগতি অগ্ৰগতি-সফলতা অগ্ৰগতি-ষ্ট্ৰাইপড" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ৪০ % " ></div>   
</div>
<div class = "অগ্ৰগতি-সতৰ্কবাণী অগ্ৰগতি-ষ্ট্ৰাইপড" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ৬০ % " ></div>   
</div>
<div class = "প্ৰগতি অগ্ৰগতি-বিপদ অগ্ৰগতি-ষ্ট্ৰাইপড" > 
  <div class = "বাৰ" শৈলী = " প্ৰস্থ : ৮০ % " ></div>   
</div>

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

প্ৰগ্ৰেছ বাৰসমূহে সিহতৰ সকলো প্ৰভাৱ লাভ কৰিবলে CSS3 গ্ৰেডিয়েন্টসমূহ, পৰিৱৰ্তনসমূহ, আৰু এনিমেচনসমূহ ব্যৱহাৰ কৰে। এই বৈশিষ্ট্যসমূহ IE7-9 বা Firefox ৰ পুৰণি সংস্কৰণসমূহত সমৰ্থিত নহয়।

Internet Explorer 10 আৰু Opera 12 তকৈ আগৰ সংস্কৰণসমূহে এনিমেচন সমৰ্থন নকৰে।

বিভিন্ন ধৰণৰ উপাদান নিৰ্মাণৰ বাবে বিমূৰ্ত বস্তু শৈলী (যেনে ব্লগ মন্তব্য, টুইট, ইত্যাদি) যিয়ে পাঠ্য বিষয়বস্তুৰ সৈতে এটা বাওঁ- বা সোঁ-প্ৰান্তিককৃত ছবি বৈশিষ্ট্য প্ৰদান কৰে।

অবিকল্পিত উদাহৰণ

অবিকল্পিত মাধ্যমে এটা মাধ্যম বস্তু (চিত্ৰ, ভিডিঅ', অডিঅ') এটা বিষয়বস্তু ব্লকৰ বাওঁ বা সোঁফালে ওপঙিবলৈ অনুমতি দিয়ে।

মিডিয়া হেডিং

ক্ৰাছ বহি আমেট নিভ লিবাৰো, গ্ৰেভিডা নুল্লাত। নুলা ভেল মেটাছ স্কেলেৰিস্ক এণ্টে ছলিচিটুডিন কমোডো। ক্ৰাছ পিউৰাছ অডিঅ', ভলপুটেটত ভেষ্টিবুলাম এট, টেম্পাছ ভিভেৰা টাৰ্পিছ। ফুচ কণ্ডিমেণ্টাম nunc ac nisi ভলপুটেট ফ্ৰিংজিলা। ফ’চিবাছত ডনেক লেচিনিয়া কংগু ফেলিছ।

মিডিয়া হেডিং

<div class = "মিডিয়া" > 
  <a class = "টানি-বাওঁফালে" href = "#" >  
    <img class = "মিডিয়া-বস্তু" ডাটা- src = "ধাৰী.js/64x64" >  
  </a>
  <div class = "মিডিয়া-শৰীৰ" > 
    <h4 class = "media-heading" > মাধ্যমৰ শিৰোনাম </h4> 
    ...
 
    <!-- নেষ্টেড মিডিয়া বস্তু -->
    <div class = "মিডিয়া" > 
      ...
    </div>
  </div>
</div>

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

অলপ অতিৰিক্ত মাৰ্কআপৰ সৈতে, আপুনি তালিকাৰ ভিতৰত মাধ্যম ব্যৱহাৰ কৰিব পাৰে (মন্তব্য থ্ৰেড বা প্ৰবন্ধ তালিকাৰ বাবে উপযোগী)।

মিডিয়া হেডিং

ক্ৰাছ বহি আমেট নিভ লিবাৰো, গ্ৰেভিডা নুল্লাত। নুলা ভেল মেটাছ স্কেলেৰিস্ক এণ্টে ছলিচিটুডিন কমোডো। ক্ৰাছ পিউৰাছ অডিঅ', ভলপুটেটত ভেষ্টিবুলাম এট, টেম্পাছ ভিভেৰা টাৰ্পিছ।

নেষ্টেড মিডিয়া হেডিং
ক্ৰাছ বহি আমেট নিভ লিবাৰো, গ্ৰেভিডা নুল্লাত। নুলা ভেল মেটাছ স্কেলেৰিস্ক এণ্টে ছলিচিটুডিন কমোডো। ক্ৰাছ পিউৰাছ অডিঅ', ভলপুটেটত ভেষ্টিবুলাম এট, টেম্পাছ ভিভেৰা টাৰ্পিছ।

নেষ্টেড মিডিয়া হেডিং
ক্ৰাছ বহি আমেট নিভ লিবাৰো, গ্ৰেভিডা নুল্লাত। নুলা ভেল মেটাছ স্কেলেৰিস্ক এণ্টে ছলিচিটুডিন কমোডো। ক্ৰাছ পিউৰাছ অডিঅ', ভলপুটেটত ভেষ্টিবুলাম এট, টেম্পাছ ভিভেৰা টাৰ্পিছ।

নেষ্টেড মিডিয়া হেডিং
ক্ৰাছ বহি আমেট নিভ লিবাৰো, গ্ৰেভিডা নুল্লাত। নুলা ভেল মেটাছ স্কেলেৰিস্ক এণ্টে ছলিচিটুডিন কমোডো। ক্ৰাছ পিউৰাছ অডিঅ', ভলপুটেটত ভেষ্টিবুলাম এট, টেম্পাছ ভিভেৰা টাৰ্পিছ।
মিডিয়া হেডিং
ক্ৰাছ বহি আমেট নিভ লিবাৰো, গ্ৰেভিডা নুল্লাত। নুলা ভেল মেটাছ স্কেলেৰিস্ক এণ্টে ছলিচিটুডিন কমোডো। ক্ৰাছ পিউৰাছ অডিঅ', ভলপুটেটত ভেষ্টিবুলাম এট, টেম্পাছ ভিভেৰা টাৰ্পিছ।

<ul class = "মিডিয়া-তালিকা" > 
  <li class = "মিডিয়া" > 
    <a class = "টানি-বাওঁফালে" href = "#" >  
      <img class = "মিডিয়া-বস্তু" ডাটা- src = "ধাৰী.js/64x64" >  
    </a>
    <div class = "মিডিয়া-শৰীৰ" > 
      <h4 class = "media-heading" > মাধ্যমৰ শিৰোনাম </h4> 
      ...
 
      <!-- নেষ্টেড মিডিয়া বস্তু -->
      <div class = "মিডিয়া" > 
        ...
     </div>
    </div>
  </li>
</ul>

ওৱেলছ

এটা উপাদানৰ ওপৰত এটা সৰল প্ৰভাৱ হিচাপে কুঁৱাটো ব্যৱহাৰ কৰি ইয়াক এটা ইনছেট প্ৰভাৱ দিব লাগে।

চাওক, মই এটা কুঁৱাত আছো!

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

ঐচ্ছিক শ্ৰেণীসমূহ

দুটা বৈকল্পিক পৰিবৰ্তক শ্ৰেণীৰ সৈতে পেডিং আৰু ঘূৰণীয়া কোণ নিয়ন্ত্ৰণ কৰক।

চাওক, মই এটা কুঁৱাত আছো!

<div class = "ভাল ভালদৰে-বৃহৎ" > 
  ...
</div>

চাওক, মই এটা কুঁৱাত আছো!

<div class = "ভাল ভাল-সৰু" > 
  ...
</div>

আইকন বন্ধ কৰক

মডাল আৰু সতৰ্কবাণীৰ দৰে বিষয়বস্তু বাতিল কৰাৰ বাবে সাধাৰণ বন্ধ আইকন ব্যৱহাৰ কৰক।

<button class = "বন্ধ কৰক" > × </বুটাম>

iOS ডিভাইচসমূহৰ বাবে এটা href="#"ক্লিক ইভেন্টসমূহৰ বাবে প্ৰয়োজন যদি আপুনি এটা এংকৰ ব্যৱহাৰ কৰাটো পছন্দ কৰে।

<a class = "বন্ধ কৰক" href = "#" > × </a>

সহায়ক শ্ৰেণী

সৰু প্ৰদৰ্শন বা আচৰণ টুইকসমূহৰ বাবে সৰল, কেন্দ্ৰীভূত শ্ৰেণীসমূহ।

.টানি-বাওঁফালে

এটা উপাদান বাওঁফালে ওপঙি দিয়ক

class = "টানি-বাওঁফালে"

. টানি - বাওঁফালে {
  float : বাওঁফালে ;
}

.টানি-সোঁফালে

এটা উপাদান সোঁফালে ওপঙি দিয়ক

class = "টানি-সোঁ"

. টানি - ডান {
  float : সোঁফালে ;
}

.muted কৰা হৈছে

এটা উপাদানৰ ৰং সলনি কৰক#999

class = "নিস্তব্ধ কৰা হৈছে"

. muted {
  ৰং : #৯৯৯; 
}

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

floatযিকোনো উপাদানৰ ওপৰত ক্লিয়াৰ কৰক

class = "ক্লিয়াৰফিক্স"

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

ড্ৰপডাউন মেনুসমূহ

উদাহৰণ

মাৰ্কআপ

বিকল্পসমূহ

মেনুসমূহ প্ৰান্তিককৰণ কৰা

মেনু বিকল্পসমূহ নিষ্ক্ৰিয় কৰা হৈছে

ড্ৰপডাউনসমূহত উপ মেনুসমূহ

বুটাম গোটসমূহ

উদাহৰণ

একক বুটাম গোট

একাধিক বুটাম গোট

উলম্ব বুটাম গোটসমূহ

চেকবক্স আৰু ৰেডিঅ'ৰ সোৱাদ

বুটাম গোটসমূহত ড্ৰপডাউনসমূহ

বুটাম ড্ৰপডাউন মেনুসমূহ

আভাস আৰু উদাহৰণ

সকলো বুটামৰ আকাৰৰ সৈতে কাম কৰে

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

বিভাজিত বুটাম ড্ৰপডাউনসমূহ

আকাৰসমূহ

ড্ৰপআপ মেনুসমূহ

Nav: টেব, বড়ি, আৰু তালিকা

লঘু অবিকল্পিতসমূহ একেটা মাৰ্কআপ, বিভিন্ন শ্ৰেণীসমূহ

মূল টেবসমূহ

মৌলিক বড়ি

অক্ষম অৱস্থা

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

ষ্টেকযোগ্য

ষ্টেক কৰা টেবসমূহ

ষ্টেক কৰা বড়ি

ড্ৰপডাউনসমূহ

ড্ৰপডাউনৰ সৈতে টেবসমূহ

ড্ৰপডাউনৰ সৈতে বড়ি

Nav তালিকাসমূহ

উদাহৰণ nav তালিকা

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

Tabbable nav

টেবেবলৰ উদাহৰণ

টেবসমূহত ম্লান কৰক

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

যিকোনো দিশত টেব কৰিব পৰা যায়

তলত টেবসমূহ

বাওঁফালে থকা টেবসমূহ

সোঁফালে থকা টেববোৰ

নৱবৰ

মৌলিক নৱবাৰ

নৱবাৰৰ উপাদানসমূহ

ব্ৰেণ্ড

Nav লিংকসমূহ

প্ৰপত্ৰসমূহ

সন্ধান ফৰ্ম

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

ড্ৰপডাউন ব্যৱহাৰ কৰি

পাঠ্য

বৈকল্পিক প্ৰদৰ্শন ভিন্নতাসমূহ

ওপৰত স্থিৰ কৰা হৈছে

তলত স্থিৰ কৰা হৈছে

ষ্টেটিক টপ নাভবাৰ

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

ওলোটা তাৰতম্য

ব্ৰেডক্ৰামছ

উদাহৰণ

পেজিনেচন বিষয়বস্তুৰ মাজেৰে পেজিং কৰাৰ বাবে দুটা বিকল্প

মানক পৃষ্ঠাকৰণ

বিকল্পসমূহ

অক্ষম আৰু সক্ৰিয় অৱস্থাসমূহ

আকাৰসমূহ

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

পেজাৰ

অবিকল্পিত উদাহৰণ

প্ৰান্তিককৃত সংযোগসমূহ

বৈকল্পিক নিষ্ক্ৰিয় অৱস্থা

লেবেল আৰু বেজ

লেবেলসমূহ

বেজ

সহজে ভাঙিব পৰা

টাইপোগ্ৰাফিক উপাদানসমূহ

নায়ক ইউনিট

নমস্কাৰ, পৃথিৱী!

পৃষ্ঠাৰ হেডাৰ

সৰল, নমনীয় মাৰ্কআ��