അടിസ്ഥാന CSS

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

തലക്കെട്ടുകളും ബോഡി കോപ്പിയും

ടൈപ്പോഗ്രാഫിക് സ്കെയിൽ

മുഴുവൻ ടൈപ്പോഗ്രാഫിക് ഗ്രിഡും ഞങ്ങളുടെ variables.less ഫയലിലെ രണ്ട് ലെസ് വേരിയബിളുകളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്: @baseFontSizeകൂടാതെ @baseLineHeight. ആദ്യത്തേത് മുഴുവൻ ഉപയോഗിച്ചിരിക്കുന്ന അടിസ്ഥാന ഫോണ്ട്-വലിപ്പവും രണ്ടാമത്തേത് അടിസ്ഥാന ലൈൻ-ഉയരവുമാണ്.

ഞങ്ങളുടെ എല്ലാ തരത്തിലുമുള്ള മാർജിനുകൾ, പാഡിംഗുകൾ, ലൈൻ-ഹൈറ്റുകൾ എന്നിവ സൃഷ്ടിക്കാൻ ഞങ്ങൾ ആ വേരിയബിളുകളും ചില ഗണിതങ്ങളും ഉപയോഗിക്കുന്നു.

ഉദാഹരണ ബോഡി ടെക്സ്റ്റ്

Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.

Vivamus sagittis lacus vel ague laoreet rutrum faucibus dolor auctor. ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല, എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം നെക് എലിറ്റ്. ഡോനെക് സെഡ് ഒഡിയോ ദുയി.

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

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

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

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

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

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

ഊന്നൽ, വിലാസം, ചുരുക്കെഴുത്ത്

ഘടകം	ഉപയോഗം	ഓപ്ഷണൽ
`<strong>`	പ്രധാനപ്പെട്ട ഒരു ടെക്‌സ്‌റ്റ് സ്‌നിപ്പറ്റ് ഊന്നിപ്പറയുന്നതിന്	ഒന്നുമില്ല
`<em>`	സമ്മർദത്തോടെയുള്ള ടെക്‌സ്‌റ്റിന്റെ ഒരു സ്‌നിപ്പറ്റ് ഊന്നിപ്പറയുന്നതിന്	ഒന്നുമില്ല
`<abbr>`	വിപുലീകരിച്ച പതിപ്പ് ഹോവറിൽ കാണിക്കാൻ ചുരുക്കങ്ങളും ചുരുക്കെഴുത്തുകളും പൊതിയുന്നു	`title`വിപുലീകരിച്ച ടെക്‌സ്‌റ്റിനായി ഓപ്‌ഷണൽ ആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തുക `.initialism`വലിയക്ഷരങ്ങളുടെ ചുരുക്കെഴുത്തുകൾക്കായി ക്ലാസ് ഉപയോഗിക്കുക .
`<address>`	അതിന്റെ ഏറ്റവും അടുത്ത പൂർവ്വികനെയോ അല്ലെങ്കിൽ മുഴുവൻ ജോലിസ്ഥലത്തേയും ബന്ധപ്പെടാനുള്ള വിവരങ്ങൾക്ക്	എല്ലാ വരികളും അവസാനിപ്പിച്ച് ഫോർമാറ്റിംഗ് സംരക്ഷിക്കുക`<br>`

ഊന്നൽ ഉപയോഗിക്കുന്നു

ഫ്യൂസ് ഡാപിബസ് , ടെല്ലസ് എസി കർസസ് കോമോഡോ , ടോർറ്റർ മൗറിസ് കോൺഡിമെന്റം നിബ്, യുട്ട് ഫെർമെന്റം മാസ് ജസ്തോ സിറ്റ് അമെറ്റ് റിസസ്. മെസെനാസ് ഫൗസിബസ് മോളിസ് ഇന്റർഡം. Nulla vitae elit libero, a pharetra ague.

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

ഉദാഹരണ വിലാസങ്ങൾ

<address>ടാഗ് എങ്ങനെ ഉപയോഗിക്കാം എന്നതിന്റെ രണ്ട് ഉദാഹരണങ്ങൾ ഇതാ :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

മുഴുവൻ പേര്
[email protected]

ഉദാഹരണ ചുരുക്കെഴുത്തുകൾ

ഒരു titleആട്രിബ്യൂട്ട് ഉള്ള ചുരുക്കെഴുത്തുകൾക്ക് നേരിയ ഡോട്ട് ഉള്ള താഴത്തെ ബോർഡറും ഹോവറിൽ ഒരു ഹെൽപ്പ് കഴ്‌സറും ഉണ്ട്. ഹോവറിൽ എന്തെങ്കിലും കാണിക്കുമെന്ന് ഇത് ഉപയോക്താക്കൾക്ക് അധിക സൂചന നൽകുന്നു.

initialismഒരു ചെറിയ ടെക്‌സ്‌റ്റ് സൈസ് നൽകി ടൈപ്പോഗ്രാഫിക് യോജിപ്പ് വർദ്ധിപ്പിക്കുന്നതിന് ക്ലാസിനെ ഒരു ചുരുക്കെഴുത്തിലേക്ക് ചേർക്കുക .

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

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

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

ഘടകം	ഉപയോഗം	ഓപ്ഷണൽ
`<blockquote>`	മറ്റൊരു ഉറവിടത്തിൽ നിന്നുള്ള ഉള്ളടക്കം ഉദ്ധരിക്കുന്നതിനുള്ള ബ്ലോക്ക്-ലെവൽ ഘടകം	`cite`ഉറവിട URL-ന് ആട്രിബ്യൂട്ട് ചേർക്കുക ഫ്ലോട്ടഡ് ഓപ്ഷനുകൾക്കുള്ള ഉപയോഗവും `.pull-left`ക്ലാസുകളും`.pull-right`
`<small>`	ഉപയോക്താക്കൾ അഭിമുഖീകരിക്കുന്ന ഒരു ഉദ്ധരണി ചേർക്കുന്നതിനുള്ള ഓപ്ഷണൽ ഘടകം, സാധാരണയായി കൃതിയുടെ ശീർഷകമുള്ള ഒരു രചയിതാവ്	`<cite>`ഉറവിടത്തിന്റെ ശീർഷകത്തിനോ പേരിനോ ചുറ്റും വയ്ക്കുക

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

<small>നിങ്ങളുടെ ഉറവിടം ഉദ്ധരിക്കാൻ ഒരു ഓപ്‌ഷണൽ ഘടകം ഉൾപ്പെടുത്തുക —, സ്റ്റൈലിംഗ് ആവശ്യങ്ങൾക്കായി നിങ്ങൾക്ക് അതിന് മുമ്പ് ഒരു എം ഡാഷ് ലഭിക്കും.

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

ബ്ലോക്ക് ഉദ്ധരണികളുടെ ഉദാഹരണം

ഡിഫോൾട്ട് ബ്ലോക്ക്‌ക്വോട്ടുകൾ ഇതുപോലെയാണ് സ്‌റ്റൈൽ ചെയ്തിരിക്കുന്നത്:

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും വെനനാറ്റിസും
ബോഡി ഓഫ് വർക്കിൽ പ്രശസ്തനായ ഒരാൾ

നിങ്ങളുടെ ബ്ലോക്ക്‌ക്വോട്ട് വലതുവശത്തേക്ക് ഫ്ലോട്ട് ചെയ്യാൻ, ചേർക്കുക class="pull-right":

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും വെനനാറ്റിസും
ബോഡി ഓഫ് വർക്കിൽ പ്രശസ്തനായ ഒരാൾ

ലിസ്റ്റുകൾ

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

<ul>

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

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

<ul class="unstyled">

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

ഉത്തരവിട്ടു

<ol>

ലോറെം ഇപ്സം ഡോളോർ സിറ്റ് അമെറ്റ്
കൺസെക്റ്റൂർ അഡിപിസ്സിംഗ് എലിറ്റ്
പൂർണ്ണസംഖ്യ മോളസ്‌റ്റി ലോറം അറ്റ് മാസ്‌
പ്രെറ്റിയം നിസ്ൽ അലിക്വറ്റിലെ സൗകര്യം
Nulla volutpat aliquam velit
ഫൗസിബസ് പോർട്ട ലാക്കസ് ഫ്രിംഗില്ല വേൽ
എനിയൻ ഇരിക്കുന്നു
എഗെറ്റ് പോർട്ടിറ്റർ ലോറം

വിവരണം

<dl>

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

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

<dl class="dl-horizontal">

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

ഇൻ ലൈൻ

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

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

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

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

<p>സാമ്പിൾ ടെക്സ്റ്റ് ഇവിടെ...</p>

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

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

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

ഗൂഗിൾ പ്രെറ്റിഫൈ

<pre>മെച്ചപ്പെടുത്തിയ റെൻഡറിംഗിനായി ഒരേ ഘടകം എടുത്ത് രണ്ട് ഓപ്‌ഷണൽ ക്ലാസുകൾ ചേർക്കുക.

<p> സാമ്പിൾ ടെക്സ്റ്റ് ഇവിടെ... </p>

<pre class = "prettyprint 
     ലിനങ്ങൾ" >
  <p>സാമ്പിൾ ടെക്സ്റ്റ് ഇവിടെ...</p>
</pre>

google-code-prettify ഡൗൺലോഡ് ചെയ്‌ത് എങ്ങനെ ഉപയോഗിക്കണമെന്ന് റീഡ്‌മീ കാണുക.

ടേബിൾ മാർക്ക്അപ്പ്

ടാഗ് ചെയ്യുക	വിവരണം
`<table>`	ഒരു പട്ടിക ഫോർമാറ്റിൽ ഡാറ്റ പ്രദർശിപ്പിക്കുന്നതിനുള്ള റാപ്പിംഗ് ഘടകം
`<thead>`	`<tr>`പട്ടിക നിരകൾ ലേബൽ ചെയ്യുന്നതിന് പട്ടിക തലക്കെട്ട് വരികൾക്കുള്ള ( ) കണ്ടെയ്നർ ഘടകം
`<tbody>`	`<tr>`പട്ടികയുടെ ബോഡിയിലെ പട്ടിക വരികൾക്കുള്ള ( ) കണ്ടെയ്നർ ഘടകം
`<tr>`	ഒരൊറ്റ വരിയിൽ ദൃശ്യമാകുന്ന ഒരു കൂട്ടം ടേബിൾ സെല്ലുകളുടെ ( `<td>`അല്ലെങ്കിൽ ) കണ്ടെയ്നർ ഘടകം`<th>`
`<td>`	ഡിഫോൾട്ട് ടേബിൾ സെൽ
`<th>`	നിരയ്‌ക്കായുള്ള പ്രത്യേക പട്ടിക സെൽ (അല്ലെങ്കിൽ വരി, സ്കോപ്പും പ്ലേസ്‌മെന്റും അനുസരിച്ച്) ലേബലുകൾ a ഉള്ളിൽ ഉപയോഗിക്കണം`<thead>`
`<caption>`	സ്‌ക്രീൻ റീഡറുകൾക്ക് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമായ, പട്ടിക കൈവശമുള്ളതിന്റെ വിവരണം അല്ലെങ്കിൽ സംഗ്രഹം

<പട്ടിക>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

പട്ടിക ഓപ്ഷനുകൾ

പേര്	ക്ലാസ്	വിവരണം
സ്ഥിരസ്ഥിതി	ഒന്നുമില്ല	ശൈലികളില്ല, നിരകളും വരികളും മാത്രം
അടിസ്ഥാനം	`.table`	വരികൾക്കിടയിൽ തിരശ്ചീന രേഖകൾ മാത്രം
ബോർഡർ ചെയ്തു	`.table-bordered`	കോണുകൾ റൗണ്ട് ചെയ്യുകയും പുറം ബോർഡർ ചേർക്കുകയും ചെയ്യുന്നു
സീബ്ര-സ്ട്രിപ്പ്	`.table-striped`	വിചിത്രമായ വരികളിലേക്ക് ഇളം ചാരനിറത്തിലുള്ള പശ്ചാത്തല നിറം ചേർക്കുന്നു (1, 3, 5, മുതലായവ)
ഘനീഭവിച്ചു	`.table-condensed`	8px മുതൽ 4px വരെ ലംബമായ പാഡിംഗ് പകുതിയായി മുറിക്കുന്നു, എല്ലാത്തിനും `td`മൂലകങ്ങൾക്കും `th`ഉള്ളിൽ

ഉദാഹരണ പട്ടികകൾ

1. സ്ഥിരസ്ഥിതി പട്ടിക ശൈലികൾ

വായനാക്ഷമത ഉറപ്പാക്കാനും ഘടന നിലനിർത്താനും ഏതാനും ബോർഡറുകൾ മാത്രം ഉപയോഗിച്ച് പട്ടികകൾ സ്വയമേവ സ്‌റ്റൈൽ ചെയ്യുന്നു. 2.0 ഉപയോഗിച്ച്, .tableക്ലാസ് ആവശ്യമാണ്.

<table class = "table" > 
  …
</table>

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

2. വരയുള്ള പട്ടിക

സീബ്ര-സ്‌ട്രൈപ്പിംഗ് ചേർത്ത് നിങ്ങളുടെ ടേബിളുകൾ അൽപ്പം ആകർഷകമാക്കൂ— .table-stripedക്ലാസ് ചേർക്കുക.

ശ്രദ്ധിക്കുക: വരയുള്ള പട്ടികകൾ :nth-childCSS സെലക്ടർ ഉപയോഗിക്കുന്നു, IE7-IE8-ൽ ലഭ്യമല്ല.

<table class = "table table-striped" > 
  …
</table>

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

3. ബോർഡർഡ് ടേബിൾ

സൗന്ദര്യാത്മക ആവശ്യങ്ങൾക്കായി മുഴുവൻ ടേബിളിനും ചുറ്റും ബോർഡറുകളും വൃത്താകൃതിയിലുള്ള കോണുകളും ചേർക്കുക.

<table class = "table table-bordered" > 
  …
</table>

#	പേരിന്റെ ആദ്യഭാഗം	പേരിന്റെ അവസാന ഭാഗം	ഉപയോക്തൃനാമം
1	അടയാളപ്പെടുത്തുക	ഓട്ടോ	@mdo
1	അടയാളപ്പെടുത്തുക	ഓട്ടോ	@getbootstrap
2	ജേക്കബ്	തോൺടൺ	@കൊഴുപ്പ്
3	ലാറി ദി ബേർഡ്		@ട്വിറ്റർ

4. ബാഷ്പീകരിച്ച പട്ടിക

.table-condensedടേബിൾ സെൽ പാഡിംഗ് പകുതിയായി (8px മുതൽ 4px വരെ) മുറിക്കുന്നതിന് ക്ലാസ് ചേർത്ത് നിങ്ങളുടെ ടേബിളുകൾ കൂടുതൽ ഒതുക്കമുള്ളതാക്കുക .

<table class = "table table-condensed" > 
  …
</table>

#	പേരിന്റെ ആദ്യഭാഗം	പേരിന്റെ അവസാന ഭാഗം	ഉപയോക്തൃനാമം
1	അടയാളപ്പെടുത്തുക	ഓട്ടോ	@mdo
2	ജേക്കബ്	തോൺടൺ	@കൊഴുപ്പ്
3	ലാറി ദി ബേർഡ്		@ട്വിറ്റർ

5. അവയെല്ലാം സംയോജിപ്പിക്കുക!

ലഭ്യമായ ഏതെങ്കിലും ക്ലാസുകൾ ഉപയോഗിച്ച് വ്യത്യസ്‌ത രൂപഭാവം നേടുന്നതിന് ഏതെങ്കിലും ടേബിൾ ക്ലാസുകൾ സംയോജിപ്പിക്കാൻ മടിക്കേണ്ടതില്ല.

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

	പൂർണ്ണമായ പേര്
#	പേരിന്റെ ആദ്യഭാഗം	പേരിന്റെ അവസാന ഭാഗം	ഉപയോക്തൃനാമം
1	അടയാളപ്പെടുത്തുക	ഓട്ടോ	@mdo
2	ജേക്കബ്	തോൺടൺ	@കൊഴുപ്പ്
3	ലാറി ദി ബേർഡ്		@ട്വിറ്റർ

ഫ്ലെക്സിബിൾ HTML, CSS

ബൂട്ട്‌സ്‌ട്രാപ്പിലെ ഫോമുകളെക്കുറിച്ചുള്ള ഏറ്റവും മികച്ച ഭാഗം, നിങ്ങളുടെ എല്ലാ ഇൻപുട്ടുകളും നിയന്ത്രണങ്ങളും നിങ്ങളുടെ മാർക്ക്അപ്പിൽ അവ എങ്ങനെ നിർമ്മിച്ചാലും മികച്ചതായി കാണപ്പെടും എന്നതാണ്. അമിതമായ HTML ആവശ്യമില്ല, എന്നാൽ ആവശ്യമുള്ളവർക്ക് ഞങ്ങൾ പാറ്റേണുകൾ നൽകുന്നു.

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

നാല് ലേഔട്ടുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്

നാല് തരം ഫോം ലേഔട്ടുകൾക്കുള്ള പിന്തുണയോടെയാണ് ബൂട്ട്സ്ട്രാപ്പ് വരുന്നത്:

ലംബം (സ്ഥിരസ്ഥിതി)
തിരയുക
ഇൻ ലൈൻ
തിരശ്ചീനമായി

വ്യത്യസ്‌ത തരത്തിലുള്ള ഫോം ലേഔട്ടുകൾക്ക് മാർക്ക്അപ്പിൽ ചില മാറ്റങ്ങൾ ആവശ്യമാണ്, എന്നാൽ നിയന്ത്രണങ്ങൾ തന്നെ നിലനിൽക്കുകയും അതേ രീതിയിൽ പ്രവർത്തിക്കുകയും ചെയ്യുന്നു.

നിയന്ത്രണ സംസ്ഥാനങ്ങളും മറ്റും

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഫോമുകളിൽ ഇൻപുട്ട്, ടെക്‌സ്‌റ്റേറിയ, നിങ്ങൾ പ്രതീക്ഷിക്കുന്ന സെലക്ട് എന്നിവ പോലുള്ള എല്ലാ അടിസ്ഥാന ഫോം നിയന്ത്രണങ്ങൾക്കുമുള്ള ശൈലികൾ ഉൾപ്പെടുന്നു. എന്നാൽ അനുബന്ധമായതും മുൻകൂട്ടി തയ്യാറാക്കിയതുമായ ഇൻപുട്ടുകളും ചെക്ക്ബോക്‌സുകളുടെ ലിസ്റ്റുകൾക്കുള്ള പിന്തുണയും പോലുള്ള നിരവധി ഇഷ്‌ടാനുസൃത ഘടകങ്ങളുമായി ഇത് വരുന്നു.

ഓരോ തരത്തിലുള്ള ഫോം നിയന്ത്രണത്തിലും പിശക്, മുന്നറിയിപ്പ്, വിജയം തുടങ്ങിയ അവസ്ഥകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. പ്രവർത്തനരഹിതമായ നിയന്ത്രണങ്ങൾക്കുള്ള ശൈലികളും ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

നാല് തരം രൂപങ്ങൾ

സാധാരണ വെബ് ഫോമുകളുടെ നാല് ശൈലികൾക്കുള്ള ലളിതമായ മാർക്ക്അപ്പും ശൈലികളും ബൂട്ട്സ്ട്രാപ്പ് നൽകുന്നു.

പേര്	ക്ലാസ്	വിവരണം
ലംബം (സ്ഥിരസ്ഥിതി)	`.form-vertical` (ആവശ്യമില്ല)	നിയന്ത്രണങ്ങൾക്ക് മുകളിൽ അടുക്കിവെച്ചതും ഇടത് വിന്യസിച്ചതുമായ ലേബലുകൾ
ഇൻ ലൈൻ	`.form-inline`	ഇടത് വിന്യസിച്ച ലേബലും കോം‌പാക്റ്റ് സ്‌റ്റൈലിനായി ഇൻലൈൻ-ബ്ലോക്ക് നിയന്ത്രണങ്ങളും
തിരയുക	`.form-search`	ഒരു സാധാരണ തിരയൽ സൗന്ദര്യാത്മകതയ്‌ക്കായി അധിക-വൃത്താകൃതിയിലുള്ള വാചക ഇൻപുട്ട്
തിരശ്ചീനമായി	`.form-horizontal`	നിയന്ത്രണങ്ങളുടെ അതേ വരിയിൽ ഇടത്, വലത് വിന്യസിച്ച ലേബലുകൾ ഫ്ലോട്ട് ചെയ്യുക

ഫോം നിയന്ത്രണങ്ങൾ ഉപയോഗിക്കുന്ന ഉദാഹരണ ഫോമുകൾ , അധിക മാർക്ക്അപ്പ് ഇല്ല

അടിസ്ഥാന രൂപം

v2.0 ഉപയോഗിച്ച്, ഫോം ശൈലികൾക്കായി ഞങ്ങൾക്ക് ഭാരം കുറഞ്ഞതും മികച്ചതുമായ ഡിഫോൾട്ടുകൾ ഉണ്ട്. അധിക മാർക്ക്അപ്പ് ഇല്ല, ഫോം നിയന്ത്രണങ്ങൾ മാത്രം.

<ഫോം ക്ലാസ് = "നന്നായി" > 
  <label> ലേബൽ പേര് </label>
  <input type = "text" class = "span3" placeholder = " എന്തെങ്കിലും ടൈപ്പ് ചെയ്യുക..." >   
  <span class = "help-inline" > അനുബന്ധ സഹായ വാചകം! </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > എന്നെ പരിശോധിക്കുക 
  </label>
  <button type = "submit" class = "btn" > സമർപ്പിക്കുക </button>  
</form>

തിരയൽ ഫോം

ഡിഫോൾട്ട് വെബ്‌കിറ്റ് ശൈലികൾ പ്രതിഫലിപ്പിക്കുന്നു .form-search, അധിക വൃത്താകൃതിയിലുള്ള തിരയൽ ഫീൽഡുകൾക്കായി ചേർക്കുക.

<form class = "well form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Search </button>  
</form>

ഇൻലൈൻ ഫോം

ഇൻപുട്ടുകൾ ആരംഭിക്കുന്നതിനുള്ള ബ്ലോക്ക് ലെവലാണ്. .form-inlineകൂടാതെ , .form-horizontalഞങ്ങൾ ഇൻലൈൻ-ബ്ലോക്ക് ഉപയോഗിക്കുന്നു.

<form class = "well 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>

തിരശ്ചീന രൂപങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് പിന്തുണകൾ നിയന്ത്രിക്കുന്നു

ടെക്സ്റ്റ് ഇൻപുട്ട്

ഫ്രീഫോം ടെക്‌സ്‌റ്റിന് പുറമേ, ഏതെങ്കിലും HTML5 ടെക്‌സ്‌റ്റ് അധിഷ്‌ഠിത ഇൻപുട്ടും ഇതുപോലെ ദൃശ്യമാകും.

ചെക്ക്ബോക്സ്

ഓപ്ഷൻ ഒന്ന് ഇതും അതും-എന്തുകൊണ്ടാണ് ഇത് മികച്ചതെന്ന് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക

ലിസ്റ്റ് തിരഞ്ഞെടുക്കുക

മൾട്ടിക്കോൺ-തിരഞ്ഞെടുക്കുക

ഫയൽ ഇൻപുട്ട്

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

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

മുകളിലെ ഉദാഹരണ ഫോം ലേഔട്ട് നൽകിയാൽ, ആദ്യ ഇൻപുട്ടും നിയന്ത്രണ ഗ്രൂപ്പുമായി ബന്ധപ്പെട്ട മാർക്ക്അപ്പ് ഇതാ. ദി .control-group, .control-label, .controlsക്ലാസുകൾ എന്നിവയെല്ലാം സ്റ്റൈലിംഗിന് ആവശ്യമാണ്.

<form class = "form-horizontal" > 
  <ഫീൽഡ്സെറ്റ്>
    <legend> ലെജൻഡ് ടെക്സ്റ്റ് </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > ടെക്സ്റ്റ് ഇൻപുട്ട് </label>  
      <div class = "നിയന്ത്രണങ്ങൾ" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > സഹായ വാചകം </p> 
      </div>
    </div>
  </fieldset>
</form>

എന്താണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നത്

ഞങ്ങൾ പിന്തുണയ്ക്കുന്ന എല്ലാ ഡിഫോൾട്ട് ഫോം നിയന്ത്രണങ്ങളും ഇടതുവശത്ത് കാണിച്ചിരിക്കുന്നു. ബുള്ളറ്റഡ് ലിസ്റ്റ് ഇതാ:

ടെക്സ്റ്റ് ഇൻപുട്ടുകൾ (ടെക്‌സ്റ്റ്, പാസ്‌വേഡ്, ഇമെയിൽ മുതലായവ)
ചെക്ക്ബോക്സ്
റേഡിയോ
തിരഞ്ഞെടുക്കുക
ഒന്നിലധികം തിരഞ്ഞെടുക്കൽ
ഫയൽ ഇൻപുട്ട്
ടെക്സ്റ്റ് ഏരിയ

v2.0 ഉള്ള പുതിയ ഡിഫോൾട്ടുകൾ

v1.4 വരെ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് ഫോം ശൈലികൾ തിരശ്ചീന ലേഔട്ട് ഉപയോഗിച്ചു. ബൂട്ട്‌സ്‌ട്രാപ്പ് 2 ഉപയോഗിച്ച്, ഏത് ഫോമിനും സ്‌മാർട്ടറും സ്‌കേലബിൾ ഡിഫോൾട്ടുകളും ലഭിക്കുന്നതിന് ഞങ്ങൾ ആ നിയന്ത്രണം നീക്കം ചെയ്തു.

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

ഫോക്കസ് ചെയ്ത ഇൻപുട്ട്

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

ഇവിടെ ചില മൂല്യങ്ങൾ

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

പ്രവർത്തനരഹിതമാക്കിയ ചെക്ക്ബോക്സ്

ഇതൊരു പ്രവർത്തനരഹിതമാക്കിയ ചെക്ക്ബോക്സാണ്

മുന്നറിയിപ്പിനൊപ്പം ഇൻപുട്ട് ചെയ്യുക

എന്തോ കുഴപ്പം സംഭവിച്ചിരിക്കാം

പിശകുള്ള ഇൻപുട്ട്

ദയവായി തെറ്റ് തിരുത്തുക

വിജയത്തോടെ ഇൻപുട്ട്

കൊള്ളാം!

വിജയത്തോടെ തിരഞ്ഞെടുക്കുക

കൊള്ളാം!

പുനർരൂപകൽപ്പന ചെയ്ത ബ്രൗസർ സംസ്ഥാനങ്ങൾ

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

ഫോം മൂല്യനിർണ്ണയം

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

<ഫീൽഡ്സെറ്റ്
  ക്ലാസ് = "നിയന്ത്രണ-ഗ്രൂപ്പ് പിശക്" >
  …
</fieldset>

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

ഫോം ഗ്രിഡ് വലുപ്പങ്ങൾ

.span*ഇൻപുട്ട് വലുപ്പങ്ങൾക്കായി ഗ്രിഡ് സിസ്റ്റത്തിൽ നിന്നുള്ള അതേ ക്ലാസുകൾ ഉപയോഗിക്കുക .

ഇതര വലുപ്പങ്ങൾ

നിങ്ങൾക്ക് ഗ്രിഡിലേക്ക് മാപ്പ് ചെയ്യാത്ത, പ്രതികരിക്കുന്ന CSS ശൈലികളോട് പൊരുത്തപ്പെടാത്ത സ്റ്റാറ്റിക് ക്ലാസുകൾ ഉപയോഗിക്കാം, അല്ലെങ്കിൽ വ്യത്യസ്ത തരത്തിലുള്ള നിയന്ത്രണങ്ങൾക്കായി അക്കൗണ്ട് ചെയ്യാം (ഉദാ, inputvs. select).

മുൻകൂട്ടി തയ്യാറാക്കിയ വാചകം

ചില സഹായ വാചകം ഇതാ

വാചകം ചേർത്തു

.00

കൂടുതൽ സഹായ വാചകം ഇതാ

കൂട്ടിച്ചേർക്കുക, മുൻകൂട്ടി വയ്ക്കുക

$ .00

ബട്ടൺ ഉപയോഗിച്ച് കൂട്ടിച്ചേർക്കുക

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

1 2 3

ചെക്ക്ബോക്സുകൾ

ഓപ്ഷൻ ഒന്ന് ഇതും അതും-എന്തുകൊണ്ടാണ് ഇത് മികച്ചതെന്ന് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക ഓപ്ഷൻ രണ്ട് പരിശോധിച്ച് ഫോം ഫലങ്ങളിൽ ഉൾപ്പെടുത്താവുന്നതാണ് ഓപ്‌ഷൻ മൂന്ന്-അതെ, നിങ്ങൾ ഊഹിച്ചു-കൂടെ പരിശോധിച്ച് ഫോം ഫലങ്ങളിൽ ഉൾപ്പെടുത്താം

ശ്രദ്ധിക്കുക: കൂടുതൽ വലിയ ക്ലിക്ക് ഏരിയകൾക്കും കൂടുതൽ ഉപയോഗയോഗ്യമായ ഫോമിനുമുള്ള എല്ലാ ഓപ്‌ഷനുകളും ലേബലുകൾ ചുറ്റുന്നു.

റേഡിയോ ബട്ടണുകൾ

ഓപ്ഷൻ ഒന്ന് ഇതും അതും-എന്തുകൊണ്ടാണ് ഇത് മികച്ചതെന്ന് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക ഓപ്‌ഷൻ രണ്ട് കാൻ മറ്റൊന്നാണ്, അത് തിരഞ്ഞെടുക്കുന്നത് ഓപ്ഷൻ ഒന്ന് തിരഞ്ഞെടുത്തത് മാറ്റും

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

ഇൻപുട്ട് ഗ്രൂപ്പുകൾ—അനുയോജ്യമോ മുൻകൂട്ടി തയ്യാറാക്കിയതോ ആയ ടെക്‌സ്‌റ്റ് സഹിതം—നിങ്ങളുടെ ഇൻപുട്ടുകൾക്ക് കൂടുതൽ സന്ദർഭം നൽകാനുള്ള എളുപ്പവഴി നൽകുന്നു. ട്വിറ്റർ ഉപയോക്തൃനാമങ്ങൾക്കായുള്ള @ ചിഹ്നം അല്ലെങ്കിൽ ധനകാര്യങ്ങൾക്കുള്ള $ എന്നിവ മികച്ച ഉദാഹരണങ്ങളിൽ ഉൾപ്പെടുന്നു.

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

v1.4 വരെ, ബൂട്ട്‌സ്‌ട്രാപ്പിന് ചെക്ക്‌ബോക്‌സുകളും റേഡിയോകളും അടുക്കിവെക്കുന്നതിന് ചുറ്റും അധിക മാർക്ക്അപ്പ് ആവശ്യമാണ്. <label class="checkbox">ഇപ്പോൾ, പൊതിഞ്ഞത് ആവർത്തിക്കുക എന്നത് ഒരു ലളിതമായ കാര്യമാണ് <input type="checkbox">.

ഇൻലൈൻ ചെക്ക്ബോക്സുകളും റേഡിയോകളും പിന്തുണയ്ക്കുന്നു. .inlineഏതെങ്കിലും ഒന്നിലേക്ക് ചേർക്കുക .checkboxഅല്ലെങ്കിൽ .radioനിങ്ങൾ പൂർത്തിയാക്കി.

ഇൻലൈൻ ഫോമുകൾ കൂട്ടിച്ചേർക്കുക/മുൻകൂട്ടി ചേർക്കുക

ഇൻ‌ലൈൻ ഫോമിൽ ഇൻപുട്ടുകൾ മുൻ‌കൂട്ടി ചേർക്കാനോ കൂട്ടിച്ചേർക്കാനോ, സ്‌പെയ്‌സുകളില്ലാതെ ഒരേ ലൈനിൽ സ്ഥാപിക്കുന്നത് .add-onഉറപ്പാക്കുക input.

ഫോം സഹായ വാചകം

നിങ്ങളുടെ ഫോം ഇൻപുട്ടുകൾക്കായി സഹായ വാചകം ചേർക്കുന്നതിന് , ഇൻപുട്ട് എലമെന്റിന് ശേഷം ഇൻലൈൻ ഹെൽപ്പ് ടെക്‌സ്‌റ്റോ <span class="help-inline">ഹെൽപ്പ് ടെക്‌സ്‌റ്റ് ബ്ലോക്ക് ഉൾപ്പെടുത്തുക.<p class="help-block">

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

പ്രവർത്തനങ്ങൾക്കുള്ള ബട്ടണുകൾ

ഒരു കൺവെൻഷൻ എന്ന നിലയിൽ, ഒബ്‌ജക്റ്റുകൾക്ക് ഹൈപ്പർലിങ്കുകൾ ഉപയോഗിക്കുമ്പോൾ ബട്ടണുകൾ പ്രവർത്തനങ്ങൾക്ക് മാത്രമേ ഉപയോഗിക്കാവൂ. ഉദാഹരണത്തിന്, "ഡൗൺലോഡ്" എന്നത് ഒരു ബട്ടണായിരിക്കണം അതേസമയം "സമീപകാല പ്രവർത്തനം" ഒരു ലിങ്ക് ആയിരിക്കണം.

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

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

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

ഒന്നിലധികം വലുപ്പങ്ങൾ

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

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

പ്രവർത്തനരഹിതമാക്കിയ ബട്ടണുകൾക്ക്, .disabledലിങ്കുകളിലേക്ക് ക്ലാസും ഘടകങ്ങളുടെ disabledആട്രിബ്യൂട്ടും ചേർക്കുക.<button>

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

ഹെഡ്സ് അപ്പുകൾ! ഞങ്ങൾ .disabledഇവിടെ ഒരു യൂട്ടിലിറ്റി ക്ലാസായി ഉപയോഗിക്കുന്നു, സാധാരണ .activeക്ലാസിന് സമാനമായതിനാൽ പ്രിഫിക്‌സ് ആവശ്യമില്ല.

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

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

<a class = "btn" href = "" > ലിങ്ക് </a>  
<button class = "btn" type = "submit" >  
  ബട്ടൺ
</button>
<ഇൻപുട്ട് ക്ലാസ് = "ബിടിഎൻ" തരം = "ബട്ടൺ"  
         മൂല്യം = "ഇൻപുട്ട്" >
<ഇൻപുട്ട് ക്ലാസ് = "ബിടിഎൻ" തരം = "സമർപ്പിക്കുക"  
         മൂല്യം = "സമർപ്പിക്കുക" >

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

ഐക്കൺ-ഗ്ലാസ്
ഐക്കൺ-സംഗീതം
ഐക്കൺ-തിരയൽ
ഐക്കൺ-എൻവലപ്പ്
ഐക്കൺ-ഹൃദയം
ഐക്കൺ-സ്റ്റാർ
ഐക്കൺ-നക്ഷത്രം-ശൂന്യം
ഐക്കൺ-ഉപയോക്താവ്
ഐക്കൺ-ഫിലിം
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

ഒരു സ്പ്രൈറ്റ് ആയി നിർമ്മിച്ചത്

ഓരോ ഐക്കണും ഒരു അധിക അഭ്യർത്ഥന ആക്കുന്നതിനുപകരം, ഞങ്ങൾ അവയെ ഒരു സ്‌പ്രൈറ്റായി കംപൈൽ ചെയ്‌തിരിക്കുന്നു—ഒരു ഫയലിലെ ചിത്രങ്ങളുടെ ഒരു കൂട്ടം, അത് ചിത്രങ്ങൾ സ്ഥാപിക്കാൻ CSS ഉപയോഗിക്കുന്നു background-position. Twitter.com-ൽ ഞങ്ങൾ ഉപയോഗിക്കുന്ന അതേ രീതിയാണിത്, ഇത് ഞങ്ങൾക്ക് നന്നായി പ്രവർത്തിച്ചു.

എല്ലാ ഐക്കൺ ക്ലാസുകളും .icon-ഞങ്ങളുടെ മറ്റ് ഘടകങ്ങളെപ്പോലെ ശരിയായ നെയിംസ്‌പേസിംഗിനും സ്കോപ്പിംഗിനും പ്രിഫിക്‌സ് ചെയ്‌തിരിക്കുന്നു. മറ്റ് ഉപകരണങ്ങളുമായുള്ള വൈരുദ്ധ്യങ്ങൾ ഒഴിവാക്കാൻ ഇത് സഹായിക്കും.

ഡോക്‌സിൽ ഞങ്ങൾ ഒരു ലിങ്കും ക്രെഡിറ്റും നൽകുന്നിടത്തോളം കാലം ഞങ്ങളുടെ ഓപ്പൺ സോഴ്‌സ് ടൂൾകിറ്റിൽ സജ്ജീകരിച്ച ഹാഫ്‌ലിംഗ്‌സ് ഉപയോഗിക്കാൻ Glyphicons ഞങ്ങൾക്ക് അനുവദിച്ചിട്ടുണ്ട്. നിങ്ങളുടെ പ്രോജക്റ്റുകളിലും ഇത് ചെയ്യുന്നത് പരിഗണിക്കുക.

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

ബൂട്ട്‌സ്‌ട്രാപ്പ് <i>എല്ലാ ഐക്കണുകൾക്കും ഒരു ടാഗ് ഉപയോഗിക്കുന്നു, എന്നാൽ അവയ്‌ക്ക് കേസ് ക്ലാസില്ല-ഒരു പങ്കിട്ട പ്രിഫിക്‌സ് മാത്രം. ഉപയോഗിക്കുന്നതിന്, ഇനിപ്പറയുന്ന കോഡ് എവിടെയും സ്ഥാപിക്കുക:

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

വിപരീത (വെളുത്ത) ഐക്കണുകൾക്കായി ഒരു അധിക ക്ലാസ് ഉപയോഗിച്ച് തയ്യാറാക്കിയ ശൈലികളും ലഭ്യമാണ്:

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

നിങ്ങളുടെ ഐക്കണുകൾക്കായി തിരഞ്ഞെടുക്കാൻ 120 ക്ലാസുകളുണ്ട്. ശരിയായ ക്ലാസുകളുള്ള ഒരു ടാഗ് ചേർക്കുക <i>, നിങ്ങൾ സജ്ജമാക്കി. നിങ്ങൾക്ക് മുഴുവൻ ലിസ്‌റ്റും sprites.less എന്നതിൽ അല്ലെങ്കിൽ ഇവിടെ ഈ ഡോക്യുമെന്റിൽ കണ്ടെത്താം.

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

കേസുകൾ ഉപയോഗിക്കുക

ഐക്കണുകൾ മികച്ചതാണ്, പക്ഷേ ഒരാൾ എവിടെയാണ് അവ ഉപയോഗിക്കേണ്ടത്? കുറച്ച് ആശയങ്ങൾ ഇതാ:

നിങ്ങളുടെ സൈഡ്‌ബാർ നാവിഗേഷന്റെ ദൃശ്യങ്ങൾ പോലെ
പൂർണ്ണമായും ഐക്കൺ അടിസ്ഥാനമാക്കിയുള്ള നാവിഗേഷനായി
ഒരു പ്രവർത്തനത്തിന്റെ അർത്ഥം അറിയിക്കാൻ സഹായിക്കുന്ന ബട്ടണുകൾക്കായി
ഒരു ഉപയോക്താവിന്റെ ലക്ഷ്യസ്ഥാനത്ത് സന്ദർഭം പങ്കിടുന്നതിനുള്ള ലിങ്കുകൾക്കൊപ്പം

അടിസ്ഥാനപരമായി, നിങ്ങൾക്ക് ഒരു ടാഗ് ഇടാൻ കഴിയുന്ന എവിടെയും <i>, നിങ്ങൾക്ക് ഒരു ഐക്കൺ ഇടാം.

ഉദാഹരണങ്ങൾ

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

ടൈപ്പോഗ്രാഫി തലക്കെട്ടുകൾ, ഖണ്ഡികകൾ, ലിസ്റ്റുകൾ, മറ്റ് ഇൻലൈൻ തരം ഘടകങ്ങൾ