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

അടിസ്ഥാന CSS

അടിസ്ഥാന HTML ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യുകയും വിപുലീകരിക്കാവുന്ന ക്ലാസുകൾ ഉപയോഗിച്ച് മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

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

ടൈപ്പോഗ്രാഫി

തലക്കെട്ടുകൾ

എല്ലാ HTML തലക്കെട്ടുകളും <h1>ലഭ്യമാണ് <h6>.

h1. തലക്കെട്ട് 1

h2. തലക്കെട്ട് 2

h3. തലക്കെട്ട് 3

h4. തലക്കെട്ട് 4

h5. തലക്കെട്ട് 5
h6. തലക്കെട്ട് 6

ബോഡി കോപ്പി

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഗ്ലോബൽ ഡിഫോൾട്ട് 14pxfont-size ആണ് , ഒരു 20px ആണ് . ഇത് എല്ലാ ഖണ്ഡികകൾക്കും ബാധകമാണ്. കൂടാതെ, (ഖണ്ഡികകൾക്ക്) അവയുടെ വരി-ഉയരത്തിന്റെ പകുതിയുടെ താഴെയുള്ള മാർജിൻ ലഭിക്കും (സ്ഥിരമായി 10px).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>

ഇറ്റാലിക്സ്

ഇറ്റാലിക്‌സ് ഉള്ള ടെക്‌സ്‌റ്റിന്റെ ഒരു സ്‌നിപ്പറ്റ് ഊന്നിപ്പറയുന്നതിന്.

ടെക്‌സ്‌റ്റിന്റെ ഇനിപ്പറയുന്ന സ്‌നിപ്പെറ്റ് ഇറ്റാലിസ് ചെയ്‌ത ടെക്‌സ്‌റ്റായി റെൻഡർ ചെയ്‌തിരിക്കുന്നു .

<em> ഇറ്റാലിസ് ചെയ്‌ത വാചകമായി റെൻഡർ ചെയ്‌തു </em>

ഹെഡ്സ് അപ്പുകൾ!HTML5- <b>ലും ഉപയോഗിക്കാൻ മടിക്കേണ്ടതില്ല. വോയ്‌സ്, ടെക്‌നിക്കൽ പദങ്ങൾ മുതലായവയ്‌ക്കായി അധിക പ്രാധാന്യം നൽകാതെ വാക്കുകളോ ശൈലികളോ ഹൈലൈറ്റ് ചെയ്യുന്നതാണ് ഇത്.<i><b><i>

അലൈൻമെന്റ് ക്ലാസുകൾ

ടെക്‌സ്‌റ്റ് അലൈൻമെന്റ് ക്ലാസുകളുള്ള ഘടകങ്ങളിലേക്ക് ടെക്‌സ്‌റ്റ് എളുപ്പത്തിൽ പുനഃക്രമീകരിക്കുക.

ഇടത് വിന്യസിച്ച വാചകം.

മധ്യഭാഗത്ത് വിന്യസിച്ച വാചകം.

വലത് വിന്യസിച്ച വാചകം.

  1. <p class = "text-left" > ഇടത് വിന്യസിച്ച വാചകം. </p> 
  2. <p class = "text-center" > മധ്യഭാഗത്ത് വിന്യസിച്ച വാചകം. </p> 
  3. <p class = "text-right" > വലത് വിന്യസിച്ച വാചകം. </p>

ഊന്നൽ ക്ലാസുകൾ

ഒരുപിടി ഊന്നൽ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് നിറത്തിലൂടെ അർത്ഥം അറിയിക്കുക.

ഫ്യൂസ് ഡാപിബസ്, ടെല്ലസ് എസി കർസസ് കമോഡോ, ടോർട്ടർ മൗറിസ് നിബ്.

Etiam porta sem malesuada Magna mollis euismod.

ഡോനെക് ഉള്ളംകോർപ്പർ നുള്ള നോൺ മെറ്റസ് ആക്ടർ ഫ്രിംഗില്ല.

എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്‌ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ്.

ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല.

  1. <p class = "Mute" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada Magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. പെല്ലെന്റസ്‌ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ്. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

ചുരുക്കെഴുത്തുകൾ

<abbr>വിപുലീകരിച്ച പതിപ്പ് ഹോവറിൽ കാണിക്കുന്നതിന് ചുരുക്കങ്ങൾക്കും ചുരുക്കെഴുത്തുകൾക്കുമായി HTML ന്റെ മൂലകത്തിന്റെ ശൈലിയിലുള്ള നടപ്പിലാക്കൽ . ഒരു titleആട്രിബ്യൂട്ട് ഉള്ള ചുരുക്കെഴുത്തുകൾക്ക് നേരിയ ഡോട്ടുള്ള താഴത്തെ ബോർഡറും ഹോവറിൽ ഒരു ഹെൽപ്പ് കഴ്‌സറും ഉണ്ട്, ഇത് ഹോവറിൽ അധിക സന്ദർഭം നൽകുന്നു.

<abbr>

ഒരു ചുരുക്കെഴുത്തിന്റെ നീണ്ട ഹോവറിൽ വിപുലീകരിച്ച ടെക്‌സ്‌റ്റിനായി, titleആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തുക.

ആട്രിബ്യൂട്ട് എന്ന വാക്കിന്റെ ചുരുക്കമാണ് attr .

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

.initialismഅൽപ്പം ചെറിയ ഫോണ്ട്-സൈസിനായി ഒരു ചുരുക്കെഴുത്ത് ചേർക്കുക .

സ്ലൈസ് ചെയ്ത ബ്രെഡിന് ശേഷമുള്ള ഏറ്റവും മികച്ച കാര്യം HTML ആണ്.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

വിലാസങ്ങൾ

ഏറ്റവും അടുത്തുള്ള പൂർവ്വികനെയോ അല്ലെങ്കിൽ മുഴുവൻ ജോലിയുടെയും കോൺടാക്റ്റ് വിവരങ്ങൾ അവതരിപ്പിക്കുക.

<address>

എല്ലാ വരികളും അവസാനിപ്പിച്ച് ഫോർമാറ്റിംഗ് സംരക്ഷിക്കുക <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
മുഴുവൻ പേര്
[email protected] 
  1. <വിലാസം>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 ഫോൾസം ഏവ്, സ്യൂട്ട് 600 <br>
  4.   സാൻ ഫ്രാൻസിസ്കോ, CA 94107 <br>
  5.   <abbr title = "ഫോൺ" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <വിലാസം>
  9.   <strong> മുഴുവൻ പേര് </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

ബ്ലോക്ക്ക്വോട്ടുകൾ

നിങ്ങളുടെ പ്രമാണത്തിനുള്ളിലെ മറ്റൊരു ഉറവിടത്തിൽ നിന്നുള്ള ഉള്ളടക്കത്തിന്റെ ബ്ലോക്കുകൾ ഉദ്ധരിക്കാൻ.

ഡിഫോൾട്ട് ബ്ലോക്ക്ക്വോട്ട്

ഉദ്ധരണിയായി <blockquote>ഏതെങ്കിലും HTML പൊതിയുക . നേരായ ഉദ്ധരണികൾക്കായി ഞങ്ങൾ ഒരു ശുപാർശ ചെയ്യുന്നു <p>.

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.

  1. <blockquote>
  2.   <p> ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും. </p>
  3. </blockquote>

ബ്ലോക്ക്ക്വോട്ട് ഓപ്ഷനുകൾ

ഒരു സ്റ്റാൻഡേർഡ് ബ്ലോക്ക്ക്വോട്ടിലെ ലളിതമായ വ്യതിയാനങ്ങൾക്കായി ശൈലിയും ഉള്ളടക്കവും മാറ്റുന്നു.

ഒരു ഉറവിടത്തിന് പേരിടുന്നു

<small>ഉറവിടം തിരിച്ചറിയാൻ ടാഗ് ചേർക്കുക . സ്രോതസ് വർക്കിന്റെ പേര് അതിൽ പൊതിയുക <cite>.

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.

ഉറവിട ശീർഷകത്തിൽ പ്രശസ്തനായ ഒരാൾ 
  1. <blockquote>
  2.   <p> ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും. </p>
  3.   <small> പ്രശസ്തനായ ഒരാൾ <cite title = "ഉറവിട ശീർഷകം" > ഉറവിട ശീർഷകം </cite></small> 
  4. </blockquote>

ഇതര ഡിസ്പ്ലേകൾ

ഫ്ലോട്ടുചെയ്‌തതും വലതുവശത്ത് വിന്യസിച്ചതുമായ ബ്ലോക്ക്‌ക്വോട്ടിനായി ഉപയോഗിക്കുക .pull-right.

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.

ഉറവിട ശീർഷകത്തിൽ പ്രശസ്തനായ ഒരാൾ 
  1. <blockquote class = "വലത്തേക്ക് വലിക്കുക" > 
  2.   ...
  3. </blockquote>

ലിസ്റ്റുകൾ

ഓർഡർ ചെയ്യാത്തത്

ഓർഡർ വ്യക്തമായി പ്രാധാന്യമില്ലാത്ത ഇനങ്ങളുടെ ഒരു ലിസ്റ്റ് .

  • ലോറെം ഇപ്സം ഡോളോർ സിറ്റ് അമെറ്റ്
  • കൺസെക്റ്റൂർ അഡിപിസ്സിംഗ് എലിറ്റ്
  • പൂർണ്ണസംഖ്യ മോളസ്‌റ്റി ലോറം അറ്റ് മാസ്‌
  • പ്രെറ്റിയം നിസ്ൽ അലിക്വറ്റിലെ സൗകര്യം
  • Nulla volutpat aliquam velit
    • ഫാസെല്ലസ് ഐക്യുലിസ് നെക്വെ
    • പുരുസ് സോഡൽസ് അൾട്രിസികൾ
    • വെസ്റ്റിബുലം ലൗറെറ്റ് പോർട്ടിറ്റർ സെം
    • AC tristique libero volutpat at
  • ഫൗസിബസ് പോർട്ട ലാക്കസ് ഫ്രിംഗില്ല വേൽ
  • എനിയൻ ഇരിക്കുന്നു
  • എഗെറ്റ് പോർട്ടിറ്റർ ലോറം
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

ഉത്തരവിട്ടു

ഓർഡർ വ്യക്തമായി പ്രാധാന്യമുള്ള ഇനങ്ങളുടെ ഒരു ലിസ്റ്റ് .

  1. ലോറെം ഇപ്സം ഡോളോർ സിറ്റ് അമെറ്റ്
  2. കൺസെക്റ്റൂർ അഡിപിസ്സിംഗ് എലിറ്റ്
  3. പൂർണ്ണസംഖ്യ മോളസ്‌റ്റി ലോറം അറ്റ് മാസ്‌
  4. പ്രെറ്റിയം നിസ്ൽ അലിക്വറ്റിലെ സൗകര്യം
  5. Nulla volutpat aliquam velit
  6. ഫൗസിബസ് പോർട്ട ലാക്കസ് ഫ്രിംഗില്ല വേൽ
  7. എനിയൻ ഇരിക്കുന്നു
  8. എഗെറ്റ് പോർട്ടിറ്റർ ലോറം
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

ശൈലിയില്ലാത്തത്

ലിസ്റ്റ് ഇനങ്ങളിലെ ഡിഫോൾട്ടും list-styleഇടത് പാഡിംഗും നീക്കം ചെയ്യുക (ഉടൻ കുട്ടികൾ മാത്രം).

  • ലോറെം ഇപ്സം ഡോളോർ സിറ്റ് അമെറ്റ്
  • കൺസെക്റ്റൂർ അഡിപിസ്സിംഗ് എലിറ്റ്
  • പൂർണ്ണസംഖ്യ മോളസ്‌റ്റി ലോറം അറ്റ് മാസ്‌
  • പ്രെറ്റിയം നിസ്ൽ അലിക്വറ്റിലെ സൗകര്യം
  • Nulla volutpat aliquam velit
    • ഫാസെല്ലസ് ഐക്യുലിസ് നെക്വെ
    • പുരുസ് സോഡൽസ് അൾട്രിസികൾ
    • വെസ്റ്റിബുലം ലൗറെറ്റ് പോർട്ടിറ്റർ സെം
    • AC tristique libero volutpat at
  • ഫൗസിബസ് പോർട്ട ലാക്കസ് ഫ്രിംഗില്ല വേൽ
  • എനിയൻ ഇരിക്കുന്നു
  • എഗെറ്റ് പോർട്ടിറ്റർ ലോറം
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

ഇൻ ലൈൻ

എല്ലാ ലിസ്റ്റ് ഇനങ്ങളും ഒരു ലൈനിൽ inline-blockകുറച്ച് ലൈറ്റ് പാഡിംഗിൽ സ്ഥാപിക്കുക.

  • ലോറെം ഇപ്സം
  • ഫാസെല്ലസ് ഐക്യുലിസ്
  • നുള്ള വൊലുത്പത്
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

വിവരണം

അനുബന്ധ വിവരണങ്ങളുള്ള നിബന്ധനകളുടെ ഒരു ലിസ്റ്റ്.

വിവരണ ലിസ്റ്റുകൾ
നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.
യൂയിസ്മോഡ്
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്.
Malesuada പോർട്ട
Etiam porta sem malesuada Magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

തിരശ്ചീന വിവരണം

നിബന്ധനകളും വിവരണങ്ങളും <dl>വശങ്ങളിലായി നിരത്തുക.

വിവരണ ലിസ്റ്റുകൾ
നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.
യൂയിസ്മോഡ്
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്.
Malesuada പോർട്ട
Etiam porta sem malesuada Magna mollis euismod.
ഫെലിസ് യൂയിസ്മോഡ് സെമ്പർ എഗെറ്റ് ലാസിനിയ
ഫ്യൂസ് ഡാപിബസ്, ടെല്ലസ് എസി കർസസ് കമ്മോഡോ, ടോർട്ടർ മൗറിസ് കോൺഡിമെന്റം നിബ്, യുട്ട് ഫെർമെന്റം മാസ് ജസ്തോ സിറ്റ് അമെറ്റ് റിസസ്. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

ഹെഡ്സ് അപ്പുകൾ!തിരശ്ചീന വിവരണ ലിസ്റ്റുകൾ ഇടത് കോളം ഫിക്സിൽ ഉൾക്കൊള്ളിക്കാനാവാത്ത ദൈർഘ്യമേറിയ പദങ്ങൾ വെട്ടിച്ചുരുക്കും text-overflow. ഇടുങ്ങിയ വ്യൂപോർട്ടുകളിൽ, അവ ഡിഫോൾട്ട് സ്റ്റാക്ക് ചെയ്ത ലേഔട്ടിലേക്ക് മാറും.

കോഡ്

ഇൻ ലൈൻ

ഉപയോഗിച്ച് കോഡിന്റെ ഇൻലൈൻ സ്‌നിപ്പെറ്റുകൾ പൊതിയുക <code>.

ഉദാഹരണത്തിന്, <section>ഇൻലൈൻ ആയി പൊതിയണം. 
  1. ഉദാഹരണത്തിന് , < code> & lt ; വിഭാഗം & gt ;</ code > ഇൻലൈൻ ആയി പൊതിയണം .

അടിസ്ഥാന ബ്ലോക്ക്

<pre>കോഡിന്റെ ഒന്നിലധികം വരികൾക്കായി ഉപയോഗിക്കുക . ശരിയായ റെൻഡറിങ്ങിനായി കോഡിലെ ഏതെങ്കിലും ആംഗിൾ ബ്രാക്കറ്റുകളിൽ നിന്ന് രക്ഷപ്പെടുന്നത് ഉറപ്പാക്കുക.

<p>സാമ്പിൾ ടെക്സ്റ്റ് ഇവിടെ...</p>
  1. <മുൻപ്>
  2.   <p>സാമ്പിൾ ടെക്സ്റ്റ് ഇവിടെ...</p>
  3. </pre>

ഹെഡ്സ് അപ്പുകൾ!ടാഗുകൾക്കുള്ളിൽ കോഡ് <pre>ഇടതുവശത്ത് കഴിയുന്നത്ര അടുത്ത് സൂക്ഷിക്കുന്നത് ഉറപ്പാക്കുക; അത് എല്ലാ ടാബുകളും റെൻഡർ ചെയ്യും.

നിങ്ങൾക്ക് ഓപ്‌ഷണലായി .pre-scrollableക്ലാസ് ചേർക്കാം, അത് പരമാവധി 350px-ഉയരം സജ്ജീകരിക്കുകയും ഒരു y-ആക്സിസ് സ്ക്രോൾബാർ നൽകുകയും ചെയ്യും.

പട്ടികകൾ

സ്ഥിരസ്ഥിതി ശൈലികൾ

അടിസ്ഥാന സ്‌റ്റൈലിങ്ങിന്-ലൈറ്റ് പാഡിംഗിനും തിരശ്ചീനമായ ഡിവൈഡറുകൾക്കും മാത്രം-ബേസ് ക്ലാസ് .tableഏതെങ്കിലും ഒന്നിലേക്ക് ചേർക്കുക <table>.

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഉപയോക്തൃനാമം
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ 
  1. <table class = "table" > 
  2.   …
  3. </table>

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

ഇനിപ്പറയുന്ന ക്ലാസുകളിൽ ഏതെങ്കിലും .tableഅടിസ്ഥാന ക്ലാസിലേക്ക് ചേർക്കുക.

.table-striped

<tbody>CSS സെലക്ടർ വഴി :nth-child(IE7-8-ൽ ലഭ്യമല്ല) ഏതെങ്കിലും ടേബിൾ വരിയിലേക്ക് സീബ്ര-സ്ട്രിപ്പിംഗ് ചേർക്കുന്നു .

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഉപയോക്തൃനാമം
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

പട്ടികയിലേക്ക് ബോർഡറുകളും വൃത്താകൃതിയിലുള്ള കോണുകളും ചേർക്കുക.

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഉപയോക്തൃനാമം
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
അടയാളപ്പെടുത്തുക ഓട്ടോ @getbootstrap
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

a ഉള്ളിലെ പട്ടിക വരികളിൽ ഒരു ഹോവർ അവസ്ഥ പ്രവർത്തനക്ഷമമാക്കുക <tbody>.

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഉപയോക്തൃനാമം
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

സെൽ പാഡിംഗ് പകുതിയായി മുറിച്ച് പട്ടികകൾ കൂടുതൽ ഒതുക്കമുള്ളതാക്കുന്നു.

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഉപയോക്തൃനാമം
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

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

പട്ടിക വരികൾക്ക് വർണ്ണം നൽകാൻ സന്ദർഭോചിതമായ ക്ലാസുകൾ ഉപയോഗിക്കുക.

ക്ലാസ് വിവരണം
.success വിജയകരമായ അല്ലെങ്കിൽ പോസിറ്റീവ് പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്നു.
.error അപകടകരമോ പ്രതികൂലമോ ആയ ഒരു പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്നു.
.warning ശ്രദ്ധ ആവശ്യമായേക്കാവുന്ന ഒരു മുന്നറിയിപ്പ് സൂചിപ്പിക്കുന്നു.
.info സ്ഥിരസ്ഥിതി ശൈലികൾക്ക് പകരമായി ഉപയോഗിക്കുന്നു.
# ഉൽപ്പന്നം പേയ്മെന്റ് എടുത്തു പദവി
1 ടിബി - പ്രതിമാസ 01/04/2012 അംഗീകരിച്ചു
2 ടിബി - പ്രതിമാസ 02/04/2012 നിരസിച്ചു
3 ടിബി - പ്രതിമാസ 03/04/2012 തീർപ്പാക്കാത്തത്
4 ടിബി - പ്രതിമാസ 04/04/2012 സ്ഥിരീകരിക്കാൻ വിളിക്കുക 
  1. ...
  2.   < tr class = "വിജയം" >
  3.     <td> 1 < /td>
  4.     <td>ടിബി - പ്രതിമാസ</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>അംഗീകരിച്ചു</ td >
  7.   </ tr >
  8. ...

പിന്തുണയ്ക്കുന്ന പട്ടിക മാർക്ക്അപ്പ്

പിന്തുണയ്‌ക്കുന്ന പട്ടിക HTML ഘടകങ്ങളുടെ പട്ടികയും അവ എങ്ങനെ ഉപയോഗിക്കണം എന്നതും.

ടാഗ് ചെയ്യുക വിവരണം
<table> ഒരു പട്ടിക ഫോർമാറ്റിൽ ഡാറ്റ പ്രദർശിപ്പിക്കുന്നതിനുള്ള റാപ്പിംഗ് ഘടകം
<thead> <tr>പട്ടിക നിരകൾ ലേബൽ ചെയ്യുന്നതിന് പട്ടിക തലക്കെട്ട് വരികൾക്കുള്ള ( ) കണ്ടെയ്നർ ഘടകം
<tbody> <tr>പട്ടികയുടെ ബോഡിയിലെ പട്ടിക വരികൾക്കുള്ള ( ) കണ്ടെയ്നർ ഘടകം
<tr> ഒരൊറ്റ വരിയിൽ ദൃശ്യമാകുന്ന ഒരു കൂട്ടം ടേബിൾ സെല്ലുകളുടെ ( <td>അല്ലെങ്കിൽ ) കണ്ടെയ്നർ ഘടകം<th>
<td> ഡിഫോൾട്ട് ടേബിൾ സെൽ
<th> നിര (അല്ലെങ്കിൽ വരി, വ്യാപ്തിയും സ്ഥാനവും അനുസരിച്ച്) ലേബലുകൾക്കായുള്ള പ്രത്യേക പട്ടിക സെൽ
<caption> സ്‌ക്രീൻ റീഡറുകൾക്ക് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമായ, പട്ടിക കൈവശമുള്ളതിന്റെ വിവരണം അല്ലെങ്കിൽ സംഗ്രഹം 
  1. <പട്ടിക>
  2.   < caption> ... </ caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

ഫോമുകൾ

സ്ഥിരസ്ഥിതി ശൈലികൾ

വ്യക്തിഗത ഫോം നിയന്ത്രണങ്ങൾ സ്റ്റൈലിംഗ് സ്വീകരിക്കുന്നു, എന്നാൽ മാർക്ക്അപ്പിൽ ആവശ്യമായ അടിസ്ഥാന ക്ലാസുകളോ <form>വലിയ മാറ്റങ്ങളോ ഇല്ലാതെ. ഫോം നിയന്ത്രണങ്ങൾക്ക് മുകളിൽ അടുക്കിവെച്ചതും ഇടത് വിന്യസിച്ചതുമായ ലേബലുകളിൽ ഫലങ്ങൾ.

ഇതിഹാസം ബ്ലോക്ക്-ലെവൽ സഹായ വാചകത്തിന്റെ ഉദാഹരണം ഇവിടെയുണ്ട്. 
  1. <ഫോം>
  2.   <ഫീൽഡ്സെറ്റ്>
  3.     <legend> ലെജൻഡ് </legend>
  4.     <label> ലേബൽ പേര് </label>
  5.     <input type = "text" placeholder = "എന്തെങ്കിലും ടൈപ്പ് ചെയ്യുക..." >  
  6.     <span class = "help-block" > ബ്ലോക്ക്-ലെവൽ സഹായ വാചകം ഇവിടെയുണ്ട്. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > എന്നെ പരിശോധിക്കുക 
  9.     </label>
  10.     <button type = "submit" class = "btn" > സമർപ്പിക്കുക </button>  
  11.   </fieldset>
  12. </form>

ഓപ്ഷണൽ ലേഔട്ടുകൾ

സാധാരണ ഉപയോഗ കേസുകൾക്കായി മൂന്ന് ഓപ്ഷണൽ ഫോം ലേഔട്ടുകളാണ് ബൂട്ട്സ്ട്രാപ്പിനൊപ്പം ഉൾപ്പെടുത്തിയിരിക്കുന്നത്.

തിരയൽ ഫോം

.form-searchഫോമിലേക്കും .search-queryഅധിക <input>-വൃത്താകൃതിയിലുള്ള വാചക ഇൻപുട്ടിലേക്കും ചേർക്കുക .

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Search </button>  
  4. </form>

ഇൻലൈൻ ഫോം

.form-inlineഇടത് വിന്യസിച്ച ലേബലുകൾക്കും കോം‌പാക്റ്റ് ലേഔട്ടിനായി ഇൻലൈൻ-ബ്ലോക്ക് നിയന്ത്രണങ്ങൾക്കുമായി ചേർക്കുക .

  1. <ഫോം ക്ലാസ് = "ഫോം-ഇൻലൈൻ" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > എന്നെ ഓർക്കുക 
  6.   </label>
  7.   <button type = "submit" class = "btn" > സൈൻ ഇൻ ചെയ്യുക </button>  
  8. </form>

തിരശ്ചീന രൂപം

നിയന്ത്രണങ്ങളുടെ അതേ വരിയിൽ അവ ദൃശ്യമാക്കുന്നതിന് ലേബലുകൾ വലത് വിന്യസിച്ച് ഇടത്തേക്ക് ഫ്ലോട്ട് ചെയ്യുക. ഒരു ഡിഫോൾട്ട് ഫോമിൽ നിന്ന് ഏറ്റവും കൂടുതൽ മാർക്ക്അപ്പ് മാറ്റങ്ങൾ ആവശ്യമാണ്:

  • .form-horizontalഫോമിലേക്ക് ചേർക്കുക
  • ലേബലുകളും നിയന്ത്രണങ്ങളും പൊതിയുക.control-group
  • .control-labelലേബലിൽ ചേർക്കുക
  • .controlsശരിയായ വിന്യാസത്തിനായി ഏതെങ്കിലും ബന്ധപ്പെട്ട നിയന്ത്രണങ്ങൾ പൊതിയുക
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > ഇമെയിൽ </label>  
  4.     <div class = "നിയന്ത്രണങ്ങൾ" > 
  5.       <input type = "text" id = "inputEmail" placeholder = " Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > പാസ്‌വേഡ് </label>  
  10.     <div class = "നിയന്ത്രണങ്ങൾ" > 
  11.       <input type = "password" id = "inputPassword" placeholder = " Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "നിയന്ത്രണങ്ങൾ" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > എന്നെ ഓർക്കുക 
  18.       </label>
  19.       <button type = "submit" class = "btn" > സൈൻ ഇൻ ചെയ്യുക </button>  
  20.     </div>
  21.   </div>
  22. </form>

പിന്തുണയ്ക്കുന്ന ഫോം നിയന്ത്രണങ്ങൾ

ഒരു ഉദാഹരണ ഫോം ലേഔട്ടിൽ പിന്തുണയ്ക്കുന്ന സ്റ്റാൻഡേർഡ് ഫോം നിയന്ത്രണങ്ങളുടെ ഉദാഹരണങ്ങൾ.

ഇൻപുട്ടുകൾ

ഏറ്റവും സാധാരണമായ ഫോം നിയന്ത്രണം, ടെക്സ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള ഇൻപുട്ട് ഫീൽഡുകൾ. എല്ലാ HTML5 തരങ്ങൾക്കുമുള്ള പിന്തുണ ഉൾപ്പെടുന്നു: വാചകം, പാസ്‌വേഡ്, തീയതിസമയം, തീയതി-പ്രാദേശികം, തീയതി, മാസം, സമയം, ആഴ്ച, നമ്പർ, ഇമെയിൽ, url, തിരയൽ, ടെൽ, നിറം.

typeഎല്ലാ സമയത്തും ഒരു നിർദ്ദിഷ്ട ഉപയോഗം ആവശ്യമാണ് .

  1. <input type = "text" placeholder = "Text input" >

ടെക്സ്റ്റേറിയ

വാചകത്തിന്റെ ഒന്നിലധികം വരികൾ പിന്തുണയ്ക്കുന്ന ഫോം നിയന്ത്രണം. rowsആവശ്യാനുസരണം ആട്രിബ്യൂട്ട് മാറ്റുക .

  1. <textarea row = " 3" ></textarea>

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

ചെക്ക്ബോക്സുകൾ ഒരു ലിസ്റ്റിലെ ഒന്നോ അതിലധികമോ ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കുന്നതിനാണ്, റേഡിയോകൾ പലതിൽ നിന്നും ഒരു ഓപ്ഷൻ തിരഞ്ഞെടുക്കുന്നതിനാണ്.

ഡിഫോൾട്ട് (സഞ്ചിത)


  1. <label class = "checkbox" > 
  2.   <ഇൻപുട്ട് തരം = "ചെക്ക്ബോക്സ്" മൂല്യം = "" >  
  3.   ഓപ്ഷൻ ഒന്ന് ഇതും അതും-എന്തുകൊണ്ടാണ് ഇത് മികച്ചതെന്ന് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക
  4. </label>
  5.  
  6. <ലേബൽ ക്ലാസ് = "റേഡിയോ" > 
  7.   <ഇൻപുട്ട് തരം = "റേഡിയോ" പേര് = "optionsRadios" id = "optionsRadios1" മൂല്യം = "option1" ചെക്ക് ചെയ്തു >     
  8.   ഓപ്ഷൻ ഒന്ന് ഇതും അതും-എന്തുകൊണ്ടാണ് ഇത് മികച്ചതെന്ന് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക
  9. </label>
  10. <ലേബൽ ക്ലാസ് = "റേഡിയോ" > 
  11.   <ഇൻപുട്ട് തരം = "റേഡിയോ" പേര് = "ഓപ്ഷൻസ് റേഡിയോസ്" ഐഡി = "ഓപ്ഷൻസ്റേഡിയോസ്2" മൂല്യം = "ഓപ്ഷൻ2" >    
  12.   ഓപ്ഷൻ രണ്ട് മറ്റെന്തെങ്കിലും ആകാം, അത് തിരഞ്ഞെടുക്കുന്നത് ഓപ്ഷൻ ഒന്ന് തിരഞ്ഞെടുത്തത് മാറ്റും
  13. </label>

ഇൻലൈൻ ചെക്ക്ബോക്സുകൾ

.inlineഒരേ ലൈനിൽ ദൃശ്യമാകുന്ന നിയന്ത്രണങ്ങൾക്കായി ചെക്ക്ബോക്സുകളുടെയോ റേഡിയോകളുടെയോ ഒരു ശ്രേണിയിലേക്ക് ക്ലാസ് ചേർക്കുക .

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox " id = "inlineCheckbox1" value = "option1 " > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox " id = "inlineCheckbox2" value = "option2 " > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox " id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

തിരഞ്ഞെടുക്കുന്നു

multiple="multiple"ഒരേസമയം ഒന്നിലധികം ഓപ്‌ഷനുകൾ കാണിക്കാൻ ഡിഫോൾട്ട് ഓപ്‌ഷൻ ഉപയോഗിക്കുക അല്ലെങ്കിൽ a വ്യക്തമാക്കുക .


  1. <തിരഞ്ഞെടുക്കുക>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "multiple" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

ഫോം നിയന്ത്രണങ്ങൾ വിപുലീകരിക്കുന്നു

നിലവിലുള്ള ബ്രൗസർ നിയന്ത്രണങ്ങളുടെ മുകളിൽ ചേർക്കുന്നത്, ബൂട്ട്സ്ട്രാപ്പിൽ മറ്റ് ഉപയോഗപ്രദമായ ഫോം ഘടകങ്ങൾ ഉൾപ്പെടുന്നു.

മുൻകൂട്ടി തയ്യാറാക്കിയതും കൂട്ടിച്ചേർത്തതുമായ ഇൻപുട്ടുകൾ

ഏതെങ്കിലും ടെക്‌സ്‌റ്റ് അടിസ്ഥാനമാക്കിയുള്ള ഇൻപുട്ടിന് മുമ്പോ ശേഷമോ ടെക്‌സ്‌റ്റോ ബട്ടണുകളോ ചേർക്കുക. selectഘടകങ്ങൾ ഇവിടെ പിന്തുണയ്ക്കുന്നില്ല എന്നത് ശ്രദ്ധിക്കുക .

സ്ഥിരസ്ഥിതി ഓപ്ഷനുകൾ

ഒരു ഇൻപുട്ടിലേക്ക് ടെക്‌സ്‌റ്റ് മുൻകൂട്ടി തയ്യാറാക്കുന്നതിനോ കൂട്ടിച്ചേർക്കുന്നതിനോ ഉള്ള രണ്ട് ക്ലാസുകളിൽ ഒന്ന് ഉപയോഗിച്ച് ഒരു .add-on, ഒരു എന്നിവ പൊതിയുക .input

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput " type = "text" placeholder = "Username " >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput" type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

സംയോജിപ്പിച്ചത്

.add-onഒരു ഇൻപുട്ട് മുൻകൂട്ടി തയ്യാറാക്കുന്നതിനും കൂട്ടിച്ചേർക്കുന്നതിനും രണ്ട് ക്ലാസുകളും രണ്ട് ഉദാഹരണങ്ങളും ഉപയോഗിക്കുക .

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

വാചകത്തിന് പകരം ബട്ടണുകൾ

ഒരു ഇൻപുട്ടിലേക്ക് ഒരു ബട്ടൺ (അല്ലെങ്കിൽ രണ്ട്) അറ്റാച്ചുചെയ്യാൻ <span>ടെക്‌സ്‌റ്റിനൊപ്പമുള്ള a എന്നതിന് പകരം a ഉപയോഗിക്കുക..btn

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <button class = "btn" type = "button" > പോകൂ! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Search </button>  
  4.   <button class = "btn" type = "button" > Options </button>  
  5. </div>

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

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       ആക്ഷൻ
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       ആക്ഷൻ
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton " type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       ആക്ഷൻ
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       ആക്ഷൻ
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

വിഭജിച്ച ഡ്രോപ്പ്ഡൗൺ ഗ്രൂപ്പുകൾ

  1. <ഫോം>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <ഇൻപുട്ട് തരം = "ടെക്സ്റ്റ്" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <ഇൻപുട്ട് തരം = "ടെക്സ്റ്റ്" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

തിരയൽ ഫോം

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Search </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Search </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

വലിപ്പം നിയന്ത്രിക്കുക

ആപേക്ഷിക വലുപ്പത്തിലുള്ള ക്ലാസുകൾ ഉപയോഗിക്കുക .input-largeഅല്ലെങ്കിൽ ക്ലാസുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ഇൻപുട്ടുകൾ ഗ്രിഡ് കോളം വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുത്തുക .span*.

ബ്ലോക്ക് ലെവൽ ഇൻപുട്ടുകൾ

ഏതെങ്കിലും <input>അല്ലെങ്കിൽ <textarea>ഘടകത്തെ ഒരു ബ്ലോക്ക് ലെവൽ ഘടകം പോലെ പ്രവർത്തിക്കുക.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

ആപേക്ഷിക വലുപ്പം

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

ഹെഡ്സ് അപ്പുകൾ!ഭാവി പതിപ്പുകളിൽ, ഞങ്ങളുടെ ബട്ടൺ വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്നതിന് ഈ ആപേക്ഷിക ഇൻപുട്ട് ക്ലാസുകളുടെ ഉപയോഗം ഞങ്ങൾ മാറ്റും. ഉദാഹരണത്തിന്, .input-largeഒരു ഇൻപുട്ടിന്റെ പാഡിംഗും ഫോണ്ട് വലുപ്പവും വർദ്ധിപ്പിക്കും.

ഗ്രിഡ് വലുപ്പം

ഗ്രിഡ് നിരകളുടെ സമാന വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്ന ഇൻപുട്ടുകൾക്കായി .span1to ഉപയോഗിക്കുക ..span12

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

ഓരോ വരിയിലും ഒന്നിലധികം ഗ്രിഡ് ഇൻപുട്ടുകൾക്കായി , ശരിയായ സ്‌പെയ്‌സിനായി മോഡിഫയർ ക്ലാസ് ഉപയോഗിക്കുക.controls-row . വൈറ്റ്-സ്‌പേസ് ചുരുക്കാൻ ഇത് ഇൻപുട്ടുകളെ ഫ്ലോട്ട് ചെയ്യുന്നു, ശരിയായ മാർജിനുകൾ സജ്ജമാക്കുന്നു, ഫ്ലോട്ട് മായ്‌ക്കുന്നു.

  1. <div class = "നിയന്ത്രണങ്ങൾ" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

എഡിറ്റ് ചെയ്യാനാകാത്ത ഇൻപുട്ടുകൾ

യഥാർത്ഥ ഫോം മാർക്ക്അപ്പ് ഉപയോഗിക്കാതെ എഡിറ്റ് ചെയ്യാനാകാത്ത ഫോമിൽ ഡാറ്റ അവതരിപ്പിക്കുക.

ഇവിടെ ചില മൂല്യങ്ങൾ 
  1. <span class = "input-xlarge uneditable-input" > ഇവിടെ ചില മൂല്യങ്ങൾ </span>

ഫോം പ്രവർത്തനങ്ങൾ

ഒരു കൂട്ടം പ്രവർത്തനങ്ങൾ (ബട്ടണുകൾ) ഉപയോഗിച്ച് ഒരു ഫോം അവസാനിപ്പിക്കുക. ഒരു എന്നതിൽ സ്ഥാപിക്കുമ്പോൾ .form-actions, ഫോം നിയന്ത്രണങ്ങൾക്കൊപ്പം അണിനിരക്കുന്നതിന് ബട്ടണുകൾ സ്വയമേവ ഇൻഡന്റ് ചെയ്യും.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > മാറ്റങ്ങൾ സംരക്ഷിക്കുക </button>  
  3.   <button type = "button" class = "btn" > റദ്ദാക്കുക </button>  
  4. </div>

സഹായ വാചകം

ഫോം നിയന്ത്രണങ്ങൾക്ക് ചുറ്റും ദൃശ്യമാകുന്ന സഹായ വാചകത്തിനുള്ള ഇൻലൈൻ, ബ്ലോക്ക് ലെവൽ പിന്തുണ.

ഇൻലൈൻ സഹായം

ഇൻലൈൻ സഹായ വാചകം 
  1. <input type = "text" ><span class = "help-inline" > ഇൻലൈൻ സഹായ വാചകം </span>

സഹായം തടയുക

ഒരു പുതിയ ലൈനിലേക്ക് വിഘടിച്ച് ഒരു വരിക്ക് അപ്പുറത്തേക്ക് നീണ്ടേക്കാവുന്ന സഹായ വാചകത്തിന്റെ ദൈർഘ്യമേറിയ ബ്ലോക്ക്. 
  1. <ഇൻപുട്ട് തരം = "ടെക്സ്റ്റ്" ><span class = "help-block" > ഒരു പുതിയ ലൈനിലേക്ക് വിഭജിച്ച് ഒരു വരിക്ക് അപ്പുറം നീണ്ടേക്കാവുന്ന സഹായ വാചകത്തിന്റെ ദൈർഘ്യമേറിയ ബ്ലോക്ക്. </span>

ഫോം കൺട്രോൾ സ്റ്റേറ്റുകൾ

ഫോം നിയന്ത്രണങ്ങളിലും ലേബലുകളിലും അടിസ്ഥാന ഫീഡ്‌ബാക്ക് അവസ്ഥകൾ ഉള്ള ഉപയോക്താക്കൾക്കും സന്ദർശകർക്കും ഫീഡ്‌ബാക്ക് നൽകുക.

ഇൻപുട്ട് ഫോക്കസ്

outlineചില ഫോം നിയന്ത്രണങ്ങളിൽ ഞങ്ങൾ ഡിഫോൾട്ട് ശൈലികൾ നീക്കം ചെയ്യുകയും box-shadowഅതിന്റെ സ്ഥാനത്ത് ഒരു പ്രയോഗിക്കുകയും ചെയ്യുന്നു :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "ഇത് ഫോക്കസ് ചെയ്തിരിക്കുന്നു..." >

അസാധുവായ ഇൻപുട്ടുകൾ

ഉപയോഗിച്ച് ഡിഫോൾട്ട് ബ്രൗസർ പ്രവർത്തനത്തിലൂടെ സ്റ്റൈൽ ഇൻപുട്ടുകൾ :invalid. a വ്യക്തമാക്കുക type, ഫീൽഡ് ഓപ്ഷണൽ അല്ലെങ്കിൽ ആട്രിബ്യൂട്ട് ചേർക്കുക required, കൂടാതെ (ബാധകമെങ്കിൽ) a വ്യക്തമാക്കുക pattern.

CSS കപട സെലക്ടറുകളുടെ പിന്തുണയില്ലാത്തതിനാൽ ഇത് Internet Explorer 7-9 പതിപ്പുകളിൽ ലഭ്യമല്ല.

  1. <input class = "span3" type = "email" ആവശ്യമാണ് >

പ്രവർത്തനരഹിതമാക്കിയ ഇൻപുട്ടുകൾ

disabledഉപയോക്തൃ ഇൻപുട്ട് തടയുന്നതിനും അൽപ്പം വ്യത്യസ്തമായ രൂപം ട്രിഗർ ചെയ്യുന്നതിനും ഇൻപുട്ടിൽ ആട്രിബ്യൂട്ട് ചേർക്കുക .

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ഇവിടെ പ്രവർത്തനരഹിതമാക്കിയ ഇൻപുട്ട്..." പ്രവർത്തനരഹിതമാക്കി >

മൂല്യനിർണ്ണയം പ്രസ്താവിക്കുന്നു

പിശക്, മുന്നറിയിപ്പ്, വിവരങ്ങൾ, വിജയ സന്ദേശങ്ങൾ എന്നിവയ്ക്കുള്ള മൂല്യനിർണ്ണയ ശൈലികൾ ബൂട്ട്സ്ട്രാപ്പിൽ ഉൾപ്പെടുന്നു. ഉപയോഗിക്കുന്നതിന്, ചുറ്റുമുള്ളവയിലേക്ക് ഉചിതമായ ക്ലാസ് ചേർക്കുക .control-group.

എന്തോ കുഴപ്പം സംഭവിച്ചിരിക്കാം
ദയവായി തെറ്റ് തിരുത്തുക
ഉപയോക്തൃനാമം എടുത്തു
കൊള്ളാം! 
  1. <div class = "control-group warning" > 
  2.   <label class = "control-label" for = "inputWarning" > മുന്നറിയിപ്പോടുകൂടിയ ഇൻപുട്ട് </label>  
  3.   <div class = "നിയന്ത്രണങ്ങൾ" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > എന്തോ കുഴപ്പം സംഭവിച്ചിരിക്കാം </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "control-group error" > 
  10.   <label class = "control-label" for = "inputError" > പിശകുള്ള ഇൻപുട്ട് </label>  
  11.   <div class = "നിയന്ത്രണങ്ങൾ" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > ദയവായി പിശക് തിരുത്തുക </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" for = "inputInfo" > വിവരങ്ങളുള്ള ഇൻപുട്ട് </label>  
  19.   <div class = "നിയന്ത്രണങ്ങൾ" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > ഉപയോക്തൃനാമം ഇതിനകം എടുത്തിട്ടുണ്ട് </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "control-group success" > 
  26.   <label class = "control-label" for = "inputSuccess" > വിജയത്തോടെയുള്ള ഇൻപുട്ട് </label>  
  27.   <div class = "നിയന്ത്രണങ്ങൾ" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > കൊള്ളാം! </span> 
  30.   </div>
  31. </div>

ബട്ടണുകൾ

സ്ഥിരസ്ഥിതി ബട്ടണുകൾ

.btnപ്രയോഗിച്ച ക്ലാസ് ഉപയോഗിച്ച് എന്തിനും ബട്ടൺ ശൈലികൾ പ്രയോഗിക്കാൻ കഴിയും . <a>എന്നിരുന്നാലും , <button>മികച്ച റെൻഡറിങ്ങിനുള്ള ഘടകങ്ങളിൽ മാത്രം ഇവ പ്രയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കും .

ബട്ടൺ class="" വിവരണം
btn ഗ്രേഡിയന്റുള്ള സ്റ്റാൻഡേർഡ് ഗ്രേ ബട്ടൺ
btn btn-primary അധിക വിഷ്വൽ ഭാരം നൽകുകയും ഒരു കൂട്ടം ബട്ടണുകളിലെ പ്രാഥമിക പ്രവർത്തനം തിരിച്ചറിയുകയും ചെയ്യുന്നു
btn btn-info സ്ഥിരസ്ഥിതി ശൈലികൾക്ക് പകരമായി ഉപയോഗിക്കുന്നു
btn btn-success വിജയകരമായ അല്ലെങ്കിൽ പോസിറ്റീവ് പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്നു
btn btn-warning ഈ നടപടിയിൽ ജാഗ്രത പാലിക്കണമെന്ന് സൂചിപ്പിക്കുന്നു
btn btn-danger അപകടകരമോ പ്രതികൂലമോ ആയ ഒരു പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്നു
btn btn-inverse ഇതര ഇരുണ്ട ചാരനിറത്തിലുള്ള ബട്ടൺ, ഒരു സെമാന്റിക് പ്രവർത്തനത്തിലോ ഉപയോഗത്തിലോ ബന്ധിപ്പിച്ചിട്ടില്ല
btn btn-link ബട്ടണിന്റെ സ്വഭാവം നിലനിർത്തിക്കൊണ്ട് ഒരു ലിങ്ക് പോലെ തോന്നിപ്പിച്ചുകൊണ്ട് ഒരു ബട്ടണിനെ ഊന്നിപ്പറയുക

ക്രോസ് ബ്രൗസർ അനുയോജ്യത

വൃത്താകൃതിയിലുള്ള കോണുകളിൽ IE9 പശ്ചാത്തല ഗ്രേഡിയന്റുകൾ ക്രോപ്പ് ചെയ്യുന്നില്ല, അതിനാൽ ഞങ്ങൾ അത് നീക്കംചെയ്യുന്നു. ബന്ധപ്പെട്ട, IE9 അപ്രാപ്തമാക്കിയ buttonഘടകങ്ങളെ jankifies, നമുക്ക് പരിഹരിക്കാൻ കഴിയാത്ത ഒരു മോശം ടെക്സ്റ്റ്-ഷാഡോ ഉപയോഗിച്ച് ടെക്സ്റ്റ് ഗ്രേ റെൻഡർ ചെയ്യുന്നു.

ബട്ടൺ വലുപ്പങ്ങൾ

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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > വലിയ ബട്ടൺ </button>  
  3.   <button class = "btn btn-large" type = "button" > വലിയ ബട്ടൺ </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > സ്ഥിരസ്ഥിതി ബട്ടൺ </button>  
  7.   <button class = "btn" type = "button" > Default ബട്ടൺ </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > ചെറിയ ബട്ടൺ </button>  
  11.   <button class = "btn btn-small" type = "button" > ചെറിയ ബട്ടൺ </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > മിനി ബട്ടൺ </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini button </button>  
  16. </p>

ബ്ലോക്ക് ലെവൽ ബട്ടണുകൾ സൃഷ്‌ടിക്കുക—ഒരു രക്ഷിതാവിന്റെ മുഴുവൻ വീതിയും ഉള്ളവ— ചേർത്തുകൊണ്ട് .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > ബ്ലോക്ക് ലെവൽ ബട്ടൺ </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > ബ്ലോക്ക് ലെവൽ ബട്ടൺ </button>

വികലാംഗ സംസ്ഥാനം

ബട്ടണുകൾ 50% പിന്നിലേക്ക് മങ്ങിക്കൊണ്ട് അൺക്ലിക്ക് ചെയ്യാൻ പറ്റാത്തതാക്കുക.

ആങ്കർ ഘടകം

ബട്ടണുകളിലേക്ക് .disabledക്ലാസ് ചേർക്കുക .<a>

പ്രാഥമിക ലിങ്ക് ലിങ്ക് 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > പ്രാഥമിക ലിങ്ക് </a>  
  2. <a href = "#" class = "btn btn-large disabled" > ലിങ്ക് </a>

ഹെഡ്സ് അപ്പുകൾ!ഞങ്ങൾ .disabledഇവിടെ ഒരു യൂട്ടിലിറ്റി ക്ലാസായി ഉപയോഗിക്കുന്നു, സാധാരണ .activeക്ലാസിന് സമാനമായതിനാൽ പ്രിഫിക്‌സ് ആവശ്യമില്ല. കൂടാതെ, ഈ ക്ലാസ് സൗന്ദര്യാത്മകതയ്ക്ക് മാത്രമുള്ളതാണ്; ഇവിടെയുള്ള ലിങ്കുകൾ പ്രവർത്തനരഹിതമാക്കാൻ നിങ്ങൾ ഇഷ്‌ടാനുസൃത JavaScript ഉപയോഗിക്കണം.

ബട്ടൺ ഘടകം

ബട്ടണുകളിലേക്ക് disabledആട്രിബ്യൂട്ട് ചേർക്കുക .<button>

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > പ്രാഥമിക ബട്ടൺ </button>   
  2. <button type = "button" class = "btn btn-large" disabled > ബട്ടൺ </button>

ഒരു ക്ലാസ്, ഒന്നിലധികം ടാഗുകൾ

ഒരു , അല്ലെങ്കിൽ ഘടകത്തിൽ .btnക്ലാസ് ഉപയോഗിക്കുക .<a><button><input>

ലിങ്ക് 
  1. <a class = "btn" href = "" > ലിങ്ക് </a>  
  2. <button class = "btn" type = "submit" > ബട്ടൺ </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

ഒരു മികച്ച സമ്പ്രദായമെന്ന നിലയിൽ, ക്രോസ്-ബ്രൗസർ റെൻഡറിംഗ് പൊരുത്തപ്പെടുത്തുന്നത് ഉറപ്പാക്കാൻ നിങ്ങളുടെ സന്ദർഭത്തിന് എലമെന്റ് പൊരുത്തപ്പെടുത്താൻ ശ്രമിക്കുക. നിങ്ങൾക്ക് ഒരു ഉണ്ടെങ്കിൽ , നിങ്ങളുടെ ബട്ടണിനായി inputഒരു ഉപയോഗിക്കുക <input type="submit">.

ചിത്രങ്ങൾ

<img>ഏത് പ്രോജക്റ്റിലും ചിത്രങ്ങൾ എളുപ്പത്തിൽ സ്റ്റൈൽ ചെയ്യുന്നതിനായി ഒരു ഘടകത്തിലേക്ക് ക്ലാസുകൾ ചേർക്കുക .

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

ഹെഡ്സ് അപ്പുകൾ! .img-roundedപിന്തുണയില്ലാത്തതിനാൽ .img-circleIE7-8-ൽ പ്രവർത്തിക്കരുത് border-radius.

ഗ്ലിഫിക്കോണുകളുടെ ഐക്കണുകൾ _

ഐക്കൺ ഗ്ലിഫുകൾ

സ്‌പ്രൈറ്റ് രൂപത്തിലുള്ള 140 ഐക്കണുകൾ, ഇരുണ്ട ചാരനിറത്തിലും (ഡിഫോൾട്ട്) വെള്ളയിലും ലഭ്യമാണ്, Glyphicons നൽകിയിരിക്കുന്നു .

  • ഐക്കൺ-ഗ്ലാസ്
  • ഐക്കൺ-സംഗീതം
  • ഐക്കൺ-തിരയൽ
  • ഐക്കൺ-എൻവലപ്പ്
  • ഐക്കൺ-ഹൃദയം
  • ഐക്കൺ-സ്റ്റാർ
  • ഐക്കൺ-നക്ഷത്രം-ശൂന്യം
  • ഐക്കൺ-ഉപയോക്താവ്
  • ഐക്കൺ-ഫിലിം
  • icon-th-large
  • ഐക്കൺ-th
  • icon-th-list
  • ഐക്കൺ-ശരി
  • ഐക്കൺ-നീക്കം
  • ഐക്കൺ-സൂം-ഇൻ
  • ഐക്കൺ-സൂം ഔട്ട്
  • ഐക്കൺ-ഓഫ്
  • ഐക്കൺ-സിഗ്നൽ
  • ഐക്കൺ-കോഗ്
  • ഐക്കൺ-ട്രാഷ്
  • ഐക്കൺ-ഹോം
  • ഐക്കൺ-ഫയൽ
  • ഐക്കൺ സമയം
  • ഐക്കൺ-റോഡ്
  • ഐക്കൺ-ഡൗൺലോഡ്-alt
  • ഐക്കൺ-ഡൗൺലോഡ്
  • ഐക്കൺ-അപ്ലോഡ്
  • ഐക്കൺ-ഇൻബോക്സ്
  • ഐക്കൺ-പ്ലേ-സർക്കിൾ
  • ഐക്കൺ-ആവർത്തനം
  • ഐക്കൺ-പുതുക്കുക
  • icon-list-alt
  • ഐക്കൺ-ലോക്ക്
  • ഐക്കൺ-പതാക
  • ഐക്കൺ-ഹെഡ്ഫോണുകൾ
  • ഐക്കൺ-വോളിയം-ഓഫ്
  • ഐക്കൺ-വോളിയം-ഡൗൺ
  • ഐക്കൺ-വോളിയം-അപ്പ്
  • ഐക്കൺ-ക്യുആർകോഡ്
  • ഐക്കൺ-ബാർകോഡ്
  • ഐക്കൺ-ടാഗ്
  • ഐക്കൺ-ടാഗുകൾ
  • ഐക്കൺ-ബുക്ക്
  • ഐക്കൺ-ബുക്ക്മാർക്ക്
  • ഐക്കൺ-പ്രിന്റ്
  • ഐക്കൺ-ക്യാമറ
  • ഐക്കൺ-ഫോണ്ട്
  • ഐക്കൺ-ബോൾഡ്
  • ഐക്കൺ-ഇറ്റാലിക്
  • ഐക്കൺ-ടെക്സ്റ്റ്-ഉയരം
  • ഐക്കൺ-ടെക്സ്റ്റ് വീതി
  • ഐക്കൺ-അലൈൻ-ഇടത്
  • ഐക്കൺ-അലൈൻ-സെന്റർ
  • ഐക്കൺ-അലൈൻ-വലത്
  • icon-align-justify
  • ഐക്കൺ-ലിസ്റ്റ്
  • ഐക്കൺ-ഇൻഡന്റ്-ഇടത്
  • ഐക്കൺ-ഇൻഡന്റ്-വലത്
  • ഐക്കൺ-ഫേസ്‌ടൈം-വീഡിയോ
  • ഐക്കൺ-ചിത്രം
  • ഐക്കൺ-പെൻസിൽ
  • ഐക്കൺ-മാപ്പ്-മാർക്കർ
  • ഐക്കൺ ക്രമീകരിക്കുക
  • ഐക്കൺ-ടിന്റ്
  • ഐക്കൺ-എഡിറ്റ്
  • ഐക്കൺ-പങ്കിടൽ
  • ഐക്കൺ-ചെക്ക്
  • ഐക്കൺ-നീക്കം
  • ഐക്കൺ-പടി-പിന്നോട്ട്
  • ഐക്കൺ-വേഗത-പിന്നോക്കം
  • ഐക്കൺ-പിന്നിലേക്ക്
  • ഐക്കൺ-പ്ലേ
  • ഐക്കൺ-പോസ്
  • ഐക്കൺ-സ്റ്റോപ്പ്
  • ഐക്കൺ-ഫോർവേഡ്
  • ഐക്കൺ-ഫാസ്റ്റ് ഫോർവേഡ്
  • ഐക്കൺ-പടി-മുന്നോട്ട്
  • ഐക്കൺ-എജക്റ്റ്
  • ഐക്കൺ-ഷെവ്രോൺ-ഇടത്
  • ഐക്കൺ-ഷെവ്രോൺ-വലത്
  • ഐക്കൺ-പ്ലസ്-സൈൻ
  • ഐക്കൺ-മൈനസ്-ചിഹ്നം
  • ഐക്കൺ-നീക്കം-അടയാളം
  • ഐക്കൺ-ശരി-ചിഹ്നം
  • ഐക്കൺ-ചോദ്യം-ചിഹ്നം
  • ഐക്കൺ-ഇൻഫോ-സൈൻ
  • ഐക്കൺ-സ്ക്രീൻഷോട്ട്
  • ഐക്കൺ-നീക്കം-സർക്കിൾ
  • ഐക്കൺ-ശരി-വൃത്തം
  • ഐക്കൺ-ബാൻ-സർക്കിൾ
  • ഐക്കൺ-അമ്പ്-ഇടത്
  • ഐക്കൺ-അമ്പ്-വലത്
  • ഐക്കൺ-അമ്പ്-അപ്പ്
  • ഐക്കൺ-അമ്പ്-താഴേക്ക്
  • icon-share-alt
  • ഐക്കൺ വലുപ്പം മാറ്റുക-പൂർണ്ണം
  • icon-resize-small
  • ഐക്കൺ-പ്ലസ്
  • ഐക്കൺ-മൈനസ്
  • ഐക്കൺ-നക്ഷത്രചിഹ്നം
  • ഐക്കൺ-ആശ്ചര്യചിഹ്നം
  • ഐക്കൺ-സമ്മാനം
  • ഐക്കൺ-ഇല
  • ഐക്കൺ-തീ
  • ഐക്കൺ-കണ്ണ് തുറക്കുക
  • ഐക്കൺ-കണ്ണ് അടയ്ക്കുക
  • ഐക്കൺ-മുന്നറിയിപ്പ്-ചിഹ്നം
  • ഐക്കൺ-തലം
  • ഐക്കൺ-കലണ്ടർ
  • ഐക്കൺ-റാൻഡം
  • ഐക്കൺ-അഭിപ്രായം
  • ഐക്കൺ-കാന്തം
  • icon-chevron-up
  • icon-chevron-down
  • ഐക്കൺ-റീട്വീറ്റ്
  • ഐക്കൺ-ഷോപ്പിംഗ്-കാർട്ട്
  • ഐക്കൺ-ഫോൾഡർ-അടയ്ക്കുക
  • ഐക്കൺ-ഫോൾഡർ-തുറക്കുക
  • ഐക്കൺ വലുപ്പം മാറ്റുക-ലംബം
  • icon-resize-horizontal
  • ഐക്കൺ-എച്ച്ഡിഡി
  • ഐക്കൺ-ബുൾഹോൺ
  • ഐക്കൺ-ബെൽ
  • ഐക്കൺ-സർട്ടിഫിക്കറ്റ്
  • ഐക്കൺ-തംബ്സ്-അപ്പ്
  • ഐക്കൺ-തമ്പ്സ്-ഡൗൺ
  • ഐക്കൺ-കൈ-വലത്
  • ഐക്കൺ-കൈ-ഇടത്
  • ഐക്കൺ-ഹാൻഡ്-അപ്പ്
  • ഐക്കൺ-ഹാൻഡ്-ഡൗൺ
  • ഐക്കൺ-വൃത്തം-അമ്പ്-വലത്
  • ഐക്കൺ-വൃത്തം-അമ്പ്-ഇടത്
  • ഐക്കൺ-സർക്കിൾ-അമ്പ്-അപ്പ്
  • ഐക്കൺ-വൃത്തം-അമ്പ്-താഴേക്ക്
  • ഐക്കൺ-ഗ്ലോബ്
  • ഐക്കൺ-റെഞ്ച്
  • ഐക്കൺ-ടാസ്കുകൾ
  • ഐക്കൺ-ഫിൽട്ടർ
  • ഐക്കൺ-ബ്രീഫ്കേസ്
  • ഐക്കൺ-ഫുൾസ്ക്രീൻ

Glyphicons ആട്രിബ്യൂഷൻ

Glyphicons Halflings സാധാരണയായി സൗജന്യമായി ലഭ്യമല്ല, എന്നാൽ ബൂട്ട്‌സ്‌ട്രാപ്പും Glyphicons സ്രഷ്‌ടാക്കളും തമ്മിലുള്ള ഒരു ക്രമീകരണം ഡെവലപ്പർമാർ എന്ന നിലയിൽ നിങ്ങൾക്ക് ഇത് സാധ്യമാക്കിയിരിക്കുന്നു. നന്ദി എന്ന നിലയിൽ, പ്രായോഗികമായപ്പോഴെല്ലാം Glyphicons- ലേക്ക് ഒരു ഓപ്ഷണൽ ലിങ്ക് തിരികെ ഉൾപ്പെടുത്താൻ ഞങ്ങൾ നിങ്ങളോട് ആവശ്യപ്പെടുന്നു.

എങ്ങനെ ഉപയോഗിക്കാം

എല്ലാ ഐക്കണുകൾക്കും <i>ഒരു അദ്വിതീയ ക്ലാസ് ഉള്ള ഒരു ടാഗ് ആവശ്യമാണ്, പ്രിഫിക്‌സ് ചെയ്തിരിക്കുന്നത് icon-. ഉപയോഗിക്കുന്നതിന്, ഇനിപ്പറയുന്ന കോഡ് എവിടെയും സ്ഥാപിക്കുക:

  1. <i class = "icon-search" ></i>

വിപരീത (വെളുത്ത) ഐക്കണുകൾക്കായി ഒരു അധിക ക്ലാസ് ഉപയോഗിച്ച് തയ്യാറാക്കിയ ശൈലികളും ലഭ്യമാണ്. nav, ഡ്രോപ്പ്ഡൗൺ ലിങ്കുകൾക്കായി ഹോവർ, ആക്റ്റീവ് സ്റ്റേറ്റുകൾ എന്നിവയിൽ ഞങ്ങൾ ഈ ക്ലാസ് പ്രത്യേകമായി നടപ്പിലാക്കും.

  1. <i class = "icon-search icon-white" ></i>

ഹെഡ്സ് അപ്പുകൾ!ബട്ടണുകളിലോ നാവിക ലിങ്കുകളിലോ ഉള്ളതുപോലെ ടെക്‌സ്‌റ്റിന്റെ സ്‌ട്രിംഗുകൾ ഉപയോഗിക്കുമ്പോൾ, <i>ശരിയായ സ്‌പെയ്‌സിംഗിനായി ടാഗിന് ശേഷം ഒരു സ്‌പെയ്‌സ് ഇടുന്നത് ഉറപ്പാക്കുക.

ഐക്കൺ ഉദാഹരണങ്ങൾ

ഒരു ടൂൾബാർ, നാവിഗേഷൻ അല്ലെങ്കിൽ മുൻകൂട്ടി തയ്യാറാക്കിയ ഫോം ഇൻപുട്ടുകൾക്കായി ബട്ടണുകൾ, ബട്ടൺ ഗ്രൂപ്പുകൾ എന്നിവയിൽ അവ ഉപയോഗിക്കുക.

ബട്ടണുകൾ

ഒരു ബട്ടൺ ടൂൾബാറിലെ ബട്ടൺ ഗ്രൂപ്പ്
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
ഒരു ബട്ടൺ ഗ്രൂപ്പിലെ ഡ്രോപ്പ്ഡൗൺ
ഉപയോക്താവ് 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> ഉപയോക്താവ് </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> എഡിറ്റ് </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> ഇല്ലാതാക്കുക </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> നിരോധിക്കുക </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> അഡ്മിൻ ആക്കുക </a></li>  
  10.   </ul>
  11. </div>
ബട്ടൺ വലുപ്പങ്ങൾ
നക്ഷത്രം നക്ഷത്രം നക്ഷത്രം 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> നക്ഷത്രം </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> നക്ഷത്രം </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> നക്ഷത്രം </a>

നാവിഗേഷൻ

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> ഹോം </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> ലൈബ്രറി </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> ആപ്ലിക്കേഷനുകൾ </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> മറ്റുള്ളവ </a></li>  
  6. </ul>

ഫോം ഫീൽഡുകൾ

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > ഇമെയിൽ വിലാസം </label>  
  3.   <div class = "നിയന്ത്രണങ്ങൾ" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>