ഘടകങ്ങൾ
ഐക്കണോഗ്രഫി, ഡ്രോപ്പ്ഡൗണുകൾ, ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, നാവിഗേഷൻ, അലേർട്ടുകൾ എന്നിവയും അതിലേറെയും നൽകുന്നതിനായി നിർമ്മിച്ച ഒരു ഡസനിലധികം വീണ്ടും ഉപയോഗിക്കാവുന്ന ഘടകങ്ങൾ.
ഐക്കണോഗ്രഫി, ഡ്രോപ്പ്ഡൗണുകൾ, ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, നാവിഗേഷൻ, അലേർട്ടുകൾ എന്നിവയും അതിലേറെയും നൽകുന്നതിനായി നിർമ്മിച്ച ഒരു ഡസനിലധികം വീണ്ടും ഉപയോഗിക്കാവുന്ന ഘടകങ്ങൾ.
Glyphicon Halflings സെറ്റിൽ നിന്ന് ഫോണ്ട് ഫോർമാറ്റിൽ 250-ലധികം ഗ്ലിഫുകൾ ഉൾപ്പെടുന്നു. Glyphicons Halflings സാധാരണയായി സൗജന്യമായി ലഭ്യമല്ല, എന്നാൽ അവയുടെ സ്രഷ്ടാവ് അവ ബൂട്ട്സ്ട്രാപ്പിനായി സൗജന്യമായി ലഭ്യമാക്കിയിട്ടുണ്ട്. നന്ദി എന്ന നിലയിൽ, സാധ്യമാകുമ്പോഴെല്ലാം Glyphicons- ലേക്ക് തിരികെ ഒരു ലിങ്ക് ഉൾപ്പെടുത്തണമെന്ന് ഞങ്ങൾ ആവശ്യപ്പെടുന്നു.
പ്രകടന കാരണങ്ങളാൽ, എല്ലാ ഐക്കണുകൾക്കും അടിസ്ഥാന ക്ലാസും വ്യക്തിഗത ഐക്കൺ ക്ലാസും ആവശ്യമാണ്. ഉപയോഗിക്കുന്നതിന്, ഇനിപ്പറയുന്ന കോഡ് എവിടെയും സ്ഥാപിക്കുക. ശരിയായ പാഡിംഗിനായി ഐക്കണിനും വാചകത്തിനും ഇടയിൽ ഒരു ഇടം നൽകുന്നത് ഉറപ്പാക്കുക.
ഐക്കൺ ക്ലാസുകൾ മറ്റ് ഘടകങ്ങളുമായി നേരിട്ട് സംയോജിപ്പിക്കാൻ കഴിയില്ല. ഒരേ ഘടകത്തിൽ മറ്റ് ക്ലാസുകൾക്കൊപ്പം അവ ഉപയോഗിക്കാൻ പാടില്ല. പകരം, ഒരു നെസ്റ്റഡ് ചേർക്കുകയും <span>
ഐക്കൺ ക്ലാസുകൾ എന്നതിലേക്ക് പ്രയോഗിക്കുകയും ചെയ്യുക <span>
.
ടെക്സ്റ്റ് ഉള്ളടക്കം ഇല്ലാത്തതും ചൈൽഡ് എലമെന്റുകൾ ഇല്ലാത്തതുമായ ഘടകങ്ങളിൽ മാത്രമേ ഐക്കൺ ക്ലാസുകൾ ഉപയോഗിക്കാവൂ.
../fonts/
കംപൈൽ ചെയ്ത CSS ഫയലുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ, ഐക്കൺ ഫോണ്ട് ഫയലുകൾ ഡയറക്ടറിയിൽ സ്ഥിതിചെയ്യുമെന്ന് ബൂട്ട്സ്ട്രാപ്പ് അനുമാനിക്കുന്നു . ആ ഫോണ്ട് ഫയലുകൾ നീക്കുകയോ പുനർനാമകരണം ചെയ്യുകയോ ചെയ്യുക എന്നതിനർത്ഥം CSS മൂന്ന് വഴികളിൽ ഒന്ന് അപ്ഡേറ്റ് ചെയ്യുക എന്നാണ്:
@icon-font-path
കൂടാതെ/അല്ലെങ്കിൽ വേരിയബിളുകൾ മാറ്റുക .@icon-font-name
url()
സമാഹരിച്ച CSS ലെ പാതകൾ മാറ്റുക .നിങ്ങളുടെ നിർദ്ദിഷ്ട വികസന സജ്ജീകരണത്തിന് ഏറ്റവും അനുയോജ്യമായ ഏത് ഓപ്ഷനും ഉപയോഗിക്കുക.
അസിസ്റ്റീവ് ടെക്നോളജികളുടെ ആധുനിക പതിപ്പുകൾ CSS സൃഷ്ടിച്ച ഉള്ളടക്കവും പ്രത്യേക യൂണികോഡ് പ്രതീകങ്ങളും പ്രഖ്യാപിക്കും. സ്ക്രീൻ റീഡറുകളിൽ (പ്രത്യേകിച്ച് ഐക്കണുകൾ പൂർണ്ണമായും അലങ്കാരത്തിനായി ഉപയോഗിക്കുമ്പോൾ) ഉദ്ദേശിക്കാത്തതും ആശയക്കുഴപ്പമുണ്ടാക്കുന്നതുമായ ഔട്ട്പുട്ട് ഒഴിവാക്കാൻ, ഞങ്ങൾ അവയെ aria-hidden="true"
ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് മറയ്ക്കുന്നു.
നിങ്ങൾ അർത്ഥം അറിയിക്കാൻ ഒരു ഐക്കൺ ഉപയോഗിക്കുകയാണെങ്കിൽ (അലങ്കാര ഘടകമെന്ന നിലയിൽ മാത്രമല്ല), ഈ അർത്ഥം സഹായ സാങ്കേതികവിദ്യകളിലേക്കും എത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക - ഉദാഹരണത്തിന്, .sr-only
ക്ലാസിനൊപ്പം ദൃശ്യപരമായി മറച്ചിരിക്കുന്ന അധിക ഉള്ളടക്കം ഉൾപ്പെടുത്തുക.
മറ്റ് ടെക്സ്റ്റ് ഇല്ലാതെയാണ് നിങ്ങൾ നിയന്ത്രണങ്ങൾ സൃഷ്ടിക്കുന്നതെങ്കിൽ ( <button>
ഒരു ഐക്കൺ മാത്രം അടങ്ങിയിരിക്കുന്നതുപോലെ), നിയന്ത്രണത്തിന്റെ ഉദ്ദേശ്യം തിരിച്ചറിയാൻ നിങ്ങൾ എല്ലായ്പ്പോഴും ഇതര ഉള്ളടക്കം നൽകണം, അതുവഴി സഹായകമായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് ഇത് അർത്ഥമാക്കും. ഈ സാഹചര്യത്തിൽ, നിങ്ങൾക്ക് aria-label
നിയന്ത്രണത്തിൽ തന്നെ ഒരു ആട്രിബ്യൂട്ട് ചേർക്കാം.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
ഒരു ടൂൾബാർ, നാവിഗേഷൻ അല്ലെങ്കിൽ മുൻകൂട്ടി തയ്യാറാക്കിയ ഫോം ഇൻപുട്ടുകൾക്കായി ബട്ടണുകൾ, ബട്ടൺ ഗ്രൂപ്പുകൾ എന്നിവയിൽ അവ ഉപയോഗിക്കുക.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
ഇത് ഒരു പിശക് സന്ദേശമാണെന്ന് അറിയിക്കാൻ ഒരു അലേർട്ടിൽ ഉപയോഗിച്ചിരിക്കുന്ന ഒരു ഐക്കൺ .sr-only
, സഹായ സാങ്കേതിക വിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് ഈ സൂചന നൽകുന്നതിനുള്ള അധിക വാചകം.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
ലിങ്കുകളുടെ ലിസ്റ്റുകൾ പ്രദർശിപ്പിക്കുന്നതിനുള്ള ടോഗിൾ ചെയ്യാവുന്ന, സന്ദർഭോചിതമായ മെനു. ഡ്രോപ്പ്ഡൗൺ ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിൻ ഉപയോഗിച്ച് സംവേദനാത്മകമാക്കി .
ഡ്രോപ്പ്ഡൗണിന്റെ ട്രിഗറും ഡ്രോപ്പ്ഡൗൺ മെനുവും .dropdown
അല്ലെങ്കിൽ പ്രഖ്യാപിക്കുന്ന മറ്റൊരു ഘടകം പൊതിയുക position: relative;
. തുടർന്ന് മെനുവിന്റെ HTML ചേർക്കുക.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ഡ്രോപ്പ്ഡൗൺ മെനുകൾ പാരന്റിലേക്ക് ചേർത്തുകൊണ്ട് മുകളിലേക്ക് (താഴേയ്ക്ക് പകരം) വികസിപ്പിക്കാൻ മാറ്റാം .dropup
.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ഡിഫോൾട്ടായി, ഒരു ഡ്രോപ്പ്ഡൗൺ മെനു സ്വയമേവ 100% അതിന്റെ രക്ഷിതാവിന്റെ മുകളിൽ നിന്നും ഇടത് വശത്തും സ്ഥാനം പിടിക്കുന്നു. ഡ്രോപ്പ്ഡൗൺ മെനു വലത്തേക്ക് വിന്യസിക്കുന്നതിന് .dropdown-menu-right
a ലേക്ക് ചേർക്കുക ..dropdown-menu
ഡോക്യുമെന്റിന്റെ സാധാരണ ഒഴുക്കിനുള്ളിൽ CSS വഴി ഡ്രോപ്പ്ഡൗണുകൾ സ്വയമേവ സ്ഥാനം പിടിക്കുന്നു. ഇതിനർത്ഥം, ചില overflow
പ്രോപ്പർട്ടികൾ ഉള്ള രക്ഷിതാക്കൾ ഡ്രോപ്പ്ഡൗണുകൾ ക്രോപ്പ് ചെയ്തേക്കാം അല്ലെങ്കിൽ വ്യൂപോർട്ടിന്റെ പരിധിക്ക് പുറത്ത് ദൃശ്യമാകാം. ഈ പ്രശ്നങ്ങൾ ഉണ്ടാകുമ്പോൾ അവ സ്വയം പരിഹരിക്കുക.
.pull-right
വിന്യാസം.pull-right
v3.1.0 മുതൽ, ഡ്രോപ്പ്ഡൗൺ മെനുകളിൽ ഞങ്ങൾ ഒഴിവാക്കിയിരിക്കുന്നു . ഒരു മെനു വലത് വിന്യസിക്കാൻ, ഉപയോഗിക്കുക .dropdown-menu-right
. മെനു സ്വയമേവ വിന്യസിക്കാൻ navbar-ലെ വലത് വിന്യസിച്ച nav ഘടകങ്ങൾ ഈ ക്ലാസിന്റെ മിക്സിൻ പതിപ്പ് ഉപയോഗിക്കുന്നു. അതിനെ മറികടക്കാൻ, ഉപയോഗിക്കുക .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
ഏതെങ്കിലും ഡ്രോപ്പ്ഡൗൺ മെനുവിലെ പ്രവർത്തനങ്ങളുടെ വിഭാഗങ്ങൾ ലേബൽ ചെയ്യുന്നതിന് ഒരു തലക്കെട്ട് ചേർക്കുക.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
ഒരു ഡ്രോപ്പ്ഡൗൺ മെനുവിലെ ലിങ്കുകളുടെ വേറിട്ട ശ്രേണിയിലേക്ക് ഒരു ഡിവൈഡർ ചേർക്കുക.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
ലിങ്ക് പ്രവർത്തനരഹിതമാക്കാൻ ഡ്രോപ്പ്ഡൗണിലെ a-ലേക്ക് .disabled
ചേർക്കുക .<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
ബട്ടൺ ഗ്രൂപ്പിനൊപ്പം ഒരൊറ്റ വരിയിൽ ബട്ടണുകളുടെ ഒരു ശ്രേണി കൂട്ടുക. ഞങ്ങളുടെ ബട്ടണുകൾ പ്ലഗിൻ ഉപയോഗിച്ച് ഓപ്ഷണൽ JavaScript റേഡിയോയും ചെക്ക്ബോക്സ് ശൈലി പെരുമാറ്റവും ചേർക്കുക .
ഒരു എന്നതിനുള്ളിലെ ഘടകങ്ങളിൽ ടൂൾടിപ്പുകളോ പോപ്പോവറോ ഉപയോഗിക്കുമ്പോൾ , അനാവശ്യ പാർശ്വഫലങ്ങൾ ഒഴിവാക്കാനുള്ള .btn-group
ഓപ്ഷൻ നിങ്ങൾ വ്യക്തമാക്കേണ്ടതുണ്ട് container: 'body'
(ഉദാഹരണത്തിന്, മൂലകം വിശാലമാകുന്നത് കൂടാതെ/അല്ലെങ്കിൽ ടൂൾടിപ്പ് അല്ലെങ്കി��� പോപോവർ പ്രവർത്തനക്ഷമമാകുമ്പോൾ അതിന്റെ വൃത്താകൃതിയിലുള്ള മൂലകൾ നഷ്ടപ്പെടുന്നത് പോലെ).
role
ഒരു ലേബൽ നൽകുകസ്ക്രീൻ റീഡറുകൾ പോലെയുള്ള സഹായ സാങ്കേതിക വിദ്യകൾക്ക്, ബട്ടണുകളുടെ ഒരു ശ്രേണി ഗ്രൂപ്പുചെയ്തിരിക്കുന്നുവെന്ന് അറിയിക്കുന്നതിന്, ഉചിതമായ ഒരു role
ആട്രിബ്യൂട്ട് നൽകേണ്ടതുണ്ട്. ബട്ടൺ ഗ്രൂപ്പുകൾക്ക്, ഇത് role="group"
, ടൂൾബാറുകൾക്ക് ഒരു role="toolbar"
.
ഒരൊറ്റ നിയന്ത്രണം (ഉദാഹരണത്തിന് ഘടകങ്ങളുള്ള നീതീകരിക്കപ്പെട്ട ബട്ടൺ ഗ്രൂപ്പുകൾ ) <button>
അല്ലെങ്കിൽ ഒരു ഡ്രോപ്പ്ഡൗൺ അടങ്ങിയിരിക്കുന്ന ഗ്രൂപ്പുകളാണ് ഒരു അപവാദം .
കൂടാതെ, ഗ്രൂപ്പുകൾക്കും ടൂൾബാറുകൾക്കും വ്യക്തമായ ഒരു ലേബൽ നൽകണം, കാരണം ശരിയായ role
ആട്രിബ്യൂട്ട് ഉണ്ടായിരുന്നിട്ടും മിക്ക സഹായ സാങ്കേതിക വിദ്യകളും അവ പ്രഖ്യാപിക്കില്ല. ഇവിടെ നൽകിയിരിക്കുന്ന ഉദാഹരണങ്ങളിൽ, ഞങ്ങൾ ഉപയോഗിക്കുന്നു aria-label
, എന്നാൽ ഇതരമാർഗങ്ങളും aria-labelledby
ഉപയോഗിക്കാം.
.btn
ഇൻ ഉപയോഗിച്ച് ബട്ടണുകളുടെ ഒരു ശ്രേണി പൊതിയുക .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
കൂടുതൽ സങ്കീർണ്ണമായ ഘടകങ്ങൾക്കായി സെറ്റുകളെ സംയോജിപ്പിക്കുക <div class="btn-group">
.<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
ഒരു ഗ്രൂപ്പിലെ എല്ലാ ബട്ടണുകളിലേക്കും ബട്ടൺ സൈസിംഗ് ക്ലാസുകൾ പ്രയോഗിക്കുന്നതിനുപകരം, ഒന്നിലധികം ഗ്രൂപ്പുകളെ കൂടുകൂട്ടുമ്പോൾ ഉൾപ്പെടെ .btn-group-*
ഓരോന്നിലേക്കും ചേർക്കുക..btn-group
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
ഡ്രോപ്പ്ഡൗൺ മെനുകൾ ഒരു കൂട്ടം ബട്ടണുകൾ ചേർത്ത് വേണമെങ്കിൽ .btn-group
മറ്റൊന്നിനുള്ളിൽ വയ്ക്കുക ..btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
ഒരു കൂട്ടം ബട്ടണുകൾ തിരശ്ചീനമായി അടുക്കുന്നതിനുപകരം ലംബമായി അടുക്കിയിരിക്കുന്നതായി ദൃശ്യമാക്കുക. സ്പ്ലിറ്റ് ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾ ഇവിടെ പിന്തുണയ്ക്കുന്നില്ല.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
ഒരു കൂട്ടം ബട്ടണുകൾ അതിന്റെ രക്ഷകർത്താവിന്റെ മുഴുവൻ വീതിയിലും വ്യാപിക്കുന്നതിന് തുല്യ വലുപ്പത്തിൽ നീട്ടുക. ബട്ടൺ ഗ്രൂപ്പിനുള്ളിലെ ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകളിലും പ്രവർത്തിക്കുന്നു.
ബട്ടണുകൾ (അതായത് ) ന്യായീകരിക്കാൻ ഉപയോഗിക്കുന്ന നിർദ്ദിഷ്ട HTML, CSS എന്നിവ കാരണം display: table-cell
അവയ്ക്കിടയിലുള്ള ബോർഡറുകൾ ഇരട്ടിയായി. സാധാരണ ബട്ടൺ ഗ്രൂപ്പുകളിൽ, margin-left: -1px
ബോർഡറുകൾ നീക്കം ചെയ്യുന്നതിനുപകരം അടുക്കിവയ്ക്കാൻ ഉപയോഗിക്കുന്നു. എന്നിരുന്നാലും, margin
കൂടെ പ്രവർത്തിക്കുന്നില്ല display: table-cell
. തൽഫലമായി, ബൂട്ട്സ്ട്രാപ്പിലേക്കുള്ള നിങ്ങളുടെ ഇഷ്ടാനുസൃതമാക്കലുകളെ ആശ്രയിച്ച്, ബോർഡറുകൾ നീക്കംചെയ്യാനോ വീണ്ടും കളർ ചെയ്യാനോ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം.
ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8, അത് ഓണായാലും ഘടകങ്ങളായാലും, ഒരു നീതീകരിക്കപ്പെട്ട ബട്ടൺ ഗ്രൂപ്പിലെ ബട്ടണുകളിൽ ബോർഡറുകൾ റെൻഡർ <a>
ചെയ്യുന്നില്ല <button>
. അതിനെ മറികടക്കാൻ, ഓരോ ബട്ടണും മറ്റൊന്നിൽ പൊതിയുക .btn-group
.
കൂടുതൽ വിവരങ്ങൾക്ക് #12476 കാണുക .
<a>
ഘടകങ്ങൾ ഉപയോഗിച്ച്.btn
കളുടെ ഒരു പരമ്പര പൊതിയുക .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
<a>
മൂലകങ്ങൾ ബട്ടണുകളായി പ്രവർത്തിക്കാൻ ഉപയോഗിക്കുന്നുവെങ്കിൽ - മറ്റൊരു പ്രമാണത്തിലേക്കോ നിലവിലെ പേജിലെ വിഭാഗത്തിലേക്കോ നാവിഗേറ്റ് ചെയ്യുന്നതിനുപകരം, ഇൻ-പേജ് പ്രവർത്തനം പ്രവർത്തനക്ഷമമാക്കുന്നു role="button"
.
<button>
ഘടകങ്ങൾ ഉപയോഗിച്ച്<button>
ഘടകങ്ങൾക്കൊപ്പം നീതീകരിക്കപ്പെട്ട ബട്ടൺ ഗ്രൂപ്പുകൾ ഉപയോഗിക്കുന്നതിന് , നിങ്ങൾ ഓരോ ബട്ടണും ഒരു ബട്ടൺ ഗ്രൂപ്പിൽ പൊതിയണം . ഘടകങ്ങളുടെ ന്യായീകരണത്തിനായി മിക്ക ബ്രൗസറുകളും ഞങ്ങളുടെ CSS ശരിയായി പ്രയോഗിക്കുന്നില്ല <button>
, പക്ഷേ ഞങ്ങൾ ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകളെ പിന്തുണയ്ക്കുന്നതിനാൽ, ഞങ്ങൾക്ക് അതിനായി പ്രവർത്തിക്കാനാകും.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
ഒരു ഡ്രോപ്പ്ഡൗൺ മെനു പ്രവർത്തനക്ഷമമാക്കാൻ ഏതെങ്കിലും ബട്ടൺ ഉപയോഗിക്കുക, അത് എയിൽ സ്ഥാപിച്ച് .btn-group
ശരിയായ മെനു മാർക്ക്അപ്പ് നൽകൂ.
ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾക്ക് നിങ്ങളുടെ ബൂട്ട്സ്ട്രാപ്പിന്റെ പതിപ്പിൽ ഡ്രോപ്പ്ഡൗൺ പ്ലഗിൻ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്.
ചില അടിസ്ഥാന മാർക്ക്അപ്പ് മാറ്റങ്ങൾ ഉപയോഗിച്ച് ഒരു ബട്ടണിനെ ഡ്രോപ്പ്ഡൗൺ ടോഗിളാക്കി മാറ്റുക.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
അതുപോലെ, ഒരേ മാർക്ക്അപ്പ് മാറ്റങ്ങളോടെ, ഒരു പ്രത്യേക ബട്ടൺ ഉപയോഗിച്ച് മാത്രം സ്പ്ലിറ്റ് ബട്ടൺ ഡ്രോപ്പ്ഡൗൺ സൃഷ്ടിക്കുക.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
എല്ലാ വലുപ്പത്തിലുമുള്ള ബട്ടണുകൾക്കൊപ്പം ബട്ടൺ ഡ്രോപ്പ്ഡൗൺ പ്രവർത്തിക്കുന്നു.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
പാരന്റിലേക്ക് ചേർത്തുകൊണ്ട് ഘടകങ്ങൾക്ക് മുകളിലുള്ള ഡ്രോപ്പ്ഡൗൺ മെനുകൾ ട്രിഗർ .dropup
ചെയ്യുക.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
ഏതെങ്കിലും ടെക്സ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ളതിന് മുമ്പോ ശേഷമോ അല്ലെങ്കിൽ ഇരുവശങ്ങളിലോ ടെക്സ്റ്റോ ബട്ടണുകളോ ചേർത്ത് ഫോം നിയന്ത്രണങ്ങൾ വിപുലീകരിക്കുക <input>
. .input-group
ഒരു ഉപയോഗിച്ച് ഉപയോഗിക്കുക .input-group-addon
അല്ലെങ്കിൽ .input-group-btn
ഒരു സിംഗിളിലേക്ക് ഘടകങ്ങൾ മുൻനിറുത്തുകയോ കൂട്ടിച്ചേർക്കുകയോ ചെയ്യുക .form-control
.
<input>
മാത്രം<select>
WebKit ബ്രൗസറുകളിൽ പൂർണ്ണമായി സ്റ്റൈൽ ചെയ്യാൻ കഴിയാത്തതിനാൽ ഘടകങ്ങൾ ഇവിടെ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക .
ചില സന്ദർഭങ്ങളിൽ <textarea>
അവയുടെ ആട്രിബ്യൂട്ട് മാനിക്കപ്പെടാത്തതിനാൽ ഇവിടെ ഘടകങ്ങൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക .rows
ഒരു എന്നതിനുള്ളിലെ ഘടകങ്ങളിൽ ടൂൾടിപ്പുകളോ പോപോവറോ ഉപയോഗിക്കുമ്പോൾ , അനാവശ്യ പാർശ്വഫലങ്ങൾ ഒഴിവാക്കാനുള്ള .input-group
ഓപ്ഷൻ നിങ്ങൾ വ്യക്തമാക്കേണ്ടതുണ്ട് container: 'body'
(ഉദാഹരണത്തിന്, മൂലകം വിശാലമാകുന്നത് കൂടാതെ/അല്ലെങ്കിൽ ടൂൾടിപ്പ് അല്ലെങ്കിൽ പോപോവർ പ്രവർത്തനക്ഷമമാകുമ്പോൾ അതിന്റെ വൃത്താകൃതിയിലുള്ള മൂലകൾ നഷ്ടപ്പെടുന്നത് പോലെ).
ഫോം ഗ്രൂപ്പുകളോ ഗ്രിഡ് കോളം ക്ലാസുകളോ ഇൻപുട്ട് ഗ്രൂപ്പുകളുമായി നേരിട്ട് മിക്സ് ചെയ്യരുത്. പകരം, ഫോം ഗ്രൂപ്പിന്റെയോ ഗ്രിഡുമായി ബന്ധപ്പെട്ട ഘടകത്തിന്റെയോ ഉള്ളിൽ ഇൻപുട്ട് ഗ്രൂപ്പ് നെസ്റ്റ് ചെയ്യുക.
ഓരോ ഇൻപുട്ടിനും നിങ്ങൾ ഒരു ലേബൽ ഉൾപ്പെടുത്തിയില്ലെങ്കിൽ നിങ്ങളുടെ ഫോമുകളിൽ സ്ക്രീൻ റീഡർമാർക്ക് പ്രശ്നമുണ്ടാകും. ഈ ഇൻപുട്ട് ഗ്രൂപ്പുകൾക്കായി, ഏതെങ്കിലും അധിക ലേബലോ പ്രവർത്തനമോ സഹായ സാങ്കേതിക വിദ്യകളിലേക്ക് എത്തിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
ഉപയോഗിക്കേണ്ട കൃത്യമായ സാങ്കേതികത (കാണാവുന്ന <label>
ഘടകങ്ങൾ, ക്ലാസ് <label>
ഉപയോഗിച്ച് മറച്ച ഘടകങ്ങൾ , അല്ലെങ്കിൽ , , അല്ലെങ്കിൽ ആട്രിബ്യൂട്ടിന്റെ ഉപയോഗം ) കൂടാതെ എന്ത് അധിക വിവരങ്ങളാണ് കൈമാറേണ്ടത്, നിങ്ങൾ നടപ്പിലാക്കുന്ന ഇന്റർഫേസ് വിജറ്റിന്റെ കൃത്യമായ തരം അനുസരിച്ച് വ്യത്യാസപ്പെടും. ഈ വിഭാഗത്തിലെ ഉദാഹരണങ്ങൾ കുറച്ച് നിർദ്ദേശിച്ച, കേസ്-നിർദ്ദിഷ്ട സമീപനങ്ങൾ നൽകുന്നു..sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
ഒരു ഇൻപുട്ടിന്റെ ഇരുവശത്തും ഒരു ആഡ്-ഓൺ അല്ലെങ്കിൽ ബട്ടൺ സ്ഥാപിക്കുക. നിങ്ങൾക്ക് ഒരു ഇൻപുട്ടിന്റെ ഇരുവശത്തും ഒരെണ്ണം സ്ഥാപിക്കാം.
ഒരു വശത്ത് ഒന്നിലധികം ആഡ്-ഓണുകൾ ( .input-group-addon
അല്ലെങ്കിൽ ) ഞങ്ങൾ പിന്തുണയ്ക്കുന്നില്ല ..input-group-btn
ഒരൊറ്റ ഇൻപുട്ട് ഗ്രൂപ്പിൽ ഒന്നിലധികം ഫോം-നിയന്ത്രണങ്ങളെ ഞങ്ങൾ പിന്തുണയ്ക്കുന്നില്ല.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
ആപേക്ഷിക ഫോം സൈസിംഗ് ക്ലാസുകൾ അതിലേക്ക് ചേർക്കുക, .input-group
ഉള്ളിലുള്ള ഉള്ളടക്കങ്ങൾ സ്വയമേവ വലുപ്പം മാറ്റും-ഓരോ ഘടകത്തിലും ഫോം കൺട്രോൾ സൈസ് ക്ലാസുകൾ ആവർത്തിക്കേണ്ട ആവശ്യമില്ല.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
ടെക്സ്റ്റിന് പകരം ഇൻപുട്ട് ഗ്രൂപ്പിന്റെ ആഡ്ഓണിൽ ഏതെങ്കിലും ചെക്ക്ബോക്സോ റേഡിയോ ഓപ്ഷനോ സ്ഥാപിക്കുക.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
ഇൻപുട്ട് ഗ്രൂപ്പുകളിലെ ബട്ടണുകൾ അൽപ്പം വ്യത്യസ്തമാണ് കൂടാതെ ഒരു അധിക ലെവൽ നെസ്റ്റിംഗ് ആവശ്യമാണ്. എന്നതിനുപകരം, ബട്ടണുകൾ പൊതിയാൻ .input-group-addon
നിങ്ങൾ ഉപയോഗിക്കേണ്ടതുണ്ട് . .input-group-btn
അസാധുവാക്കാൻ കഴിയാത്ത ഡിഫോൾട്ട് ബ്രൗസർ ശൈലികൾ കാരണം ഇത് ആവശ്യമാണ്.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
നിങ്ങൾക്ക് ഒരു വശത്ത് ഒരു ആഡ്-ഓൺ മാത്രമേ ഉണ്ടാകൂ എന്നിരിക്കെ, ഒറ്റയ്ക്കുള്ളിൽ നിങ്ങൾക്ക് ഒന്നിലധികം ബട്ടണുകൾ ഉണ്ടായിരിക്കാം .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
ബൂട്ട്സ്ട്രാപ്പിൽ ലഭ്യമായ Navs മാർക്ക്അപ്പ് പങ്കിട്ടു, അടിസ്ഥാന .nav
ക്ലാസിൽ തുടങ്ങി, പങ്കിട്ട സ്റ്റേറ്റുകളും. ഓരോ ശൈലിയിലും മാറാൻ മോഡിഫയർ ക്ലാസുകൾ സ്വാപ്പ് ചെയ്യുക.
ക്ലാസിന് അടിസ്ഥാന .nav-tabs
ക്ലാസ് ആവശ്യമാണെന്ന് ശ്രദ്ധിക്കുക ..nav
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
അതേ HTML എടുക്കുക, .nav-pills
പകരം ഉപയോഗിക്കുക:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
ഗുളികകളും ലംബമായി അടുക്കുന്നു. വെറുതെ ചേർക്കുക .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
768px-ൽ കൂടുതൽ വീതിയുള്ള സ്ക്രീനുകളിൽ അവരുടെ രക്ഷിതാവിന്റെ തുല്യ വീതിയിൽ ടാബുകളോ ഗുളികകളോ എളുപ്പത്തിൽ നിർമ്മിക്കുക .nav-justified
. ചെറിയ സ്ക്രീനുകളിൽ, നാവിക ലിങ്കുകൾ അടുക്കിയിരിക്കുന്നു.
ന്യായീകരിക്കപ്പെട്ട navbar nav ലിങ്കുകൾ നിലവിൽ പിന്തുണയ്ക്കുന്നില്ല.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
ഏതെങ്കിലും nav ഘടകത്തിന് (ടാബുകൾ അല്ലെങ്കിൽ ഗുളികകൾ), ഗ്രേ ലിങ്കുകൾക്കായി ചേർക്കുക, ഹോവർ ഇഫക്റ്റുകൾ.disabled
ഇല്ല .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
കുറച്ച് അധിക എച്ച്ടിഎംഎൽ, ഡ്രോപ്പ്ഡൗൺ ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിൻ എന്നിവ ഉപയോഗിച്ച് ഡ്രോപ്പ്ഡൗൺ മെനുകൾ ചേർക്കുക .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെയോ സൈറ്റിന്റെയോ നാവിഗേഷൻ തലക്കെട്ടുകളായി പ്രവർത്തിക്കുന്ന റെസ്പോൺസീവ് മെറ്റാ ഘടകങ്ങളാണ് Navbars. മൊബൈൽ കാഴ്ചകളിൽ അവ തകരാൻ തുടങ്ങുന്നു (ടോഗിൾ ചെയ്യാവുന്നവയാണ്), ലഭ്യമായ വ്യൂപോർട്ട് വീതി കൂടുന്നതിനനുസരിച്ച് തിരശ്ചീനമായി മാറുന്നു.
ന്യായീകരിക്കപ്പെട്ട navbar nav ലിങ്കുകൾ നിലവിൽ പിന്തുണയ്ക്കുന്നില്ല.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
ഒരു എന്നതിനായുള്ള വാചകം മാറ്റി നിങ്ങളുടെ സ്വന്തം ഇമേജ് ഉപയോഗിച്ച് navbar ബ്രാൻഡ് മാറ്റിസ്ഥാപിക്കുക <img>
. അതിന് .navbar-brand
അതിന്റേതായ പാഡിംഗും ഉയരവും ഉള്ളതിനാൽ, നിങ്ങളുടെ ഇമേജിനെ ആശ്രയിച്ച് കുറച്ച് CSS അസാധുവാക്കേണ്ടി വന്നേക്കാം.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
.navbar-form
ഇടുങ്ങിയ വ്യൂപോർട്ടുകളിൽ ശരിയായ ലംബ വിന്യാസത്തിനും പൊളിഞ്ഞ പെരുമാറ്റത്തിനും ഉള്ളിൽ ഫോം ഉള്ളടക്കം സ്ഥാപിക്കുക . navbar ഉള്ളടക്കത്തിനുള്ളിൽ അത് എവിടെയാണ് താമസിക്കുന്നതെന്ന് തീരുമാനിക്കാൻ വിന്യാസ ഓപ്ഷനുകൾ ഉപയോഗിക്കുക.
ഒരു മുന്നറിയിപ്പ് എന്ന നിലയിൽ .navbar-form
, അതിന്റെ കോഡിന്റെ ഭൂരിഭാഗവും .form-inline
മിക്സിൻ വഴി പങ്കിടുന്നു. ഇൻപുട്ട് ഗ്രൂപ്പുകൾ പോലെയുള്ള ചില ഫോം നിയന്ത്രണങ്ങൾക്ക്, ഒരു നവബാറിനുള്ളിൽ നിശ്ചിത വീതികൾ ശരിയായി കാണിക്കേണ്ടത് ആവശ്യമായി വന്നേക്കാം.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
navbar-ൽ ലംബമായി കേന്ദ്രീകരിക്കാൻ a-ൽ വസിക്കാത്ത ഘടകങ്ങളിലേക്ക് .navbar-btn
ക്ലാസ് ചേർക്കുക .<button>
<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
ഒരു മൂലകത്തിൽ ടെക്സ്റ്റിന്റെ സ്ട്രിംഗുകൾ പൊതിയുക .navbar-text
, സാധാരണയായി <p>
ശരിയായ ലീഡിനും വർണ്ണത്തിനുമായി ഒരു ടാഗിൽ.
<p class="navbar-text">Signed in as Mark Otto</p>
സാധാരണ navbar നാവിഗേഷൻ ഘടകത്തിൽ ഉൾപ്പെടാത്ത സാധാരണ ലിങ്കുകൾ ഉപയോഗിക്കുന്ന ആളുകൾക്ക് .navbar-link
, ഡിഫോൾട്ടും വിപരീത navbar ഓപ്ഷനുകൾക്കും ശരിയായ നിറങ്ങൾ ചേർക്കാൻ ക്ലാസ് ഉപയോഗിക്കുക.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
.navbar-left
അല്ലെങ്കിൽ .navbar-right
യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് nav ലിങ്കുകൾ, ഫോമുകൾ, ബട്ടണുകൾ അല്ലെങ്കിൽ ടെക്സ്റ്റ് വിന്യസിക്കുക . രണ്ട് ക്ലാസുകളും നിർദ്ദിഷ്ട ദിശയിൽ ഒരു CSS ഫ്ലോട്ട് ചേർക്കും. ഉദാഹരണത്തിന്, nav ലിങ്കുകൾ വിന്യസിക്കാൻ, <ul>
പ്രയോഗിച്ച അതാത് യൂട്ടിലിറ്റി ക്ലാസ് ഉപയോഗിച്ച് അവയെ പ്രത്യേകമായി ഇടുക.
ഈ ക്ലാസുകൾ എന്നിവയുടെ മിക്സിൻ-എഡ് പതിപ്പുകളാണ് .pull-left
, .pull-right
എന്നാൽ ഉപകരണ വലുപ്പത്തിലുടനീളം നവബാർ ഘടകങ്ങൾ എളുപ്പത്തിൽ കൈകാര്യം ചെയ്യുന്നതിനുള്ള മീഡിയ അന്വേഷണങ്ങളിലേക്ക് അവ സ്കോപ്പ് ചെയ്തിരിക്കുന്നു.
.navbar-fixed-top
ഒരു .container
അല്ലെങ്കിൽ .container-fluid
കേന്ദ്രത്തിലേക്കും പാഡ് നവബാർ ഉള്ളടക്കത്തിലേക്കും ചേർക്കുകയും ഉൾപ്പെടുത്തുകയും ചെയ്യുക.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
.navbar-fixed-bottom
ഒരു .container
അല്ലെങ്കിൽ .container-fluid
കേന്ദ്രത്തിലേക്കും പാഡ് നവബാർ ഉള്ളടക്കത്തിലേക്കും ചേർക്കുകയും ഉൾപ്പെടുത്തുകയും ചെയ്യുക.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
ഒരു പൂർണ്ണ വീതിയുള്ള നാവ്ബാർ സൃഷ്ടിക്കുക, അത് ഒരു അല്ലെങ്കിൽ കേന്ദ്രത്തിലേക്കും പാഡ് നാവ്ബാർ ഉള്ളടക്കം ചേർത്തും .navbar-static-top
ഉൾപ്പെടുത്തിയും പേജിനൊപ്പം സ്ക്രോൾ ചെയ്യുന്നു..container
.container-fluid
ക്ലാസുകളിൽ നിന്ന് വ്യത്യസ്തമായി .navbar-fixed-*
, നിങ്ങൾ ഒരു പാഡിംഗും മാറ്റേണ്ടതില്ല body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
ചേർത്തുകൊണ്ട് നവബാറിന്റെ രൂപം പരിഷ്ക്കരിക്കുക .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
ഒരു നാവിഗേഷൻ ശ്രേണിയിൽ നിലവിലെ പേജിന്റെ സ്ഥാനം സൂചിപ്പിക്കുക.
എന്നിവയിലൂടെ സെപ്പറേറ്ററുകൾ സ്വയമേവ CSS-ൽ :before
ചേർക്കുന്നു content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
മൾട്ടി-പേജ് പേജിനേഷൻ ഘടകം അല്ലെങ്കിൽ ലളിതമായ പേജർ ബദൽ ഉപയോഗിച്ച് നിങ്ങളുടെ സൈറ്റിന് അല്ലെങ്കിൽ ആപ്പിനായി പേജിനേഷൻ ലിങ്കുകൾ നൽകുക .
Rdio-ൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട ലളിതമായ പേജിനേഷൻ, ആപ്പുകൾക്കും തിരയൽ ഫലങ്ങൾക്കും മികച്ചതാണ്. വലിയ ബ്ലോക്ക് നഷ്ടപ്പെടാൻ പ്രയാസമാണ്, എളുപ്പത്തിൽ അളക്കാവുന്നതും വലിയ ക്ലിക്ക് ഏരിയകളും നൽകുന്നു.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
സ്ക്രീൻ റീഡറുകളിലേക്കും മറ്റ് സഹായ സാങ്കേതികവിദ്യകളിലേക്കും ഒരു നാവിഗേഷൻ വിഭാഗമായി തിരിച്ചറിയാൻ പേജിനേഷൻ ഘടകം ഒരു ഘടകത്തിൽ പൊതിഞ്ഞിരിക്കണം . കൂടാതെ, ഒരു പേജിന് അത്തരത്തിലുള്ള ഒന്നിലധികം നാവിഗേഷൻ വിഭാഗങ്ങൾ (ഹെഡറിലെ പ്രാഥമിക നാവിഗേഷൻ അല്ലെങ്കിൽ ഒരു സൈഡ്ബാർ നാവിഗേഷൻ പോലുള്ളവ) ഉണ്ടായിരിക്കാൻ സാധ്യതയുള്ളതിനാൽ, അതിന്റെ ഉദ്ദേശ്യം പ്രതിഫലിപ്പിക്കുന്ന ഒരു വിവരണം aria-label
നൽകുന്നത് ഉചിതമാണ്. <nav>
ഉദാഹരണത്തിന്, ഒരു കൂട്ടം തിരയൽ ഫലങ്ങൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യാൻ പേജിനേഷൻ ഘടകം ഉപയോഗിക്കുന്നുവെങ്കിൽ, ഉചിതമായ ഒരു ലേബൽ aria-label="Search results pages"
.
വ്യത്യസ്ത സാഹചര്യങ്ങൾക്കനുസരിച്ച് ലിങ്കുകൾ ഇഷ്ടാനുസൃതമാക്കാവുന്നതാണ്. .disabled
ക്ലിക്ക് ചെയ്യാത്ത ലിങ്കുകൾക്കും .active
നിലവിലെ പേജ് സൂചിപ്പിക്കാനും ഉപയോഗിക്കുക .
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
എന്നതിനായുള്ള സജീവമായതോ പ്രവർത്തനരഹിതമായതോ ആയ ആങ്കറുകൾ സ്വാപ്പ് ചെയ്യാൻ ഞങ്ങൾ ശുപാർശചെയ്യുന്നു <span>
, അല്ലെങ്കിൽ മുൻ/അടുത്ത അമ്പടയാളങ്ങളുടെ കാര്യത്തിൽ ആങ്കർ ഒഴിവാക്കുക, ഉദ്ദേശിച്ച ശൈലികൾ നിലനിർത്തിക്കൊണ്ട് ക്ലിക്ക് പ്രവർത്തനം നീക്കം ചെയ്യുക.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
വലുതോ ചെറുതോ ആയ പേജിനേഷൻ ഇഷ്ടമാണോ? അധിക വലുപ്പങ്ങൾ ചേർക്കുക .pagination-lg
അല്ലെങ്കിൽ ചേർക്കുക..pagination-sm
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
ലൈറ്റ് മാർക്ക്അപ്പും ശൈലികളും ഉള്ള ലളിതമായ പേജിനേഷൻ നടപ്പിലാക്കലുകൾക്കായി വേഗത്തിലുള്ള മുമ്പത്തേതും അടുത്തതുമായ ലിങ്കുകൾ. ബ്ലോഗുകൾ അല്ലെങ്കിൽ മാഗസിനുകൾ പോലുള്ള ലളിതമായ സൈറ്റുകൾക്ക് ഇത് മികച്ചതാണ്.
സ്ഥിരസ്ഥിതിയായി, പേജർ ലിങ്കുകൾ കേന്ദ്രീകരിക്കുന്നു.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
പകരമായി, നിങ്ങൾക്ക് ഓരോ ലിങ്കും വശങ്ങളിലേക്ക് വിന്യസിക്കാം:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
പേജർ ലിങ്കുകൾ പേജിനേഷനിൽ നിന്നുള്ള പൊതുവായ .disabled
യൂട്ടിലിറ്റി ക്ലാസും ഉപയോഗിക്കുന്നു.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
ഒരു ലേബലിന്റെ രൂപഭാവം മാറ്റാൻ ചുവടെ സൂചിപ്പിച്ചിരിക്കുന്ന ഏതെങ്കിലും മോഡിഫയർ ക്ലാസുകൾ ചേർക്കുക.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
നിങ്ങൾക്ക് ഒരു ഇടുങ്ങിയ കണ്ടെയ്നറിനുള്ളിൽ ഡസൻ കണക്കിന് ഇൻലൈൻ ലേബലുകൾ ഉണ്ടെങ്കിൽ, ഓരോന്നിനും അതിന്റേതായ inline-block
ഘടകങ്ങൾ (ഐക്കൺ പോലെ) ഉള്ളപ്പോൾ റെൻഡറിംഗ് പ്രശ്നങ്ങൾ ഉണ്ടാകാം. ഇതിനെ ചുറ്റിപ്പറ്റിയുള്ള വഴി ക്രമീകരണമാണ് display: inline-block;
. സന്ദർഭത്തിനും ഉദാഹരണത്തിനും, #13219 കാണുക .
<span class="badge">
ലിങ്കുകൾ, ബൂട്ട്സ്ട്രാപ്പ് navs എന്നിവയും മറ്റും ചേർത്തുകൊണ്ട് പുതിയതോ വായിക്കാത്തതോ ആയ ഇനങ്ങൾ എളുപ്പത്തിൽ ഹൈലൈറ്റ് ചെയ്യുക.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
പുതിയതോ വായിക്കാത്തതോ ആയ ഇനങ്ങളൊന്നും ഇല്ലെങ്കിൽ, :empty
ഉള്ളിൽ ഉള്ളടക്കമൊന്നും നിലവിലില്ലെങ്കിൽ ബാഡ്ജുകൾ കേവലം (സിഎസ്എസിന്റെ സെലക്ടർ വഴി) തകരും.
ഇൻറർനെറ്റ് എക്സ്പ്ലോറർ 8-ൽ ബാഡ്ജുകൾ സ്വയം പൊളിക്കില്ല, കാരണം അതിന് :empty
സെലക്ടറിനുള്ള പിന്തുണയില്ല.
ഗുളിക നാവിഗേഷനുകളിൽ സജീവമായ അവസ്ഥകളിൽ ബാഡ്ജുകൾ സ്ഥാപിക്കുന്നതിന് ബിൽറ്റ്-ഇൻ ശൈലികൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
നിങ്ങളുടെ സൈറ്റിലെ പ്രധാന ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിന് മുഴുവൻ വ്യൂപോർട്ടും ഓപ്ഷണലായി നീട്ടാൻ കഴിയുന്ന ഭാരം കുറഞ്ഞതും വഴക്കമുള്ളതുമായ ഘടകം.
ഇതൊരു ലളിതമായ ഹീറോ യൂണിറ്റാണ്, ഫീച്ചർ ചെയ്ത ഉള്ളടക്കത്തിലേക്കോ വിവരങ്ങളിലേക്കോ കൂടുതൽ ശ്രദ്ധ ക്ഷണിക്കുന്നതിനുള്ള ലളിതമായ ജംബോട്രോൺ ശൈലിയിലുള്ള ഘടകമാണ്.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
ജംബോട്രോൺ പൂർണ്ണ വീതിയും വൃത്താകൃതിയിലുള്ള കോണുകളുമില്ലാതെയാക്കാൻ, എല്ലാ .container
s-ന്റെയും പുറത്ത് വയ്ക്കുക, പകരം .container
അകത്ത് ചേർക്കുക.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
h1
ഒരു പേജിലെ ഉള്ളടക്കത്തിന്റെ ഉചിതമായ ഇടം നൽകാനും സെഗ്മെന്റ് വിഭാഗങ്ങൾ നൽകാനുമുള്ള ലളിതമായ ഷെൽ . ഇതിന് h1
ന്റെ ഡിഫോൾട്ട് small
എലമെന്റും മറ്റ് മിക്ക ഘടകങ്ങളും (അധിക ശൈലികളോടെ) ഉപയോഗിക്കാനാകും.
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
ചിത്രങ്ങൾ, വീഡിയോകൾ, ടെക്സ്റ്റ് എന്നിവയുടെയും മറ്റും ഗ്രിഡുകൾ എളുപ്പത്തിൽ പ്രദർശിപ്പിക്കുന്നതിന് ലഘുചിത്ര ഘടകം ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പിന്റെ ഗ്രിഡ് സിസ്റ്റം വിപുലീകരിക്കുക.
വ്യത്യസ്ത ഉയരങ്ങളും കൂടാതെ/അല്ലെങ്കിൽ വീതിയും ഉള്ള ലഘുചിത്രങ്ങളുടെ Pinterest-പോലുള്ള അവതരണമാണ് നിങ്ങൾ തിരയുന്നതെങ്കിൽ, നിങ്ങൾ Masonry , Isotope , അല്ലെങ്കിൽ Salvattore പോലുള്ള ഒരു മൂന്നാം കക്ഷി പ്ലഗിൻ ഉപയോഗിക്കേണ്ടതുണ്ട് .
ഡിഫോൾട്ടായി, ബൂട്ട്സ്ട്രാപ്പിന്റെ ലഘുചിത്രങ്ങൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് ഏറ്റവും കുറഞ്ഞ ആവശ്യമായ മാർക്ക്അപ്പ് ഉപയോഗിച്ച് ലിങ്ക് ചെയ്ത ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിനാണ്.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
കുറച്ച് അധിക മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, ലഘുചിത്രങ്ങളിലേക്ക് തലക്കെട്ടുകൾ, ഖണ്ഡികകൾ അല്ലെങ്കിൽ ബട്ടണുകൾ പോലുള്ള ഏത് തരത്തിലുള്ള HTML ഉള്ളടക്കവും ചേർക്കാൻ സാധിക്കും.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
ലഭ്യമായതും വഴക്കമുള്ളതുമായ ഒരുപിടി അലേർട്ട് സന്ദേശങ്ങൾക്കൊപ്പം സാധാരണ ഉപയോക്തൃ പ്രവർത്തനങ്ങൾക്കായി സന്ദർഭോചിതമായ ഫീഡ്ബാക്ക് സന്ദേശങ്ങൾ നൽകുക.
അടിസ്ഥാന അലേർട്ട് സന്ദേശങ്ങൾക്കായി ഏതെങ്കിലും ടെക്സ്റ്റും ഓപ്ഷണൽ ഡിസ്മിസ് ബട്ടണും .alert
നാല് സന്ദർഭോചിത ക്ലാസുകളിലൊന്നിൽ (ഉദാ, ) പൊതിയുക..alert-success
അലേർട്ടുകൾക്ക് ഡിഫോൾട്ട് ക്ലാസുകളില്ല, അടിസ്ഥാന, മോഡിഫയർ ക്ലാസുകൾ മാത്രം. ഒരു ഡിഫോൾട്ട് ഗ്രേ അലേർട്ട് വളരെയധികം അർത്ഥമാക്കുന്നില്ല, അതിനാൽ നിങ്ങൾ സന്ദർഭോചിത ക്ലാസ് വഴി ഒരു തരം വ്യക്തമാക്കേണ്ടതുണ്ട്. വിജയം, വിവരങ്ങൾ, മുന്നറിയിപ്പ്, അല്ലെങ്കിൽ അപകടം എന്നിവയിൽ നിന്ന് തിരഞ്ഞെടുക്കുക.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
.alert-dismissible
ഒരു ഓപ്ഷണലും ക്ലോസ് ബട്ടണും ചേർത്ത് ഏത് അലേർട്ടിലും ബിൽഡ് ചെയ്യുക .
പൂർണ്ണമായി പ്രവർത്തിക്കുന്ന, നിരസിക്കാവുന്ന അലേർട്ടുകൾക്കായി, നിങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിൻ അലേർട്ടുകൾ ഉപയോഗിക്കണം .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
ഡാറ്റ ആട്രിബ്യൂട്ടിനൊപ്പം <button>
ഘടകം ഉപയോഗിക്കുന്നത് ഉറപ്പാക്കുക .data-dismiss="alert"
.alert-link
ഏത് അലേർട്ടിലും പൊരുത്തപ്പെടുന്ന വർണ്ണ ലിങ്കുകൾ വേഗത്തിൽ നൽകാൻ യൂട്ടിലിറ്റി ക്ലാസ് ഉപയോഗിക്കുക .
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
ലളിതവും എന്നാൽ വഴക്കമുള്ളതുമായ പ്രോഗ്രസ് ബാറുകൾ ഉപയോഗിച്ച് ഒരു വർക്ക്ഫ്ലോയുടെ പുരോഗതിയെക്കുറിച്ചോ പ്രവർത്തനത്തെക്കുറിച്ചോ കാലികമായ ഫീഡ്ബാക്ക് നൽകുക.
പ്രോഗ്രസ് ബാറുകൾ അവയുടെ ചില ഇഫക്റ്റുകൾ നേടുന്നതിന് CSS3 സംക്രമണങ്ങളും ആനിമേഷനുകളും ഉപയോഗിക്കുന്നു. ഈ ഫീച്ചറുകൾ Internet Explorer 9-ലും അതിനു താഴെയുള്ള അല്ലെങ്കിൽ Firefox-ന്റെ പഴയ പതിപ്പുകളിലും പിന്തുണയ്ക്കുന്നില്ല. Opera 12 ആനിമേഷനുകളെ പിന്തുണയ്ക്കുന്നില്ല.
നിങ്ങളുടെ വെബ്സൈറ്റിന് അനുവദനീയമല്ലാത്ത ഒരു ഉള്ളടക്ക സുരക്ഷാ നയം (CSP) ഉണ്ടെങ്കിൽ, ചുവടെയുള്ള ഞങ്ങളുടെ ഉദാഹരണങ്ങളിൽ കാണിച്ചിരിക്കുന്നതുപോലെ പുരോഗതി ബാർ വീതികൾ സജ്ജീകരിക്കുന്നതിന് style-src 'unsafe-inline'
നിങ്ങൾക്ക് ഇൻലൈൻ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കാൻ കഴിയില്ല . style
കർശനമായ CSP-കൾക്ക് അനുയോജ്യമായ വീതികൾ സജ്ജീകരിക്കുന്നതിനുള്ള ഇതര രീതികളിൽ കുറച്ച് ഇഷ്ടാനുസൃത ജാവാസ്ക്രിപ്റ്റ് (അത് സെറ്റ് ചെയ്യുന്നു element.style.width
) അല്ലെങ്കിൽ ഇഷ്ടാനുസൃത CSS ക്ലാസുകൾ ഉപയോഗിക്കുന്നത് ഉൾപ്പെടുന്നു.
ഡിഫോൾട്ട് പ്രോഗ്രസ് ബാർ.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
ദൃശ്യമായ ശതമാനം കാണിക്കുന്നതിന് പുരോഗതി ബാറിനുള്ളിൽ നിന്ന് ക്ലാസ് ഉള്ളത് നീക്കം ചെയ്യുക <span>
..sr-only
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
കുറഞ്ഞ ശതമാനത്തിൽ പോലും ലേബൽ ടെക്സ്റ്റ് വ്യക്തമാണെന്ന് ഉറപ്പാക്കാൻ, min-width
പ്രോഗ്രസ് ബാറിലേക്ക് ഒരു ചേർക്കുന്നത് പരിഗണിക്കുക.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
പ്രോഗ്രസ് ബാറുകൾ സ്ഥിരമായ ശൈലികൾക്കായി ഒരേ ബട്ടണും അലേർട്ട് ക്ലാസുകളും ഉപയോഗിക്കുന്നു.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
ഒരു വരയുള്ള പ്രഭാവം സൃഷ്ടിക്കാൻ ഒരു ഗ്രേഡിയന്റ് ഉപയോഗിക്കുന്നു. IE9-ലും താഴെയും ലഭ്യമല്ല.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
വലത്തുനിന്ന് ഇടത്തോട്ട് വരകൾ ആനിമേറ്റ് ചെയ്യാൻ to .active
ചേർക്കുക . .progress-bar-striped
IE9-ലും താഴെയും ലഭ്യമല്ല.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
ഒന്നിലധികം ബാറുകൾ അടുക്കി .progress
വയ്ക്കാൻ വയ്ക്കുക.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
വാചക ഉള്ളടക്കത്തിനൊപ്പം ഇടത് അല്ലെങ്കിൽ വലത് വിന്യസിച്ച ചിത്രം അവതരിപ്പിക്കുന്ന വിവിധ തരം ഘടകങ്ങൾ (ബ്ലോഗ് കമന്റുകൾ, ട്വീറ്റുകൾ മുതലായവ) നിർമ്മിക്കുന്നതിനുള്ള അമൂർത്ത ഒബ്ജക്റ്റ് ശൈലികൾ.
ഡിഫോൾട്ട് മീഡിയ ഒരു മീഡിയ ഒബ്ജക്റ്റ് (ചിത്രങ്ങൾ, വീഡിയോ, ഓഡിയോ) ഒരു ഉള്ളടക്ക ബ്ലോക്കിന്റെ ഇടത്തോട്ടോ വലത്തോട്ടോ പ്രദർശിപ്പിക്കുന്നു.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
ക്ലാസുകളും നിലവിലുണ്ട് .pull-left
, .pull-right
മുമ്പ് മീഡിയ ഘടകത്തിന്റെ ഭാഗമായി ഉപയോഗിച്ചിരുന്നുവെങ്കിലും v3.3.0 മുതൽ ആ ഉപയോഗത്തിനായി ഒഴിവാക്കിയിരിക്കുന്നു. അവ ഏകദേശം തുല്യമാണ് .media-left
കൂടാതെ html ന് .media-right
ശേഷം .media-right
സ്ഥാപിക്കണം ..media-body
ചിത്രങ്ങളോ മറ്റ് മീഡിയയോ മുകളിലോ മധ്യത്തിലോ താഴെയോ വിന്യസിക്കാനാകും. ഡിഫോൾട്ട് മുകളിൽ വിന്യസിച്ചിരിക്കുന്നു.
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
കുറച്ച് അധിക മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ലിസ്റ്റിനുള്ളിൽ മീഡിയ ഉപയോഗിക്കാം (അഭിപ്രായ ത്രെഡുകൾക്കോ ലേഖന ലിസ്റ്റുകൾക്കോ ഉപയോഗപ്രദമാണ്).
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
ഘടകങ്ങളുടെ ലളിതമായ ലിസ്റ്റുകൾ മാത്രമല്ല, ഇഷ്ടാനുസൃത ഉള്ളടക്കമുള്ള സങ്കീർണ്ണമായവ പ്രദർശിപ്പിക്കുന്നതിനുള്ള വഴക്കമുള്ളതും ശക്തവുമായ ഘടകമാണ് ലിസ്റ്റ് ഗ്രൂപ്പുകൾ.
ഏറ്റവും അടിസ്ഥാന ലിസ്റ്റ് ഗ്രൂപ്പ് എന്നത് ലിസ്റ്റ് ഇനങ്ങളും ശരിയായ ക്ലാസുകളുമുള്ള ഓർഡർ ചെയ്യാത്ത ഒരു ലിസ്റ്റാണ്. പിന്തുടരുന്ന ഓപ്ഷനുകൾ അല്ലെങ്കിൽ ആവശ്യാനുസരണം നിങ്ങളുടെ സ്വന്തം CSS ഉപയോഗിച്ച് അതിൽ നിർമ്മിക്കുക.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
ഏതെങ്കിലും ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനത്തിലേക്ക് ബാഡ്ജുകളുടെ ഘടകം ചേർക്കുക, അത് യാന്ത്രികമായി വലതുവശത്ത് സ്ഥാപിക്കും.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
ലിസ്റ്റ് ഇനങ്ങൾക്ക് പകരം ആങ്കർ ടാഗുകൾ ഉപയോഗിച്ച് ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനങ്ങളെ ലിങ്ക് ചെയ്യുക (അതിന് <div>
പകരം രക്ഷിതാവ് എന്നും അർത്ഥമുണ്ട് <ul>
). ഓരോ ഘടകത്തിനും ചുറ്റും വ്യക്തിഗത മാതാപിതാക്കളുടെ ആവശ്യമില്ല.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനങ്ങൾ ലിസ്റ്റ് ഇനങ്ങൾക്ക് പകരം ബട്ടണുകളായിരിക്കാം (അതിന് <div>
പകരം രക്ഷിതാവ് എന്നർത്ഥം <ul>
). ഓരോ ഘടകത്തിനും ചുറ്റും വ്യക്തിഗത മാതാപിതാക്കളുടെ ആവശ്യമില്ല. ഇവിടെ സാധാരണ .btn
ക്ലാസുകൾ ഉപയോഗിക്കരുത്.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
അപ്രാപ്തമായി ദൃശ്യമാകുന്നതിന് ചാരനിറത്തിലേക്ക് ചേർക്കുക .disabled
..list-group-item
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
ഡിഫോൾട്ടോ ലിങ്ക് ചെയ്തതോ ആയ ലിസ്റ്റ് ഇനങ്ങളെ സ്റ്റൈൽ ചെയ്യാൻ സന്ദർഭോചിതമായ ക്ലാസുകൾ ഉപയോഗിക്കുക. .active
സംസ്ഥാനവും ഉൾപ്പെടുന്നു .
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
ചുവടെയുള്ളതുപോലുള്ള ലിങ്ക് ചെയ്ത ലിസ്റ്റ് ഗ്രൂപ്പുകൾക്ക് പോലും ഉള്ളിൽ ഏതാണ്ട് ഏതെങ്കിലും HTML ചേർക്കുക.
ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. മെസെനാസ് സെഡ് ഡയം എഗെറ്റ് റിസസ് വേരിയസ് ബ്ലാൻഡിറ്റ്.
ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. മെസെനാസ് സെഡ് ഡയം എഗെറ്റ് റിസസ് വേരിയസ് ബ്ലാൻഡിറ്റ്.
ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. മെസെനാസ് സെഡ് ഡയം എഗെറ്റ് റിസസ് വേരിയസ് ബ്ലാൻഡിറ്റ്.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
എല്ലായ്പ്പോഴും ആവശ്യമില്ലെങ്കിലും, ചിലപ്പോൾ നിങ്ങളുടെ DOM ഒരു ബോക്സിൽ ഇടേണ്ടതുണ്ട്. അത്തരം സാഹചര്യങ്ങളിൽ, പാനൽ ഘടകം പരീക്ഷിക്കുക.
ഡിഫോൾട്ടായി, .panel
ചില അടിസ്ഥാന ബോർഡറുകളും ചില ഉള്ളടക്കം ഉൾക്കൊള്ളാൻ പാഡിംഗും പ്രയോഗിക്കുക മാത്രമാണ് ചെയ്യുന്നത്.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
ഉപയോഗിച്ച് നിങ്ങളുടെ പാനലിലേക്ക് ഒരു ഹെഡിംഗ് കണ്ടെയ്നർ എളുപ്പത്തിൽ ചേർക്കുക .panel-heading
. പ്രീ-സ്റ്റൈൽ ചെയ്ത തലക്കെട്ട് ചേർക്കാൻ ഒരു ക്ലാസിനൊപ്പം - <h1>
നിങ്ങൾക്ക് എന്തും ഉൾപ്പെടുത്താം . എന്നിരുന്നാലും, - എന്നതിന്റെ ഫോണ്ട് വലുപ്പങ്ങൾ അസാധുവാക്കുന്നു .<h6>
.panel-title
<h1>
<h6>
.panel-heading
ശരിയായ ലിങ്ക് കളറിംഗിനായി, എന്നതിനുള്ളിലെ തലക്കെട്ടുകളിൽ ലിങ്കുകൾ സ്ഥാപിക്കുന്നത് ഉറപ്പാക്കുക .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
എന്നതിലെ ബട്ടണുകൾ അല്ലെങ്കിൽ ദ്വിതീയ വാചകം പൊതിയുക .panel-footer
. സന്ദർഭോചിതമായ വ്യതിയാനങ്ങൾ ഉപയോഗിക്കുമ്പോൾ പാനൽ ഫൂട്ടറുകൾക്ക് വർണ്ണങ്ങളും ബോർഡറുകളും പാരമ്പര്യമായി ലഭിക്കില്ല എന്നത് ശ്രദ്ധിക്കുക
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
മറ്റ് ഘടകങ്ങളെപ്പോലെ, ഏതെങ്കിലും സന്ദർഭോചിതമായ സംസ്ഥാന ക്ലാസുകൾ ചേർത്ത് ഒരു പ്രത്യേക സന്ദർഭത്തിലേക്ക് എളുപ്പത്തിൽ ഒരു പാനൽ കൂടുതൽ അർത്ഥപൂർണ്ണമാക്കുക.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
.table
തടസ്സമില്ലാത്ത ഡിസൈനിനായി ഒരു പാനലിനുള്ളിൽ ബോർഡർ അല്ലാത്തവ ചേർക്കുക . ഒരു ഉണ്ടെങ്കിൽ .panel-body
, വേർപെടുത്തുന്നതിനായി ഞങ്ങൾ പട്ടികയുടെ മുകളിൽ ഒരു അധിക ബോർഡർ ചേർക്കുന്നു.
ചില ഡിഫോൾട്ട് പാനൽ ഉള്ളടക്കം ഇവിടെയുണ്ട്. Nulla vitae elit libero, a pharetra ague. എനിയൻ ലാസിനിയ ബിബെൻഡം നുള്ള സെഡ് കൺസെക്റ്റേറ്റർ. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.
# | പേരിന്റെ ആദ്യഭാഗം | പേരിന്റെ അവസാന ഭാഗം | ഉപയോക്തൃനാമം |
---|---|---|---|
1 | അടയാളപ്പെടുത്തുക | ഓട്ടോ | @mdo |
2 | ജേക്കബ് | തോൺടൺ | @കൊഴുപ്പ് |
3 | ലാറി | പക്ഷി | @ട്വിറ്റർ |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
പാനൽ ബോഡി ഇല്ലെങ്കിൽ, ഘടകം പാനൽ ഹെഡറിൽ നിന്ന് ടേബിളിലേക്ക് തടസ്സമില്ലാതെ നീങ്ങുന്നു.
# | പേരിന്റെ ആദ്യഭാഗം | പേരിന്റെ അവസാന ഭാഗം | ഉപയോക്തൃനാമം |
---|---|---|---|
1 | അടയാളപ്പെടുത്തുക | ഓട്ടോ | @mdo |
2 | ജേക്കബ് | തോൺടൺ | @കൊഴുപ്പ് |
3 | ലാറി | പക്ഷി | @ട്വിറ്റർ |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
ഏത് പാനലിലും പൂർണ്ണ വീതിയുള്ള ലിസ്റ്റ് ഗ്രൂപ്പുകൾ എളുപ്പത്തിൽ ഉൾപ്പെടുത്തുക.
ചില ഡിഫോൾട്ട് പാനൽ ഉള്ളടക്കം ഇവിടെയുണ്ട്. Nulla vitae elit libero, a pharetra ague. എനിയൻ ലാസിനിയ ബിബെൻഡം നുള്ള സെഡ് കൺസെക്റ്റേറ്റർ. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
ഏത് ഉപകരണത്തിലും ശരിയായി സ്കെയിൽ ചെയ്യുന്ന ഒരു അന്തർലീനമായ അനുപാതം സൃഷ്ടിക്കുന്നതിലൂടെ, അടങ്ങിയിരിക്കുന്ന ബ്ലോക്കിന്റെ വീതിയെ അടിസ്ഥാനമാക്കി വീഡിയോ അല്ലെങ്കിൽ സ്ലൈഡ്ഷോ അളവുകൾ നിർണ്ണയിക്കാൻ ബ്രൗസറുകളെ അനുവദിക്കുക.
നിയമങ്ങൾ നേരിട്ട് പ്രയോഗിക്കുന്നു <iframe>
, <embed>
, <video>
, കൂടാതെ <object>
ഘടകങ്ങൾ; .embed-responsive-item
നിങ്ങൾക്ക് മറ്റ് ആട്രിബ്യൂട്ടുകൾക്കായി സ്റ്റൈലിംഗുമായി പൊരുത്തപ്പെടുത്താൻ താൽപ്പര്യപ്പെടുമ്പോൾ, ഓപ്ഷണലായി ഒരു വ്യക്തമായ ഡിസെൻഡന്റ് ക്ലാസ് ഉപയോഗിക്കുക .
പ്രോ-ടിപ്പ്! ഞങ്ങൾ നിങ്ങൾക്കായി അത് അസാധുവാക്കുന്നതിനാൽ frameborder="0"
നിങ്ങളുടെ s- ൽ ഉൾപ്പെടുത്തേണ്ടതില്ല .<iframe>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
ഒരു മൂലകത്തിന് ഒരു ഇൻസെറ്റ് ഇഫക്റ്റ് നൽകുന്നതിന് കിണർ ഒരു ലളിതമായ ഇഫക്റ്റായി ഉപയോഗിക്കുക.
<div class="well">...</div>
രണ്ട് ഓപ്ഷണൽ മോഡിഫയർ ക്ലാസുകളുള്ള പാഡിംഗും വൃത്താകൃതിയിലുള്ള മൂലകളും നിയന്ത്രിക്കുക.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>