നാവിഗേഷൻ, അലേർട്ടുകൾ, പോപോവറുകൾ എന്നിവയും അതിലേറെയും നൽകുന്നതിന് ഡസൻ കണക്കിന് പുനരുപയോഗിക്കാവുന്ന ഘടകങ്ങൾ ബൂട്ട്സ്ട്രാപ്പിൽ നിർമ്മിച്ചിരിക്കുന്നു.
Rdio-യിൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട അൾട്രാ സിമ്പിൾ ആയതും ചുരുങ്ങിയ ശൈലിയിലുള്ളതുമായ പേജിനേഷൻ, ആപ്പുകൾക്കും തിരയൽ ഫലങ്ങൾക്കും മികച്ചതാണ്. വലിയ ബ്ലോക്ക് നഷ്ടപ്പെടാൻ പ്രയാസമാണ്, എളുപ്പത്തിൽ അളക്കാവുന്നതും വലിയ ക്ലിക്ക് ഏരിയകളും നൽകുന്നു.
ലിങ്കുകൾ ഇഷ്ടാനുസൃതമാക്കാവുന്നവയാണ് കൂടാതെ ശരിയായ ക്ലാസിൽ നിരവധി സാഹചര്യങ്ങളിൽ പ്രവർത്തിക്കുന്നു. .disabled
ക്ലിക്ക് ചെയ്യാത്ത ലിങ്കുകൾക്കും .active
നിലവിലെ പേജിനും.
പേജിനേഷൻ ലിങ്കുകളുടെ വിന്യാസം മാറ്റാൻ രണ്ട് ഓപ്ഷണൽ ക്ലാസുകളിൽ ഏതെങ്കിലും ചേർക്കുക: .pagination-centered
കൂടാതെ .pagination-right
.
ഡിഫോൾട്ട് പേജിനേഷൻ ഘടകം അയവുള്ളതും നിരവധി വ്യതിയാനങ്ങളിൽ പ്രവർത്തിക്കുന്നതുമാണ്.
ഒരു പേജിൽ പൊതിഞ്ഞ് <div>
, പേജിനേഷൻ വെറും ഒരു ആണ് <ul>
.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > മുമ്പത്തെ </a></li>
- <li class = "സജീവ" >
- <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>
ലൈറ്റ് മാർക്ക്അപ്പും ഇളം ശൈലികളും ഉള്ള ലളിതമായ പേജിനേഷൻ നടപ്പിലാക്കുന്നതിനുള്ള ലിങ്കുകളുടെ ഒരു കൂട്ടമാണ് പേജർ ഘടകം. ബ്ലോഗുകൾ അല്ലെങ്കിൽ മാഗസിനുകൾ പോലുള്ള ലളിതമായ സൈറ്റുകൾക്ക് ഇത് മികച്ചതാണ്.
സ്ഥിരസ്ഥിതിയായി, പേജർ ലിങ്കുകൾ കേന്ദ്രീകരിക്കുന്നു.
- <ul class = "പേജർ" >
- <li>
- <a href = "#" > മുമ്പത്തേത് </a>
- </li>
- <li>
- <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> |
നിങ്ങളുടെ സൈറ്റിലെ ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിന് ഹീറോ യൂണിറ്റ് എന്ന് വിളിക്കപ്പെടുന്ന ഭാരം കുറഞ്ഞതും വഴക്കമുള്ളതുമായ ഒരു ഘടകം ബൂട്ട്സ്ട്രാപ്പ് നൽകുന്നു. മാർക്കറ്റിംഗിലും ഉള്ളടക്കം കൂടുതലുള്ള സൈറ്റുകളിലും ഇത് നന്നായി പ്രവർത്തിക്കുന്നു.
നിങ്ങളുടെ ഉള്ളടക്കം div
ഇതുപോലെ പൊതിയുക:
- <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-haeder" >
- <h1> ഉദാഹരണ പേജ് തലക്കെട്ട് </h1>
- </div>
ഡിഫോൾട്ടായി, ബൂട്ട്സ്ട്രാപ്പിന്റെ ലഘുചിത്രങ്ങൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് ഏറ്റവും കുറഞ്ഞ ആവശ്യമായ മാർക്ക്അപ്പ് ഉപയോഗിച്ച് ലിങ്ക് ചെയ്ത ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിനാണ്.
കുറച്ച് അധിക മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, ലഘുചിത്രങ്ങളിലേക്ക് തലക്കെട്ടുകൾ, ഖണ്ഡികകൾ അല്ലെങ്കിൽ ബട്ടണുകൾ പോലുള്ള ഏത് തരത്തിലുള്ള HTML ഉള്ളടക്കവും ചേർക്കാൻ സാധിക്കും.
.media-grid
ഫോട്ടോകളുടെയോ വീഡിയോകളുടെയോ ഗ്രിഡുകൾ, ഇമേജ് തിരയൽ ഫലങ്ങൾ, റീട്ടെയിൽ ഉൽപ്പന്നങ്ങൾ, പോർട്ട്ഫോളിയോകൾ എന്നിവയ്ക്കും അതിലേറെ കാര്യങ്ങൾക്കും ലഘുചിത്രങ്ങൾ (മുമ്പ് v1.4 വരെ) മികച്ചതാണ്. അവ ലിങ്കുകളോ സ്റ്റാറ്റിക് ഉള്ളടക്കമോ ആകാം.
ലഘുചിത്ര മാർക്ക്അപ്പ് ലളിതമാണ്-എത്രയും ഘടകങ്ങൾ ul
ഉള്ളത് li
ആവശ്യമാണ്. ഇത് വളരെ ഫ്ലെക്സിബിൾ കൂടിയാണ്, നിങ്ങളുടെ ഉള്ളടക്കങ്ങൾ പൊതിയാൻ അൽപ്പം കൂടുതൽ മാർക്ക്അപ്പ് ഉള്ള ഏത് തരത്തിലുള്ള ഉള്ളടക്കത്തിനും ഇത് അനുവദിക്കുന്നു.
അവസാനമായി, ലഘുചിത്രത്തിന്റെ അളവുകൾ നിയന്ത്രിക്കുന്നതിന്, ലഘുചിത്ര ഘടകം നിലവിലുള്ള ഗ്രിഡ് സിസ്റ്റം ക്ലാസുകൾ ഉപയോഗിക്കുന്നു .span2
..span3
മുമ്പ് സൂചിപ്പിച്ചതുപോലെ, ലഘുചിത്രങ്ങൾക്ക് ആവശ്യമായ മാർക്ക്അപ്പ് ഭാരം കുറഞ്ഞതും നേരായതുമാണ്. ലിങ്ക് ചെയ്ത ചിത്രങ്ങൾക്കായുള്ള ഡിഫോൾട്ട് സജ്ജീകരണം ഇതാ :
- <ul class = "thumbnails" >
- <li class = "span3" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
ലഘുചിത്രങ്ങളിലെ ഇഷ്ടാനുസൃത HTML ഉള്ളടക്കത്തിന്, മാർക്ക്അപ്പ് ചെറുതായി മാറുന്നു. ബ്ലോക്ക് ലെവൽ ഉള്ളടക്കം എവിടെയും അനുവദിക്കുന്നതിന്, ഞങ്ങൾ ഇതുപോലെ സ്വാപ്പ് <a>
ചെയ്യുന്നു <div>
:
- <ul class = "thumbnails" >
- <li class = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> ലഘുചിത്ര ലേബൽ </h5>
- <p> ലഘുചിത്ര അടിക്കുറിപ്പ് ഇവിടെ തന്നെ... </p>
- </div>
- </li>
- ...
- </ul>
ബൂട്ട്സ്ട്രാപ്പ് 2 ഉപയോഗിച്ച്, ഞങ്ങൾ അടിസ്ഥാന ക്ലാസ് ലളിതമാക്കിയിരിക്കുന്നു: .alert
പകരം .alert-message
. ആവശ്യമായ ഏറ്റവും കുറഞ്ഞ മാർക്ക്അപ്പും ഞങ്ങൾ കുറച്ചിട്ടുണ്ട് <p>
- ഡിഫോൾട്ടായി ആവശ്യമില്ല, പുറം മാത്രം <div>
.
കുറഞ്ഞ കോഡുള്ള കൂടുതൽ മോടിയുള്ള ഘടകത്തിനായി, ബ്ലോക്ക് അലേർട്ടുകൾ, കൂടുതൽ പാഡിംഗും സാധാരണ കൂടുതൽ ടെക്സ്റ്റും വരുന്ന സന്ദേശങ്ങൾ എന്നിവയ്ക്കായുള്ള വ്യത്യസ്തമായ രൂപം ഞങ്ങൾ നീക്കം ചെയ്തു. ക്ലാസും മാറി .alert-block
.
അലേർട്ട് സന്ദേശങ്ങളെ പിന്തുണയ്ക്കുന്ന ഒരു മികച്ച jQuery പ്ലഗിനുമായി ബൂട്ട്സ്ട്രാപ്പ് വരുന്നു, അവ വേഗത്തിലും എളുപ്പത്തിലും നിരസിക്കുന്നു.
നിങ്ങളുടെ സന്ദേശവും ഓപ്ഷണൽ ക്ലോസ് ഐക്കണും ലളിതമായ ക്ലാസുള്ള ഒരു ഡിവിയിൽ പൊതിയുക.
- <div class = "Alert" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <strong> മുന്നറിയിപ്പ്! </strong> സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ലെന്ന് തോന്നുന്നു.
- </div>
രണ്ട് ഓപ്ഷണൽ ക്ലാസുകൾ ഉപയോഗിച്ച് സാധാരണ അലേർട്ട് സന്ദേശം എളുപ്പത്തിൽ വിപുലീകരിക്കുക: .alert-block
കൂടുതൽ പാഡിംഗിനും ടെക്സ്റ്റ് നിയന്ത്രണങ്ങൾക്കും .alert-heading
പൊരുത്തപ്പെടുന്ന തലക്കെട്ടിനും.
സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ല. Nulla vitae elit libero, a pharetra ague. പ്രെസെന്റ് കോമോഡോ കർസസ് മാഗ്ന, അല്ലെങ്കിൽ സ്കെലറിസ്ക് നിസ്ൽ കൺസെക്റ്റേറ്റർ തുടങ്ങിയവ.
- <div class = "alert alert-block" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <h4 class = "Alert-heading" > മുന്നറിയിപ്പ്! </h4>
- സ്വയം പരിശോധിക്കുക, നിങ്ങളല്ല...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "Alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
ലംബമായ ഗ്രേഡിയന്റുള്ള ഡിഫോൾട്ട് പ്രോഗ്രസ് ബാർ.
- <div class = "progress" >
- <div ക്ലാസ് = "ബാർ"
- ശൈലി = " വീതി : 60 %; " ></div>
- </div>
ഒരു വരയുള്ള പ്രഭാവം സൃഷ്ടിക്കാൻ ഒരു ഗ്രേഡിയന്റ് ഉപയോഗിക്കുന്നു.
- <div class = "പുരോഗതി പുരോഗതി-വിവരം
- പുരോഗതി വരയുള്ള" >
- <div ക്ലാസ് = "ബാർ"
- ശൈലി = " വീതി : 20 %; " ></div>
- </div>
വരയുള്ള ഉദാഹരണം എടുത്ത് അതിനെ ആനിമേറ്റ് ചെയ്യുന്നു.
- <div class = "പുരോഗതി പുരോഗതി-അപകടം
- പുരോഗതി-വരയുള്ള സജീവം" >
- <div ക്ലാസ് = "ബാർ"
- ശൈലി = " വീതി : 40 %; " ></div>
- </div>
പ്രോഗ്രസ് ബാറുകൾ സമാന സ്റ്റൈലിങ്ങിനായി ബട്ടണുകളും അലേർട്ടുകളും പോലെ ചില ക്ലാസ് പേരുകൾ ഉപയോഗിക്കുന്നു.
.progress-info
.progress-success
.progress-danger
പകരമായി, നിങ്ങൾക്ക് കുറച്ച് ഫയലുകൾ ഇഷ്ടാനുസൃതമാക്കാനും നിങ്ങളുടെ സ്വന്തം നിറങ്ങളും വലുപ്പങ്ങളും റോൾ ചെയ്യാനും കഴിയും.
പ്രോഗ്രസ് ബാറുകൾ CSS3 സംക്രമണങ്ങൾ ഉപയോഗിക്കുന്നു, അതിനാൽ നിങ്ങൾ javascript വഴി ചലനാത്മകമായി വീതി ക്രമീകരിക്കുകയാണെങ്കിൽ, അത് സുഗമമായി വലുപ്പം മാറ്റും.
നിങ്ങൾ .active
ക്ലാസ് ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ .progress-striped
പുരോഗതി ബാറുകൾ ഇടത്തുനിന്ന് വലത്തോട്ട് സ്ട്രൈപ്പുകൾ ആനിമേറ്റ് ചെയ്യും.
പ്രോഗ്രസ് ബാറുകൾ അവയുടെ എല്ലാ ഇഫക്റ്റുകളും നേടുന്നതിന് CSS3 ഗ്രേഡിയന്റുകളും സംക്രമണങ്ങളും ആനിമേഷനുകളും ഉപയോഗിക്കുന്നു. IE7-8 അല്ലെങ്കിൽ Firefox-ന്റെ പഴയ പതിപ്പുകളിൽ ഈ സവിശേഷതകൾ പിന്തുണയ്ക്കുന്നില്ല.
Opera ഇപ്പോൾ ആനിമേഷനുകളെ പിന്തുണയ്ക്കുന്നില്ല.
ഒരു മൂലകത്തിന് ഒരു ഇൻസെറ്റ് ഇഫക്റ്റ് നൽകുന്നതിന് കിണർ ഒരു ലളിതമായ ഇഫക്റ്റായി ഉപയോഗിക്കുക.
- <div class = "well" >
- ...
- </div>
മോഡലുകളും അലേർട്ടുകളും പോലുള്ള ഉള്ളടക്കം നിരസിക്കാൻ പൊതുവായ ക്ലോസ് ഐക്കൺ ഉപയോഗിക്കുക.
- <a class = "close" > × </a>