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

മുഴുവൻ ടൈപ്പോഗ്രാഫിക് ഗ്രിഡും ഞങ്ങളുടെ 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. ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല, എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം നെക് എലിറ്റ്. ഡോനെക് സെഡ് ഒഡിയോ ദുയി.

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

ഫ്യൂസ് ഡാപിബസ് , ടെല്ലസ് എസി കർസസ് കോമോഡോ , ടോർറ്റർ മൗറിസ് കോൺഡിമെന്റം നിബ്, യുട്ട് ഫെർമെന്റം മാസ് ജസ്തോ സിറ്റ് അമെറ്റ് റിസസ്. മെസെനാസ് ഫൗസിബസ് മോളിസ് ഇന്റർഡം. 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>

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

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

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

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

<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 ഉപയോഗിച്ച്, ഫോം ശൈലികൾക്കായി ഞങ്ങൾക്ക് ഭാരം കുറഞ്ഞതും മികച്ചതുമായ ഡിഫോൾട്ടുകൾ ഉണ്ട്. അധിക മാർക്ക്അപ്പ് ഇല്ല, ഫോം നിയന്ത്രണങ്ങൾ മാത്രം.

<ഫോം ക്ലാസ് = "നന്നായി" > 
  <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" >   
  <button type = "submit" class = "btn" > Go </button>  
</form>

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

മുകളിലെ ഉദാഹരണ ഫോം ലേഔട്ട് നൽകിയാൽ, ആദ്യ ഇൻപുട്ടും നിയന്ത്രണ ഗ്രൂപ്പുമായി ബന്ധപ്പെട്ട മാർക്ക്അപ്പ് ഇതാ. ദി .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>

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

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

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

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>

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

വൃത്താകൃതിയിലുള്ള കോണുകളിൽ 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 ഞങ്ങൾക്ക് അനുവദിച്ചിട്ടുണ്ട്. നിങ്ങളുടെ പ്രോജക്റ്റുകളിലും ഇത് ചെയ്യുന്നത് പരിഗണിക്കുക.

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

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

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

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

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

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

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

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

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

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

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

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