उदाहरण

लिंक कें सूची प्रदर्शित करय कें लेल टॉगल करय योग्य, संदर्भ मेनू. ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथ इंटरैक्टिव बनाओल गेल अछि .

<ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" 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>

मार्कअप

बस ड्रॉपडाउन मेनू देखैत, एतय आवश्यक एचटीएमएल अछि. अहां कें ड्रॉपडाउन कें ट्रिगर आओर ड्रॉपडाउन मेनू कें भीतर लपेटय कें जरूरत छै .dropdown, या कोनों अन्य तत्व जे घोषित position: relative;करय छै. तखन बस मेनू बनाउ।

<div वर्ग = "ड्रॉपडाउन" > 
  <!-- ड्रॉपडाउन टॉगल करबाक लेल लिंक वा बटन -->
  <ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" 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-rightएकटा मे जोड़ू .dropdown-menuड्रॉपडाउन मेनू केँ दाहिना संरेखित करू.

<ul class = "ड्रॉपडाउन-मेनू पुल-राइट" भूमिका = "मेनू" aria-labelledby = "dLabel" >   
  ...
</ul>

मेनू विकल्प अक्षम

लिंक अक्षम करबाक लेल ड्रॉपडाउन मे .disableda मे जोड़ू .<li>

<ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" 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>

ड्रॉपडाउन पर उप मेनू

ड्रॉपडाउन मेनू कें एकटा अतिरिक्त स्तर जोड़ूं, जे ओएस एक्स कें तरह होवर पर दिखाई देयत छै, किछ सरल मार्कअप जोड़क कें साथ. स्वचालित स्टाइलिंग कें लेल कोनों मौजूदा ड्रॉपडाउन मेनू मे .dropdown-submenuकोनों मे जोड़ू .li

<ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" aria-labelledby = "dLabel" >   
  ...
  <li class = "ड्रॉपडाउन-उपमेनू" > 
    <a tabindex = "-1" href = "#" > आओर विकल्प </a>  
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </li>
</ul>

उदाहरण के लिये

दूटा मूल विकल्प, संगहि दूटा आओर विशिष्ट भिन्नता।

एकल बटन समूह

.btnमें बटन के एक श्रृंखला लपेटें .btn-group|

<div वर्ग = "बीटीएन-समूह" > 
  <button class = "btn" > बाम </button> 
  <button class = "btn" > मध्य </बटन> 
  <button class = "btn" > दाहिना </बटन> 
</div>

एकाधिक बटन समूह

अधिक जटिल घटक के लिये <div class="btn-group">एक में सेट के संयोजन |<div class="btn-toolbar">

<div वर्ग = "बीटीएन-टूलबार" > 
  <div वर्ग = "बीटीएन-समूह" > 
    ...
  </div>
</div>

ऊर्ध्वाधर बटन समूह

बटन कें एकटा सेट कें क्षैतिज रूप सं नहि बल्कि लंबवत ढेर देखाय दिअ.

<div वर्ग = "btn-समूह btn-समूह-ऊर्ध्वाधर" > 
  ...
</div>

चेकबॉक्स आ रेडियो स्वाद

बटन समूह रेडियो कें रूप मे सेहो काज कयर सकय छै, जतय केवल एकटा बटन सक्रिय भ सकय छै, या चेकबॉक्स, जतय कोनों संख्या मे बटन सक्रिय भ सकय छै. ताहि लेल जावास्क्रिप्ट डॉक्स देखू .

बटन समूह मे ड्रॉपडाउन

हेड अप!ड्रॉपडाउन वाला बटन क॑ सही रेंडरिंग लेली .btn-groupएक के भीतर अलग-अलग अपनऽ म॑ लपेटलऽ जाना चाहियऽ ।.btn-toolbar

अवलोकन एवं उदाहरण

कोनों बटन कें उपयोग ड्रॉपडाउन मेनू कें एकटा कें भीतर रख क .btn-groupआ उचित मेनू मार्कअप प्रदान करयत ट्रिगर करय कें लेल करूं.

<div वर्ग = "बीटीएन-समूह" > 
  <a class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "#" >   
    कार्य
    <span class = "कैरेट" </span> 
  </a>
  <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul>
</div>

सब बटन साइज के साथ काज करैत अछि

बटन ड्रॉपडाउन कोनो आकार पर काज करैत अछि: .btn-large, .btn-small, या .btn-mini.

जावास्क्रिप्ट के आवश्यकता अछि

बटन ड्रॉपडाउन कें काज करय कें लेल बूटस्ट्रैप ड्रॉपडाउन प्लगइन कें आवश्यकता होयत छै.

किछु मामला मे-जेना मोबाइल-ड्रॉपडाउन मेनू व्यूपोर्ट सं बाहर विस्तारित होयत. अहां कें संरेखण कें मैन्युअल रूप सं या कस्टम जावास्क्रिप्ट कें साथ हल करय कें जरूरत छै.

विभाजित बटन ड्रॉपडाउन

बटन ग्रुप स्टाइल आ मार्कअप के आधार पर हम आसानी स स्प्लिट बटन बना सकैत छी | विभाजित बटनऽ म॑ बायां तरफ मानक क्रिया आरू दाहिना तरफ संदर्भ लिंक के साथ ड्रॉपडाउन टॉगल के सुविधा छै.

<div वर्ग = "बीटीएन-समूह" > 
  <button class = "btn" > क्रिया </button> 
  <button class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
    <span class = "कैरेट" </span> 
  </बटन>
  <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul>
</div>

आकार के

अतिरिक्त बटन वर्ग क उपयोग करू .btn-mini, .btn-small, या .btn-largeआकार देबाक लेल.

<div वर्ग = "बीटीएन-समूह" > 
  <button class = "btn btn-mini" > क्रिया </बटन> 
  <बटन वर्ग = "btn btn-मिनी ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
    <span class = "कैरेट" </span> 
  </बटन>
  <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul>
</div>

ड्रॉपअप मेनू

ड्रॉपडाउन मेनू कें सेहो नीचा सं ऊपर टॉगल कैल जा सकय छै कें तत्काल अभिभावक मे एकटा वर्ग जोड़ क .dropdown-menu. ई के दिशा के पलट देत .caretआ मेनू के स्वयं के रिपोजिशन करत जे ऊपर सं नीचा के बजाय नीचा सं ऊपर जाय.

<div class = "btn-समूह ड्रॉपअप" > 
  <button class = "btn" > ड्रॉपअप </बटन> 
  <button class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
    <span class = "कैरेट" </span> 
  </बटन>
  <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul>
</div>

हल्का डिफ़ॉल्ट समान मार्कअप, अलग-अलग वर्ग

एतय सबटा nav घटक-टैब, गोली, आ सूची - वर्ग कें माध्यम सं एकहि आधार मार्कअप आ शैली कें साझा करयत छै ..nav

बेसिक टैब

लिंक के एकटा रेगुलर लिय <ul>आ जोड़ू .nav-tabs:

<ul class = "नव नव-टैब" > 
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > घर </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

बेसिक गोलियाँ

ओही एचटीएमएल लिअ, मुदा एकर .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 = "नव नव-टैब नव-ढेर" > 
  ...
</ul>

ढेर गोलियाँ

<ul class = "नव नव-गोलियाँ नव-ढेर" > 
  ...
</ul>

ड्रॉपडाउन

कनि अतिरिक्त एचटीएमएल आ ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के संग ड्रॉपडाउन मेनू जोड़ू .

ड्रॉपडाउन के साथ टैब

<ul class = "नव नव-टैब" > 
  <li class = "ड्रॉपडाउन" > 
    <a class = "ड्रॉपडाउन-टॉगल"। 
       data-toggle = "ड्रॉपडाउन"।
       href = "#" >
        ड्रॉपडाउन
        <b class = "कैरेट" </b> 
      </a>
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      <!-- लिंक -->
    </ul>
  </li>
</ul>

ड्रॉपडाउन के साथ गोलियाँ

<ul class = "नव नव-गोलियाँ" > 
  <li class = "ड्रॉपडाउन" > 
    <a class = "ड्रॉपडाउन-टॉगल"। 
       data-toggle = "ड्रॉपडाउन"।
       href = "#" >
        ड्रॉपडाउन
        <b class = "कैरेट" </b> 
      </a>
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      <!-- लिंक -->
    </ul>
  </li>
</ul>

नव सूची

वैकल्पिक हेडर कें साथ nav लिंक कें समूह बनावा कें एकटा सरल आ आसान तरीका. एकरऽ उपयोग ओएस एक्स म॑ फाइंडर जैसनऽ साइडबार म॑ सबसे अच्छा छै ।

उदाहरण नव सूची

लिंक के लिस्ट ल क जोड़ू class="nav nav-list":

<ul class = "नव नव-सूची" > 
  <li class = "nav-header" > सूची हेडर </li> 
  <li class = "सक्रिय" ><a href = "#" > घर </a></li>  
  <li><a href = "#" > पुस्तकालय </a></li> 
  ...
</ul>

नोटएकटा nav सूची क भीतर नेस्टिंग क लेल, class="nav nav-list"कोनो नेस्टेड पर शामिल करू <ul>.

क्षैतिज विभाजक

क्लास के साथ एकटा खाली सूची आइटम बना क एकटा क्षैतिज विभाजक जोड़ू .divider, जेना कि:

<ul class = "नव नव-सूची" > 
  ...
  <li class = "विभाजक" </li> 
  ...
</ul>

तब्बेबल नव

टैब कें माध्यम सं सामग्री कें बीच टॉगल करय कें लेल एकटा सरल प्लगइन कें साथ अपन टैब कें जीवंत करूं. बूटस्ट्रैप टैबेबल टैब क॑ चारि शैली म॑ एकीकृत करै छै: ऊपर (डिफ़ॉल्ट), दाहिना, नीचे, आरू बायां.

टैबबल उदाहरण

.tab-paneटैब कें टैब करय योग्य बनावा कें लेल, हर टैब कें लेल एकटा यूनिक आईडी कें साथ बनाऊं आ ओकरा मे लपेटूं .tab-content.

<div class = "tabbable" > <!-- केवल बामा/दाहिना टैब क लेल आवश्यक -->  
  <ul class = "नव नव-टैब" > 
    <li class = "सक्रिय" ><a href = "#tab1" data-toggle = "टैब" > खंड 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "टैब" > खंड 2 </a></li>  
  </ul>
  <div वर्ग = "टैब-सामग्री" > 
    <div वर्ग = "टैब-फलक सक्रिय" आईडी = "टैब1" >  
      <p> हम खंड 1 मे छी. </p>
    </div>
    <div वर्ग = "टैब-फलक" आईडी = "टैब 2" >  
      <p> हाउडी, हम खंड 2 मे छी. </p>
    </div>
  </div>
</div>

टैब में फीका पड़ें

टैब के फीका करय लेल, .fadeप्रत्येक मे जोड़ू .tab-pane.

jQuery प्लगइन के आवश्यकता अछि

सब टैबेबल टैब हमर हल्का jQuery प्लगइन द्वारा संचालित अछि. जावास्क्रिप्ट डॉक्स पृष्ठ पर टैबेबल टैब क' जीवन मे कोना अनबाक अछि ताहि पर बेसी पढ़ू .

कोनो दिशा मे टैबबबल

नीचाँ पर टैब

एचटीएमएल के क्रम फ्लिप करू आ एकटा क्लास जोड़ू जे नीचाँ मे टैब राखू।

<div class = "टैबबल टैब-नीचे" > 
  <div वर्ग = "टैब-सामग्री" > 
    ...
  </div>
  <ul class = "नव नव-टैब" > 
    ...
  </ul>
</div>

बामा कात टैब

बामा कात टैब लगाबय लेल क्लास स्वैप करू.

<div class = "टैबबल टैब-बाएं" > 
  <ul class = "नव नव-टैब" > 
    ...
  </ul>
  <div वर्ग = "टैब-सामग्री" > 
    ...
  </div>
</div>

दाहिना दिस टैब

दाहिना दिस टैब लगाबय लेल क्लास स्वैप करू.

<div class = "टैबबल टैब-दाहिना" > 
  <ul class = "नव नव-टैब" > 
    ...
  </ul>
  <div वर्ग = "टैब-सामग्री" > 
    ...
  </div>
</div>

बेसिक नवबर

शुरू करय कें लेल, नवबार स्थिर छै (ऊपर पर स्थिर नै छै) आ एकटा परियोजना नाम आ बेसिक नेविगेशन कें लेल समर्थन शामिल छै. एकटा के भीतर कतहु राखू .container, जे अहां के साइट आओर सामग्री के चौड़ाई सेट करैत अछि.

<div वर्ग = "नवबार" > 
  <div वर्ग = "नवबार-आन्तरिक" > 
    <a class = "brand" href = "#" > शीर्षक </a>  
    <ul वर्ग = "नव" > 
      <li class = "सक्रिय" ><a href = "#" > घर </a></li>  
      <li><a href = "#" > लिंक </a></li> 
      <li><a href = "#" > लिंक </a></li> 
    </ul>
  </div>
</div>

नवबार घटक

मार्का

अपन ब्रांड या प्रोजेक्ट के नाम देखाबय लेल एकटा साधारण लिंक के लेल केवल एंकर टैग के जरूरत अछि.

<a class = "brand" href = "#" > परियोजना नाम </a>  

नव लिंक

नव आइटम कें अनऑर्डर लिस्ट कें माध्यम सं जोड़नाय सरल छै.

<ul वर्ग = "नव" > 
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > घर </a> 
  </li>
  <li><a href = "#" > लिंक </a></li> 
  <li><a href = "#" > लिंक </a></li> 
</ul>

अहां एकटा खाली सूची आइटम आ एकटा सरल क्लास सं आसानी सं अपन नव लिंक मे डिवाइडर जोड़ सकय छी. बस लिंक के बीच ई जोड़ू:

<ul वर्ग = "नव" > 
  ...
  <li class = "विभाजक-ऊर्ध्वाधर" </li> 
  ...
</ul>

रूप

नवबार के भीतर कोनो फॉर्म के सही तरीका स स्टाइल आ पोजीशन देबय लेल, उचित क्लास जोड़ू जेना कि नीचा देखाओल गेल अछि | डिफ़ॉल्ट फॉर्म क लेल, शामिल करू .navbar-formआओर या त .pull-leftया .pull-rightओकरा सही ढंग स संरेखित करबाक लेल.

<form class = "नवबार-फॉर्म पुल-बाएं" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "span2" >  
  <button type = "submit" class = "btn" > सबमिट करू </button>  
</form>

खोज फॉर्म

एकटा बेसी अनुकूलित खोज फॉर्म के लेल, नवबार मे विशेष शैली के लेल इनपुट मे आओर मे .navbar-searchजोड़ू form..search-query

<form class = "नवबार-खोज पुल-बाम" > 
  <input type = "text" class = "खोज-क्वेरी" प्लेसहोल्डर = "खोज" >   
</form>

घटक संरेखण

nav लिंक, खोज फॉर्म, या पाठ कें संरेखित करूं, .pull-leftया .pull-rightउपयोगिता वर्गक कें उपयोग करूं. दुनू वर्ग निर्दिष्ट दिशा मे एकटा CSS फ्लोट जोड़त.

ड्रॉपडाउन के प्रयोग करब

कनेक मार्कअप आ ड्रॉपडाउन जावास्क्रिप्ट प्लगइन क संग nav मे ड्रॉपडाउन आ ड्रॉपअप जोड़ू .

<ul वर्ग = "नव" > 
  <li class = "ड्रॉपडाउन" > 
    <a href = "#" वर्ग = "ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >   
      खाता
      <b class = "कैरेट" </b> 
    </a>
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </li>
</ul>

ड्रॉपडाउन कें कॉल करय कें बारे मे बेसि मार्कअप आ जानकारी कें लेल जावास्क्रिप्ट ड्रॉपडाउन दस्तावेजीकरण पर जाउ .

मूल ग्रन्थ

पाठ केरऽ स्ट्रिंग क॑ एक तत्व म॑ लपेटऽ के साथ .navbar-text, आमतौर प॑ <p>उचित लीडिंग आरू रंग लेली एगो टैग प॑ ।

वैकल्पिक प्रदर्शन भिन्नता

नवबार क॑ व्यूपोर्ट केरऽ ऊपर या निचला भाग म॑ सबसें बाहरी div प॑ एक अतिरिक्त वर्ग के साथ ठीक करऽ, .navbar.

शीर्ष पर तय कयल गेल

जोड़ू .navbar-fixed-topआओर याद राखू जे एकर नीचा नुकायल क्षेत्र के हिसाब देबय लेल कम सं कम 40px जोड़ि paddingक <body>. कोर बूटस्ट्रैप सीएसएस क बाद आओर वैकल्पिक उत्तरदायी सीएसएस स पहिने एकरा अवश्य जोड़ू.

<div class = "नवबार नवबार-नियत-शीर्ष" > 
  ...
</div>

नीचाँ धरि ठीक कएल गेल

.navbar-fixed-bottomएकर बदला मे जोड़ू ।

<div class = "नवबार नवबार-नियत-नीचे" > 
  ...
</div>

स्थिर शीर्ष नवबार

एकटा पूर्ण-चौड़ाई नवबार बनाउ जे जोड़ि क' पृष्ठक संग स्क्रॉल क' दैत अछि .navbar-static-top. क्लास के विपरीत .navbar-fixed-top, अहां के कोनो पैडिंग बदलय के जरूरत नहिं अछि body.

<div class = "नवबार नवबार-स्थिर-शीर्ष" > 
  ...
</div>

प्रतिक्रियाशील नवबर

एकटा ढहैत उत्तरदायी नवबार लागू करबाक लेल, अपन नवबार सामग्री केँ एकटा समाहित div मे लपेटू, .nav-collapse.collapse, आओर नवबार टॉगल बटन जोड़ू, .btn-navbar.

<div वर्ग = "नवबार" > 
  <div वर्ग = "नवबार-आन्तरिक" > 
    <div वर्ग = "कंटेनर" > 
 
      <!-- .btn-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-collapse संकुचन" > 
        <!-- .नव, .नवबर-खोज, .नवबर-रूप, आदि -->
      </div>
 
    </div>
  </div>
</div>

उल्टा भिन्नता

जोड़ि नवबार के लुक संशोधित करू .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 वर्ग = "पृष्ठांकन" > 
  <उल>
    <li><a href = "#" > पूर्व </a></li> 
    <li><a href = "#" > 1 </a></li> 
    <li><a href = "#" > २ </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > ४ </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li><a href = "#" > अगिला </a></li> 
  </ul>
</div>

विकल्प

अक्षम एवं सक्रिय राज्य

लिंक अलग-अलग परिस्थितिक लेल अनुकूलन योग्य अछि। .disabledअनक्लिक करय योग्य लिंक के लेल आओर .activeवर्तमान पृष्ठ के संकेत करय लेल प्रयोग करू .

<div वर्ग = "पृष्ठांकन" > 
  <उल>
    <li class = "अक्षम" ><a href = "#" > « </a></li> के अनुसार  
    <li class = "सक्रिय" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

अहां वैकल्पिक रूप सं इच्छित शैली कें बरकरार रखयत समय क्लिक कार्यक्षमता कें हटावय कें लेल स्पैन कें लेल सक्रिय या अक्षम एंकर कें स्वैप आउट कयर सकय छी.

<div वर्ग = "पृष्ठांकन" > 
  <उल>
    <li class = "अक्षम" ><span> « </span></li> के अनुसार 
    <li वर्ग = "सक्रिय" ><span> 1 </span></li> 
    ...
  </ul>
</div>

आकार के

फैंसी पैघ या छोट पृष्ठांकन? अतिरिक्त आकारक लेल .pagination-large, .pagination-small, अथवा जोड़ू ।.pagination-mini

<div class = "पृष्ठांकन पृष्ठांकन-बड़े" > 
  <उल>
    ...
  </ul>
</div>
<div वर्ग = "पृष्ठांकन" > 
  <उल>
    ...
  </ul>
</div>
<div class = "पृष्ठांकन पृष्ठांकन-छोटा" > 
  <उल>
    ...
  </ul>
</div>
<div class = "पृष्ठांकन पृष्ठांकन-मिनी" > 
  <उल>
    ...
  </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>

लेबल

बैज

आसानी से ढहने योग्य

आसान कार्यान्वयन कें लेल, लेबल आ बैज बस संकुचित भ जायत (सीएसएस कें :emptyचयनकर्ता कें माध्यम सं) जखन भीतर कोनों सामग्री मौजूद नहि होयत.

हीरो इकाई

अपन साइट पर प्रमुख सामग्री कें प्रदर्शित करय कें लेल एकटा हल्का, लचीला घटक. मार्केटिंग आओर कंटेंट-हेवी साइट पर ई नीक काज करैत अछि.

<div वर्ग = "नायक-इकाई" > 
  <h1> शीर्षक </h1>
  <p> टैगलाइन </p>
  <p>
    <a class = "btn btn-प्राथमिक btn-बड़े" > 
      और जानें
    </a>
  </p>
</div>

पृष्ठ शीर्षक

h1एक पृष्ठ पर सामग्री के खंडों को उचित रूप से स्पेस आउट और सेगमेंट करने के लिए एक के लिए एक सरल शेल | ई h1's डिफ़ॉल्ट small, तत्व के साथ-साथ अधिकांश अन्य घटक (अतिरिक्त शैली के साथ) के उपयोग कर सकै छै.

<div class = "पृष्ठ-शीर्षक" > 
  <h1> उदाहरण पृष्ठ शीर्षक <small> शीर्षक क लेल उपपाठ </small></h1>
</div>

पूर्वनिर्धारित थंबनेल

डिफ़ॉल्ट रूप सं, बूटस्ट्रैप कें थंबनेल न्यूनतम आवश्यक मार्कअप कें साथ लिंक कैल गेल छवियक कें प्रदर्शन करय कें लेल डिजाइन कैल गेल छै.

अत्यधिक अनुकूलन योग्य

कनी अतिरिक्त मार्कअप के साथ, थंबनेल में कोनो भी तरह के एचटीएमएल सामग्री जेना हेडिंग, पैराग्राफ, या बटन जोड़ना संभव छै.

थंबनेल के प्रयोग कियैक करू

थंबनेल (पहिने .media-gridv1.4 तक) फोटो या वीडियो के ग्रिड, छवि खोज परिणाम, खुदरा उत्पाद, पोर्टफोलियो, आओर बहुत किछु के लेल बढ़िया अछि. ओ लिंक वा स्थिर सामग्री भ सकैत अछि ।

सरल, लचीला मार्कअप

थंबनेल मार्कअप सरल अछि- ulकोनो संख्या मे liतत्वक संग एकटा मात्र आवश्यक अछि । ई सुपर लचीला भी छै, जेकरा स॑ कोनो भी प्रकार के सामग्री के साथ बस कनी अधिक मार्कअप के साथ आपनो सामग्री क॑ लपेटै के अनुमति मिलै छै ।

ग्रिड कॉलम आकारक उपयोग करैत अछि

अंत मे, थंबनेल घटक मौजूदा ग्रिड सिस्टम वर्गक कें उपयोग करयत छै-जैना .span2या .span3—थंबनेल आयाम कें नियंत्रण कें लेल.

मार्कअप

जेना कि पहिने कहल गेल अछि जे थंबनेल के लेल आवश्यक मार्कअप हल्का आ सोझ अछि. लिंक कएल गेल छविक लेल डिफ़ॉल्ट सेटअप पर एक नजरि देल गेल अछि :

<ul class = "थंबनेल" > 
  <li वर्ग = "span4" > 
    <a href = "#" वर्ग = "थंबनेल" >  
      <img data-src = "धारक.जेएस/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

थंबनेल म॑ कस्टम एचटीएमएल सामग्री लेली, मार्कअप म॑ कनी बदलाव होय जाय छै । <a>ब्लॉक लेवल सामग्री कतहु अनुमति देबय लेल, हम एकटा लाइक के लेल स्वैप करैत छी <div>त:

<ul class = "थंबनेल" > 
  <li वर्ग = "span4" > 
    <div वर्ग = "थंबनेल" > 
      <img data-src = "धारक.जेएस/300x200" alt = "" >  
      <h3> थंबनेल लेबल </h3>
      <p> थंबनेल कैप्शन... </p>
    </div>
  </li>
  ...
</ul>

अधिक उदाहरण

अहां कें लेल उपलब्ध विभिन्न ग्रिड क्लास कें साथ अपन सबटा विकल्पक कें खोज करूं. अहां अलग-अलग साइज के सेहो मिला सकय छी आओर मिला सकय छी.

डिफ़ॉल्ट अलर्ट

कोनों पाठ आ एकटा वैकल्पिक खारिज बटन .alertकें एकटा बुनियादी चेतावनी अलर्ट संदेश कें लेल लपेटूं.

<div वर्ग = "सचेतक" > 
  <बटन प्रकार = "बटन" वर्ग = "बंद" data-dismiss = "सचेतक" > × </बटन>   
  <strong> चेतावनी! </strong> बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी।
</div>

बटन खारिज करब

data-dismiss="alert"मोबाइल सफारी आ मोबाइल ओपेरा ब्राउज़र, विशेषता कें अलावा , कोनों टैग href="#"कें उपयोग करयत समय अलर्ट कें खारिज करय कें लेल एकटा कें आवश्यकता छै.<a>

<a href = "#" वर्ग = "बंद" डेटा-खारिज = "सचेतक" > × </a>   

वैकल्पिक रूप स, अहां <button>डेटा विशेषता क संग कोनो तत्व क उपयोग क सकैत छी, जे हम अपन डॉक्स क लेल करबाक विकल्प चुनने छी. उपयोग करय कें समय <button>, अहां कें शामिल करनाय आवश्यक छै type="button"या अहां कें फॉर्म जमा नहि कयर सकय छै.

<बटन प्रकार = "बटन" वर्ग = "बंद" data-dismiss = "सचेतक" > × </बटन>   

जावास्क्रिप्ट के माध्यम स अलर्ट खारिज करू

अलर्ट कें त्वरित आ आसान खारिज करय कें लेल अलर्ट jQuery प्लगइन कें उपयोग करूं .

विकल्प

लम्बा संदेशक कें लेल, जोड़ क अलर्ट रैपर कें ऊपर आ निचला भाग पर पैडिंग बढ़ाऊं .alert-block.

<div class = "सचेतक अलर्ट-ब्लॉक" > 
  <बटन प्रकार = "बटन" वर्ग = "बंद" data-dismiss = "सचेतक" > × </बटन>   
  <h4> चेतावनी! </h4>
  बेस्ट चेक यो सेल्फ, अहाँ नहि छी...
</div>

संदर्भ विकल्प

एकटा अलर्ट कें संकेत बदलय कें लेल वैकल्पिक वर्ग जोड़ू.

त्रुटि या खतरा

<div class = "सचेतक चेतावनी-त्रुटि" > 
  ...
</div>

सफलता

<div class = "सचेतक चेतावनी-सफलता" > 
  ...
</div>

जानकारी

<div class = "सचेतक चेतावनी-जानकारी" > 
  ...
</div>

उदाहरण एवं मार्कअप

मूलभूत

एकटा ऊर्ध्वाधर ढाल के साथ पूर्वनिर्धारित प्रगति बार.

<div वर्ग = "प्रगति" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 60 %; " ></div>   
</div>

धारीदार

धारीदार प्रभाव बनेबाक लेल ढाल क उपयोग करैत अछि । IE7-8 मे उपलब्ध नहि अछि।

<div class = "प्रगति प्रगति-धारीदार" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 20 %; " ></div>   
</div>

एनिमेटेड

धारियों को दाहिना से बायां एनिमेट करने के लिए में .activeजोड़ें | .progress-stripedआईई के सब संस्करण मे उपलब्ध नहि अछि.

<div class = "प्रगति प्रगति-धारी सक्रिय" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 40 %; " ></div>   
</div>

ढेर भ गेल

एकहि मे एक सँ बेसी बार राखू जाहि .progressसँ ओकरा ढेर भ जाय।

<div वर्ग = "प्रगति" > 
  <div class = "बार बार-सफलता" शैली = " चौड़ाई : 35 %; " ></div>   
  <div class = "बार बार-चेतावनी" शैली = " चौड़ाई : 20 %; " ></div>   
  <div class = "बार बार-खतरा" शैली = " चौड़ाई : 10 %; " ></div>   
</div>

विकल्प

अतिरिक्त रंग

प्रगति बार सुसंगत शैलीक कें लेल किछु एकहि बटन आ अलर्ट वर्गक कें उपयोग करयत छै.

<div class = "प्रगति प्रगति-जानकारी" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 20 % " ></div>   
</div>
<div class = "प्रगति प्रगति-सफलता" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 40 % " ></div>   
</div>
<div class = "प्रगति प्रगति-चेतावनी" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 60 % " ></div>   
</div>
<div class = "प्रगति प्रगति-खतरा" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 80 % " ></div>   
</div>

धारीदार सलाखों

ठोस रंग के समान, हम विभिन्न धारीदार प्रगति बार रखने हैं |

<div class = "प्रगति प्रगति-सूचना प्रगति-धारीदार" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 20 % " ></div>   
</div>
<div class = "प्रगति प्रगति-सफलता प्रगति-धारीदार" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 40 % " ></div>   
</div>
<div class = "प्रगति प्रगति-चेतावनी प्रगति-��ारीदार" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 60 % " ></div>   
</div>
<div class = "प्रगति प्रगति-खतरा प्रगति-धारीदार" > 
  <div वर्ग = "बार" शैली = " चौड़ाई : 80 % " ></div>   
</div>

ब्राउज़र समर्थन

प्रगति बार अपनऽ सब प्रभाव प्राप्त करै लेली CSS3 ढाल, संक्रमण, आरू एनीमेशन के उपयोग करै छै. ई सुविधा IE7-9 या फायरफॉक्स केरऽ पुरानऽ संस्करणऽ म॑ समर्थित नै छै ।

इंटरनेट एक्सप्लोरर 10 आरू ओपेरा 12 स॑ पहलऽ के संस्करण एनीमेशन क॑ समर्थन नै करै छै ।

विभिन्न प्रकार के घटक (जैसे ब्लॉग टिप्पणी, ट्वीट, आदि) के निर्माण के लेलऽ अमूर्त वस्तु शैली जेकरा म॑ पाठ्य सामग्री के साथ-साथ बायां- या दायां-संरेखित छवि के विशेषता छै.

पूर्वनिर्धारित उदाहरण

डिफ़ॉल्ट मीडिया कोनों मीडिया ऑब्जेक्ट (छवि, वीडियो, ऑडियो) कें सामग्री ब्लॉक कें बायां या दायां तरफ फ्लोट करय कें अनुमति देयत छै.

मीडिया हेडिंग

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।

मीडिया हेडिंग

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।

मीडिया हेडिंग

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।

<div वर्ग = "मीडिया" > 
  <a class = "पुल-लेफ्ट" href = "#" >  
    <img वर्ग = "मीडिया-वस्तु" डेटा- src = "धारक.जेएस/64x64" >  
  </a>
  <div class = "मीडिया-शरीर" > 
    <h4 class = "मीडिया-शीर्षक" > मीडिया शीर्षक </h4> 
    ...
 
    <!-- नेस्टेड मीडिया ऑब्जेक्ट -->
    <div वर्ग = "मीडिया" > 
      ...
    </div>
  </div>
</div>

मीडिया सूची

कनि अतिरिक्त मार्कअप के संग, अहां सूची के अंदर मीडिया के उपयोग क सकय छी (टिप्पणी थ्रेड या लेख सूची के लेल उपयोगी)।

<ul class = "मीडिया-सूची" > 
  <li class = "मीडिया" > 
    <a class = "पुल-लेफ्ट" href = "#" >  
      <img वर्ग = "मीडिया-वस्तु" डेटा- src = "धारक.जेएस/64x64" >  
    </a>
    <div class = "मीडिया-शरीर" > 
      <h4 class = "मीडिया-शीर्षक" > मीडिया शीर्षक </h4> 
      ...
 
      <!-- नेस्टेड मीडिया ऑब्जेक्ट -->
      <div वर्ग = "मीडिया" > 
        ...
     </div>
    </div>
  </li>
</ul>

वेल्स

कुआँ के प्रयोग कोनो तत्व पर सरल प्रभाव के रूप में करू ताकि ओकरा इनसेट प्रभाव देल जा सकय |

<div वर्ग = "अच्छा" > 
  ...
</div>

वैकल्पिक कक्षाएँ

दू वैकल्पिक संशोधक वर्गक कें साथ पैडिंग आ गोल कोना कें नियंत्रित करूं.

<div class = "अच्छा अच्छी तरह से-बड़ा" > 
  ...
</div>

<div class = "अच्छा अच्छी तरह से-छोटा" > 
  ...
</div>

बंद आइकन

मोडल आ अलर्ट जैना सामग्री कें खारिज करय कें लेल जेनेरिक बंद आइकन कें उपयोग करूं.

<बटन वर्ग = "बंद करू" > × </बटन> 

आईओएस डिवाइस कें लेल एकटा href="#"फॉर क्लिक इवेंट कें आवश्यकता होयत छै अगर अहां कोनों एंकर कें उपयोग करनाय पसंद करय छी.

<a class = "बंद" href = "#" > & समय; </a>  

सहायक कक्षाएँ

छोट प्रदर्शन या व्यवहार ट्वीक्स के लेल सरल, केंद्रित कक्षा.

.खींच-बाम

एकटा तत्व बामा फ्लोट करू

class = "खींच-बाम"।

. खींच - बाम { .
  float : बामा ;
} .

.खींच-दाहिना

एक तत्व सही तैरना

class = "पुल-राइट"।

. खींच - दाहिना { .
  float : दाहिना ;
} .

.म्यूट क देल गेल

कोनो तत्वक रंगकेँ बदलू#999

class = "म्यूट"।

. म्यूट कएल गेल { .
  रंग : # 999; 
} .

.क्लियरफिक्स करब

floatकोनो तत्व पर के साफ करू

class = "स्पष्टीकरण"।

. क्लियरफिक्स { 1।
  * ज़ूम : 1 ; 
  &: पहिने , .
  &: के बाद {
    प्रदर्शन : तालिका ;
    सामग्री : "" ; 
  } .
  &: के बाद {
    स्पष्ट : दुनू ;
  } .
} .