ബൂട്ട്സ്ട്രാപ്പ്

ഘടകങ്ങൾ

നാവിഗേഷൻ, അലേർട്ടുകൾ, പോപോവറുകൾ എന്നിവയും അതിലേറെയും നൽകുന്നതിനായി നിർമ്മിച്ച ഡസൻ കണക്കിന് പുനരുപയോഗിക്കാവുന്ന ഘടകങ്ങൾ.

ഹെഡ്സ് അപ്പുകൾ! ഈ ഡോക്‌സ് v2.3.2-നുള്ളതാണ്, അത് ഇനി ഔദ്യോഗികമായി പിന്തുണയ്‌ക്കില്ല. ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഏറ്റവും പുതിയ പതിപ്പ് പരിശോധിക്കുക!

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

ഉദാഹരണങ്ങൾ

രണ്ട് അടിസ്ഥാന ഓപ്ഷനുകൾ, കൂടാതെ രണ്ട് പ്രത്യേക വ്യതിയാനങ്ങൾ.

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

.btnഇൻ ഉപയോഗിച്ച് ബട്ടണുകളുടെ ഒരു ശ്രേണി പൊതിയുക .btn-group.

  1. <div class = "btn-group" > 
  2.   <button class = "btn" > ഇടത് </button> 
  3.   <button class = "btn" > മിഡിൽ </button> 
  4.   <button class = "btn" > വലത് </button> 
  5. </div>

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

കൂടുതൽ സങ്കീർണ്ണമായ ഘടകങ്ങൾക്കായി സെറ്റുകളെ സംയോജിപ്പിക്കുക <div class="btn-group">.<div class="btn-toolbar">

  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     ...
  4.   </div>
  5. </div>

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

ഒരു കൂട്ടം ബട്ടണുകൾ തിരശ്ചീനമായി അടുക്കുന്നതിനുപകരം ലംബമായി അടുക്കിയിരിക്കുന്നതായി ദൃശ്യമാക്കുക.

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

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

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

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

ഹെഡ്സ് അപ്പുകൾ!ശരിയായ റെൻഡറിങ്ങിനായി ഡ്രോപ്പ്ഡൗണുകളുള്ള ബട്ടണുകൾ അവയുടെ സ്വന്തം .btn-groupഉള്ളിൽ പൊതിഞ്ഞിരിക്കണം ..btn-toolbar

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

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

ഒരു ഡ്രോപ്പ്ഡൗൺ മെനു പ്രവർത്തനക്ഷമമാക്കാൻ ഏതെങ്കിലും ബട്ടൺ ഉപയോഗിക്കുക, അത് എയിൽ സ്ഥാപിച്ച് .btn-groupശരിയായ മെനു മാർക്ക്അപ്പ് നൽകൂ.

  1. <div class = "btn-group" > 
  2.   <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
  3.     ആക്ഷൻ
  4.     <span class = "caret" ></span> 
  5.   </a>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- ഡ്രോപ്പ്ഡൗൺ മെനു ലിങ്കുകൾ -->
  8.   </ul>
  9. </div>

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

ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾ ഏത് വലുപ്പത്തിലും പ്രവർത്തിക്കുന്നു: .btn-large, .btn-smallഅല്ലെങ്കിൽ .btn-mini.

JavaScript ആവശ്യമാണ്

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

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

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

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

  1. <div class = "btn-group" > 
  2.   <button class = "btn" > പ്രവർത്തനം </button> 
  3.   <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.     <span class = "caret" ></span> 
  5.   </button>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- ഡ്രോപ്പ്ഡൗൺ മെനു ലിങ്കുകൾ -->
  8.   </ul>
  9. </div>

വലിപ്പങ്ങൾ

അധിക ബട്ടൺ ക്ലാസുകൾ ഉപയോഗിക്കുക .btn-mini, .btn-smallഅല്ലെങ്കിൽ .btn-largeവലുപ്പം ക്രമീകരിക്കാൻ.

  1. <div class = "btn-group" > 
  2.   <button class = "btn btn-mini" > ആക്ഷൻ </button> 
  3.   <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
  4.     <span class = "caret" ></span> 
  5.   </button>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- ഡ്രോപ്പ്ഡൗൺ മെനു ലിങ്കുകൾ -->
  8.   </ul>
  9. </div>

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

യുടെ ഉടനടി രക്ഷിതാവിന് ഒരൊറ്റ ക്ലാസ് ചേർത്ത് ഡ്രോപ്പ്ഡൗൺ മെനുകൾ താഴെ നിന്ന് മുകളിലേക്ക് മാറ്റാനും കഴിയും .dropdown-menu. ഇത് .caretമെനുവിന്റെ ദിശ മാറ്റുകയും മുകളിൽ നിന്ന് താഴേക്ക് നീക്കുന്നതിന് പകരം താഴെ നിന്ന് മുകളിലേക്ക് നീങ്ങുകയും ചെയ്യും.

  1. <div class = "btn-group dropup" > 
  2.   <button class = "btn" > Dropup </button> 
  3.   <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.     <span class = "caret" ></span> 
  5.   </button>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- ഡ്രോപ്പ്ഡൗൺ മെനു ലിങ്കുകൾ -->
  8.   </ul>
  9. </div>

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

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

Rdio-ൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട ലളിതമായ പേജിനേഷൻ, ആപ്പുകൾക്കും തിരയൽ ഫലങ്ങൾക്കും മികച്ചതാണ്. വലിയ ബ്ലോക്ക് നഷ്‌ടപ്പെടാൻ പ്രയാസമാണ്, എളുപ്പത്തിൽ അളക്കാവുന്നതും വലിയ ക്ലിക്ക് ഏരിയകളും നൽകുന്നു.

  1. <div class = "pagination" > 
  2.   <ul>
  3.     <li><a href = "#" > മുമ്പത്തെ </a></li> 
  4.     <li><a href = "#" > 1 </a></li> 
  5.     <li><a href = "#" > 2 </a></li> 
  6.     <li><a href = "#" > 3 </a></li> 
  7.     <li><a href = "#" > 4 ​​</a></li> 
  8.     <li><a href = "#" > 5 </a></li> 
  9.     <li><a href = "#" > അടുത്തത് </a></li> 
  10.   </ul>
  11. </div>

ഓപ്ഷനുകൾ

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

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

  1. <div class = "pagination" > 
  2.   <ul>
  3.     <li class = "disabled" ><a href = "#" > « </a></li>  
  4.     <li class = "active" ><a href = "#" > 1 </a></li>  
  5.     ...
  6.   </ul>
  7. </div>

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

  1. <div class = "pagination" > 
  2.   <ul>
  3.     <li class = "disabled" ><span> « </span></li> 
  4.     <li class = "ആക്റ്റീവ്" ><span> 1 </span></li> 
  5.     ...
  6.   </ul>
  7. </div>

വലിപ്പങ്ങൾ

വലുതോ ചെറുതോ ആയ പേജിനേഷൻ ഇഷ്ടമാണോ? .pagination-large, .pagination-smallഅല്ലെങ്കിൽ .pagination-miniഅധിക വലുപ്പങ്ങൾക്കായി ചേർക്കുക .

  1. <div class = "pagination pagination-large" > 
  2.   <ul>
  3.     ...
  4.   </ul>
  5. </div>
  6. <div class = "pagination" > 
  7.   <ul>
  8.     ...
  9.   </ul>
  10. </div>
  11. <div class = "pagination pagination-small" > 
  12.   <ul>
  13.     ...
  14.   </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" > 
  17.   <ul>
  18.     ...
  19.   </ul>
  20. </div>

വിന്യാസം

പേജിനേഷൻ ലിങ്കുകളുടെ വിന്യാസം മാറ്റാൻ രണ്ട് ഓപ്ഷണൽ ക്ലാസുകളിൽ ഒന്ന് ചേർക്കുക: .pagination-centeredകൂടാതെ .pagination-right.

  1. <div class = "pagination pagination-centered" > 
  2.   ...
  3. </div>
  1. <div class = "pagination pagination-right" > 
  2.   ...
  3. </div>

പേജർ

ലൈറ്റ് മാർക്ക്അപ്പും ശൈലികളും ഉള്ള ലളിതമായ പേജിനേഷൻ നടപ്പിലാക്കലുകൾക്കായി വേഗത്തിലുള്ള മുമ്പത്തേതും അടുത്തതുമായ ലിങ്കുകൾ. ബ്ലോഗുകൾ അല്ലെങ്കിൽ മാഗസിനുകൾ പോലുള്ള ലളിതമായ സൈറ്റുകൾക്ക് ഇത് മികച്ചതാണ്.

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

സ്ഥിരസ്ഥിതിയായി, പേജർ ലിങ്കുകൾ കേന്ദ്രീകരിക്കുന്നു.

  1. <ul class = "പേജർ" > 
  2.   <li><a href = "#" > മുമ്പത്തേത് </a></li> 
  3.   <li><a href = "#" > അടുത്തത് </a></li> 
  4. </ul>

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

പകരമായി, നിങ്ങൾക്ക് ഓരോ ലിങ്കും വശങ്ങളിലേക്ക് വിന്യസിക്കാം:

  1. <ul class = "പേജർ" > 
  2.   <li class = "മുമ്പത്തെ" > 
  3.     <a href = "#" > ← പഴയത് </a> 
  4.   </li>
  5.   <li ക്ലാസ് = "അടുത്തത്" > 
  6.     <a href = "#" > പുതിയത് → </a> 
  7.   </li>
  8. </ul>

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

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

  1. <ul class = "പേജർ" > 
  2.   <li class = "മുമ്പത്തെ പ്രവർത്തനരഹിതമാക്കിയത്" > 
  3.     <a href = "#" > ← പഴയത് </a> 
  4.   </li>
  5.   ...
  6. </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>

എളുപ്പത്തിൽ തകരാൻ കഴിയുന്നത്

:emptyഎളുപ്പത്തിൽ നടപ്പിലാക്കുന്നതിന്, ഉള്ളടക്കമൊന്നും നിലവിലില്ലെങ്കിൽ ലേബലുകളും ബാഡ്ജുകളും (സിഎസ്എസ് സെലക്ടർ വഴി) കേവലം പൊളിക്കും .

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

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

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

ഹലോ വേൾഡ്!

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

കൂടുതലറിയുക

  1. <div class = "hero-unit" > 
  2.   <h1> തലക്കെട്ട് </h1>
  3.   <p> ടാഗ്‌ലൈൻ </p>
  4.   <p>
  5.     <a class = "btn btn-primary btn-large" > 
  6.       കൂടുതലറിയുക
  7.     </a>
  8.   </p>
  9. </div>

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

h1ഒരു പേജിലെ ഉള്ളടക്കത്തിന്റെ ഉചിതമായ ഇടം നൽകാനും സെഗ്‌മെന്റ് വിഭാഗങ്ങൾ നൽകാനുമുള്ള ലളിതമായ ഷെൽ . ഇതിന് h1ന്റെ ഡിഫോൾട്ടും smallഘടകവും മറ്റ് മിക്ക ഘടകങ്ങളും (അധിക ശൈലികളോടെ) ഉപയോഗിക്കാനാകും.

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

  1. <div class = "page-header" > 
  2.   <h1> ഉദാഹരണ പേജ് തലക്കെട്ട് <small> തലക്കെട്ടിനുള്ള ഉപവാചകം </small></h1>
  3. </div>

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

ഡിഫോൾട്ട് ലഘുചിത്രങ്ങൾ

ഡിഫോൾട്ടായി, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ലഘുചിത്രങ്ങൾ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നത് ഏറ്റവും കുറഞ്ഞ ആവശ്യമായ മാർക്ക്അപ്പ് ഉപയോഗിച്ച് ലിങ്ക് ചെയ്‌ത ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിനാണ്.

വളരെ ഇഷ്ടാനുസൃതമാക്കാവുന്ന

കുറച്ച് അധിക മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, ലഘുചിത്രങ്ങളിലേക്ക് തലക്കെട്ടുകൾ, ഖണ്ഡികകൾ അല്ലെങ്കിൽ ബട്ടണുകൾ പോലുള്ള ഏത് തരത്തിലുള്ള HTML ഉള്ളടക്കവും ചേർക്കാൻ സാധിക്കും.

  • 300x200

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

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

    ആക്ഷൻ ആക്ഷൻ

  • 300x200

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

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

    ആക്ഷൻ ആക്ഷൻ

  • 300x200

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

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

    ആക്ഷൻ ആക്ഷൻ

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

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

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

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

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

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

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

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

  1. <ul class = "thumbnails" > 
  2.   <li class = "span4" > 
  3.     <a href = "#" class = "thumbnail" >  
  4.       <img data-src = "holder.js/300x200" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

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

  1. <ul class = "thumbnails" > 
  2.   <li class = "span4" > 
  3.     <div class = "thumbnail" > 
  4.       <img data-src = "holder.js/300x200" alt = "" >  
  5.       <h3> ലഘുചിത്ര ലേബൽ </h3>
  6.       <p> ലഘുചിത്ര അടിക്കുറിപ്പ്... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

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

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

വിജയം, മുന്നറിയിപ്പ്, പിശക് സന്ദേശങ്ങൾ എന്നിവയ്ക്കുള്ള അലേർട്ട് ശൈലികൾ

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

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

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

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

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

  1. <a href = "#" class = "close" data-dismiss = "Alert" > × </a>

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

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

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

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

ഓപ്ഷനുകൾ

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

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

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

  1. <div class = "alert alert-block" > 
  2.   <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  3.   <h4> മുന്നറിയിപ്പ്! </h4>
  4.   സ്വയം പരിശോധിക്കുക, നിങ്ങളല്ല...
  5. </div>

സന്ദർഭോചിതമായ ഇതരമാർഗങ്ങൾ

അലേർട്ടിന്റെ അർത്ഥം മാറ്റാൻ ഓപ്ഷണൽ ക്ലാസുകൾ ചേർക്കുക.

പിശക് അല്ലെങ്കിൽ അപകടം

ഓ സ്നാപ്പ്! കുറച്ച് കാര്യങ്ങൾ മാറ്റി വീണ്ടും സമർപ്പിക്കാൻ ശ്രമിക്കുക. 
  1. <div class = "alert alert-error" > 
  2.   ...
  3. </div>

വിജയം

നന്നായി! ഈ പ്രധാനപ്പെട്ട മുന്നറിയിപ്പ് സന്ദേശം നിങ്ങൾ വിജയകരമായി വായിച്ചു. 
  1. <div class = "Alert alert-success" > 
  2.   ...
  3. </div>

വിവരങ്ങൾ

ഹെഡ്സ് അപ്പുകൾ! ഈ അലേർട്ടിന് നിങ്ങളുടെ ശ്രദ്ധ ആവശ്യമാണ്, എന്നാൽ ഇത് വളരെ പ്രധാനമല്ല. 
  1. <div class = "alert alert-info" > 
  2.   ...
  3. </div>

ലോഡുചെയ്യുന്നതിനോ റീഡയറക്‌ടുചെയ്യുന്നതിനോ പ്രവർത്തന നിലയ്ക്കോ പ്രോഗ്രസ് ബാറുകൾ

ഉദാഹരണങ്ങളും അടയാളപ്പെടുത്തലും

അടിസ്ഥാനം

ലംബമായ ഗ്രേഡിയന്റുള്ള ഡിഫോൾട്ട് പ്രോഗ്രസ് ബാർ.

  1. <div class = "progress" > 
  2.   <div class = "bar" style = " width : 60 %; " ></div>   
  3. </div>

വരയുള്ള

ഒരു വരയുള്ള പ്രഭാവം സൃഷ്ടിക്കാൻ ഒരു ഗ്രേഡിയന്റ് ഉപയോഗിക്കുന്നു. IE7-8-ൽ ലഭ്യമല്ല.

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

ആനിമേറ്റഡ്

വലത്തുനിന്ന് ഇടത്തോട്ട് വരകൾ ആനിമേറ്റ് ചെയ്യാൻ to .activeചേർക്കുക . .progress-stripedIE-യുടെ എല്ലാ പതിപ്പുകളിലും ലഭ്യമല്ല.

  1. <div class = "പുരോഗതി പുരോഗതി-വരയുള്ള സജീവം" > 
  2.   <div class = "bar" style = " width : 40 %; " ></div>   
  3. </div>

അടുക്കിവെച്ചിരിക്കുന്നു

ഒന്നിലധികം ബാറുകൾ അടുക്കി .progressവയ്ക്കാൻ വയ്ക്കുക.

  1. <div class = "progress" > 
  2.   <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  3.   <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  4.   <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
  5. </div>

ഓപ്ഷനുകൾ

അധിക നിറങ്ങൾ

പ്രോഗ്രസ് ബാറുകൾ സ്ഥിരമായ ശൈലികൾക്കായി ഒരേ ബട്ടണും അലേർട്ട് ക്ലാസുകളും ഉപയോഗിക്കുന്നു.

  1. <div class = "progress progress-info" > 
  2.   <div class = "bar" style = " width : 20 % " ></div>   
  3. </div>
  4. <div class = "പുരോഗതി പുരോഗതി-വിജയം" > 
  5.   <div class = "bar" style = " width : 40 % " ></div>   
  6. </div>
  7. <div class = "പുരോഗതി പുരോഗതി-മുന്നറിയിപ്പ്" > 
  8.   <div class = "bar" style = " width : 60 % " ></div>   
  9. </div>
  10. <div class = "progress progress-danger" > 
  11.   <div class = "bar" style = " width : 80 % " ></div>   
  12. </div>

വരയുള്ള ബാറുകൾ

സോളിഡ് വർണ്ണങ്ങൾക്ക് സമാനമായി, ഞങ്ങൾക്ക് വൈവിധ്യമാർന്ന വരകളുള്ള പ്രോഗ്രസ് ബാറുകൾ ഉണ്ട്.

  1. <div class = "progress progress-info progress-striped" > 
  2.   <div class = "bar" style = " width : 20 % " ></div>   
  3. </div>
  4. <div class = "progress progress-success progress-striped" > 
  5.   <div class = "bar" style = " width : 40 % " ></div>   
  6. </div>
  7. <div class = "പുരോഗതി പുരോഗതി-മുന്നറിയിപ്പ് പുരോഗതി-വരകൾ" > 
  8.   <div class = "bar" style = " width : 60 % " ></div>   
  9. </div>
  10. <div class = "progress progress-danger progress-striped" > 
  11.   <div class = "bar" style = " width : 80 % " ></div>   
  12. </div>

ബ്രൗസർ പിന്തുണ

പ്രോഗ്രസ് ബാറുകൾ അവയുടെ എല്ലാ ഇഫക്റ്റുകളും നേടുന്നതിന് CSS3 ഗ്രേഡിയന്റുകളും സംക്രമണങ്ങളും ആനിമേഷനുകളും ഉപയോഗിക്കുന്നു. IE7-9 അല്ലെങ്കിൽ Firefox-ന്റെ പഴയ പതിപ്പുകളിൽ ഈ സവിശേഷതകൾ പിന്തുണയ്ക്കുന്നില്ല.

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

മാധ്യമ വസ്തു

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

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

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

64x64

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

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

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

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

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

ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്. 
  1. <div class = "media" > 
  2.   <a class = "pull-left" href = "#" >  
  3.     <img class = "media-object" data-src = "holder.js/64x64" >  
  4.   </a>
  5.   <div class = "media-body" > 
  6.     <h4 class = "media-heading" > മീഡിയ തലക്കെട്ട് </h4> 
  7.     ...
  8.  
  9.     <!-- നെസ്റ്റഡ് മീഡിയ ഒബ്‌ജക്റ്റ് -->
  10.     <div class = "media" > 
  11.       ...
  12.     </div>
  13.   </div>
  14. </div>

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

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

  • 64x64

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

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

    64x64

    നെസ്റ്റഡ് മീഡിയ തലക്കെട്ട്

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

    നെസ്റ്റഡ് മീഡിയ തലക്കെട്ട്

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

    നെസ്റ്റഡ് മീഡിയ തലക്കെട്ട്

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

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

    ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. 
  1. <ul class = "media-list" > 
  2.   <li class = "media" > 
  3.     <a class = "pull-left" href = "#" >  
  4.       <img class = "media-object" data-src = "holder.js/64x64" >  
  5.     </a>
  6.     <div class = "media-body" > 
  7.       <h4 class = "media-heading" > മീഡിയ തലക്കെട്ട് </h4> 
  8.       ...
  9.  
  10.       <!-- നെസ്റ്റഡ് മീഡിയ ഒബ്‌ജക്റ്റ് -->
  11.       <div class = "media" > 
  12.         ...
  13.      </div>
  14.     </div>
  15.   </li>
  16. </ul>

വിവിധ ലൈറ്റ്വെയ്റ്റ് യൂട്ടിലിറ്റി ഘടകങ്ങൾ

കിണറുകൾ

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

നോക്കൂ, ഞാൻ കിണറ്റിലാണ്! 
  1. <div class = "well" > 
  2.   ...
  3. </div>

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

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

നോക്കൂ, ഞാൻ കിണറ്റിലാണ്! 
  1. <div class = "നന്നായി നന്നായി വലുത്" > 
  2.   ...
  3. </div>
നോക്കൂ, ഞാൻ കിണറ്റിലാണ്! 
  1. <div class = "നന്നായി-ചെറിയത്" > 
  2.   ...
  3. </div>

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

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

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

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

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

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

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

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

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

  1. ക്ലാസ് = "ഇടത്തേക്ക് വലിക്കുക"
  1. . വലിക്കുക - ഇടത്തേക്ക് {
  2.   ഫ്ലോട്ട് : ഇടത് ;
  3. }

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

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

  1. ക്ലാസ് = "വലത്തേക്ക് വലിക്കുക"
  1. . വലത്തേക്ക് വലിക്കുക { _
  2.   ഫ്ലോട്ട് : വലത് ;
  3. }

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

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

  1. ക്ലാസ് = "മ്യൂട്ട്"
  1. . നിശബ്ദമാക്കി {
  2.   നിറം : #999; 
  3. }

.clearfix

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

  1. ക്ലാസ് = "ക്ലിയർഫിക്സ്"
  1. . ക്ലിയർഫിക്സ് {
  2.   * സൂം : 1 ; 
  3.   &: മുമ്പ് ,
  4.   &: { ശേഷം
  5.     ഡിസ്പ്ലേ : പട്ടിക ;
  6.     ഉള്ളടക്കം : "" ; 
  7.   }
  8.   &: { ശേഷം
  9.     വ്യക്തം : രണ്ടും ;
  10.   }
  11. }