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

ഘടകങ്ങൾ

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

കൂടുതൽ ടൂൾബാർ പോലുള്ള പ്രവർത്തനത്തിനായി ബട്ടൺ ഗ്രൂപ്പുകൾ ചേരുക

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

ഒരു സംയുക്ത ഘടകമായി ഒന്നിലധികം ബട്ടണുകൾ ഒരുമിച്ച് ചേർക്കുന്നതിന് ബട്ടൺ ഗ്രൂപ്പുകൾ ഉപയോഗിക്കുക. ഒരു ശ്രേണി <a>അല്ലെങ്കിൽ <button>ഘടകങ്ങൾ ഉപയോഗിച്ച് അവ നിർമ്മിക്കുക.

മികച്ച രീതികൾ

ബട്ടൺ ഗ്രൂപ്പുകളും ടൂൾബാറുകളും ഉപയോഗിക്കുന്നതിന് ഇനിപ്പറയുന്ന മാർഗ്ഗനിർദ്ദേശങ്ങൾ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു:

  • ഒരൊറ്റ ബട്ടൺ ഗ്രൂപ്പിൽ എല്ലായ്പ്പോഴും ഒരേ ഘടകം ഉപയോഗിക്കുക, <a>അല്ലെങ്കിൽ <button>.
  • ഒരേ ബട്ടൺ ഗ്രൂപ്പിൽ വ്യത്യസ്ത നിറങ്ങളിലുള്ള ബട്ടണുകൾ മിക്സ് ചെയ്യരുത്.
  • ടെക്‌സ്‌റ്റിന് പുറമേ അല്ലെങ്കിൽ പകരം ഐക്കണുകൾ ഉപയോഗിക്കുക, എന്നാൽ ഉചിതമായിടത്ത് alt, ടൈറ്റിൽ ടെക്‌സ്‌റ്റ് എന്നിവ ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക.

ഡ്രോപ്പ്‌ഡൗണുകളുള്ള ബന്ധപ്പെട്ട ബട്ടൺ ഗ്രൂപ്പുകളെ (ചുവടെ കാണുക) വെവ്വേറെ വിളിക്കുകയും ഉദ്ദേശിച്ച സ്വഭാവം സൂചിപ്പിക്കാൻ എപ്പോഴും ഒരു ഡ്രോപ്പ്‌ഡൗൺ കാരറ്റ് ഉൾപ്പെടുത്തുകയും വേണം.

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

ആങ്കർ ടാഗ് ബട്ടണുകൾ ഉപയോഗിച്ച് നിർമ്മിച്ച ഒരു സ്റ്റാൻഡേർഡ് ബട്ടൺ ഗ്രൂപ്പിനായി HTML നോക്കുന്നത് എങ്ങനെയെന്ന് ഇതാ:

  1. <div class = "btn-group" > 
  2.   <button class = "btn" > 1 </button> 
  3.   <button class = "btn" > 2 </button> 
  4.   <button class = "btn" > 3 </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>

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

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

ജാവാസ്ക്രിപ്റ്റ് നേടുക »

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

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

ബട്ടൺ ഡ്രോപ്പ്ഡൗൺ മെനുകൾ സന്ദർഭോചിതമായ മെനുകൾ നൽകുന്നതിനായി ബട്ടൺ ഗ്രൂപ്പുകളിൽ നിർമ്മിച്ചിരിക്കുന്നു

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

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

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

ഉദാഹരണ മാർക്ക്അപ്പ്

ഒരു ബട്ടൺ ഗ്രൂപ്പിന് സമാനമായി, ഞങ്ങളുടെ മാർക്ക്അപ്പ് സാധാരണ ബട്ടൺ മാർക്ക്അപ്പ് ഉപയോഗിക്കുന്നു, എന്നാൽ ശൈലി പരിഷ്കരിക്കുന്നതിനും ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡ്രോപ്പ്‌ഡൗൺ jQuery പ്ലഗിൻ പിന്തുണയ്‌ക്കുന്നതിനുമായി ഒരുപിടി കൂട്ടിച്ചേർക്കലുകൾ.

  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.

ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമാണ്

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

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


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

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

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

വലിപ്പങ്ങൾ

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

  1. <div class = "btn-group" > 
  2.   ...
  3.   <ul class = "dropdown-menu pull-right" > 
  4.     <!-- ഡ്രോപ്പ്ഡൗൺ മെനു ലിങ്കുകൾ -->
  5.   </ul>
  6. </div>

ഉദാഹരണ മാർക്ക്അപ്പ്

ഒരു പ്രത്യേക ഡ്രോപ്പ്ഡൗൺ ട്രിഗറായി പ്രവർത്തിക്കുന്ന രണ്ടാമത്തെ ബട്ടൺ പ്രവർത്തനം നൽകുന്നതിന് ഞങ്ങൾ സാധാരണ ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകളിൽ വിപുലീകരിക്കുന്നു.

  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>

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

യുടെ ഉടനടി രക്ഷിതാവിന് ഒരൊറ്റ ക്ലാസ് ചേർത്ത് ഡ്രോപ്പ്ഡൗൺ മെനുകൾ താഴെ നിന്ന് മുകളിലേക്ക് മാറ്റാനും കഴിയും .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-യിൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട അൾട്രാ സിമ്പിൾ ആയതും ചുരുങ്ങിയ ശൈലിയിലുള്ളതുമായ പേജിനേഷൻ, ആപ്പുകൾക്കും തിരയൽ ഫലങ്ങൾക്കും മികച്ചതാണ്. വലിയ ബ്ലോക്ക് നഷ്‌ടപ്പെടാൻ പ്രയാസമാണ്, എളുപ്പത്തിൽ അളക്കാവുന്നതും വലിയ ക്ലിക്ക് ഏരിയകളും നൽകുന്നു.

സ്റ്റേറ്റ്ഫുൾ പേജ് ലിങ്കുകൾ

ലിങ്കുകൾ ഇഷ്‌ടാനുസൃതമാക്കാവുന്നവയാണ് കൂടാതെ ശരിയായ ക്ലാസിൽ നിരവധി സാഹചര്യങ്ങളിൽ പ്രവർത്തിക്കുന്നു. .disabledക്ലിക്ക് ചെയ്യാത്ത ലിങ്കുകൾക്കും .activeനിലവിലെ പേജിനും.

വഴക്കമുള്ള വിന്യാസം

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

ഉദാഹരണങ്ങൾ

ഡിഫോൾട്ട് പേജിനേഷൻ ഘടകം അയവുള്ളതും നിരവധി വ്യതിയാനങ്ങളിൽ പ്രവർത്തിക്കുന്നതുമാണ്.

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

ഒരു പേജിൽ പൊതിഞ്ഞ് <div>, പേജിനേഷൻ വെറും ഒരു ആണ് <ul>.

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

വേഗത്തിലുള്ള മുമ്പത്തേതും അടുത്തതുമായ ലിങ്കുകൾക്കായി പേജർ

പേജറിനെ കുറിച്ച്

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

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

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

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

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

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

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

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

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

ബാഡ്ജുകളുടെ സൂചകങ്ങളും വായിക്കാത്ത എണ്ണവും

കുറിച്ച്

ബാഡ്ജുകൾ ഒരു സൂചകമോ ഏതെങ്കിലും തരത്തിലുള്ള എണ്ണമോ പ്രദർശിപ്പിക്കുന്നതിനുള്ള ചെറുതും ലളിതവുമായ ഘടകങ്ങളാണ്. Mail.app പോലുള്ള ഇമെയിൽ ക്ലയന്റുകളിലോ പുഷ് അറിയിപ്പുകൾക്കായുള്ള മൊബൈൽ ആപ്പുകളിലോ അവ സാധാരണയായി കാണപ്പെടുന്നു.

ലഭ്യമായ ക്ലാസുകൾ

പേര് ഉദാഹരണം മാർക്ക്അപ്പ്
സ്ഥിരസ്ഥിതി 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ഇതുപോലെ പൊതിയുക:

  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> ഉദാഹരണ പേജ് തലക്കെട്ട് </h1>
  3. </div>

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

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

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

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

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

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

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

    ആക്ഷൻ ആക്ഷൻ

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

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

    ആക്ഷൻ ആക്ഷൻ

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

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

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

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

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

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

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

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

  1. <ul class = "thumbnails" > 
  2.   <li class = "span3" > 
  3.     <a href = "#" class = "thumbnail" >  
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

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

  1. <ul class = "thumbnails" > 
  2.   <li class = "span3" > 
  3.     <div class = "thumbnail" > 
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.       <h5> ലഘുചിത്ര ലേബൽ </h5>
  6.       <p> ലഘുചിത്ര അടിക്കുറിപ്പ് ഇവിടെ തന്നെ... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

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

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

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

ഭാരം കുറഞ്ഞ ഡിഫോൾട്ടുകൾ

അടിസ്ഥാന ക്ലാസ് മാറ്റിയെഴുതി

ബൂട്ട്സ്ട്രാപ്പ് 2 ഉപയോഗിച്ച്, ഞങ്ങൾ അടിസ്ഥാന ക്ലാസ് ലളിതമാക്കിയിരിക്കുന്നു: .alertപകരം .alert-message. ആവശ്യമായ ഏറ്റവും കുറഞ്ഞ മാർക്ക്അപ്പും ഞങ്ങൾ കുറച്ചിട്ടുണ്ട് <p>- ഡിഫോൾട്ടായി ആവശ്യമില്ല, പുറം മാത്രം <div>.

ഒറ്റ അലേർട്ട് സന്ദേശം

കുറഞ്ഞ കോഡുള്ള കൂടുതൽ മോടിയുള്ള ഘടകത്തിനായി, ബ്ലോക്ക് അലേർട്ടുകൾ, കൂടുതൽ പാഡിംഗും സാധാരണ കൂടുതൽ ടെക്‌സ്‌റ്റും വരുന്ന സന്ദേശങ്ങൾ എന്നിവയ്‌ക്കായുള്ള വ്യത്യസ്തമായ രൂപം ഞങ്ങൾ നീക്കം ചെയ്‌തു. ക്ലാസും മാറി .alert-block.

ജാവാസ്ക്രിപ്റ്റിനൊപ്പം നന്നായി പോകുന്നു

അലേർട്ട് സന്ദേശങ്ങളെ പിന്തുണയ്‌ക്കുന്ന ഒരു മികച്ച jQuery പ്ലഗിനുമായി ബൂട്ട്‌സ്‌ട്രാപ്പ് വരുന്നു, അവ വേഗത്തിലും എളുപ്പത്തിലും നിരസിക്കുന്നു.

പ്ലഗിൻ നേടുക »

ഉദാഹരണ അലേർട്ടുകൾ

നിങ്ങളുടെ സന്ദേശവും ഓപ്‌ഷണൽ ക്ലോസ് ഐക്കണും ലളിതമായ ക്ലാസുള്ള ഒരു ഡിവിയിൽ പൊതിയുക.

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

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

രണ്ട് ഓപ്‌ഷണൽ ക്ലാസുകൾ ഉപയോഗിച്ച് സ്റ്റാൻഡേർഡ് അലേർട്ട് സന്ദേശം എളുപ്പത്തിൽ വിപുലീകരിക്കുക: .alert-blockകൂടുതൽ പാഡിംഗിനും ടെക്‌സ്‌റ്റ് നിയന്ത്രണങ്ങൾക്കും .alert-headingപൊരുത്തപ്പെടുന്ന തലക്കെട്ടിനും.

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

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

  1. <div class = "alert alert-block" > 
  2.   <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  3.   <h4 class = "Alert-heading" > മുന്നറിയിപ്പ്! </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 ക്ലാസ് = "ബാർ" 
  3.        ശൈലി = " വീതി : 60 %; " ></div> 
  4. </div>

വരയുള്ള

ഒരു വരയുള്ള പ്രഭാവം സൃഷ്ടിക്കാൻ ഒരു ഗ്രേഡിയന്റ് ഉപയോഗിക്കുന്നു (IE ഇല്ല).

  1. <div class = "progress progress-striped" > 
  2.   <div ക്ലാസ് = "ബാർ" 
  3.        ശൈലി = " വീതി : 20 %; " ></div> 
  4. </div>

ആനിമേറ്റഡ്

വരയുള്ള ഉദാഹരണം എടുത്ത് അതിനെ ആനിമേറ്റ് ചെയ്യുന്നു (IE ഇല്ല).

  1. <div class = "പുരോഗതി പുരോഗതി-വരയുള്ള 
  2.      സജീവം" >
  3.   <div ക്ലാസ് = "ബാർ" 
  4.        ശൈലി = " വീതി : 40 %; " ></div> 
  5. </div>

ഓപ്‌ഷനുകളും ബ്രൗസർ പിന്തുണയും

അധിക നിറങ്ങൾ

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

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

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

പെരുമാറ്റം

പ്രോഗ്രസ് ബാറുകൾ CSS3 സംക്രമണങ്ങൾ ഉപയോഗിക്കുന്നു, അതിനാൽ നിങ്ങൾ javascript വഴി ചലനാത്മകമായി വീതി ക്രമീകരിക്കുകയാണെങ്കിൽ, അത് സുഗമമായി വലുപ്പം മാറ്റും.

നിങ്ങൾ .activeക്ലാസ് ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ .progress-stripedപുരോഗതി ബാറുകൾ ഇടത്തുനിന്ന് വലത്തോട്ട് സ്ട്രൈപ്പുകൾ ആനിമേറ്റ് ചെയ്യും.

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

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

Opera, IE എന്നിവ ഇപ്പോൾ ആനിമേഷനുകളെ പിന്തുണയ്ക്കുന്നില്ല.

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

കിണറുകൾ

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

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

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

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

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

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

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