അടിസ്ഥാന HTML ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യുകയും വിപുലീകരിക്കാവുന്ന ക്ലാസുകൾ ഉപയോഗിച്ച് മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
എല്ലാ HTML തലക്കെട്ടുകളും <h1>
ലഭ്യമാണ് <h6>
.
ബൂട്ട്സ്ട്രാപ്പിന്റെ ഗ്ലോബൽ ഡിഫോൾട്ട് 14pxfont-size
ആണ് , ഒരു 20px ആണ് . ഇത് എല്ലാ ഖണ്ഡികകൾക്കും ബാധകമാണ്. കൂടാതെ, (ഖണ്ഡികകൾക്ക്) അവയുടെ വരി-ഉയരത്തിന്റെ പകുതിയുടെ താഴെയുള്ള മാർജിൻ ലഭിക്കും (സ്ഥിരമായി 9px).line-height
<body>
<p>
Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്. Nullam id dolor id nibh ultricies vehicula.
കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്. ഡോനെക് ഉള്ളംകോർപ്പർ നുള്ള നോൺ മെറ്റസ് ആക്ടർ ഫ്രിംഗില്ല. ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല, എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം നെക് എലിറ്റ്. ഡോനെക് ഉള്ളംകോർപ്പർ നുള്ള നോൺ മെറ്റസ് ആക്ടർ ഫ്രിംഗില്ല.
Maecenas sed diam eget risus varius blandit sit amet non magna. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല, എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം നെക് എലിറ്റ്.
<p> ... </p>
ചേർത്തുകൊണ്ട് ഒരു ഖണ്ഡിക വേറിട്ടുനിൽക്കുക .lead
.
Vivamus sagittis lacus vel ague laoreet rutrum faucibus dolor auctor. ഡ്യൂയിസ് മോളിസ്, ഇത് നോൺ കമോഡോ ലക്റ്റസ് ആണ്.
<p class = "lead" > ... </p>
ടൈപ്പോഗ്രാഫിക് സ്കെയിൽ വേരിയബിളുകളിലെ രണ്ട് കുറവ് വേരിയബിളുകളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്.less : @baseFontSize
ഒപ്പം @baseLineHeight
. ആദ്യത്തേത് മുഴുവൻ ഉപയോഗിച്ചിരിക്കുന്ന അടിസ്ഥാന ഫോണ്ട്-വലിപ്പവും രണ്ടാമത്തേത് അടിസ്ഥാന ലൈൻ-ഉയരവുമാണ്. ഞങ്ങളുടെ എല്ലാ തരത്തിലുമുള്ള മാർജിനുകളും പാഡിംഗുകളും ലൈൻ-ഹൈറ്റുകളും മറ്റും സൃഷ്ടിക്കാൻ ഞങ്ങൾ ആ വേരിയബിളുകളും ചില ലളിതമായ ഗണിതവും ഉപയോഗിക്കുന്നു. അവ ഇഷ്ടാനുസൃതമാക്കുകയും ബൂട്ട്സ്ട്രാപ്പ് പൊരുത്തപ്പെടുത്തുകയും ചെയ്യുക.
ഭാരം കുറഞ്ഞ ശൈലികളുള്ള HTML-ന്റെ ഡിഫോൾട്ട് ഊന്നൽ ടാഗുകൾ ഉപയോഗിക്കുക.
<small>
ഇൻലൈനിനോ ടെക്സ്റ്റിന്റെ ബ്ലോക്കുകൾക്കോ ഊന്നൽ നൽകാതിരിക്കാൻ, ചെറിയ ടാഗ് ഉപയോഗിക്കുക.
വാചകത്തിന്റെ ഈ വരി ഫൈൻ പ്രിന്റ് ആയി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.
<p> <small> ടെക്സ്റ്റിന്റെ ഈ വരി ഫൈൻ പ്രിന്റ് ആയി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്. </small> </p>
<strong>
പ്രധാനപ്പെട്ട ഒരു ടെക്സ്റ്റ് സ്നിപ്പറ്റ് ഊന്നിപ്പറയുന്നതിന്
ടെക്സ്റ്റിന്റെ ഇനിപ്പറയുന്ന സ്നിപ്പറ്റ് ബോൾഡ് ടെക്സ്റ്റായി റെൻഡർ ചെയ്തിരിക്കുന്നു .
<strong> ബോൾഡ് ടെക്സ്റ്റായി റെൻഡർ ചെയ്തു </strong>
<em>
സമ്മർദത്തോടെയുള്ള ടെക്സ്റ്റിന്റെ ഒരു സ്നിപ്പറ്റ് ഊന്നിപ്പറയുന്നതിന്
ടെക്സ്റ്റിന്റെ ഇനിപ്പറയുന്ന സ്നിപ്പെറ്റ് ഇറ്റാലിസ് ചെയ്ത ടെക്സ്റ്റായി റെൻഡർ ചെയ്തിരിക്കുന്നു .
<em> ഇറ്റാലിസ് ചെയ്ത വാചകമായി റെൻഡർ ചെയ്തു </em>
ഹെഡ്സ് അപ്പുകൾ! HTML5- <b>
ലും ഉപയോഗിക്കാൻ മടിക്കേണ്ടതില്ല. വോയ്സ്, ടെക്നിക്കൽ പദങ്ങൾ മുതലായവയ്ക്കായി അധിക പ്രാധാന്യം നൽകാതെ വാക്കുകളോ ശൈലികളോ ഹൈലൈറ്റ് ചെയ്യുന്നതിനാണ് ഇത് അർത്ഥമാക്കുന്നത്.<i>
<b>
<i>
<abbr>
വിപുലീകരിച്ച പതിപ്പ് ഹോവറിൽ കാണിക്കുന്നതിന് ചുരുക്കെഴുത്തുകൾക്കും ചുരുക്കെഴുത്തുകൾക്കുമായി HTML ന്റെ മൂലകത്തിന്റെ സ്റ്റൈലൈസ്ഡ് നടപ്പിലാക്കൽ . ഒരു title
ആട്രിബ്യൂട്ട് ഉള്ള ചുരുക്കെഴുത്തുകൾക്ക് നേരിയ ഡോട്ടുള്ള താഴത്തെ ബോർഡറും ഹോവറിൽ ഒരു ഹെൽപ്പ് കഴ്സറും ഉണ്ട്, ഇത് ഹോവറിൽ അധിക സന്ദർഭം നൽകുന്നു.
<abbr>
ഒരു ചുരുക്കെഴുത്തിന്റെ നീണ്ട ഹോവറിൽ വിപുലീകരിച്ച ടെക്സ്റ്റിനായി, title
ആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തുക.
ആട്രിബ്യൂട്ട് എന്ന വാക്കിന്റെ ചുരുക്കമാണ് attr .
<abbr title = "attribute" > attr </abbr>
<abbr class="initialism">
.initialism
അൽപ്പം ചെറിയ ഫോണ്ട്-സൈസിനായി ഒരു ചുരുക്കെഴുത്ത് ചേർക്കുക .
സ്ലൈസ് ചെയ്ത ബ്രെഡിന് ശേഷമുള്ള ഏറ്റവും മികച്ച കാര്യം HTML ആണ്.
<abbr title = "attribute" class = "initialism" > attr </abbr>
ഏറ്റവും അടുത്തുള്ള പൂർവ്വികനെയോ അല്ലെങ്കിൽ മുഴുവൻ ജോലിയുടെയും കോൺടാക്റ്റ് വിവരങ്ങൾ അവതരിപ്പിക്കുക.
<address>
എല്ലാ വരികളും അവസാനിപ്പിച്ച് ഫോർമാറ്റിംഗ് സംരക്ഷിക്കുക <br>
.
- <വിലാസം>
- <strong> Twitter, Inc. </strong><br>
- 795 ഫോൾസം ഏവ്, സ്യൂട്ട് 600 <br>
- സാൻ ഫ്രാൻസിസ്കോ, CA 94107 <br>
- <abbr title = "ഫോൺ" > P: </abbr> (123) 456-7890
- </address>
- <വിലാസം>
- <strong> മുഴുവൻ പേര് </strong><br>
- <a href = "mailto:#" > [email protected] </a>
- </address>
നിങ്ങളുടെ പ്രമാണത്തിനുള്ളിലെ മറ്റൊരു ഉറവിടത്തിൽ നിന്നുള്ള ഉള്ളടക്കത്തിന്റെ ബ്ലോക്കുകൾ ഉദ്ധരിക്കാൻ.
ഉദ്ധരണിയായി <blockquote>
ഏതെങ്കിലും HTML പൊതിയുക . നേരായ ഉദ്ധരണികൾക്കായി ഞങ്ങൾ ഒരു ശുപാർശ ചെയ്യുന്നു <p>
.
ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.
- <blockquote>
- <p> ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും. </p>
- </blockquote>
ഒരു സ്റ്റാൻഡേർഡ് ബ്ലോക്ക്ക്വോട്ടിലെ ലളിതമായ വ്യതിയാനങ്ങൾക്കായി ശൈലിയും ഉള്ളടക്കവും മാറ്റുന്നു.
<small>
ഉറവിടം തിരിച്ചറിയാൻ ടാഗ് ചേർക്കുക . സ്രോതസ് വർക്കിന്റെ പേര് അതിൽ പൊതിയുക <cite>
.
ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.
ഉറവിട ശീർഷകത്തിൽ പ്രശസ്തനായ ഒരാൾ
- <blockquote>
- <p> ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും. </p>
- <small> പ്രശസ്തനായ ഒരാൾ <cite title = "ഉറവിട ശീർഷകം" > ഉറവിട ശീർഷകം </cite></small>
- </blockquote>
ഫ്ലോട്ടുചെയ്തതും വലതുവശത്ത് വിന്യസിച്ചതുമായ ബ്ലോക്ക്ക്വോട്ടിനായി ഉപയോഗിക്കുക .pull-right
.
- <blockquote class = "വലത്തേക്ക് വലിക്കുക" >
- ...
- </blockquote>
ഓർഡർ വ്യക്തമായി പ്രാധാന്യമില്ലാത്ത ഇനങ്ങളുടെ ഒരു ലിസ്റ്റ് .
- <ul>
- <li> ... </li>
- </ul>
ഓർഡർ വ്യക്തമായി പ്രാധാന്യമുള്ള ഇനങ്ങളുടെ ഒരു ലിസ്റ്റ് .
- <ol>
- <li> ... </li>
- </ol>
list-style
ഇടത് പാഡിംഗ് ഇല്ലാത്തതോ അധികമോ ഉള്ള ഇനങ്ങളുടെ ഒരു ലിസ്റ്റ് .
- <ul class = "unstyled" >
- <li> ... </li>
- </ul>
അനുബന്ധ വിവരണങ്ങളുള്ള നിബന്ധനകളുടെ ഒരു ലിസ്റ്റ്.
- <dl>
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
നിബന്ധനകളും വിവരണങ്ങളും <dl>
വശങ്ങളിലായി നിരത്തുക.
- <dl class = "dl-horizontal" >
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
ഹെഡ്സ് അപ്പുകൾ! തിരശ്ചീന വിവരണ ലിസ്റ്റുകൾ ഇടത് കോളം ഫിക്സിൽ ഉൾക്കൊള്ളിക്കാനാവാത്ത ദൈർഘ്യമേറിയ പദങ്ങൾ വെട്ടിച്ചുരുക്കും text-overflow
. ഇടുങ്ങിയ വ്യൂപോർട്ടുകളിൽ, അവ ഡിഫോൾട്ട് സ്റ്റാക്ക് ചെയ്ത ലേഔട്ടിലേക്ക് മാറും.
ഉപയോഗിച്ച് കോഡിന്റെ ഇൻലൈൻ സ്നിപ്പെറ്റുകൾ പൊതിയുക <code>
.
<section>
ഇൻലൈൻ ആയി പൊതിയണം.
- ഉദാഹരണത്തിന് , <code><section> < / code > ഇൻലൈൻ ആയി പൊതിയണം .
<pre>
കോഡിന്റെ ഒന്നിലധികം വരികൾക്കായി ഉപയോഗിക്കുക . ശരിയായ റെൻഡറിങ്ങിനായി കോഡിലെ ഏതെങ്കിലും ആംഗിൾ ബ്രാക്കറ്റുകളിൽ നിന്ന് രക്ഷപ്പെടുന്നത് ഉറപ്പാക്കുക.
<p>സാമ്പിൾ ടെക്സ്റ്റ് ഇവിടെ...</p>
- <മുൻപ്>
- <p>സാമ്പിൾ ടെക്സ്റ്റ് ഇവിടെ...</p>
- </pre>
ഹെഡ്സ് അപ്പുകൾ! കോഡ് ഉള്ളിൽ സൂക്ഷിക്കുന്നത് ഉറപ്പാക്കുക<pre>
ഇടതുവശത്ത് കഴിയുന്നത്ര അടുത്ത് സൂക്ഷിക്കുന്നത് ഉറപ്പാക്കുക; അത് എല്ലാ ടാബുകളും റെൻഡർ ചെയ്യും.
നിങ്ങൾക്ക് ഓപ്ഷണലായി .pre-scrollable
ക്ലാസ് ചേർക്കാം, അത് പരമാവധി 350px-ഉയരം സജ്ജീകരിക്കുകയും ഒരു y-ആക്സിസ് സ്ക്രോൾബാർ നൽകുകയും ചെയ്യും.
അടിസ്ഥാന സ്റ്റൈലിങ്ങിന്-ലൈറ്റ് പാഡിംഗിനും തിരശ്ചീനമായ ഡിവൈഡറുകൾക്കും മാത്രം-ബേസ് ക്ലാസ് .table
ഏതെങ്കിലും ഒന്നിലേക്ക് ചേർക്കുക <table>
.
# | പേരിന്റെ ആദ്യഭാഗം | പേരിന്റെ അവസാന ഭാഗം | ഉപയോക്തൃനാമം |
---|---|---|---|
1 | അടയാളപ്പെടുത്തുക | ഓട്ടോ | @mdo |
2 | ജേക്കബ് | തോൺടൺ | @കൊഴുപ്പ് |
3 | ലാറി | പക്ഷി | @ട്വിറ്റർ |
- <table class = "table" >
- …
- </table>
.table
അടിസ്ഥാന ക്ലാസിലേക്ക് പിന്തുടരുന്ന ഏതെങ്കിലും ക്ലാസുകൾ ചേർക്കുക .
.table-striped
CSS സെലക്ടറിനുള്ളിലെ ഏതെങ്കിലും ടേബിൾ വരിയിലേക്ക് സീബ്ര-സ്ട്രൈപ്പിംഗ് ചേർക്കുന്നു (IE7- <tbody>
IE8- :nth-child
ൽ ലഭ്യമല്ല).
# | പേരിന്റെ ആദ്യഭാഗം | പേരിന്റെ അവസാന ഭാഗം | ഉപയോക്തൃനാമം |
---|---|---|---|
1 | അടയാളപ്പെടുത്തുക | ഓട്ടോ | @mdo |
2 | ജേക്കബ് | തോൺടൺ | @കൊഴുപ്പ് |
3 | ലാറി | പക്ഷി | @ട്വിറ്റർ |
- <table class = "table table-striped" >
- …
- </table>
.table-bordered
പട്ടികയിലേക്ക് ബോർഡറുകളും വൃത്താകൃതിയിലുള്ള കോണുകളും ചേർക്കുക.
# | പേരിന്റെ ആദ്യഭാഗം | പേരിന്റെ അവസാന ഭാഗം | ഉപയോക്തൃനാമം |
---|---|---|---|
1 | അടയാളപ്പെടുത്തുക | ഓട്ടോ | @mdo |
അടയാളപ്പെടുത്തുക | ഓട്ടോ | @getbootstrap | |
2 | ജേക്കബ് | തോൺടൺ | @കൊഴുപ്പ് |
3 | ലാറി ദി ബേർഡ് | @ട്വിറ്റർ |
- <table class = "table table-bordered" >
- …
- </table>
.table-hover
a ഉള്ളിലെ പട്ടിക വരികളിൽ ഒരു ഹോവർ അവസ്ഥ പ്രവർത്തനക്ഷമമാക്കുക <tbody>
.
# | പേരിന്റെ ആദ്യഭാഗം | പേരിന്റെ അവസാന ഭാഗം | ഉപയോക്തൃനാമം |
---|---|---|---|
1 | അടയാളപ്പെടുത്തുക | ഓട്ടോ | @mdo |
2 | ജേക്കബ് | തോൺടൺ | @കൊഴുപ്പ് |
3 | ലാറി ദി ബേർഡ് | @ട്വിറ്റർ |
- <table class = "table table-hover" >
- …
- </table>
.table-condensed
സെൽ പാഡിംഗ് പകുതിയായി മുറിച്ച് പട്ടികകൾ കൂടുതൽ ഒതുക്കമുള്ളതാക്കുന്നു.
# | പേരിന്റെ ആദ്യഭാഗം | പേരിന്റെ അവസാന ഭാഗം | ഉപയോക്തൃനാമം |
---|---|---|---|
1 | അടയാളപ്പെടുത്തുക | ഓട്ടോ | @mdo |
2 | ജേക്കബ് | തോൺടൺ | @കൊഴുപ്പ് |
3 | ലാറി ദി ബേർഡ് | @ട്വിറ്റർ |
- <table class = "table table-condensed" >
- …
- </table>
പട്ടിക വരികൾക്ക് വർണ്ണം നൽകാൻ സന്ദർഭോചിതമായ ക്ലാസുകൾ ഉപയോഗിക്കുക.
ക്ലാസ് | വിവരണം |
---|---|
.success |
വിജയകരമായ അല്ലെങ്കിൽ പോസിറ്റീവ് പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്നു. |
.error |
അപകടകരമോ പ്രതികൂലമോ ആയ ഒരു പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്നു. |
.info |
സ്ഥിരസ്ഥിതി ശൈലികൾക്ക് പകരമായി ഉപയോഗിക്കുന്നു. |
# | ഉൽപ്പന്നം | പേയ്മെന്റ് എടുത്തു | പദവി |
---|---|---|---|
1 | ടിബി - പ്രതിമാസ | 01/04/2012 | അംഗീകരിച്ചു |
2 | ടിബി - പ്രതിമാസ | 02/04/2012 | നിരസിച്ചു |
3 | ടിബി - പ്രതിമാസ | 03/04/2012 | തീർപ്പാക്കാത്തത് |
- ...
- < tr class = "വിജയം" >
- <td> 1 < /td>
- <td>ടിബി - പ്രതിമാസ</ td >
- <td> 01 / 04 / 2012 < /td>
- <td>അംഗീകരിച്ചു</ td >
- </ tr >
- ...
പിന്തുണയ്ക്കുന്ന പട്ടിക HTML ഘടകങ്ങളുടെ പട്ടികയും അവ എങ്ങനെ ഉപയോഗിക്കണം എന്നതും.
ടാഗ് ചെയ്യുക | വിവരണം |
---|---|
<table> |
ഒരു പട്ടിക ഫോർമാറ്റിൽ ഡാറ്റ പ്രദർശിപ്പിക്കുന്നതിനുള്ള റാപ്പിംഗ് ഘടകം |
<thead> |
<tr> പട്ടിക നിരകൾ ലേബൽ ചെയ്യുന്നതിന് പട്ടിക തലക്കെട്ട് വരികൾക്കുള്ള ( ) കണ്ടെയ്നർ ഘടകം |
<tbody> |
<tr> പട്ടികയുടെ ബോഡിയിലെ പട്ടിക വരികൾക്കുള്ള ( ) കണ്ടെയ്നർ ഘടകം |
<tr> |
ഒരൊറ്റ വരിയിൽ ദൃശ്യമാകുന്ന ഒരു കൂട്ടം ടേബിൾ സെല്ലുകളുടെ ( <td> അല്ലെങ്കിൽ ) കണ്ടെയ്നർ ഘടകം<th> |
<td> |
ഡിഫോൾട്ട് ടേബിൾ സെൽ |
<th> |
നിരയ്ക്കായുള്ള പ്രത്യേക പട്ടിക സെൽ (അല്ലെങ്കിൽ വരി, സ്കോപ്പും പ്ലേസ്മെന്റും അനുസരിച്ച്) ലേബലുകൾ a ഉള്ളിൽ ഉപയോഗിക്കണം <thead> |
<caption> |
സ്ക്രീൻ റീഡറുകൾക്ക് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമായ, പട്ടിക കൈവശമുള്ളതിന്റെ വിവരണം അല്ലെങ്കിൽ സംഗ്രഹം |
- <പട്ടിക>
- < caption> ... </ caption>
- <thead>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> ... </td>
- <td> ... </td>
- </tr>
- </tbody>
- </table>
വ്യക്തിഗത ഫോം നിയന്ത്രണങ്ങൾ സ്റ്റൈലിംഗ് സ്വീകരിക്കുന്നു, എന്നാൽ മാർക്ക്അപ്പിൽ ആവശ്യമായ അടിസ്ഥാന ക്ലാസുകളോ <form>
വലിയ മാറ്റങ്ങളോ ഇല്ലാതെ. ഫോം നിയന്ത്രണങ്ങൾക്ക് മുകളിൽ അടുക്കിവെച്ചതും ഇടത് വിന്യസിച്ചതുമായ ലേബലുകളിൽ ഫലങ്ങൾ.
- <ഫോം>
- <legend> ലെജൻഡ് </legend>
- <label> ലേബൽ പേര് </label>
- <input type = "text" placeholder = "എന്തെങ്കിലും ടൈപ്പ് ചെയ്യുക..." >
- <span class = "help-block" > ബ്ലോക്ക്-ലെവൽ സഹായ വാചകം ഇവിടെയുണ്ട്. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > എന്നെ പരിശോധിക്കുക
- </label>
- <button type = "submit" class = "btn" > സമർപ്പിക്കുക </button>
- </form>
സാധാരണ ഉപയോഗ കേസുകൾക്കായി മൂന്ന് ഓപ്ഷണൽ ഫോം ലേഔട്ടുകളാണ് ബൂട്ട്സ്ട്രാപ്പിനൊപ്പം ഉൾപ്പെടുത്തിയിരിക്കുന്നത്.
.form-search
ഫോമിലേക്കും .search-query
അധിക <input>
-വൃത്താകൃതിയിലുള്ള വാചക ഇൻപുട്ടിലേക്കും ചേർക്കുക .
- <form class = "form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Search </button>
- </form>
.form-inline
ഇടത് വിന്യസിച്ച ലേബലുകൾക്കും കോംപാക്റ്റ് ലേഔട്ടിനായി ഇൻലൈൻ-ബ്ലോക്ക് നിയന്ത്രണങ്ങൾക്കുമായി ചേർക്കുക .
- <ഫോം ക്ലാസ് = "ഫോം-ഇൻലൈൻ" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <label class = "checkbox" >
- <input type = "checkbox" > എന്നെ ഓർക്കുക
- </label>
- <button type = "submit" class = "btn" > സൈൻ ഇൻ ചെയ്യുക </button>
- </form>
നിയന്ത്രണങ്ങളുടെ അതേ വരിയിൽ അവ ദൃശ്യമാക്കുന്നതിന് ലേബലുകൾ വലത് വിന്യസിച്ച് ഇടത്തേക്ക് ഫ്ലോട്ട് ചെയ്യുക. ഒരു ഡിഫോൾട്ട് ഫോമിൽ നിന്ന് ഏറ്റവും കൂടുതൽ മാർക്ക്അപ്പ് മാറ്റങ്ങൾ ആവശ്യമാണ്:
.form-horizontal
ഫോമിലേക്ക് ചേർക്കുക.control-group
.control-label
ലേബലിൽ ചേർക്കുക.controls
ശരിയായ വിന്യാസത്തിനായി ഏതെങ്കിലും ബന്ധപ്പെട്ട നിയന്ത്രണങ്ങൾ പൊതിയുക
- <form class = "form-horizontal" >
- <div class = "control-group" >
- <label class = "control-label" for = "inputEmail" > ഇമെയിൽ </label>
- <div class = "നിയന്ത്രണങ്ങൾ" >
- <input type = "text" id = "inputEmail" placeholder = " Email" >
- </div>
- </div>
- <div class = "control-group" >
- <label class = "control-label" for = "inputPassword" > പാസ്വേഡ് </label>
- <div class = "നിയന്ത്രണങ്ങൾ" >
- <input type = "password" id = "inputPassword" placeholder = " Password" >
- </div>
- </div>
- <div class = "control-group" >
- <div class = "നിയന്ത്രണങ്ങൾ" >
- <label class = "checkbox" >
- <input type = "checkbox" > എന്നെ ഓർക്കുക
- </label>
- <button type = "submit" class = "btn" > സൈൻ ഇൻ ചെയ്യുക </button>
- </div>
- </div>
- </form>
ഒരു ഉദാഹരണ ഫോം ലേഔട്ടിൽ പിന്തുണയ്ക്കുന്ന സ്റ്റാൻഡേർഡ് ഫോം നിയന്ത്രണങ്ങളുടെ ഉദാഹരണങ്ങൾ.
ഏറ്റവും സാധാരണമായ ഫോം നിയന്ത്രണം, ടെക്സ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള ഇൻപുട്ട് ഫീൽഡുകൾ. എല്ലാ HTML5 തരങ്ങൾക്കുമുള്ള പിന്തുണ ഉൾപ്പെടുന്നു: വാചകം, പാസ്വേഡ്, തീയതിസമയം, തീയതി-പ്രാദേശികം, തീയതി, മാസം, സമയം, ആഴ്ച, നമ്പർ, ഇമെയിൽ, url, തിരയൽ, ടെൽ, നിറം.
type
എല്ലാ സമയത്തും ഒരു നിർദ്ദിഷ്ട ഉപയോഗം ആവശ്യമാണ് .
- <input type = "text" placeholder = "Text input" >
വാചകത്തിന്റെ ഒന്നിലധികം വരികൾ പിന്തുണയ്ക്കുന്ന ഫോം നിയന്ത്രണം. row
ആവശ്യാനുസരണം ആട്രിബ്യൂട്ട് മാറ്റുക .
- <textarea row = " 3" ></textarea>
ചെക്ക്ബോക്സുകൾ ഒരു ലിസ്റ്റിലെ ഒന്നോ അതിലധികമോ ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കുന്നതിനാണ്, റേഡിയോകൾ പലതിൽ നിന്നും ഒരു ഓപ്ഷൻ തിരഞ്ഞെടുക്കുന്നതിനാണ്.
- <label class = "checkbox" >
- <ഇൻപുട്ട് തരം = "ചെക്ക്ബോക്സ്" മൂല്യം = "" >
- ഓപ്ഷൻ ഒന്ന് ഇതും അതും-എന്തുകൊണ്ടാണ് ഇത് മികച്ചതെന്ന് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക
- </label>
- <ലേബൽ ക്ലാസ് = "റേഡിയോ" >
- <ഇൻപുട്ട് തരം = "റേഡിയോ" പേര് = "ഓപ്ഷൻസ് റേഡിയോസ്" ഐഡി = "ഓപ്ഷനുകൾറേഡിയോസ്1" മൂല്യം = "ഓപ്ഷൻ1" ചെക്ക് ചെയ്തു >
- ഓപ്ഷൻ ഒന്ന് ഇതും അതും-എന്തുകൊണ്ടാണ് ഇത് മികച്ചതെന്ന് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക
- </label>
- <ലേബൽ ക്ലാസ് = "റേഡിയോ" >
- <ഇൻപുട്ട് തരം = "റേഡിയോ" പേര് = "ഓപ്ഷൻസ് റേഡിയോസ്" ഐഡി = "ഓപ്ഷൻസ്റേഡിയോസ്2" മൂല്യം = "ഓപ്ഷൻ2" >
- ഓപ്ഷൻ രണ്ട് മറ്റെന്തെങ്കിലും ആകാം, അത് തിരഞ്ഞെടുക്കുന്നത് ഓപ്ഷൻ ഒന്ന് തിരഞ്ഞെടുത്തത് മാറ്റും
- </label>
.inline
ഒരേ ലൈനിൽ ദൃശ്യമാകുന്ന നിയന്ത്രണങ്ങൾക്കായി ചെക്ക്ബോക്സുകളുടെയോ റേഡിയോകളുടെയോ ഒരു ശ്രേണിയിലേക്ക് ക്ലാസ് ചേർക്കുക .
- <label class = "checkbox inline" >
- <input type = "checkbox " id = "inlineCheckbox1" value = "option1 " > 1
- </label>
- <label class = "checkbox inline" >
- <input type = "checkbox " id = "inlineCheckbox2" value = "option2 " > 2
- </label>
- <label class = "checkbox inline" >
- <input type = "checkbox " id = "inlineCheckbox3" value = "option3" > 3
- </label>
multiple="multiple"
ഒരേസമയം ഒന്നിലധികം ഓപ്ഷനുകൾ കാണിക്കാൻ ഡിഫോൾട്ട് ഓപ്ഷൻ ഉപയോഗിക്കുക അല്ലെങ്കിൽ a വ്യക്തമാക്കുക .
- <തിരഞ്ഞെടുക്കുക>
- <option> 1 </option>
- <option> 2 </option>
- <option> 3 </option>
- <option> 4 </option>
- <option> 5 </option>
- </select>
- <select multiple = "multiple" >
- <option> 1 </option>
- <option> 2 </option>
- <option> 3 </option>
- <option> 4 </option>
- <option> 5 </option>
- </select>
നിലവിലുള്ള ബ്രൗസർ നിയന്ത്രണങ്ങളുടെ മുകളിൽ ചേർക്കുന്നത്, ബൂട്ട്സ്ട്രാപ്പിൽ മറ്റ് ഉപയോഗപ്രദമായ ഫോം ഘടകങ്ങൾ ഉൾപ്പെടുന്നു.
ഏതെങ്കിലും ടെക്സ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള ഇൻപുട്ടിന് മുമ്പോ ശേഷമോ ടെക്സ്റ്റോ ബട്ടണുകളോ ചേർക്കുക. അത് ശ്രദ്ധിക്കുകselect
ഘടകങ്ങൾ ഇവിടെ പിന്തുണയ്ക്കുന്നില്ല എന്നത്
ഒരു ഇൻപുട്ടിലേക്ക് ടെക്സ്റ്റ് മുൻകൂട്ടി തയ്യാറാക്കുന്നതിനോ കൂട്ടിച്ചേർക്കുന്നതിനോ ഉള്ള രണ്ട് ക്ലാസുകളിൽ ഒന്ന് ഉപയോഗിച്ച് ഒരു .add-on
, ഒരു എന്നിവ പൊതിയുക .input
- <div class = "input-prepend" >
- <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput " size = "16" type = "text" placeholder = "Username " >
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInput" size = "16" type = "text" ><span class = "add-on" > .00 </span>
- </div>
.add-on
ഒരു ഇൻപുട്ട് മുൻകൂട്ടി തയ്യാറാക്കുന്നതിനും കൂട്ടിച്ചേർക്കുന്നതിനും രണ്ട് ക്ലാസുകളും രണ്ട് ഉദാഹരണങ്ങളും ഉപയോഗിക്കുക .
- <div class = "input-prepend input-append" >
- <span class = "add-on" > $ </span><input class = "span2" id = "appendedPrependedInput" size = "16" type = "text" ><span class = "add-on" > .00 </span>
- </div>
ഒരു ഇൻപുട്ടിലേക്ക് ഒരു ബട്ടൺ (അല്ലെങ്കിൽ രണ്ട്) അറ്റാച്ചുചെയ്യാൻ <span>
ടെക്സ്റ്റിനൊപ്പമുള്ള a എന്നതിന് പകരം a ഉപയോഗിക്കുക..btn
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButton" size = "16" type = "text" ><button class = "btn" type = "button" > Go! </button>
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButtons" size = "16" type = "text" ><button class = "btn" type = "button" > Search </button><button class = "btn" type = "button" > ഓപ്ഷനുകൾ </button>
- </div>
- <form class = "form-search" >
- <div class = "input-append" >
- <input type = "text" class = "span2 search-query" >
- <button type = "submit" class = "btn" > Search </button>
- </div>
- <div class = "input-prepend" >
- <button type = "submit" class = "btn" > Search </button>
- <input type = "text" class = "span2 search-query" >
- </div>
- </form>
ആപേക്ഷിക വലുപ്പത്തിലുള്ള ക്ലാസുകൾ ഉപയോഗിക്കുക .input-large
അല്ലെങ്കിൽ നിങ്ങളുടെ ഇൻപുട്ടുകൾ ഉപയോഗിച്ച് ഗ്രിഡ് കോളം വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുത്തുക.span*
.
- <input class = "input-mini" type = "text" placeholder = ".input-mini" >
- <input class = "input-small" type = "text" placeholder = ".input-small" >
- <input class = "input-medium" type = "text" placeholder = ".input-medium" >
- <input class = "input-large" type = "text" placeholder = ".input-large" >
- <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
- <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >
ഹെഡ്സ് അപ്പുകൾ! ഭാവി പതിപ്പുകളിൽ, ഞങ്ങളുടെ ബട്ടൺ വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്നതിന് ഈ ആപേക്ഷിക ഇൻപുട്ട് ക്ലാസുകളുടെ ഉപയോഗം ഞങ്ങൾ മാറ്റും. ഉദാഹരണത്തിന്,.input-large
ഒരു ഇൻപുട്ടിന്റെ പാഡിംഗും ഫോണ്ട് വലുപ്പവും വർദ്ധിപ്പിക്കും.
ഗ്രിഡ് നിരകളുടെ സമാന വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്ന ഇൻപുട്ടുകൾക്കായി .span1
to ഉപയോഗിക്കുക ..span12
- <input class = "span1" type = "text" placeholder = ".span1" >
- <input class = "span2" type = "text" placeholder = ".span2" >
- <input class = "span3" type = "text" placeholder = ".span3" >
- <select class = "span1" >
- ...
- </select>
- <select class = "span2" >
- ...
- </select>
- <select class = "span3" >
- ...
- </select>
ഓരോ വരിയിലും ഒന്നിലധികം ഗ്രിഡ് ഇൻപുട്ടുകൾക്കായി , ശരിയായ സ്പെയ്സിനായി മോഡിഫയർ ക്ലാസ് ഉപയോഗിക്കുക.controls-row
. വൈറ്റ്-സ്പേസ് തകർക്കാൻ ഇത് ഇൻപുട്ടുകളെ ഫ്ലോട്ട് ചെയ്യുന്നു, ശരിയായ മാർജിനുകൾ സജ്ജമാക്കുന്നു, ഫ്ലോട്ട് ക്ലിയർ ചെയ്യുന്നു.
- <div class = "നിയന്ത്രണങ്ങൾ" >
- <input class = "span5" type = "text" placeholder = ".span5" >
- </div>
- <div class = "controls controls-row" >
- <input class = "span4" type = "text" placeholder = ".span4" >
- <input class = "span1" type = "text" placeholder = ".span1" >
- </div>
- ...
യഥാർത്ഥ ഫോം മാർക്ക്അപ്പ് ഉപയോഗിക്കാതെ എഡിറ്റ് ചെയ്യാനാകാത്ത ഫോമിൽ ഡാറ്റ അവതരിപ്പിക്കുക.
- <span class = "input-xlarge uneditable-input" > ഇവിടെ ചില മൂല്യങ്ങൾ </span>
ഒരു കൂട്ടം പ്രവർത്തനങ്ങൾ (ബട്ടണുകൾ) ഉപയോഗിച്ച് ഒരു ഫോം അവസാനിപ്പിക്കുക. ഒരു എന്നതിൽ സ്ഥാപിക്കുമ്പോൾ .form-horizontal
, ഫോം നിയന്ത്രണങ്ങൾക്കൊപ്പം അണിനിരക്കുന്നതിന് ബട്ടണുകൾ സ്വയമേവ ഇൻഡന്റ് ചെയ്യും.
- <div class = "form-actions" >
- <button type = "submit" class = "btn btn-primary" > മാറ്റങ്ങൾ സംരക്ഷിക്കുക </button>
- <button type = "button" class = "btn" > റദ്ദാക്കുക </button>
- </div>
ഫോം നിയന്ത്രണങ്ങൾക്ക് ചുറ്റും ദൃശ്യമാകുന്ന സഹായ വാചകത്തിനുള്ള ഇൻലൈൻ, ബ്ലോക്ക് ലെവൽ പിന്തുണ.
- <input type = "text" ><span class = "help-inline" > ഇൻലൈൻ സഹായ വാചകം </span>
- <ഇൻപുട്ട് തരം = "ടെക്സ്റ്റ്" ><span class = "help-block" > ഒരു പുതിയ ലൈനിലേക്ക് വിഭജിച്ച് ഒരു വരിക്ക് അപ്പുറം നീണ്ടേക്കാവുന്ന സഹായ വാചകത്തിന്റെ ദൈർഘ്യമേറിയ ബ്ലോക്ക്. </span>
ഫോം നിയന്ത്രണങ്ങളിലും ലേബലുകളിലും അടിസ്ഥാന ഫീഡ്ബാക്ക് അവസ്ഥകൾ ഉള്ള ഉപയോക്താക്കൾക്കും സന്ദർശകർക്കും ഫീഡ്ബാക്ക് നൽകുക.
outline
ചില ഫോം നിയന്ത്രണങ്ങളിൽ ഞങ്ങൾ ഡിഫോൾട്ട് ശൈലികൾ നീക്കം ചെയ്യുകയും box-shadow
അതിന്റെ സ്ഥാനത്ത് ഒരു പ്രയോഗിക്കുകയും ചെയ്യുന്നു :focus
.
- <input class = "input-xlarge" id = "focusedInput" type = "text" value = "ഇത് ഫോക്കസ് ചെയ്തിരിക്കുന്നു..." >
disabled
ഉപയോക്തൃ ഇൻപുട്ട് തടയുന്നതിനും അൽപ്പം വ്യത്യസ്തമായ രൂപം ട്രിഗർ ചെയ്യുന്നതിനും ഇൻപുട്ടിൽ ആട്രിബ്യൂട്ട് ചേർക്കുക .
- <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ഇവിടെ പ്രവർത്തനരഹിതമാക്കിയ ഇൻപുട്ട്..." പ്രവർത്തനരഹിതമാക്കി >
പിശക്, മുന്നറിയിപ്പ്, വിജയ സന്ദേശങ്ങൾ എന്നിവയ്ക്കുള്ള മൂല്യനിർണ്ണയ ശൈലികൾ ബൂട്ട്സ്ട്രാപ്പിൽ ഉൾപ്പെടുന്നു. ഉപയോഗിക്കുന്നതിന്, ചുറ്റുമുള്ളവയിലേക്ക് ഉചിതമായ ക്ലാസ് ചേർക്കുക .control-group
.
- <div class = "control-group warning" >
- <label class = "control-label" for = "inputWarning" > മുന്നറിയിപ്പോടുകൂടിയ ഇൻപുട്ട് </label>
- <div class = "നിയന്ത്രണങ്ങൾ" >
- <input type = "text" id = "inputWarning" >
- <span class = "help-inline" > എന്തോ കുഴപ്പം സംഭവിച്ചിരിക്കാം </span>
- </div>
- </div>
- <div class = "control-group error" >
- <label class = "control-label" for = "inputError" > പിശകുള്ള ഇൻപുട്ട് </label>
- <div class = "നിയന്ത്രണങ്ങൾ" >
- <input type = "text" id = "inputError" >
- <span class = "help-inline" > ദയവായി പിശക് തിരുത്തുക </span>
- </div>
- </div>
- <div class = "control-group success" >
- <label class = "control-label" for = "inputSuccess" > വിജയത്തോടെയുള്ള ഇൻപുട്ട് </label>
- <div class = "നിയന്ത്രണങ്ങൾ" >
- <input type = "text" id = "inputSuccess" >
- <span class = "help-inline" > കൊള്ളാം! </span>
- </div>
- </div>
<img>
ഏത് പ്രോജക്റ്റിലും ചിത്രങ്ങൾ എളുപ്പത്തിൽ സ്റ്റൈൽ ചെയ്യുന്നതിനായി ഒരു ഘടകത്തിലേക്ക് ക്ലാസുകൾ ചേർക്കുക .
- <img src = "..." class = "img-rounded" >
- <img src = "..." class = "img-circle" >
- <img src = "..." class = "img-polaroid" >
ഹെഡ്സ് അപ്പുകൾ! .img-rounded
പിന്തുണയില്ലാത്തതിനാൽ .img-circle
IE7-8-ൽ പ്രവർത്തിക്കരുത് border-radius
.
സ്പ്രൈറ്റ് രൂപത്തിലുള്ള 140 ഐക്കണുകൾ, ഇരുണ്ട ചാരനിറത്തിലും (ഡിഫോൾട്ട്) വെള്ളയിലും ലഭ്യമാണ്, Glyphicons നൽകിയിരിക്കുന്നു .
Glyphicons Halflings സാധാരണയായി സൗജന്യമായി ലഭ്യമല്ല, എന്നാൽ ബൂട്ട്സ്ട്രാപ്പും Glyphicons സ്രഷ്ടാക്കളും തമ്മിലുള്ള ഒരു ക്രമീകരണം ഡെവലപ്പർമാർ എന്ന നിലയിൽ നിങ്ങൾക്ക് ചെലവ് കൂടാതെ ഇത് സാധ്യമാക്കിയിരിക്കുന്നു. നന്ദി എന്ന നിലയിൽ, പ്രായോഗികമായപ്പോഴെല്ലാം Glyphicons- ലേക്ക് ഒരു ഓപ്ഷണൽ ലിങ്ക് തിരികെ ഉൾപ്പെടുത്താൻ ഞങ്ങൾ നിങ്ങളോട് ആവശ്യപ്പെടുന്നു.
എല്ലാ ഐക്കണുകൾക്കും <i>
ഒരു അദ്വിതീയ ക്ലാസ് ഉള്ള ഒരു ടാഗ് ആവശ്യമാണ്, പ്രിഫിക്സ് ചെയ്തിരിക്കുന്നത് icon-
. ഉപയോഗിക്കുന്നതിന്, ഇനിപ്പറയുന്ന കോഡ് എവിടെയും സ്ഥാപിക്കുക:
- <i class = "icon-search" ></i>
വിപരീത (വെളുത്ത) ഐക്കണുകൾക്കായി ഒരു അധിക ക്ലാസ് ഉപയോഗിച്ച് തയ്യാറാക്കിയ ശൈലികളും ലഭ്യമാണ്. nav, ഡ്രോപ്പ്ഡൗൺ ലിങ്കുകൾക്കായി ഹോവർ, ആക്റ്റീവ് സ്റ്റേറ്റുകൾ എന്നിവയിൽ ഞങ്ങൾ ഈ ക്ലാസ് പ്രത്യേകമായി നടപ്പിലാക്കും.
- <i class = "icon-search icon-white" ></i>
ഹെഡ്സ് അപ്പുകൾ! ബട്ടണുകളിലോ നാവിക ലിങ്കുകളിലോ ഉള്ളതുപോലെ ടെക്സ്റ്റിന്റെ സ്ട്രിംഗുകൾ ഉപയോഗിക്കുമ്പോൾ, <i>
ശരിയായ സ്പെയ്സിംഗിനായി ടാഗിന് ശേഷം ഒരു സ്പെയ്സ് ഇടുന്നത് ഉറപ്പാക്കുക.
ഒരു ടൂൾബാർ, നാവിഗേഷൻ അല്ലെങ്കിൽ മുൻകൂട്ടി തയ്യാറാക്കിയ ഫോം ഇൻപുട്ടുകൾക്കായി ബട്ടണുകൾ, ബട്ടൺ ഗ്രൂപ്പുകൾ എന്നിവയിൽ അവ ഉപയോഗിക്കുക.
- <div class = "btn-toolbar" >
- <div class = "btn-group" >
- <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>
- </div>
- </div>
- <div class = "btn-group" >
- <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> ഉപയോക്താവ് </a>
- <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
- <ul class = "dropdown-menu" >
- <li><a href = "#" ><i class = "icon-pencil" ></i> എഡിറ്റ് </a></li>
- <li><a href = "#" ><i class = "icon-trash" ></i> ഇല്ലാതാക്കുക </a></li>
- <li><a href = "#" ><i class = "icon-ban-circle" ></i> നിരോധിക്കുക </a></li>
- <li class = "divider" ></li>
- <li><a href = "#" ><i class = "i" ></i> അഡ്മിൻ ആക്കുക </a></li>
- </ul>
- </div>
- <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>
- <ul class = "nav nav-list" >
- <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> ഹോം </a></li>
- <li><a href = "#" ><i class = "icon-book" ></i> ലൈബ്രറി </a></li>
- <li><a href = "#" ><i class = "icon-pencil" ></i> ആപ്ലിക്കേഷനുകൾ </a></li>
- <li><a href = "#" ><i class = "i" ></i> മറ്റുള്ളവ </a></li>
- </ul>
- <div class = "control-group" >
- <label class = "control-label" for = "inputIcon" > ഇമെയിൽ വിലാസം </label>
- <div class = "നിയന്ത്രണങ്ങൾ" >
- <div class = "input-prepend" >
- <span class = "add-on" ><i class = "icon-envelope" ><i><span><input class = "span2" id = "inputIcon" type = "text" >
- </div>
- </div>