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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ഒരു ബ്ലോക്ക്‌ക്വോട്ട് ഉൾപ്പെടുത്താൻ , ഉദ്ധരണിയായി <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>

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

വിവരണം

<dl>

വിവരണ ലിസ്റ്റുകൾ

നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.

യൂയിസ്മോഡ്

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ആങ്കറുകൾക്കും ഫോമുകൾക്കും

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

ശ്രദ്ധിക്കുക: എല്ലാ ബട്ടണുകളിലും .btnക്ലാസ് ഉൾപ്പെടുത്തണം. ബട്ടൺ ശൈലികൾ പ്രയോഗിച്ച് <button>സ്ഥിരതയ്ക്കായി <a>ഘടകങ്ങൾ നൽകണം.

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

വലുതോ ചെറുതോ ആയ ബട്ടണുകൾ ഇഷ്ടമാണോ? അത് നേടുക!

പ്രാഥമിക പ്രവർത്തനം ആക്ഷൻ

പ്രാഥമിക പ്രവർത്തനം ആക്ഷൻ

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

പ്രവർത്തനരഹിതമാക്കിയ ബട്ടണുകൾക്കായി, .btn-disabledലിങ്കുകൾക്കും :disabledഘടകങ്ങൾക്കും ഉപയോഗിക്കുക <button>.

പ്രാഥമിക പ്രവർത്തനം ആക്ഷൻ

പ്രാഥമിക പ്രവർത്തനം ആക്ഷൻ

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

IE9-ൽ, വൃത്താകൃതിയിലുള്ള കോണുകൾക്ക് അനുകൂലമായി ഞങ്ങൾ എല്ലാ ബട്ടണുകളിലും ഗ്രേഡിയന്റ് ഇടുന്നു, കാരണം IE9 കോണുകളിലേക്ക് പശ്ചാത്തല ഗ്രേഡിയന്റുകൾ ക്രോപ്പ് ചെയ്യില്ല.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

പുതുക്കുക ചെക്ക് ഔട്ട് ഇല്ലാതാക്കുക

അഭിപ്രായം ക്രമീകരണങ്ങൾ കൂടുതൽ വിവരങ്ങൾ