உதாரணமாக

இணைப்புகளின் பட்டியலைக் காண்பிப்பதற்கான மாற்றக்கூடிய, சூழல் மெனு. கீழ்தோன்றும் ஜாவாஸ்கிரிப்ட் செருகுநிரலுடன் ஊடாடத்தக்கதாக மாற்றப்பட்டது .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > செயல் </a></li>  
  <li><a tabindex = "-1" href = "#" > மற்றொரு செயல் </a></li>  
  <li><a tabindex = "-1" href = "#" > இங்கே வேறு ஏதாவது உள்ளது </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > பிரிக்கப்பட்ட இணைப்பு </a></li>  
</ul>

மார்க்அப்

கீழ்தோன்றும் மெனுவைப் பார்த்தால், தேவையான HTML இதோ. கீழ்தோன்றும் தூண்டுதல் மற்றும் கீழ்தோன்றும் மெனுவில் உள்ள .dropdownஅல்லது அறிவிக்கும் மற்றொரு உறுப்பை நீங்கள் மடிக்க வேண்டும் position: relative;. பின்னர் மெனுவை உருவாக்கவும்.

<div class = "dropdown" > 
  <!-- கீழ்தோன்றும் நிலையை மாற்றுவதற்கான இணைப்பு அல்லது பொத்தான் -->
  <ul class = "dropdown-menu" role = "menu" 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 = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > பிரிக்கப்பட்ட இணைப்பு </a></li>  
  </ul>
</div>

விருப்பங்கள்

மெனுக்களை வலதுபுறமாக சீரமைத்து, கீழிறங்கும் கூடுதல் நிலைகளைச் சேர்க்கவும்.

மெனுக்களை சீரமைத்தல்

கீழ்தோன்றும் மெனுவை வலப்புறமாக சீரமைக்க .pull-righta இல் சேர்க்கவும் ..dropdown-menu

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

முடக்கப்பட்ட மெனு விருப்பங்கள்

இணைப்பை முடக்க, கீழ்தோன்றும் .disabledஒரு உடன் சேர்க்கவும் .<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > வழக்கமான இணைப்பு </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > முடக்கப்பட்ட இணைப்பு </a></li>   
  <li><a tabindex = "-1" href = "#" > மற்றொரு இணைப்பு </a></li>  
</ul>

கீழ்தோன்றல்களில் துணை மெனுக்கள்

சில எளிய மார்க்அப் சேர்த்தல்களுடன், OS X போன்று மிதவையில் தோன்றும் கீழ்தோன்றும் மெனுக்களின் கூடுதல் நிலைகளைச் சேர்க்கவும். தானியங்கு ஸ்டைலிங்கிற்காக ஏற்கனவே உள்ள கீழ்தோன்றும் மெனுவில் .dropdown-submenuஏதேனும் ஒன்றைச் சேர்க்கவும் .li

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > கூடுதல் விருப்பங்கள் </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

எடுத்துக்காட்டுகள்

இரண்டு அடிப்படை விருப்பங்கள், மேலும் இரண்டு குறிப்பிட்ட மாறுபாடுகளுடன்.

ஒற்றை பொத்தான் குழு

.btnஉடன் பொத்தான்களின் வரிசையை மடிக்கவும் .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > இடது </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > வலது </button> 
</div>

பல பொத்தான் குழுக்கள்

மிகவும் சிக்கலான கூறுகளுக்கு <div class="btn-group">ஒரு தொகுப்புகளை இணைக்கவும்.<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 = "dropdown" href = "#" >   
    செயல்
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  </ul>
</div>

அனைத்து பொத்தான் அளவுகளிலும் வேலை செய்கிறது

பட்டன் கீழ்தோன்றும் எந்த அளவிலும் வேலை செய்யும்: .btn-large, .btn-small, அல்லது .btn-mini.

ஜாவாஸ்கிரிப்ட் தேவை

பட்டன் கீழ்தோன்றும் செயல்பாட்டிற்கு பூட்ஸ்டார்ப் கீழ்தோன்றும் செருகுநிரல் தேவைப்படுகிறது.

மொபைல் போன்ற சில சமயங்களில் கீழ்தோன்றும் மெனுக்கள் காட்சிப் பகுதிக்கு வெளியே நீட்டிக்கப்படும். நீங்கள் கைமுறையாக அல்லது தனிப்பயன் ஜாவாஸ்கிரிப்ட் மூலம் சீரமைப்பைத் தீர்க்க வேண்டும்.

பிளவு பட்டன் கீழ்தோன்றும்

பொத்தான் குழு பாணிகள் மற்றும் மார்க்அப்பை உருவாக்குவதன் மூலம், பிளவு பட்டனை எளிதாக உருவாக்கலாம். ஸ்பிளிட் பொத்தான்கள் இடதுபுறத்தில் நிலையான செயலையும் வலதுபுறத்தில் சூழல் இணைப்புகளுடன் கீழ்தோன்றும் நிலைமாற்றத்தையும் கொண்டுள்ளது.

<div class = "btn-group" > 
  <button class = "btn" > செயல் </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  </ul>
</div>

அளவுகள்

கூடுதல் பட்டன் வகுப்புகளைப் பயன்படுத்தவும் .btn-mini, .btn-small, அல்லது .btn-largeஅளவீடு செய்ய.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > செயல் </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  </ul>
</div>

டிராப்அப் மெனுக்கள்

கீழ்தோன்றும் மெனுக்களை உடனடி பெற்றோருக்கு ஒற்றை வகுப்பைச் சேர்ப்பதன் மூலம் கீழிருந்து மேலே மாற்றலாம் .dropdown-menu. இது மெனுவின் திசையைப் .caretபுரட்டி, மேலிருந்து கீழாக நகர்த்துவதற்குப் பதிலாக கீழே இருந்து மேலே நகரும்.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  </ul>
</div>

இலகுரக இயல்புநிலைகள் ஒரே மார்க்அப், வெவ்வேறு வகுப்புகள்

இங்குள்ள அனைத்து nav கூறுகளும்—தாவல்கள், மாத்திரைகள் மற்றும் பட்டியல்கள்— வகுப்பின் மூலம் ஒரே அடிப்படை மார்க்அப் மற்றும் ஸ்டைல்களைப் பகிர்ந்து கொள்கின்றன.nav .

அடிப்படை தாவல்கள்

வழக்கமான <ul>இணைப்புகளை எடுத்து சேர்க்கவும் .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "செயலில்" > 
    <a href = "#" > முகப்பு </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

அடிப்படை மாத்திரைகள்

அதே HTML ஐ எடுத்துக் கொள்ளுங்கள், ஆனால் .nav-pillsஅதற்குப் பதிலாகப் பயன்படுத்தவும்:

<ul class = "nav nav-pills" > 
  <li class = "செயலில்" > 
    <a href = "#" > முகப்பு </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ஊனமுற்ற நிலை

எந்த nav கூறுகளுக்கும் (தாவல்கள், மாத்திரைகள் அல்லது பட்டியல்), சாம்பல் இணைப்புகளைச் சேர்க்கவும் .disabledமற்றும் மிதவை விளைவுகள் இல்லை . hrefஇருப்பினும், நீங்கள் பண்புக்கூறை அகற்றும் வரை இணைப்புகள் கிளிக் செய்யக்கூடியதாக இருக்கும் . மாற்றாக, அந்த கிளிக்குகளைத் தடுக்க தனிப்பயன் JavaScript ஐ நீங்கள் செயல்படுத்தலாம்.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Home </a></li>  
  ...
</ul>

கூறு சீரமைப்பு

nav இணைப்புகளை சீரமைக்க, .pull-leftஅல்லது .pull-rightபயன்பாட்டு வகுப்புகளைப் பயன்படுத்தவும். இரண்டு வகுப்புகளும் குறிப்பிட்ட திசையில் CSS மிதவையைச் சேர்க்கும்.

அடுக்கக்கூடியது

தாவல்கள் மற்றும் மாத்திரைகள் முன்னிருப்பாக கிடைமட்டமாக இருப்பதால், .nav-stackedசெங்குத்தாக அடுக்கப்பட்டதாகக் காட்ட, இரண்டாம் வகுப்பைச் சேர்க்கவும்.

அடுக்கப்பட்ட தாவல்கள்

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

அடுக்கப்பட்ட மாத்திரைகள்

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

கீழிறங்கும்

கொஞ்சம் கூடுதல் HTML மற்றும் கீழ்தோன்றும் ஜாவாஸ்கிரிப்ட் செருகுநிரலுடன் கீழ்தோன்றும் மெனுக்களைச் சேர்க்கவும் .

கீழிறங்கும் தாவல்கள்

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "கீழே"
       href = "#" >
        கீழே போடு
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- இணைப்புகள் -->
    </ul>
  </li>
</ul>

கீழ்தோன்றும் மாத்திரைகள்

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "கீழே"
       href = "#" >
        கீழே போடு
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- இணைப்புகள் -->
    </ul>
  </li>
</ul>

நாவ் பட்டியல்கள்

விருப்பத் தலைப்புகளுடன் nav இணைப்புகளின் குழுக்களை உருவாக்க எளிய மற்றும் எளிதான வழி. OS X இல் உள்ள Finder போன்ற பக்கப்பட்டிகளில் அவை சிறப்பாகப் பயன்படுத்தப்படுகின்றன.

உதாரணம் nav பட்டியல்

இணைப்புகளின் பட்டியலை எடுத்து சேர்க்கவும் class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > பட்டியல் தலைப்பு </li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > நூலகம் </a></li> 
  ...
</ul>

குறிப்புnav பட்டியலில் கூடு கட்டுவதற்கு, class="nav nav-list"எந்த உள்ளமையிலும் சேர்க்கவும் <ul>.

கிடைமட்ட பிரிப்பான்கள்

வகுப்புடன் வெற்று பட்டியல் உருப்படியை உருவாக்குவதன் மூலம் கிடைமட்ட வகுப்பியைச் சேர்க்கவும் .divider, இது போன்றது:

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

Tabbable nav

தாவல்கள் வழியாக உள்ளடக்கத்திற்கு இடையில் மாறுவதற்கு எளிய செருகுநிரல் மூலம் உங்கள் தாவல்களுக்கு உயிர் கொடுங்கள். பூட்ஸ்டார்ப் நான்கு வடிவங்களில் டேப் செய்யக்கூடிய தாவல்களை ஒருங்கிணைக்கிறது: மேல் (இயல்புநிலை), வலது, கீழ் மற்றும் இடது.

அட்டவணைப்படுத்தக்கூடிய உதாரணம்

தாவல்களை டேப் செய்யக்கூடியதாக மாற்ற, .tab-paneஒவ்வொரு தாவலுக்கும் தனித்துவமான ஐடியை உருவாக்கி அவற்றை ல் மடிக்கவும் .tab-content.

<div class = "tabable" > <!-- இடது/வலது தாவல்களுக்கு மட்டுமே தேவை -->  
  <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 = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> நான் பிரிவு 1 இல் இருக்கிறேன். </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> வணக்கம், நான் பிரிவு 2 இல் இருக்கிறேன். </p>
    </div>
  </div>
</div>

தாவல்களில் மங்காது

தாவல்களை மங்கச் செய்ய, .fadeஒவ்வொன்றிலும் சேர்க்கவும் .tab-pane.

jQuery சொருகி தேவை

அனைத்து டேப் செய்யக்கூடிய தாவல்களும் எங்கள் இலகுரக jQuery சொருகி மூலம் இயக்கப்படுகின்றன. ஜாவாஸ்கிரிப்ட் டாக்ஸ் பக்கத்தில் டேப்பபிள் டேப்களை உயிர்ப்பிப்பது எப்படி என்பது பற்றி மேலும் படிக்கவும் .

எந்த திசையிலும் தட்டக்கூடியது

கீழே தாவல்கள்

HTML இன் வரிசையை புரட்டவும் மற்றும் கீழே தாவல்களை வைக்க ஒரு வகுப்பைச் சேர்க்கவும்.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

இடதுபுறத்தில் தாவல்கள்

இடதுபுறத்தில் தாவல்களை வைக்க வகுப்பை மாற்றவும்.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

வலதுபுறத்தில் தாவல்கள்

வலதுபுறத்தில் தாவல்களை வைக்க வகுப்பை மாற்றவும்.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

அடிப்படை navbar

தொடங்குவதற்கு, navbarகள் நிலையானவை (மேலே பொருத்தப்படவில்லை) மேலும் திட்டப் பெயர் மற்றும் அடிப்படை வழிசெலுத்தலுக்கான ஆதரவையும் உள்ளடக்கியது. .containerஉங்கள் தளம் மற்றும் உள்ளடக்கத்தின் அகலத்தை அமைக்கும் ஒரு க்குள் எங்கும் ஒன்றை வைக்கவும் .

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > தலைப்பு </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > இணைப்பு </a></li> 
      <li><a href = "#" > இணைப்பு </a></li> 
    </ul>
  </div>
</div>

Navbar கூறுகள்

பிராண்ட்

உங்கள் பிராண்ட் அல்லது ப்ராஜெக்ட் பெயரைக் காட்ட எளிய இணைப்பிற்கு ஆங்கர் டேக் மட்டுமே தேவை.

<a class = "brand" href = "#" > திட்டப் பெயர் </a>  

நாவ் இணைப்புகள்

ஆர்டர் செய்யப்படாத பட்டியல்கள் மூலம் Nav உருப்படிகளைச் சேர்ப்பது எளிது.

<ul class = "nav" > 
  <li class = "செயலில்" > 
    <a href = "#" > முகப்பு </a> 
  </li>
  <li><a href = "#" > இணைப்பு </a></li> 
  <li><a href = "#" > இணைப்பு </a></li> 
</ul>

வெற்று பட்டியல் உருப்படி மற்றும் எளிய வகுப்பின் மூலம் உங்கள் nav இணைப்புகளில் வகுப்பிகளை எளிதாகச் சேர்க்கலாம். இணைப்புகளுக்கு இடையில் இதைச் சேர்க்கவும்:

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

படிவங்கள்

நேவ்பாருக்குள் ஒரு படிவத்தை ஒழுங்காக வடிவமைக்க மற்றும் நிலைநிறுத்த, கீழே காட்டப்பட்டுள்ளபடி பொருத்தமான வகுப்புகளைச் சேர்க்கவும். இயல்புநிலை படிவத்திற்கு, அதைச் சேர்க்கவும் .navbar-formஅல்லது .pull-leftஅதைச் .pull-rightசரியாகச் சீரமைக்கவும்.

<form class = "navbar-form pull-left" > 
  <உள்ளீடு வகை = "உரை" வகுப்பு = "span2" >  
  <button type = "submit" class = "btn" > Submit </button>  
</form>

தேடல் படிவம்

மேலும் தனிப்பயனாக்கப்பட்ட தேடல் படிவத்திற்கு, navbar இல் உள்ள சிறப்பு பாணிகளுக்கான உள்ளீட்டில் சேர்க்கவும் .navbar-search.form.search-query

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

கூறு சீரமைப்பு

nav இணைப்புகள், தேடல் படிவம் அல்லது உரையை சீரமைக்கவும், .pull-leftஅல்லது .pull-rightபயன்பாட்டு வகுப்புகளைப் பயன்படுத்தவும். இரண்டு வகுப்புகளும் குறிப்பிட்ட திசையில் CSS மிதவையைச் சேர்க்கும்.

கீழ்தோன்றல்களைப் பயன்படுத்துதல்

சிறிது மார்க்அப் மற்றும் கீழ்தோன்றும் ஜாவாஸ்கிரிப்ட் செருகுநிரல் மூலம் nav இல் டிராப் டவுன்கள் மற்றும் டிராப்அப்களைச் சேர்க்கவும் .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      கணக்கு
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </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 ஐ உருவாக்கவும் .navbar-static-top. வகுப்பைப் போலன்றி .navbar-fixed-top, நீங்கள் எந்த திணிப்புகளையும் மாற்ற வேண்டியதில்லை body.

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

பதிலளிக்கக்கூடிய navbar

செயலிழக்கும் பதிலளிக்கக்கூடிய 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 = "சரிவு" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- பிராண்ட் காட்டப்பட வேண்டுமெனில் அதை அங்கேயே விட்டுவிட மறக்காதீர்கள் -->
      <a class = "brand" href = "#" > திட்டப் பெயர் </a>  
 
      <!-- நீங்கள் 940px அல்லது அதற்கும் குறைவாக மறைக்க விரும்பும் அனைத்தையும் இங்கே வைக்கவும் -->
      <div class = "nav-collapse சரிவு" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

தலைகீழ் மாறுபாடு

சேர்ப்பதன் மூலம் நவ்பார் தோற்றத்தை மாற்றவும் .navbar-inverse.

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

எடுத்துக்காட்டுகள்

பல பக்கங்களில் காட்டப்படும் ஒரு எடுத்துக்காட்டு.

<ul class = "breadcrumb" > 
  <li><a href = "#" > முகப்பு </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > நூலகம் </a> <span class = "divider" > / </span></li>   
  <li class = "செயலில்" > தரவு </li> 
</ul>

நிலையான பேஜினேஷன்

Rdio மூலம் ஈர்க்கப்பட்ட எளிய பேஜினேஷன், பயன்பாடுகள் மற்றும் தேடல் முடிவுகளுக்கு சிறந்தது. பெரிய தொகுதி தவறவிடுவது கடினம், எளிதில் அளவிடக்கூடியது மற்றும் பெரிய கிளிக் பகுதிகளை வழங்குகிறது.

<div class = "pagination" > 
  <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 = "#" > 5 </a></li> 
    <li><a href = "#" > அடுத்து </a></li> 
  </ul>
</div>

விருப்பங்கள்

ஊனமுற்ற மற்றும் செயலில் உள்ள மாநிலங்கள்

இணைப்புகள் வெவ்வேறு சூழ்நிலைகளுக்கு தனிப்பயனாக்கக்கூடியவை. .disabledகிளிக் செய்ய முடியாத இணைப்புகளுக்கும் .activeதற்போதைய பக்கத்தைக் குறிப்பிடுவதற்கும் பயன்படுத்தவும் .

<div class = "pagination" > 
  <ul>
    <li class = "முடக்கப்பட்டது" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

உத்தேசித்த பாணிகளைத் தக்கவைத்துக்கொள்ளும் போது, ​​கிளிக் செயல்பாட்டை அகற்ற, செயலில் உள்ள அல்லது முடக்கப்பட்ட ஆங்கர்களை நீங்கள் விருப்பமாக மாற்றிக்கொள்ளலாம்.

<div class = "pagination" > 
  <ul>
    <li class = "முடக்கப்பட்டது" ><span> « </span></li> 
    <li class = "செயலில்" ><span> 1 </span></li> 
    ...
  </ul>
</div>

அளவுகள்

பெரிய அல்லது சிறிய பக்கத்தை விரும்புகிறீர்களா? .pagination-large, .pagination-smallஅல்லது .pagination-miniகூடுதல் அளவுகளைச் சேர்க்கவும் .

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

சீரமைப்பு

பேஜினேஷன் இணைப்புகளின் சீரமைப்பை மாற்ற இரண்டு விருப்ப வகுப்புகளில் ஒன்றைச் சேர்க்கவும்: .pagination-centeredமற்றும் .pagination-right.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

பேஜர்

லைட் மார்க்அப் மற்றும் ஸ்டைல்களுடன் கூடிய எளிய பேஜினேஷன் செயலாக்கங்களுக்கான விரைவான முந்தைய மற்றும் அடுத்த இணைப்புகள். வலைப்பதிவுகள் அல்லது பத்திரிகைகள் போன்ற எளிய தளங்களுக்கு இது சிறந்தது.

இயல்பு உதாரணம்

இயல்பாக, பேஜர் இணைப்புகளை மையப்படுத்துகிறது.

<ul class = "பேஜர்" > 
  <li><a href = "#" > முந்தையது </a></li> 
  <li><a href = "#" > அடுத்து </a></li> 
</ul>

சீரமைக்கப்பட்ட இணைப்புகள்

மாற்றாக, நீங்கள் ஒவ்வொரு இணைப்பையும் பக்கங்களுக்கு சீரமைக்கலாம்:

<ul class = "பேஜர்" > 
  <li class = "முந்தைய" > 
    <a href = "#" > ← பழையது </a> 
  </li>
  <li class = "அடுத்து" > 
    <a href = "#" > புதியது → </a> 
  </li>
</ul>

விருப்ப முடக்கப்பட்ட நிலை

பேஜர் இணைப்புகள் பேஜினேஷனில் .disabledஇருந்து பொது பயன்பாட்டு வகுப்பையும் பயன்படுத்துகின்றன.

<ul class = "பேஜர்" > 
  <li class = "முந்தைய முடக்கப்பட்டது" > 
    <a href = "#" > ← பழையது </a> 
  </li>
  ...
</ul>

லேபிள்கள்

பேட்ஜ்கள்

எளிதில் மடிக்கக்கூடியது

எளிதாக செயல்படுத்த, லேபிள்கள் மற்றும் பேட்ஜ்கள் :emptyஉள்ளடக்கம் இல்லாதபோது (CSS இன் தேர்வி வழியாக) வெறுமனே சரிந்துவிடும்.

ஹீரோ யூனிட்

உங்கள் தளத்தில் முக்கிய உள்ளடக்கத்தைக் காண்பிக்க இலகுரக, நெகிழ்வான கூறு. இது மார்க்கெட்டிங் மற்றும் உள்ளடக்கம் அதிகம் உள்ள தளங்களில் நன்றாக வேலை செய்கிறது.

<div class = "hero-unit" > 
  <h1> தலைப்பு </h1>
  <p> டேக்லைன் </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      மேலும் அறிக
    </a>
  </p>
</div>

பக்க தலைப்பு

h1ஒரு பக்கத்தில் உள்ள உள்ளடக்கத்தின் சரியான இடைவெளி மற்றும் பிரிவுகளைப் பிரிப்பதற்கான எளிய ஷெல் . இது h1இன் இயல்புநிலை small, உறுப்பு மற்றும் பிற கூறுகளை (கூடுதல் பாணிகளுடன்) பயன்படுத்தலாம்.

<div class = "page-header" > 
  <h1> எடுத்துக்காட்டு பக்க தலைப்பு <small> தலைப்புக்கான துணை உரை </small></h1>
</div>

இயல்புநிலை சிறுபடங்கள்

இயல்பாக, பூட்ஸ்டார்ப்பின் சிறுபடங்கள் குறைந்தபட்ச தேவையான மார்க்அப்புடன் இணைக்கப்பட்ட படங்களைக் காண்பிக்கும் வகையில் வடிவமைக்கப்பட்டுள்ளன.

மிகவும் தனிப்பயனாக்கக்கூடியது

கூடுதல் மார்க்அப் மூலம், தலைப்புகள், பத்திகள் அல்லது பொத்தான்கள் போன்ற எந்த வகையான HTML உள்ளடக்கத்தையும் சிறுபடங்களில் சேர்க்க முடியும்.

சிறுபடங்களை ஏன் பயன்படுத்த வேண்டும்

சிறுபடங்கள் (முன்பு.media-gridபுகைப்படங்கள் அல்லது வீடியோக்கள், படத் தேடல் முடிவுகள், சில்லறை தயாரிப்புகள், போர்ட்ஃபோலியோக்கள் மற்றும் பலவற்றின் கட்டங்களுக்கு சிறுபடங்கள்அவை இணைப்புகள் அல்லது நிலையான உள்ளடக்கமாக இருக்கலாம்.

எளிய, நெகிழ்வான மார்க்அப்

சிறுபடம் மார்க்அப் எளிமையானது— ulஎந்த எண்ணையும் கொண்டுli உறுப்புகள் இருந்தாலும் தேவைஇது மிகவும் நெகிழ்வானது, உங்கள் உள்ளடக்கங்களை மடிக்க இன்னும் சிறிது மார்க்அப் மூலம் எந்த வகையான உள்ளடக்கத்தையும் அனுமதிக்கிறது.

கட்ட நெடுவரிசை அளவுகளைப் பயன்படுத்துகிறது

கடைசியாக, சிறுபடங்களின் கூறு ஏற்கனவே உள்ள கட்ட அமைப்பு வகுப்புகளைப் பயன்படுத்துகிறது-போன்ற .span2அல்லது.span3 —சிறுபட அளவுகளைக் கட்டுப்படுத்த.

மார்க்அப்

முன்பு குறிப்பிட்டபடி, சிறுபடங்களுக்கு தேவையான மார்க்அப் இலகுவாகவும் நேரடியானதாகவும் இருக்கும். இணைக்கப்பட்ட படங்களுக்கான இயல்புநிலை அமைப்பைப் பாருங்கள் :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

சிறுபடங்களில் தனிப்பயன் HTML உள்ளடக்கத்திற்கு, மார்க்அப் சிறிது மாறுகிறது. தொகுதி நிலை உள்ளடக்கத்தை எங்கும் அனுமதிக்க, நாங்கள் <a>இப்படி மாற்றுகிறோம் <div>:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> சிறுபட லேபிள் </h3>
      <p> சிறுபட தலைப்பு... </p>
    </div>
  </li>
  ...
</ul>

மேலும் உதாரணங்கள்

உங்களுக்கு கிடைக்கும் பல்வேறு கட்ட வகுப்புகளுடன் உங்கள் அனைத்து விருப்பங்களையும் ஆராயுங்கள். நீங்கள் வெவ்வேறு அளவுகளில் கலந்து பொருத்தலாம்.

இயல்புநிலை எச்சரிக்கை

.alertஅடிப்படை எச்சரிக்கை எச்சரிக்கைச் செய்திக்கு ஏதேனும் உரை மற்றும் விருப்பமான நிராகரிப்பு பொத்தானைக் கட்டவும்.

<div class = "எச்சரிக்கை" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong> எச்சரிக்கை! </strong> நீங்களே சரி பார்க்கவும், நீங்கள் நன்றாக இல்லை.
</div>

பட்டன்களை நிராகரி

மொபைல் சஃபாரி மற்றும் மொபைல் ஓபரா உலாவிகள், data-dismiss="alert"பண்புக்கூறுடன் கூடுதலாக, குறிச்சொல்லைப் href="#"பயன்படுத்தும் போது விழிப்பூட்டல்களை நிராகரிக்க வேண்டும்.<a>

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

மாற்றாக, நீங்கள் <button>தரவுப் பண்புக்கூறுடன் ஒரு உறுப்பைப் பயன்படுத்தலாம், அதை நாங்கள் எங்கள் டாக்ஸிற்காகச் செய்யத் தேர்ந்தெடுத்துள்ளோம். பயன்படுத்தும் போது <button>, ​​நீங்கள் சேர்க்க வேண்டும் type="button"அல்லது உங்கள் படிவங்கள் சமர்ப்பிக்கப்படாமல் இருக்கலாம்.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

JavaScript மூலம் விழிப்பூட்டல்களை நிராகரி

விழிப்பூட்டல்களை விரைவாகவும் எளிதாகவும் நீக்குவதற்கு விழிப்பூட்டல்கள் jQuery செருகுநிரலைப் பயன்படுத்தவும் .

விருப்பங்கள்

நீண்ட செய்திகளுக்கு, சேர்ப்பதன் மூலம் எச்சரிக்கை ரேப்பரின் மேல் மற்றும் கீழ் திணிப்பை அதிகரிக்கவும் .alert-block.

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> எச்சரிக்கை! </h4>
  நீங்களே சரி பார்க்கவும், நீங்கள் இல்லை...
</div>

சூழ்நிலை மாற்றுகள்

விழிப்பூட்டலின் அர்த்தத்தை மாற்ற விருப்ப வகுப்புகளைச் சேர்க்கவும்.

பிழை அல்லது ஆபத்து

<div class = "alert alert-error" > 
  ...
</div>

வெற்றி

<div class = "alert alert-success" > 
  ...
</div>

தகவல்

<div class = "alert alert-info" > 
  ...
</div>

எடுத்துக்காட்டுகள் மற்றும் மார்க்அப்

அடிப்படை

செங்குத்து சாய்வு கொண்ட இயல்புநிலை முன்னேற்றப் பட்டி.

<div class = "முன்னேற்றம்" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

கோடிட்டது

ஒரு கோடிட்ட விளைவை உருவாக்க ஒரு சாய்வு பயன்படுத்துகிறது. IE7-8 இல் கிடைக்கவில்லை.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

அனிமேஷன்

கோடுகளை வலமிருந்து இடமாக அனிமேஷன் செய்ய to ஐ .activeசேர்க்கவும் . .progress-stripedIE இன் அனைத்து பதிப்புகளிலும் கிடைக்காது.

<div class = "முன்னேற்றம் முன்னேற்றம்-கோடிட்ட செயலில்" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

அடுக்கப்பட்ட

பல பார்களை .progressஅடுக்கி வைக்கவும்.

<div class = "முன்னேற்றம்" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

விருப்பங்கள்

கூடுதல் வண்ணங்கள்

ப்ரோக்ரஸ் பார்கள் ஒரே மாதிரியான சில பொத்தான்களைப் பயன்படுத்துகின்றன மற்றும் நிலையான பாணிகளுக்கு விழிப்பூட்டல் வகுப்புகளைப் பயன்படுத்துகின்றன.

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "முன்னேற்றம் முன்னேற்றம்-வெற்றி" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "முன்னேற்ற முன்னேற்றம்-எச்சரிக்கை" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

கோடிட்ட பட்டைகள்

திட வண்ணங்களைப் போலவே, எங்களிடம் பல்வேறு கோடிட்ட முன்னேற்றப் பட்டைகள் உள்ளன.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

உலாவி ஆதரவு

முன்னேற்றப் பட்டைகள் அவற்றின் அனைத்து விளைவுகளையும் அடைய CSS3 சாய்வுகள், மாற்றங்கள் மற்றும் அனிமேஷன்களைப் பயன்படுத்துகின்றன. இந்த அம்சங்கள் IE7-9 அல்லது Firefox இன் பழைய பதிப்புகளில் ஆதரிக்கப்படவில்லை.

இன்டர்நெட் எக்ஸ்புளோரர் 10 மற்றும் ஓபரா 12ஐ விட முந்தைய பதிப்புகள் அனிமேஷனை ஆதரிக்காது.

உரை உள்ளடக்கத்துடன் இடது அல்லது வலது-சீரமைக்கப்பட்ட படத்தைக் கொண்டிருக்கும் பல்வேறு வகையான கூறுகளை (வலைப்பதிவு கருத்துகள், கீச்சுகள் போன்றவை) உருவாக்குவதற்கான சுருக்க பொருள் பாணிகள்.

இயல்பு உதாரணம்

இயல்புநிலை மீடியா ஒரு மீடியா பொருளை (படங்கள், வீடியோ, ஆடியோ) உள்ளடக்கத் தொகுதியின் இடது அல்லது வலதுபுறத்தில் மிதக்க அனுமதிக்கிறது.

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.

<div class = "media" > 
  <a class = "left-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

மீடியா பட்டியல்

கூடுதல் மார்க்அப் மூலம், நீங்கள் பட்டியலில் உள்ள மீடியாவைப் பயன்படுத்தலாம் (கருத்து நூல்கள் அல்லது கட்டுரைகள் பட்டியல்களுக்குப் பயன்படும்).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "left-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

கிணறுகள்

ஒரு உறுப்புக்கு ஒரு உட்செலுத்துதல் விளைவைக் கொடுக்க, கிணற்றை எளிய விளைவாகப் பயன்படுத்தவும்.

<div class = "well" > 
  ...
</div>

விருப்ப வகுப்புகள்

இரண்டு விருப்ப மாற்றியமைக்கும் வகுப்புகளுடன் திணிப்பு மற்றும் வட்டமான மூலைகளைக் கட்டுப்படுத்தவும்.

<div class = "நன்றாக-பெரியது" > 
  ...
</div>

<div class = "நன்றாக-சிறியது" > 
  ...
</div>

மூடு ஐகான்

மாதிரிகள் மற்றும் விழிப்பூட்டல்கள் போன்ற உள்ளடக்கத்தை நிராகரிக்க பொதுவான மூட ஐகானைப் பயன்படுத்தவும்.

<button class = "close" > × </button> 

href="#"நீங்கள் நங்கூரத்தைப் பயன்படுத்த விரும்பினால், iOS சாதனங்களுக்கு கிளிக் நிகழ்வுகள் தேவை .

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

உதவி வகுப்புகள்

சிறிய காட்சி அல்லது நடத்தை மாற்றங்களுக்கான எளிய, கவனம் செல���த்தும் வகுப்புகள்.

.இடதுபுறம் இழுக்கவும்

ஒரு உறுப்பை இடதுபுறமாக மிதக்கவும்

வகுப்பு = "இடதுபுறம் இழுக்கவும்"

. இழு - இடது {
  மிதவை : இடது ;
}

.வலது இழு

ஒரு உறுப்பை வலதுபுறமாக மிதக்கவும்

வர்க்கம் = "வலது இழுப்பு"

. இழு - வலது {
  மிதவை : வலது ;
}

.முடக்கப்பட்டது

ஒரு உறுப்பின் நிறத்தை இதற்கு மாற்றவும்#999

வகுப்பு = "முடக்கப்பட்டது"

. முடக்கப்பட்டது {
  நிறம் : #999; 
}

.clearfix

floatஎந்த உறுப்பு மீதும் அழிக்கவும்

வகுப்பு = "தெளிவு"

. தெளிவு _
  * பெரிதாக்கு : 1 ; 
  &: முன் ,
  &: பிறகு {
    காட்சி : அட்டவணை ;
    உள்ளடக்கம் : "" ; 
  }
  &: பிறகு {
    தெளிவு : இரண்டும் ;
  }
}