ഉദാഹരണം

ലിങ്കുകളുടെ ലിസ്റ്റുകൾ പ്രദർശിപ്പിക്കുന്നതിനുള്ള ടോഗിൾ ചെയ്യാവുന്ന, സന്ദർഭോചിതമായ മെനു. ഡ്രോപ്പ്ഡൗൺ ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിൻ ഉപയോഗിച്ച് സംവേദനാത്മകമാക്കി .

<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 = "ഡ്രോപ്പ്ഡൗൺ" > 
  <!-- ഡ്രോപ്പ്ഡൗൺ ടോഗിൾ ചെയ്യാനുള്ള ലിങ്ക് അല്ലെങ്കിൽ ബട്ടൺ -->
  <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>

ഡ്രോപ്പ്ഡൗണുകളിലെ ഉപ മെനുകൾ

ചില ലളിതമായ മാർക്ക്അപ്പ് കൂട്ടിച്ചേർക്കലുകളോടെ, 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" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </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>

ചെക്ക്ബോക്സും റേഡിയോ ഫ്ലേവറുകളും

ബട്ടൺ ഗ്രൂപ്പുകൾക്ക് റേഡിയോകളായും പ്രവർത്തിക്കാൻ കഴിയും, അവിടെ ഒരു ബട്ടൺ മാത്രമേ സജീവമാകൂ, അല്ലെങ്കിൽ എത്ര ബട്ടണുകൾ സജീവമായിരിക്കാനിടയുള്ള ചെക്ക്ബോക്സുകളും. JavaScript ഡോക്‌സ് കാണുക .

ബട്ടൺ ഗ്രൂപ്പുകളിലെ ഡ്രോപ്പ്ഡൗണുകൾ

ഹെഡ്സ് അപ്പുകൾ!ശരിയായ റെൻഡറിങ്ങിനായി ഡ്രോപ്പ്‌ഡൗണുകളുള്ള ബട്ടണുകൾ അവയുടെ സ്വന്തം .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.

JavaScript ആവശ്യമാണ്

ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾക്ക് പ്രവർത്തിക്കാൻ ബൂട്ട്സ്ട്രാപ്പ് ഡ്രോപ്പ്ഡൗൺ പ്ലഗിൻ ആവശ്യമാണ് .

ചില സന്ദർഭങ്ങളിൽ-മൊബൈൽ പോലെ-ഡ്രോപ്പ്ഡൗൺ മെനുകൾ വ്യൂപോർട്ടിന് പുറത്ത് വ്യാപിക്കും. നിങ്ങൾ സ്വമേധയാ അല്ലെങ്കിൽ ഇഷ്‌ടാനുസൃത ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് വിന്യാസം പരിഹരിക്കേണ്ടതുണ്ട്.

സ്പ്ലിറ്റ് ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾ

ബട്ടൺ ഗ്രൂപ്പ് ശൈലികളും മാർക്ക്അപ്പും അടിസ്ഥാനമാക്കി, നമുക്ക് എളുപ്പത്തിൽ ഒരു സ്പ്ലിറ്റ് ബട്ടൺ സൃഷ്ടിക്കാൻ കഴിയും. സ്പ്ലിറ്റ് ബട്ടണുകൾ ഇടതുവശത്ത് ഒരു സാധാരണ പ്രവർത്തനവും സാന്ദർഭിക ലിങ്കുകൾക്കൊപ്പം വലതുവശത്ത് ഒരു ഡ്രോപ്പ്ഡൗൺ ടോഗിളും അവതരിപ്പിക്കുന്നു.

<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 ഇല്ല . എന്നിരുന്നാലും, നിങ്ങൾ ആട്രിബ്യൂട്ട് നീക്കം ചെയ്യുന്നില്ലെങ്കിൽ ലിങ്കുകൾ ക്ലിക്ക് ചെയ്യാവുന്നതാണ് . പകരമായി, ആ ക്ലിക്കുകൾ തടയാൻ നിങ്ങൾക്ക് ഇഷ്‌ടാനുസൃത JavaScript നടപ്പിലാക്കാം.href

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > വീട് </a></li>  
  ...
</ul>

ഘടകം വിന്യാസം

nav ലിങ്കുകൾ വിന്യസിക്കാൻ, .pull-leftഅല്ലെങ്കിൽ .pull-rightയൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക. രണ്ട് ക്ലാസുകളും നിർദ്ദിഷ്ട ദിശയിൽ ഒരു CSS ഫ്ലോട്ട് ചേർക്കും.

അടുക്കിവെക്കാവുന്നത്

.nav-stackedടാബുകളും ഗുളികകളും ഡിഫോൾട്ടായി തിരശ്ചീനമായതിനാൽ , അവയെ ലംബമായി അടുക്കിയിരിക്കുന്നതായി ദൃശ്യമാക്കുന്നതിന്, ഒരു രണ്ടാം ക്ലാസ് ചേർക്കുക .

അടുക്കിയ ടാബുകൾ

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

അടുക്കി വച്ചിരിക്കുന്ന ഗുളികകൾ

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

ഡ്രോപ്പ്ഡൗണുകൾ

കുറച്ച് അധിക എച്ച്ടിഎംഎൽ, ഡ്രോപ്പ്ഡൗൺ ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിൻ എന്നിവ ഉപയോഗിച്ച് ഡ്രോപ്പ്ഡൗൺ മെനുകൾ ചേർക്കുക .

ഡ്രോപ്പ്ഡൗണുകളുള്ള ടാബുകൾ

<ul class = "nav nav-tabs" > 
  <li class = "ഡ്രോപ്പ്ഡൗൺ" > 
    <a class = "ഡ്രോപ്പ്ഡൗൺ-ടോഗിൾ" 
       ഡാറ്റ-ടോഗിൾ = "ഡ്രോപ്പ്ഡൗൺ"
       href = "#" >
        ഡ്രോപ്പ് ഡൗൺ
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

ഡ്രോപ്പ്ഡൗൺ ഉള്ള ഗുളികകൾ

<ul class = "nav nav-pills" > 
  <li class = "ഡ്രോപ്പ്ഡൗൺ" > 
    <a class = "ഡ്രോപ്പ്ഡൗൺ-ടോഗിൾ" 
       ഡാറ്റ-ടോഗിൾ = "ഡ്രോപ്പ്ഡൗൺ"
       href = "#" >
        ഡ്രോപ്പ് ഡൗൺ
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

നാവ് ലിസ്റ്റുകൾ

ഓപ്ഷണൽ ഹെഡറുകൾ ഉപയോഗിച്ച് nav ലിങ്കുകളുടെ ഗ്രൂപ്പുകൾ നിർമ്മിക്കുന്നതിനുള്ള ലളിതവും എളുപ്പവുമായ മാർഗ്ഗം. OS X-ലെ ഫൈൻഡർ പോലുള്ള സൈഡ്‌ബാറുകളിൽ അവ ഏറ്റവും നന്നായി ഉപയോഗിക്കുന്നു.

ഉദാഹരണം നാവിക പട്ടിക

ലിങ്കുകളുടെ ഒരു ലിസ്റ്റ് എടുത്ത് ചേർക്കുക 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>

കുറിപ്പ്ഒരു നാവിക ലിസ്റ്റിനുള്ളിൽ കൂടുകൂട്ടുന്നതിന്, class="nav nav-list"ഏതെങ്കിലും നെസ്റ്റിൽ ഉൾപ്പെടുത്തുക <ul>.

തിരശ്ചീന ഡിവൈഡറുകൾ

ക്ലാസിനൊപ്പം ഒരു ശൂന്യമായ ലിസ്റ്റ് ഇനം സൃഷ്ടിച്ചുകൊണ്ട് ഒരു തിരശ്ചീന വിഭജനം ചേർക്കുക .divider, ഇതുപോലെ:

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

ടാബബിൾ നവ്

ടാബുകൾ വഴിയുള്ള ഉള്ളടക്കങ്ങൾക്കിടയിൽ ടോഗിൾ ചെയ്യാൻ ലളിതമായ പ്ലഗിൻ ഉപയോഗിച്ച് നിങ്ങളുടെ ടാബുകൾക്ക് ജീവൻ നൽകുക. ബൂട്ട്സ്ട്രാപ്പ് ടാബബിൾ ടാബുകളെ നാല് ശൈലികളിൽ സംയോജിപ്പിക്കുന്നു: മുകളിൽ (സ്ഥിരസ്ഥിതി), വലത്, താഴെ, ഇടത്.

ടാബബിൾ ഉദാഹരണം

ടാബുകൾ ടാബബിൾ ആക്കുന്നതിന്, .tab-paneഓരോ ടാബിനും തനതായ ഐഡി സഹിതം സൃഷ്‌ടിച്ച് അവ പൊതിയുക .tab-content.

ഞാൻ സെക്ഷൻ 1 ലാണ്.

നമസ്കാരം, ഞാൻ സെക്ഷൻ 2ലാണ്.

എന്താ പെണ്ണേ, ഇത് സെക്ഷൻ 3 ആണ്.

<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 = "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 പ്ലഗിൻ ഉപയോഗിച്ചാണ് പ്രവർത്തിക്കുന്നത്. JavaScript ഡോക്‌സ് പേജിൽ ടാബബിൾ ടാബുകൾ എങ്ങനെ ജീവസുറ്റതാക്കും എന്നതിനെക്കുറിച്ച് കൂടുതൽ വായിക്കുക .

ഏത് ദിശയിലും ടാബബിൾ

താഴെയുള്ള ടാബുകൾ

HTML-ന്റെ ക്രമം ഫ്ലിപ്പുചെയ്ത് ചുവടെ ടാബുകൾ ഇടാൻ ഒരു ക്ലാസ് ചേർക്കുക.

ഞാൻ എ വിഭാഗത്തിലാണ്.

നമസ്കാരം, ഞാൻ ബി വിഭാഗത്തിലാണ്.

എന്താ പെണ്ണേ, ഇതാണ് സെക്ഷൻ സി.

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

ഇടതുവശത്തുള്ള ടാബുകൾ

ഇടതുവശത്ത് ടാബുകൾ ഇടാൻ ക്ലാസ് മാറ്റുക.

ഞാൻ എ വിഭാഗത്തിലാണ്.

നമസ്കാരം, ഞാൻ ബി വിഭാഗത്തിലാണ്.

എന്താ പെണ്ണേ, ഇതാണ് സെക്ഷൻ സി.

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

വലതുവശത്തുള്ള ടാബുകൾ

വലതുവശത്ത് ടാബുകൾ ഇടാൻ ക്ലാസ് മാറ്റുക.

ഞാൻ എ വിഭാഗത്തിലാണ്.

നമസ്കാരം, ഞാൻ ബി വിഭാഗത്തിലാണ്.

എന്താ പെണ്ണേ, ഇതാണ് സെക്ഷൻ സി.

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

അടിസ്ഥാന നവബാർ

ആരംഭിക്കുന്നതിന്, navbars സ്റ്റാറ്റിക് ആണ് (മുകളിൽ ഉറപ്പിച്ചിട്ടില്ല) കൂടാതെ ഒരു പ്രോജക്റ്റ് നാമത്തിനും അടിസ്ഥാന നാവിഗേഷനുമുള്ള പിന്തുണ ഉൾപ്പെടുന്നു. .containerനിങ്ങളുടെ സൈറ്റിന്റെയും ഉള്ളടക്കത്തിന്റെയും വീതിയെ സജ്ജമാക്കുന്ന a യിൽ എവിടെയും ഒരെണ്ണം സ്ഥാപിക്കുക .

<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>

നവബാർ ഘടകങ്ങൾ

ബ്രാൻഡ്

നിങ്ങളുടെ ബ്രാൻഡ് അല്ലെങ്കിൽ പ്രോജക്റ്റ് നാമം കാണിക്കുന്നതിനുള്ള ഒരു ലളിതമായ ലിങ്കിന് ഒരു ആങ്കർ ടാഗ് ആവശ്യമാണ്.

<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>

ഒരു ശൂന്യമായ ലിസ്റ്റ് ഇനവും ലളിതമായ ക്ലാസും ഉപയോഗിച്ച് നിങ്ങളുടെ നാവിക ലിങ്കുകളിലേക്ക് എളുപ്പത്തിൽ ഡിവൈഡറുകൾ ചേർക്കാൻ കഴിയും. ലിങ്കുകൾക്കിടയിൽ ഇത് ചേർക്കുക:

<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" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

ഘടകം വിന്യാസം

നാവിക ലിങ്കുകൾ, തിരയൽ ഫോം അല്ലെങ്കിൽ ടെക്സ്റ്റ് വിന്യസിക്കുക, .pull-leftഅല്ലെങ്കിൽ .pull-rightയൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക. രണ്ട് ക്ലാസുകളും നിർദ്ദിഷ്ട ദിശയിൽ ഒരു CSS ഫ്ലോട്ട് ചേർക്കും.

ഡ്രോപ്പ്ഡൌണുകൾ ഉപയോഗിക്കുന്നു

ഒരു ബിറ്റ് മാർക്ക്അപ്പും ഡ്രോപ്പ്ഡൌണുകളും JavaScript പ്ലഗിൻ ഉപയോഗിച്ച് nav-ലേക്ക് ഡ്രോപ്പ്ഡൌണുകളും ഡ്രോപ്പപ്പുകളും ചേർക്കുക .

<ul class = "nav" > 
  <li class = "ഡ്രോപ്പ്ഡൗൺ" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      അക്കൗണ്ട്
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

കൂടുതൽ മാർക്ക്അപ്പിനും കോളിംഗ് ഡ്രോപ്പ്ഡൗണുകളെക്കുറിച്ചുള്ള വിവരങ്ങൾക്കും JavaScript ഡ്രോപ്പ്ഡൗൺ ഡോക്യുമെന്റേഷൻ സന്ദർശിക്കുക .

വാചകം

ഒരു മൂലകത്തിൽ ടെക്‌സ്‌റ്റിന്റെ സ്ട്രിംഗുകൾ പൊതിയുക .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 ഉള്ളടക്കം ഉൾക്കൊള്ളുന്ന ഡിവിയിൽ പൊതിയുക, .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 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

ഹെഡ്സ് അപ്പുകൾ! റെസ്‌പോൺസീവ് നാവ്‌ബാറിന് ക്രോൾ പ്ലഗിനും പ്രതികരിക്കുന്ന ബൂട്ട്‌സ്‌ട്രാപ്പ് CSS ഫയലും ആവശ്യമാണ് .

വിപരീത വ്യതിയാനം

ചേർത്തുകൊണ്ട് നവബാറിന്റെ രൂപം പരിഷ്‌ക്കരിക്കുക .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 = "active" > ഡാറ്റ </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 = "#" > അടുത്തത് </a></li> 
  </ul>
</div>

ഓപ്ഷനുകൾ

അപ്രാപ്തവും സജീവവുമായ സംസ്ഥാനങ്ങൾ

വ്യത്യസ്ത സാഹചര്യങ്ങൾക്കനുസരിച്ച് ലിങ്കുകൾ ഇഷ്ടാനുസൃതമാക്കാവുന്നതാണ്. .disabledക്ലിക്ക് ചെയ്യാത്ത ലിങ്കുകൾക്കും .activeനിലവിലെ പേജ് സൂചിപ്പിക്കാനും ഉപയോഗിക്കുക .

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > മുമ്പത്തെ </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

ഉദ്ദേശിച്ച ശൈലികൾ നിലനിർത്തിക്കൊണ്ടുതന്നെ ക്ലിക്ക് ഫംഗ്‌ഷണാലിറ്റി നീക്കം ചെയ്യുന്നതിനായി സ്‌പാനുകൾക്കായി നിങ്ങൾക്ക് ഓപ്‌ഷണലായി ആക്റ്റീവ് അല്ലെങ്കിൽ ഡിസേബിൾഡ് ആങ്കറുകൾ സ്വാപ്പ് ചെയ്യാം.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> Prev </span></li> 
    <li ക്ലാസ് = "സജീവ"  ><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 ക്ലാസ് = "അടുത്തത്" > 
    <a href = "#" > പുതിയത് → </a> 
  </li>
</ul>

ഓപ്ഷണൽ അപ്രാപ്തമാക്കിയ അവസ്ഥ

പേജർ ലിങ്കുകൾ പേജിനേഷനിൽ നിന്നുള്ള പൊതുവായ .disabledയൂട്ടിലിറ്റി ക്ലാസും ഉപയോഗിക്കുന്നു.

<ul class = "പേജർ" > 
  <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>`

ബാഡ്ജുകൾ

പേര്	ഉദാഹരണം	മാർക്ക്അപ്പ്
സ്ഥിരസ്ഥിതി	1	`<span class="badge">1</span>`
വിജയം	2	`<span class="badge badge-success">2</span>`
മുന്നറിയിപ്പ്	4	`<span class="badge badge-warning">4</span>`
പ്രധാനപ്പെട്ടത്	6	`<span class="badge badge-important">6</span>`
വിവരം	8	`<span class="badge badge-info">8</span>`
വിപരീതം	10	`<span class="badge badge-inverse">10</span>`

ഹീറോ യൂണിറ്റ്

നിങ്ങളുടെ സൈറ്റിലെ പ്രധാന ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിന് ഭാരം കുറഞ്ഞതും വഴക്കമുള്ളതുമായ ഘടകം. മാർക്കറ്റിംഗിലും ഉള്ളടക്കം കൂടുതലുള്ള സൈറ്റുകളിലും ഇത് നന്നായി പ്രവർത്തിക്കുന്നു.

ഹലോ വേൾഡ്!

ഇതൊരു ലളിതമായ ഹീറോ യൂണിറ്റാണ്, ഫീച്ചർ ചെയ്‌ത ഉള്ളടക്കത്തിലേക്കോ വിവരങ്ങളിലേക്കോ കൂടുതൽ ശ്രദ്ധ ക്ഷണിക്കുന്നതിനുള്ള ലളിതമായ ജംബോട്രോൺ ശൈലിയിലുള്ള ഘടകമാണ്.

കൂടുതലറിയുക

<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 ഉള്ളടക്കവും ചേർക്കാൻ സാധിക്കും.

ലഘുചിത്ര ലേബൽ

ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies vehicula ut id elit.

ആക്ഷൻ ആക്ഷൻ
ലഘുചിത്ര ലേബൽ

ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies vehicula ut id elit.

ആക്ഷൻ ആക്ഷൻ
ലഘുചിത്ര ലേബൽ

ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies vehicula ut id elit.

ആക്ഷൻ ആക്ഷൻ

എന്തുകൊണ്ടാണ് ലഘുചിത്രങ്ങൾ ഉപയോഗിക്കുന്നത്

ലഘുചിത്രങ്ങൾ (മുമ്പ്.media-gridഫോട്ടോകളുടെയോ വീഡിയോകളുടെയോ ഗ്രിഡുകൾ, ഇമേജ് തിരയൽ ഫലങ്ങൾ, റീട്ടെയിൽ ഉൽപ്പന്നങ്ങൾ, പോർട്ട്‌ഫോളിയോകൾ എന്നിവയ്‌ക്കും അതിലേറെ കാര്യങ്ങൾക്കുംഅവ ലിങ്കുകളോ സ്റ്റാറ്റിക് ഉള്ളടക്കമോ ആകാം.

ലളിതവും വഴക്കമുള്ളതുമായ മാർക്ക്അപ്പ്

ലഘുചിത്ര മാർക്ക്അപ്പ് ലളിതമാണ്-എത്രയും ulഎണ്ണംli ആവശ്യമാണ്. ഇത് വളരെ ഫ്ലെക്സിബിൾ കൂടിയാണ്, നിങ്ങളുടെ ഉള്ളടക്കങ്ങൾ പൊതിയാൻ അൽപ്പം കൂടുതൽ മാർക്ക്അപ്പ് ഉള്ള ഏത് തരത്തിലുള്ള ഉള്ളടക്കത്തിനും ഇത് അനുവദിക്കുന്നു.

ഗ്രിഡ് നിര വലുപ്പങ്ങൾ ഉപയോഗിക്കുന്നു

അവസാനമായി, ലഘുചിത്ര ഘടകം നിലവിലുള്ള ഗ്രിഡ് സിസ്റ്റം ക്ലാസുകൾ ഉപയോഗിക്കുന്നു - .span2അല്ലെങ്കിൽ.span3അവസാനമായി, ലഘുചിത്രത്തിന്റെ അളവുകൾ നിയന്ത്രിക്കുന്നതിന്,

മാർക്ക്അപ്പ്

മുമ്പ് സൂചിപ്പിച്ചതുപോലെ, ലഘുചിത്രങ്ങൾക്ക് ആവശ്യമായ മാർക്ക്അപ്പ് ഭാരം കുറഞ്ഞതും നേരായതുമാണ്. ലിങ്ക് ചെയ്‌ത ചിത്രങ്ങൾക്കായുള്ള ഡിഫോൾട്ട് സജ്ജീകരണം ഇതാ :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

ലഘുചിത്രങ്ങളിലെ ഇഷ്‌ടാനുസൃത HTML ഉള്ളടക്കത്തിന്, മാർക്ക്അപ്പ് ചെറുതായി മാറുന്നു. ബ്ലോക്ക് ലെവൽ ഉള്ളടക്കം എവിടെയും അനുവദിക്കുന്നതിന്, ഞങ്ങൾ ഇതുപോലെ സ്വാപ്പ് <a>ചെയ്യുന്നു <div>:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> ലഘുചിത്ര ലേബൽ </h3>
      <p> ലഘുചിത്ര അടിക്കുറിപ്പ്... </p>
    </div>
  </li>
  ...
</ul>

കൂടുതൽ ഉദാഹരണങ്ങൾ

നിങ്ങൾക്ക് ലഭ്യമായ വിവിധ ഗ്രിഡ് ക്ലാസുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ എല്ലാ ഓപ്ഷനുകളും പര്യവേക്ഷണം ചെയ്യുക. നിങ്ങൾക്ക് വ്യത്യസ്ത വലുപ്പങ്ങൾ മിക്സ് ചെയ്യാനും പൊരുത്തപ്പെടുത്താനും കഴിയും.

ഡിഫോൾട്ട് അലേർട്ട്

.alertഅടിസ്ഥാന മുന്നറിയിപ്പ് സന്ദേശത്തിനായി ഏതെങ്കിലും ടെക്‌സ്‌റ്റും ഓപ്‌ഷണൽ ഡിസ്മിസ് ബട്ടണും പൊതിയുക .

മുന്നറിയിപ്പ്! സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ലെന്ന് തോന്നുന്നു.

<div class = "Alert" > 
  <button type = "button" class = "close" data-dismiss = "Alert" > × </button>   
  <strong> മുന്നറിയിപ്പ്! </strong> സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ലെന്ന് തോന്നുന്നു.
</div>

ബട്ടണുകൾ ഡിസ്മിസ് ചെയ്യുക

മൊബൈൽ സഫാരി, മൊബൈൽ ഓപ്പറ ബ്രൗസറുകൾ, data-dismiss="alert"ആട്രിബ്യൂട്ട് കൂടാതെ, ഒരു ടാഗ് href="#"ഉപയോഗിക്കുമ്പോൾ അലേർട്ടുകൾ നിരസിക്കാൻ ആവശ്യമാണ്.<a>

<a href = "#" class = "close" data-dismiss = "അലേർട്ട്" > × </a>

<button>പകരമായി, ഞങ്ങളുടെ ഡോക്‌സിനായി ഞങ്ങൾ തിരഞ്ഞെടുത്ത ഡാറ്റ ആട്രിബ്യൂട്ട് ഉള്ള ഒരു ഘടകം നിങ്ങൾക്ക് ഉപയോഗിക്കാം . ഉപയോഗിക്കുമ്പോൾ <button>, നിങ്ങൾ ഉൾപ്പെടുത്തണം type="button"അല്ലെങ്കിൽ നിങ്ങളുടെ ഫോമുകൾ സമർപ്പിക്കാൻ പാടില്ല.

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

JavaScript വഴിയുള്ള അലേർട്ടുകൾ നിരസിക്കുക

അലേർട്ടുകൾ വേഗത്തിലും എളുപ്പത്തിലും നിരസിക്കാൻ അലേർട്ടുകൾ jQuery പ്ലഗിൻ ഉപയോഗിക്കുക .

ഓപ്ഷനുകൾ

ദൈർഘ്യമേറിയ സന്ദേശങ്ങൾക്ക്, ചേർത്തുകൊണ്ട് അലേർട്ട് റാപ്പറിന്റെ മുകളിലും താഴെയുമായി പാഡിംഗ് വർദ്ധിപ്പിക്കുക .alert-block.

മുന്നറിയിപ്പ്!

സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ലെന്ന് തോന്നുന്നു. Nulla vitae elit libero, a pharetra ague. പ്രെസെന്റ് കോമോഡോ കർസസ് മാഗ്ന, അല്ലെങ്കിൽ സ്കെലറിസ്ക് നിസ്ൽ കൺസെക്റ്റേറ്റർ തുടങ്ങിയവ.

<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 = "progress" > 
  <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 = "progress" > 
  <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 = "പുരോഗതി പുരോഗതി-മുന്നറിയിപ്പ് പുരോഗതി-വരകൾ" > 
  <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-ന്റെ പഴയ പതിപ്പുകളിൽ ഈ സവിശേഷതകൾ പിന്തുണയ്ക്കുന്നില്ല.

Internet Explorer 10, Opera 12 എന്നിവയേക്കാൾ മുമ്പുള്ള പതിപ്പുകൾ ആനിമേഷനുകളെ പിന്തുണയ്ക്കുന്നില്ല.

വാചക ഉള്ളടക്കത്തിനൊപ്പം ഇടത് അല്ലെങ്കിൽ വലത് വിന്യസിച്ച ചിത്രം അവതരിപ്പിക്കുന്ന വിവിധ തരം ഘടകങ്ങൾ (ബ്ലോഗ് കമന്റുകൾ, ട്വീറ്റുകൾ മുതലായവ) നിർമ്മിക്കുന്നതിനുള്ള അമൂർത്ത ഒബ്‌ജക്റ്റ് ശൈലികൾ.

സ്ഥിര ഉദാഹരണം

ഡിഫോൾട്ട് മീഡിയ ഒരു മീഡിയ ഒബ്‌ജക്റ്റ് (ചിത്രങ്ങൾ, വീഡിയോ, ഓഡിയോ) ഒരു ഉള്ളടക്ക ബ്ലോക്കിന്റെ ഇടത്തോട്ടോ വലത്തോട്ടോ ഫ്ലോട്ട് ചെയ്യാൻ അനുവദിക്കുന്നു.

മാധ്യമ തലക്കെട്ട്

ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.

മാധ്യമ തലക്കെട്ട്

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" src = "https://placehold.it/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > മീഡിയ തലക്കെട്ട് </h4> 
    ...
 
    <!-- നെസ്റ്റഡ് മീഡിയ ഒബ്‌ജക്റ്റ് -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

മീഡിയ ലിസ്റ്റ്

കുറച്ച് അധിക മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ലിസ്റ്റിനുള്ളിൽ മീഡിയ ഉപയോഗിക്കാം (അഭിപ്രായ ത്രെഡുകൾക്കോ ലേഖന ലിസ്റ്റുകൾക്കോ ഉപയോഗപ്രദമാണ്).

മാധ്യമ തലക്കെട്ട്

ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്.

നെസ്റ്റഡ് മീഡിയ തലക്കെട്ട്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്.

നെസ്റ്റഡ് മീഡിയ തലക്കെട്ട്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്.

നെസ്റ്റഡ് മീഡിയ തലക്കെട്ട്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്.
മാധ്യമ തലക്കെട്ട്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്.

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" src = "https://placehold.it/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > മീഡിയ തലക്കെട്ട് </h4> 
      ...
 
      <!-- നെസ്റ്റഡ് മീഡിയ ഒബ്‌ജക്റ്റ് -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

കിണറുകൾ

ഒരു മൂലകത്തിന് ഒരു ഇൻസെറ്റ് ഇഫക്റ്റ് നൽകുന്നതിന് കിണർ ഒരു ലളിതമായ ഇഫക്റ്റായി ഉപയോഗിക്കുക.

നോക്കൂ, ഞാൻ കിണറ്റിലാണ്!

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

ഓപ്ഷണൽ ക്ലാസുകൾ

രണ്ട് ഓപ്ഷണൽ മോഡിഫയർ ക്ലാസുകളുള്ള പാഡിംഗും വൃത്താകൃതിയിലുള്ള മൂലകളും നിയന്ത്രിക്കുക.

നോക്കൂ, ഞാൻ കിണറ്റിലാണ്!

<div class = "നന്നായി നന്നായി വലുത്" > 
  ...
</div>

നോക്കൂ, ഞാൻ കിണറ്റിലാണ്!

<div class = "നന്നായി-ചെറിയത്" > 
  ...
</div>

ഐക്കൺ അടയ്ക്കുക

മോഡലുകളും അലേർട്ടുകളും പോലുള്ള ഉള്ളടക്കം നിരസിക്കാൻ പൊതുവായ ക്ലോസ് ഐക്കൺ ഉപയോഗിക്കുക.

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

നിങ്ങൾ ഒരു ആങ്കർ ഉപയോഗിക്കണമെങ്കിൽ, ക്ലിക്ക് ഇവന്റുകൾക്കായി iOS ഉപകരണങ്ങൾക്ക് ഒരു href="#" ആവശ്യമാണ്.

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

സഹായ ക്ലാസുകൾ

ചെറിയ ഡിസ്‌പ്ലേയ്‌ക്കോ പെരുമാറ്റ മാറ്റങ്ങൾക്കോ വേണ്ടിയുള്ള ലളിതവും ഫോക്കസ് ചെയ്‌തതുമായ ക്ലാസുകൾ.

.ഇടത്തേക്ക് വലിക്കുക

ഒരു ഘടകം ഇടത്തേക്ക് ഫ്ലോട്ട് ചെയ്യുക

ക്ലാസ് = "ഇടത്തേക്ക് വലിക്കുക"

. വലിക്കുക - ഇടത്തേക്ക് {
  ഫ്ലോട്ട് : ഇടത് ;
}

.വലത്തേക്ക് വലിക്കുക

ഒരു ഘടകം വലത്തേക്ക് ഫ്ലോട്ട് ചെയ്യുക

ക്ലാസ് = "വലത്തേക്ക് വലിക്കുക"

. വലത്തേക്ക് വലിക്കുക { _
  ഫ്ലോട്ട് : വലത് ;
}

.മ്യൂട്ട് ചെയ്തു

ഒരു മൂലകത്തിന്റെ നിറം ഇതിലേക്ക് മാറ്റുക#999

ക്ലാസ് = "മ്യൂട്ട്"

. നിശബ്ദമാക്കി {
  നിറം : #999; 
}

.clearfix

floatഏതെങ്കിലും മൂലകം മായ്‌ക്കുക

ക്ലാസ് = "ക്ലിയർഫിക്സ്"

. ക്ലിയർഫിക്സ് {
  * സൂം : 1 ; 
  &: മുമ്പ് ,
  &: { ശേഷം
    ഡിസ്പ്ലേ : പട്ടിക ;
    ഉള്ളടക്കം : "" ; 
  }
  &: { ശേഷം
    വ്യക്തം : രണ്ടും ;
  }
}

ഡ്രോപ്പ്ഡൗൺ മെനുകൾ

ഉദാഹരണം

മാർക്ക്അപ്പ്

ഓപ്ഷനുകൾ

മെനുകൾ വിന്യസിക്കുന്നു

ഡ്രോപ്പ്ഡൗണുകളിലെ ഉപ മെനുകൾ

ബട്ടൺ ഗ്രൂപ്പുകൾ

ഉദാഹരണങ്ങൾ

ഒറ്റ ബട്ടൺ ഗ്രൂപ്പ്

ഒന്നിലധികം ബട്ടൺ ഗ്��ൂപ്പുകൾ

ലംബ ബട്ടൺ ഗ്രൂപ്പുകൾ

ചെക്ക്ബോക്സും റേഡിയോ ഫ്ലേവറുകളും

ബട്ടൺ ഗ്രൂപ്പുകളിലെ ഡ്രോപ്പ്ഡൗണുകൾ

ബട്ടൺ ഡ്രോപ്പ്ഡൗൺ മെനുകൾ

അവലോകനവും ഉദാഹരണങ്ങളും

എല്ലാ ബട്ടണുകളിലും പ്രവർത്തിക്കുന്നു

JavaScript ആവശ്യമാണ്

സ്പ്ലിറ്റ് ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾ

വലിപ്പങ്ങൾ

ഡ്രോപ്പ്അപ്പ് മെനുകൾ

നവ്: ടാബുകൾ, ഗുളികകൾ, ലിസ്റ്റുകൾ

ഭാരം കുറഞ്ഞ ഡിഫോൾട്ടുകൾ ഒരേ മാർക്ക്അപ്പ്, വ്യത്യസ്ത ക്ലാസുകൾ

അടിസ്ഥാന ടാബുകൾ

അടിസ്ഥാന ഗുളികകൾ

വികലാംഗ സംസ്ഥാനം

ഘടകം വിന്യാസം

അടുക്കിവെക്കാവുന്നത്

അടുക്കിയ ടാബുകൾ

അടുക്കി വച്ചിരിക്കുന്ന ഗുളികകൾ

ഡ്രോപ്പ്ഡൗണുകൾ

ഡ്രോപ്പ്ഡൗണുകളുള്ള ടാബുകൾ

ഡ്രോപ്പ്ഡൗൺ ഉള്ള ഗുളികകൾ

നാവ് ലിസ്റ്റുകൾ

ഉദാഹരണം നാവിക പട്ടിക

തിരശ്ചീന ഡിവൈഡറുകൾ

ടാബബിൾ നവ്

ടാബബിൾ ഉദാഹരണം

ടാബുകളിൽ മങ്ങുക

jQuery പ്ലഗിൻ ആവശ്യമാണ്

ഏത് ദിശയിലും ടാബബിൾ

താഴെയുള്ള ടാബുകൾ

ഇടതുവശത്തുള്ള ടാബുകൾ

വലതുവശത്തുള്ള ടാബുകൾ

നവബാർ

അടിസ്ഥാന നവബാർ

നവബാർ ഘടകങ്ങൾ

ബ്രാൻഡ്

നാവ് ലിങ്കുകൾ

ഫോമുകൾ

തിരയൽ ഫോം

ഘടകം വിന്യാസം

ഡ്രോപ്പ്ഡൌണുകൾ ഉപയോഗിക്കുന്നു

വാചകം

ഓപ്ഷണൽ ഡിസ്പ്ലേ വ്യതിയാനങ്ങൾ

മുകളിൽ ഉറപ്പിച്ചു

അടിയിലേക്ക് ഉറപ്പിച്ചു

സ്റ്റാറ്റിക് ടോപ്പ് നാവ്ബാർ

പ്രതികരിക്കുന്ന നവബാർ

വിപരീത വ്യതിയാനം

ബ്രെഡ്ക്രംബ്സ്

ഉദാഹരണങ്ങൾ

പേജിനേഷൻ ഉള്ളടക്കത്തിലൂടെ പേജ് ചെയ്യുന്നതിനുള്ള രണ്ട് ഓപ്ഷനുകൾ

സ്റ്റാൻഡേർഡ് പേജിനേഷൻ

ഓപ്ഷനുകൾ

അപ്രാപ്തവും സജീവവുമായ സംസ്ഥാനങ്ങൾ

വലിപ്പങ്ങൾ

വിന്യാസം

പേജർ

സ്ഥിര ഉദാഹരണം

വിന്യസിച്ച ലിങ്കുകൾ

ഓപ്ഷണൽ അപ്രാപ്തമാക്കിയ അവസ്ഥ

ലേബലുകളും ബാഡ്ജുകളും

ലേബലുകൾ

ബാഡ്ജുകൾ

ടൈപ്പോഗ്രാഫിക് ഘടകങ്ങൾ

ഹീറോ യൂണിറ്റ്

ഹലോ വേൾഡ്!

പേജ് തലക്കെട്ട്

ഉദാഹരണം പേജ് തലക്കെട്ട് തലക്കെട്ടിനുള്ള ഉപവാചകം

ചിത്രങ്ങളുടെയും വീഡിയോകളുടെയും ടെക്‌സ്‌റ്റിന്റെയും മറ്റും ലഘുചിത്ര ഗ്രിഡുകൾ