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

ബൂട്ട്സ്ട്രാപ്പ്, ട്വിറ്ററിൽ നിന്ന്

വെബ്‌ആപ്പുകളുടെയും സൈറ്റുകളുടെയും വികസനം കിക്ക്‌സ്റ്റാർട്ട് ചെയ്യുന്നതിന് രൂപകൽപ്പന ചെയ്‌ത Twitter-ൽ നിന്നുള്ള ഒരു ടൂൾകിറ്റാണ് ബൂട്ട്‌സ്‌ട്രാപ്പ്.
ടൈപ്പോഗ്രാഫി, ഫോമുകൾ, ബട്ടണുകൾ, പട്ടികകൾ, ഗ്രിഡുകൾ, നാവിഗേഷൻ എന്നിവയ്‌ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമുള്ള അടിസ്ഥാന CSS, HTML എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു.

നേർഡ് അലേർട്ട്: ബൂട്ട്‌സ്‌ട്രാപ്പ് കുറച്ച് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത് , ആധുനിക ബ്രൗസറുകൾ മനസ്സിൽ വെച്ച് ഗേറ്റിന് പുറത്ത് പ്രവർത്തിക്കാൻ രൂപകൽപ്പന ചെയ്‌തതാണ്.

CSS ഹോട്ട്‌ലിങ്ക് ചെയ്യുക

വേഗമേറിയതും എളുപ്പവുമായ തുടക്കത്തിനായി, ഈ സ്‌നിപ്പെറ്റ് നിങ്ങളുടെ വെബ്‌പേജിലേക്ക് പകർത്തുക.

കുറവ് ഉപയോഗിച്ച് ഇത് ഉപയോഗിക്കുക

കുറച്ച് ഉപയോഗിക്കുന്ന ഒരു ആരാധകനാണോ? പ്രശ്‌നമില്ല, റിപ്പോ ക്ലോൺ ചെയ്‌ത് ഈ വരികൾ ചേർക്കുക:

GitHub-ൽ ഫോർക്ക്

Github-ലെ ഔദ്യോഗിക ബൂട്ട്‌സ്‌ട്രാപ്പ് റിപ്പോ ഉപയോഗിച്ച് ഡൗൺലോഡ് ചെയ്യുക, ഫോർക്ക് ചെയ്യുക, വലിക്കുക, ഫയൽ പ്രശ്നങ്ങൾ എന്നിവയും മറ്റും.

GitHub-ലെ ബൂട്ട്സ്ട്രാപ്പ് »

ബൂട്ട്സ്ട്രാപ്പ് സംക്ഷിപ്ത ചരിത്രം, ബ്രൗസർ പിന്തുണ എന്നിവയും മറ്റും

ചരിത്രം

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

ട്വിറ്ററിലെ നിരവധി എഞ്ചിനീയർമാരുടെ സഹായവും ഫീഡ്‌ബാക്കും ഉപയോഗിച്ച്, അടിസ്ഥാന ശൈലികൾ മാത്രമല്ല, കൂടുതൽ മനോഹരവും മോടിയുള്ളതുമായ ഫ്രണ്ട്-എൻഡ് ഡിസൈൻ പാറ്റേണുകൾ ഉൾക്കൊള്ളാൻ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഗണ്യമായി വളർന്നു.

dev.twitter.com ൽ കൂടുതൽ വായിക്കുക ›

ബ്രൗസർ പിന്തുണ

Chrome, Safari, Internet Explorer, Firefox പോലുള്ള പ്രധാന ആധുനിക ബ്രൗസറുകളിൽ ബൂട്ട്സ്ട്രാപ്പ് പരീക്ഷിക്കുകയും പിന്തുണയ്ക്കുകയും ചെയ്യുന്നു.

Chrome, Safari, Internet Explorer, Firefox എന്നിവയിൽ പരീക്ഷിക്കുകയും പിന്തുണയ്ക്കുകയും ചെയ്യുന്നു
  • ഏറ്റവും പുതിയ സഫാരി
  • ഏറ്റവും പുതിയ Google Chrome
  • Firefox 4+
  • Internet Explorer 7+
  • ഓപ്പറ 11

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

ബൂട്ട്‌സ്‌ട്രാപ്പ് കംപൈൽ ചെയ്‌ത CSS, കംപൈൽ ചെയ്യാത്ത, ഉദാഹരണ ടെംപ്ലേറ്റുകൾ എന്നിവയ്‌ക്കൊപ്പം പൂർണ്ണമായി വരുന്നു.

  • എല്ലാ ഒറിജിനൽ .ലെസ്സ് ഫയലുകളും
  • പൂർണ്ണമായും സമാഹരിച്ചതും ചെറുതാക്കിയതുമായ CSS
  • സ്റ്റൈൽ ഗൈഡ് ഡോക്യുമെന്റേഷൻ പൂർത്തിയാക്കുക
  • ഉദാഹരണ പേജ് ടെംപ്ലേറ്റ് (കൂടുതൽ ഉടൻ വരുന്നു)

ഗ്രിഡ് സിസ്റ്റം സ്റ്റാൻഡേർഡ് 940px റോക്ക് ചെയ്യുക അല്ലെങ്കിൽ നിങ്ങളുടേതായ റോൾ ചെയ്യുക

ഡിഫോൾട്ട് ഗ്രിഡ്

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഭാഗമായി നൽകിയിരിക്കുന്ന ഡിഫോൾട്ട് ഗ്രിഡ് സിസ്റ്റം 940px വീതിയുള്ള 16-കോളം ഗ്രിഡാണ്. ഇത് ജനപ്രിയമായ 960 ഗ്രിഡ് സിസ്റ്റത്തിന്റെ ഒരു രസമാണ്, എന്നാൽ ഇടതും വലതും വശങ്ങളിൽ അധിക മാർജിൻ/പാഡിംഗ് ഇല്ലാതെ.

ഗ്രിഡ് മാർക്ക്അപ്പ് ഉദാഹരണം

ഇവിടെ കാണിച്ചിരിക്കുന്നതുപോലെ, ഞങ്ങളുടെ ഗ്രിഡ് സിസ്റ്റത്തിന്റെ ഭാഗമായി ഞങ്ങൾ നിർവചിച്ചിരിക്കുന്ന 16 അടിസ്ഥാന നിരകളുടെ എണ്ണം ഉൾക്കൊള്ളുന്ന രണ്ട് "നിരകൾ" ഉപയോഗിച്ച് ഒരു അടിസ്ഥാന ലേഔട്ട് സൃഷ്ടിക്കാൻ കഴിയും. കൂടുതൽ വ്യതിയാനങ്ങൾക്കായി ചുവടെയുള്ള ഉദാഹരണങ്ങൾ കാണുക.

  1. <div class = "row" > 
  2.   <div class = "span6 columns" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10 columns" > 
  6.     ...
  7.   </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16

നിരകൾ ഓഫ്‌സെറ്റ് ചെയ്യുന്നു

4
8 ഓഫ്സെറ്റ് 4
1/3 ഓഫ്‌സെറ്റ് 2/3സെ
4 ഓഫ്സെറ്റ് 4
4 ഓഫ്സെറ്റ് 4
5 ഓഫ്സെറ്റ് 3
5 ഓഫ്സെറ്റ് 3
10 ഓഫ്സെറ്റ് 6

വെബ്‌പേജുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള അടിസ്ഥാന ടെംപ്ലേറ്റുകൾ ലേഔട്ടുകൾ

നിശ്ചിത ലേഔട്ട്

ഡിഫോൾട്ടും ലളിതവുമായ 940px-വൈഡ്, കേന്ദ്രീകൃതമായ ലേഔട്ട് ഏതെങ്കിലും വെബ്‌സൈറ്റിനോ പേജിനോ ഒരു ഒറ്റത്തവണ നൽകുന്നു <div.container>.

  1. <ശരീരം>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

ദ്രാവക ലേഔട്ട്

ചെറുതും കൂടിയതുമായ വീതിയും ഇടത് വശത്തുള്ള സൈഡ്‌ബാറും ഉള്ള ബദൽ, ഫ്ലെക്സിബിൾ ഫ്ലൂയിഡ് പേജ് ഘടന. ആപ്പുകൾക്കും ഡോക്‌സിനും അനുയോജ്യമാണ്.

  1. <ശരീരം>
  2.   <div class = "container-fluid" > 
  3.     <div class = "sidebar" > 
  4.       ...
  5.     </div>
  6.     <div class = "content" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

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

തലക്കെട്ടുകളും പകർപ്പും

നിങ്ങളുടെ വെബ്‌പേജുകൾ രൂപപ്പെടുത്തുന്നതിനുള്ള ഒരു സാധാരണ ടൈപ്പോഗ്രാഫിക് ശ്രേണി.

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

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

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

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

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

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

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

ഉദാഹരണ ഖണ്ഡിക

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

ഉദാഹരണ തലക്കെട്ടിന് ഉപതലക്കെട്ടുണ്ട്...

മറ്റുള്ളവ ഘടകങ്ങൾ

ഊന്നൽ, വിലാസങ്ങൾ, ചുരുക്കങ്ങൾ എന്നിവ ഉപയോഗിക്കുന്നു

<strong> <em> <address> <abbr>

എപ്പോൾ ഉപയോഗിക്കണം

ചുറ്റുപാടുമുള്ള പകർപ്പുമായി ബന്ധപ്പെട്ട് ഒരു വാക്കിന്റെയോ വാക്യത്തിന്റെയോ അധിക പ്രാധാന്യമോ ഊന്നലോ സൂചിപ്പിക്കാൻ ഊന്നൽ ടാഗുകൾ ( <strong>ഒപ്പം <em>) ഉപയോഗിക്കണം. <strong>പ്രാധാന്യത്തിനും സ്ട്രെസ് ഊന്നലിനും ഉപയോഗിക്കുക <em>.

ഒരു ഖണ്ഡികയിൽ ഊന്നൽ

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

കുറിപ്പ്: HTML5- ൽ ഉപയോഗിക്കാനും ടാഗുചെയ്യാനും ഇപ്പോഴും കുഴപ്പമില്ല <b>, <i>അവ യഥാക്രമം ബോൾഡും ഇറ്റാലിക് ശൈലിയും നൽകേണ്ടതില്ല (കൂടുതൽ അർത്ഥപരമായ ഘടകം ഉണ്ടെങ്കിൽ, അത് ഉപയോഗിക്കുക). <b>അധിക പ്രാധാന്യം നൽകാതെ വാക്കുകളോ ശൈലികളോ ഹൈലൈറ്റ് ചെയ്യാനാണ് ഉദ്ദേശിക്കുന്നത്, അതേസമയം <i>ശബ്ദം, സാങ്കേതിക പദങ്ങൾ മുതലായവയ്ക്ക് വേണ്ടിയുള്ളതാണ്.

വിലാസങ്ങൾ

മൂലകം അതിന്റെ ഏറ്റവും <address>അടുത്ത പൂർവ്വികനെയോ അല്ലെങ്കിൽ മുഴുവൻ ജോലിയുടെയും കോൺടാക്റ്റ് വിവരങ്ങൾക്കായി ഉപയോഗിക്കുന്നു. ഇത് എങ്ങനെ കാണപ്പെടുന്നുവെന്നത് ഇതാ:

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

ശ്രദ്ധിക്കുക: ഉള്ളടക്കം ശരിയായി രൂപപ്പെടുത്തുന്നതിന് ഒരു വരിയിലെ ഓരോ വരിയും <address>ഒരു ലൈൻ-ബ്രേക്ക് ( <br />) ഉപയോഗിച്ച് അവസാനിപ്പിക്കണം അല്ലെങ്കിൽ ഒരു ബ്ലോക്ക്-ലെവൽ ടാഗിൽ (ഉദാ, ) പൊതിഞ്ഞിരിക്കണം .<p>

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

ചുരുക്കങ്ങൾക്കും ചുരുക്കെഴുത്തുകൾക്കുമായി, <abbr>ടാഗ് ഉപയോഗിക്കുക ( HTML5<acronym> ൽ ഒഴിവാക്കിയിരിക്കുന്നു ). ടാഗിനുള്ളിൽ ഷോർട്ട്‌ഹാൻഡ് ഫോം ഇടുക, പൂർണ്ണമായ പേരിനായി ഒരു ശീർഷകം സജ്ജമാക്കുക.

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

<blockquote> <p> <small>

എങ്ങനെ ഉദ്ധരിക്കാം

ഒരു ബ്ലോക്ക്‌ക്വോട്ട് ഉൾപ്പെടുത്താൻ, ചുറ്റിപ്പിടിച്ച് <blockquote>ടാഗുകൾ ചെയ്യുക. നിങ്ങളുടെ ഉറവിടം ഉദ്ധരിക്കാൻ ഘടകം ഉപയോഗിക്കുക, അതിന് മുമ്പ് നിങ്ങൾക്ക് ഒരു എം ഡാഷ് ലഭിക്കും .<p><small><small>&mdash;

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. ഇന്റിജർ പോസുവേർ എററ്റ് എ ആന്റ വെനനാറ്റിസ് ഡാപിബസ് പോസ്യുറെ വെലിറ്റ് അലിക്വറ്റ്.

ഡോ. ജൂലിയസ് ഹിബ്ബർട്ട്

ലിസ്റ്റുകൾ

ഓർഡർ ചെയ്യാത്തത്<ul>

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

ശൈലിയില്ലാത്തത്<ul.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.

പട്ടികകൾ , നിങ്ങൾ ഊഹിച്ചു, പട്ടിക ഡാറ്റ

കെട്ടിട മേശകൾ

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

ടേബിളുകൾ മികച്ചതാണ് - ഒരുപാട് കാര്യങ്ങൾക്ക്. എന്നിരുന്നാലും, മികച്ച പട്ടികകൾക്ക് ഉപയോഗപ്രദവും അളക്കാവുന്നതും വായിക്കാവുന്നതുമായ (കോഡ് തലത്തിൽ) മാർക്ക്അപ്പ് ലവ് ആവശ്യമാണ്. സഹായിക്കാൻ ചില നുറുങ്ങുകൾ ഇതാ.

എല്ലായ്‌പ്പോഴും നിങ്ങളുടെ കോളം തലക്കെട്ടുകൾ ഒരു <thead>ശ്രേണിയിൽ പൊതിയുക <thead>> <tr>> <th>.

കോളം ഹെഡറുകൾക്ക് സമാനമായി, നിങ്ങളുടെ ടേബിളിന്റെ എല്ലാ ബോഡി ഉള്ളടക്കവും പൊതിഞ്ഞതായിരിക്കണം, <tbody>അതിനാൽ നിങ്ങളുടെ ശ്രേണി <tbody>> <tr>> <td>.

ഉദാഹരണം: സ്ഥിരസ്ഥിതി പട്ടിക ശൈലികൾ

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

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഭാഷ
1 ചിലത് ഒന്ന് ഇംഗ്ലീഷ്
2 ജോ സിക്സ്പാക്ക് ഇംഗ്ലീഷ്
3 സ്തു ഡെന്റ് കോഡ് 
  1. <പട്ടിക>
  2.   ...
  3. </table>

ഉദാഹരണം: സീബ്രാ വരയുള്ള

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

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഭാഷ
1 ചിലത് ഒന്ന് ഇംഗ്ലീഷ്
2 ജോ സിക്സ്പാക്ക് ഇംഗ്ലീഷ്
3 സ്തു ഡെന്റ് കോഡ്

ശ്രദ്ധിക്കുക: IE8-ഉം അതിനുതാഴെയുള്ളതുമായ പഴയ ബ്രൗസറുകൾക്ക് ലഭ്യമല്ലാത്ത പുരോഗമനപരമായ മെച്ചപ്പെടുത്തലാണ് സീബ്രാ-സ്ട്രിപ്പിംഗ്.

  1. <table class = "zebra-striped" > 
  2. ...
  3. </table>

ഉദാഹരണം: സീബ്രാ വരയുള്ള w/ TableSorter.js

മുമ്പത്തെ ഉദാഹരണം എടുത്ത്, jQuery വഴിയും ടേബിൾസോർട്ടർ പ്ലഗിൻ വഴിയും സോർട്ടിംഗ് പ്രവർത്തനം നൽകിക്കൊണ്ട് ഞങ്ങളുടെ പട്ടികകളുടെ ഉപയോഗക്ഷമത ഞങ്ങൾ മെച്ചപ്പെടുത്തുന്നു . അടുക്കൽ മാറ്റാൻ ഏതെങ്കിലും നിരയുടെ തലക്കെട്ടിൽ ക്ലിക്ക് ചെയ്യുക.

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഭാഷ
1 നിങ്ങളുടെ ഒന്ന് ഇംഗ്ലീഷ്
2 ജോ സിക്സ്പാക്ക് ഇംഗ്ലീഷ്
3 സ്തു ഡെന്റ് കോഡ് 
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
  2. <സ്ക്രിപ്റ്റ് > 
  3.   $ ( പ്രവർത്തനം () { 
  4.     $ ( "പട്ടിക#sortTableExample" ). ടേബിൾസോർട്ടർ ({ sortList : [[ 1 , 0 ]] });  
  5.   });
  6. </script>
  7. <table class = "zebra-striped" > 
  8.   ...
  9. </table>

ഫോമുകൾ

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

എല്ലാ ഫോമുകളും വായിക്കാവുന്നതും അളക്കാവുന്നതുമായ രീതിയിൽ അവതരിപ്പിക്കുന്നതിന് സ്ഥിരസ്ഥിതി ശൈലികൾ നൽകിയിട്ടുണ്ട്. ടെക്സ്റ്റ് ഇൻപുട്ടുകൾ, തിരഞ്ഞെടുത്ത ലിസ്റ്റുകൾ, ടെക്സ്റ്റ് ഏരിയകൾ, റേഡിയോ ബട്ടണുകൾ, ചെക്ക്ബോക്സുകൾ, ബട്ടണുകൾ എന്നിവയ്ക്കായി ശൈലികൾ നൽകിയിരിക്കുന്നു.

ഉദാഹരണ ഫോം ലെജൻഡ്
ഇവിടെ ചില മൂല്യങ്ങൾ
സഹായ വാചകത്തിന്റെ ചെറിയ സ്‌നിപ്പെറ്റ്
ഉദാഹരണ ഫോം ലെജൻഡ്
@
ഉദാഹരണ ഫോം ലെജൻഡ്
ശ്രദ്ധിക്കുക: കൂടുതൽ വലിയ ക്ലിക്ക് ഏരിയകൾക്കും കൂടുതൽ ഉപയോഗയോഗ്യമായ ഫോമിനുമുള്ള എല്ലാ ഓപ്‌ഷനുകളും ലേബലുകൾ ചുറ്റുന്നു.
വരെ എല്ലാ സമയവും പസഫിക് സ്റ്റാൻഡേർഡ് സമയമായി (GMT -08:00) കാണിക്കുന്നു.
ആവശ്യമെങ്കിൽ മുകളിലെ ഫീൽഡ് വിവരിക്കുന്നതിനുള്ള സഹായ വാചകത്തിന്റെ ബ്ലോക്ക്.
 

അടുക്കിയ ഫോമുകൾ

നിങ്ങളുടെ ഫോമിന്റെ HTML-ലേക്ക് ചേർക്കുക .form-stacked, നിങ്ങൾക്ക് അവരുടെ ഫീൽഡുകളുടെ ഇടതുവശത്ത് പകരം ലേബലുകൾ മുകളിൽ ഉണ്ടാകും. നിങ്ങളുടെ ഫോമുകൾ ചെറുതാണെങ്കിൽ അല്ലെങ്കിൽ കനത്ത ഫോമുകൾക്കായി നിങ്ങൾക്ക് രണ്ട് കോളം ഇൻപുട്ടുകൾ ഉണ്ടെങ്കിൽ ഇത് മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു.

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

ബട്ടണുകൾ

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

എല്ലാ ബട്ടണുകളും ഇളം ചാരനിറത്തിലുള്ള ശൈലിയിലേക്ക് സ്ഥിരസ്ഥിതിയായി മാറുന്നു, എന്നാൽ വ്യത്യസ്ത വർണ്ണ ശൈലികൾക്കായി നിരവധി ഫംഗ്ഷണൽ ക്ലാസുകൾ പ്രയോഗിക്കാൻ കഴിയും. ഈ ക്ലാസുകളിൽ ഒരു നീല .primaryക്ലാസ്, ഒരു ഇളം-നീല .infoക്ലാസ്, ഒരു പച്ച .successക്ലാസ്, ഒരു ചുവന്ന .dangerക്ലാസ് എന്നിവ ഉൾപ്പെടുന്നു. കൂടാതെ, നിങ്ങളുടെ സ്വന്തം ശൈലികൾ ഉരുട്ടുന്നത് എളുപ്പമാണ്.

ഉദാഹരണ ബട്ടണുകൾ

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

       

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

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

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

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

ഒരു കാരണത്താലോ മറ്റൊരു കാരണത്താലോ ആപ്പ് സജീവമല്ലാത്തതോ പ്രവർത്തനരഹിതമാക്കിയതോ ആയ ബട്ടണുകൾക്കായി, പ്രവർത്തനരഹിതമാക്കിയ നില ഉപയോഗിക്കുക. അത് .disabledലിങ്കുകൾക്കും ഘടകങ്ങൾക്കും :disabledവേണ്ടിയുള്ളതാണ് .<button>

ലിങ്കുകൾ

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

ബട്ടണുകൾ

 

വിജയം, മുന്നറിയിപ്പ്, പിശക് സന്ദേശങ്ങൾ അല്ലെങ്കിൽ അലേർട്ടുകൾക്കുള്ള അലേർട്ടുകളും പിശകുകളും ശൈലികൾ

അടിസ്ഥാന അലേർട്ടുകൾ

div.alert-message

ഒരു പ്രവർത്തനത്തിന്റെ പരാജയം, സാധ്യമായ പരാജയം അല്ലെങ്കിൽ വിജയം എന്നിവ ഹൈലൈറ്റ് ചെയ്യുന്നതിനുള്ള ഒറ്റവരി സന്ദേശങ്ങൾ. ഫോമുകൾക്ക് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

×

വിശുദ്ധ ഗ്വാക്കാമോൾ! സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ലെന്ന് തോന്നുന്നു.

×

ഓ സ്നാപ്പ്! അതും ഇതും മാറ്റി വീണ്ടും ശ്രമിക്കുക.

×

നന്നായി! നിങ്ങൾ ഈ മുന്നറിയിപ്പ് സന്ദേശം വിജയകരമായി വായിച്ചു.

×

ഹെഡ്സ് അപ്പുകൾ! ഇത് നിങ്ങളുടെ ശ്രദ്ധ ആവശ്യമുള്ള ഒരു അലേർട്ടാണ്, എന്നാൽ ഇതിന് ഇതുവരെ വലിയ മുൻഗണന നൽകിയിട്ടില്ല.

സന്ദേശങ്ങൾ തടയുക

div.alert-message.block-message

കുറച്ച് വിശദീകരണം ആവശ്യമുള്ള സന്ദേശങ്ങൾക്ക്, ഞങ്ങൾക്ക് ഖണ്ഡിക ശൈലിയിലുള്ള അലേർട്ടുകൾ ഉണ്ട്. ദൈർഘ്യമേറിയ പിശക് സന്ദേശങ്ങൾ ഉയർത്തുന്നതിനോ, തീർച്ചപ്പെടുത്താത്ത പ്രവർത്തനത്തെക്കുറിച്ച് ഉപയോക്താവിന് മുന്നറിയിപ്പ് നൽകുന്നതിനോ അല്ലെങ്കിൽ പേജിൽ കൂടുതൽ ഊന്നൽ നൽകുന്നതിന് വിവരങ്ങൾ അവതരിപ്പിക്കുന്നതിനോ ഇവ അനുയോജ്യമാണ്.

×

വിശുദ്ധ ഗ്വാക്കാമോൾ! ഇതൊരു മുന്നറിയിപ്പാണ്! സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ലെന്ന് തോന്നുന്നു. Nulla vitae elit libero, a pharetra ague. പ്രെസെന്റ് കോമോഡോ കർസസ് മാഗ്ന, അല്ലെങ്കിൽ സ്കെലറിസ്ക് നിസ്ൽ കൺസെക്റ്റേറ്റർ തുടങ്ങിയവ.

ഈ നടപടി സ്വീകരിക്കുക അല്ലെങ്കിൽ ഇത് ചെയ്യുക
×

ഓ സ്നാപ്പ്! നിങ്ങൾക്ക് ഒരു പിശക് ലഭിച്ചു! അതും ഇതും മാറ്റി വീണ്ടും ശ്രമിക്കുക. ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല, എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം നെക് എലിറ്റ്. ക്രാസ് മാറ്റിസ് കൺസെക്റ്റേറ്റർ പുരുസ് സിറ്റ് അമെറ്റ് ഫെർമെന്റം.

ഈ നടപടി സ്വീകരിക്കുക അല്ലെങ്കിൽ ഇത് ചെയ്യുക
×

നന്നായി! നിങ്ങൾ ഈ മുന്നറിയിപ്പ് സന്ദേശം വിജയകരമായി വായിച്ചു. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്. മെസെനാസ് ഫൗസിബസ് മോളിസ് ഇന്റർഡം.

ഈ നടപടി സ്വീകരിക്കുക അല്ലെങ്കിൽ ഇത് ചെയ്യുക
×

ഹെഡ്സ് അപ്പുകൾ! ഇത് നിങ്ങളുടെ ശ്രദ്ധ ആവശ്യമുള്ള ഒരു അലേർട്ടാണ്, എന്നാൽ ഇതിന് ഇതുവരെ വലിയ മുൻഗണന നൽകിയിട്ടില്ല.

ഈ നടപടി സ്വീകരിക്കുക അല്ലെങ്കിൽ ഇത് ചെയ്യുക

മോഡലുകൾ , ടൂൾടിപ്പുകൾ, പോപോവറുകൾ എന്നിവയിൽ ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിനുള്ള പോപോവർ ഘടകങ്ങൾ

മോഡലുകൾ

മോഡൽ-ഡയലോഗുകൾ അല്ലെങ്കിൽ ലൈറ്റ്ബോക്സുകൾ-പശ്ചാത്തല സന്ദർഭം നിലനിർത്തേണ്ടത് പ്രധാനമായ സാഹചര്യങ്ങളിൽ സന്ദർഭോചിതമായ പ്രവർത്തനങ്ങൾക്ക് മികച്ചതാണ്.

മോഡൽ തലക്കെട്ട്

×

ഒരു നല്ല ശരീരം...

പ്രാഥമികം സെക്കൻഡറി

ടൂൾ ടിപ്പുകൾ

ആശയക്കുഴപ്പത്തിലായ ഉപയോക്താവിനെ സഹായിക്കാനും അവരെ ശരിയായ ദിശയിലേക്ക് ചൂണ്ടിക്കാണിക്കാനും ട്വിപ്സികൾ വളരെ ഉപയോഗപ്രദമാണ്.

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ് ഇല്ലോ പിശക് ഇപ്‌സം വെരിറ്റാറ്റിസ് ഓട്ട് ഇസ്റ്റെ പെർസ്‌പിസിയാറ്റിസ് ഇസ്റ്റേ വോള്യൂപ്റ്റാസ് നാറ്റസ് ഇല്ലോ ക്വാസി ഓഡിറ്റ് ഓട്ട് നാറ്റസ് കോൺസെക്വന്റർ പരിണതഫലങ്ങൾ, ഓട്ട് നാറ്റസ് ഇല്ലോ വോള്യൂപ്റ്റേറ്റം ഓഡിറ്റ് പെർസ്‌പിസിയാറ്റിസ് ടാം ഡോളോരുപന്റിയം ലേക്ക് Voluptasdicta eaque betae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit Accanantium Totam Totam architecto explicabo sit quasi fugit fugit, Totam doloremque unde sunt sed dicta quae voluptas quae volunte quae volante

താഴെ!
ശരിയാണ്!
ഇടത്തെ!
മുകളിൽ!

പോപോവറുകൾ

ലേഔട്ടിനെ ബാധിക്കാതെ ഒരു പേജിലേക്ക് സബ്‌ടെക്‌സ്റ്റ്വൽ വിവരങ്ങൾ നൽകാൻ പോപോവറുകൾ ഉപയോഗിക്കുക.

പോപോവർ ശീർഷകം

Etiam porta sem malesuada Magna mollis euismod. മെസെനാസ് ഫൗസിബസ് മോളിസ് ഇന്റർഡം. മോർബി ലിയോ റിസസ്, പോർട്ട എസി കൺസെക്റ്റൂർ എസി, വെസ്റ്റിബുലം അറ്റ് ഇറോസ്.

വേരിയബിളുകൾ, മിക്‌സിനുകൾ, ഫംഗ്‌ഷനുകൾ എന്നിവയ്‌ക്കൊപ്പം നിങ്ങളുടെ CSS സൂപ്പർചാർജ് കുറഞ്ഞ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കുന്നു

വേഗത്തിലും എളുപ്പത്തിലും വെബ് ഡെവലപ്‌മെന്റിനുള്ള CSS പ്രീപ്രൊസസറായ Less- നൊപ്പം ഉപയോഗിക്കുന്നതിനുള്ള മിക്സിനുകളുടെയും വേരിയബിളുകളുടെയും ഓപ്പൺ സോഴ്‌സ് പായ്ക്ക് ആയ Preboot ഉപയോഗിച്ചാണ് ബൂട്ട്‌സ്‌ട്രാപ്പ് നിർമ്മിച്ചിരിക്കുന്നത് .

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഞങ്ങൾ എങ്ങനെയാണ് പ്രീബൂട്ട് ഉപയോഗിച്ചതെന്നും നിങ്ങളുടെ അടുത്ത പ്രോജക്‌റ്റിൽ കുറച്ച് റൺ ചെയ്യാൻ നിങ്ങൾ തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ അത് എങ്ങനെ ഉപയോഗിക്കാമെന്നും പരിശോധിക്കുക.

ഇതെങ്ങനെ ഉപയോഗിക്കണം

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ലെസ് വേരിയബിളുകൾ, മിക്സിനുകൾ, നിങ്ങളുടെ ബ്രൗസറിലെ ജാവാസ്ക്രിപ്റ്റ് വഴി CSS-ൽ നെസ്റ്റിംഗ് എന്നിവ പൂർണ്ണമായി ഉപയോഗിക്കുന്നതിന് ഈ ഓപ്ഷൻ ഉപയോഗിക്കുക.

  1. <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "എല്ലാം" />    
  2. <script src = "js/less-1.1.3.min.js" ></script>

.js പരിഹാരം അനുഭവപ്പെടുന്നില്ലേ? നിങ്ങളുടെ കോഡ് വിന്യസിക്കുമ്പോൾ കംപൈൽ ചെയ്യാൻ Less Mac ആപ്പ് പരീക്ഷിക്കുക അല്ലെങ്കിൽ Node.js ഉപയോഗിക്കുക .

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

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഭാഗമായി ട്വിറ്റർ ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്നതിന്റെ ചില ഹൈലൈറ്റുകൾ ഇതാ. ഡൗൺലോഡ് ചെയ്യാനും കൂടുതലറിയാനും ബൂട്ട്‌സ്‌ട്രാപ്പ് വെബ്‌സൈറ്റിലേക്കോ ഗിത്തബ് പ്രോജക്‌റ്റ് പേജിലേക്കോ പോകുക.

വേരിയബിളുകൾ

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

  1. // ലിങ്കുകൾ
  2. @linkColor : #8b59c2;         
  3. @linkColorHover :     ഇരുണ്ടതാക്കുക ( @linkColor , 10 ); 
  4.  
  5. // ഗ്രേസ്
  6. @കറുപ്പ് : #000;             
  7. @grayDark :           പ്രകാശിപ്പിക്കുക ( @കറുപ്പ് , 25 %); 
  8. @ചാരനിറം :               പ്രകാശിപ്പിക്കുക ( @കറുപ്പ് , 50 %); 
  9. @grayLight :          ലൈറ്റ് ചെയ്യുക ( @കറുപ്പ് , 70 %); 
  10. @grayLighter :        പ്രകാശിപ്പിക്കുക ( @കറുപ്പ് , 90 %); 
  11. @വെള്ള : #fff;             
  12.  
  13. // ആക്സന്റ് നിറങ്ങൾ
  14. @നീല : #08b5fb ;              
  15. @പച്ച : #46a546 ;             
  16. @red : #9d261d;               
  17. @മഞ്ഞ : #ffc40d ;            
  18. @ഓറഞ്ച് : #f89406 ;            
  19. @പിങ്ക് : #c3325f ;              
  20. @പർപ്പിൾ : #7a43b6 ;            
  21.  
  22. // അടിസ്ഥാന ഗ്രിഡ്
  23. @basefont : 13px ;          
  24. @അടിസ്ഥാനം : 18px ;

അഭിപ്രായം പറയുന്നു

/* ... */CSS-ന്റെ സാധാരണ വാക്യഘടനയ്‌ക്ക് പുറമേ മറ്റൊരു കമന്റിംഗ് ശൈലിയും Less നൽകുന്നു .

  1. //ഇതൊരു കമന്റാണ്
  2. /* ഇതും ഒരു കമന്റാണ് */

വാസൂ മിക്സ് ചെയ്യുന്നു

മിക്‌സിനുകൾ അടിസ്ഥാനപരമായി CSS-ന് ഉൾപ്പെടുന്നതോ ഭാഗികമായതോ ആയവയാണ്, കോഡിന്റെ ഒരു ബ്ലോക്ക് ഒന്നായി സംയോജിപ്പിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. box-shadowക്രോസ് ബ്രൗസർ ഗ്രേഡിയന്റുകൾ, ഫോണ്ട് സ്റ്റാക്കുകൾ എന്നിവയും അതിലേറെയും പോലെയുള്ള വെണ്ടർ പ്രിഫിക്‌സ് പ്രോപ്പർട്ടികൾക്കായി അവ മികച്ചതാണ് . ബൂട്ട്‌സ്‌ട്രാപ്പിനൊപ്പം ഉൾപ്പെടുത്തിയിരിക്കുന്ന മിക്സിനുകളുടെ ഒരു സാമ്പിൾ ചുവടെയുണ്ട്.

ഫോണ്ട് സ്റ്റാക്കുകൾ

  1. #ഫോണ്ട് {
  2.   . ഷോർട്ട്ഹാൻഡ് ( @ഭാരം : സാധാരണ , @വലിപ്പം : 14px , @lineHeight : 20px ) {     
  3.     font - size : @size ; 
  4.     font - weight : @weight ; 
  5.     ലൈൻ ഉയരം : @lineHeight ; _ 
  6.   }
  7.   . sans - serif ( @ഭാരം : സാധാരണ , @വലിപ്പം : 14px , @lineHeight : 20px ) {     
  8.     font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
  9.     font - size : @size ; 
  10.     font - weight : @weight ; 
  11.     ലൈൻ ഉയരം : @lineHeight ; _ 
  12.   }
  13.   . സെരിഫ് ( @ഭാരം : സാധാരണ , @വലിപ്പം : 14px , @lineHeight : 20px ) {     
  14.     ഫോണ്ട് - ഫാമിലി : "ജോർജിയ" , ടൈംസ് ന്യൂ റോമൻ , ടൈംസ് , സാൻസ് - സെരിഫ് ;     
  15.     font - size : @size ; 
  16.     font - weight : @weight ; 
  17.     ലൈൻ ഉയരം : @lineHeight ; _ 
  18.   }
  19.   . മോണോസ്പേസ് ( @ഭാരം : സാധാരണ , @ വലിപ്പം : 12px , @lineHeight : 20px ) {     
  20.     font - family : "മൊണാക്കോ" , കൊറിയർ ന്യൂ , മോണോസ്പേസ് ;   
  21.     font - size : @size ; 
  22.     font - weight : @weight ; 
  23.     ലൈൻ ഉയരം : @lineHeight ; _ 
  24.   }
  25. }

ഗ്രേഡിയന്റ്സ്

  1. #ഗ്രേഡിയന്റ് {
  2.   . തിരശ്ചീനമായി ( @startColor : #555, @endColor: #333) { 
  3.     പശ്ചാത്തല നിറം : @endColor ; _ 
  4.     പശ്ചാത്തലം - ആവർത്തിക്കുക : ആവർത്തിക്കുക - x ;
  5.     പശ്ചാത്തലം - ചിത്രം : - khtml - ഗ്രേഡിയന്റ് ( ലീനിയർ , ഇടത് മുകളിൽ , വലത് മുകളിൽ , മുതൽ ( @startColor ), വരെ ( @endColor )); // കോൺക്വറർ   
  6.     പശ്ചാത്തലം - ചിത്രം : - moz - ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // FF 3.6+    
  7.     പശ്ചാത്തലം - ചിത്രം : - ms - ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // IE10    
  8.     പശ്ചാത്തലം - ചിത്രം : - വെബ്‌കിറ്റ് - ഗ്രേഡിയന്റ് ( ലീനിയർ , ഇടത് മുകളിൽ , വലത് മുകളിൽ , കളർ - സ്റ്റോപ്പ് ( 0 %, @startColor ), കളർ - സ്റ്റോപ്പ് ( 100 %, @endColor )); // സഫാരി 4+, Chrome 2+    
  9.     പശ്ചാത്തലം - ചിത്രം : - വെബ്കിറ്റ് - ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // സഫാരി 5.1+, Chrome 10+    
  10.     പശ്ചാത്തലം - ചിത്രം : - o - ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // ഓപ്പറ 11.10    
  11.     പശ്ചാത്തലം - ചിത്രം : ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // ലെ സ്റ്റാൻഡേർഡ്   
  12.   }
  13.   . ലംബമായ ( @startColor : #555, @endColor: #333) { 
  14.     പശ്ചാത്തല നിറം : @endColor ; _ 
  15.     പശ്ചാത്തലം - ആവർത്തിക്കുക : ആവർത്തിക്കുക - x ;
  16.     പശ്ചാത്തലം - ചിത്രം : - khtml - ഗ്രേഡിയന്റ് ( രേഖീയ , ഇടത് മുകളിൽ , ഇടത് താഴെ , മുതൽ ( @startColor ), ( @endColor ) വരെ ); // കോൺക്വറർ   
  17.     പശ്ചാത്തലം - ചിത്രം : - moz - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // FF 3.6+   
  18.     പശ്ചാത്തലം - ചിത്രം : - ms - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // IE10   
  19.     പശ്ചാത്തലം - ചിത്രം : - വെബ്‌കിറ്റ് - ഗ്രേഡിയന്റ് ( ലീനിയർ , ഇടത് മുകളിൽ , ഇടത് താഴെ , കളർ - സ്റ്റോപ്പ് ( 0 %, @startColor ), കളർ - സ്റ്റോപ്പ് ( 100 %, @endColor )); // സഫാരി 4+, Chrome 2+    
  20.     പശ്ചാത്തലം - ചിത്രം : - വെബ്കിറ്റ് - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // സഫാരി 5.1+, Chrome 10+   
  21.     പശ്ചാത്തലം - ചിത്രം : - o - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // ഓപ്പറ 11.10   
  22.     പശ്ചാത്തലം - ചിത്രം : ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // സ്റ്റാൻഡേർഡ്  
  23.   }
  24.   . ദിശാസൂചിക ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
  25.     ...
  26.   }
  27.   . ലംബമായ - മൂന്ന് - നിറങ്ങൾ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
  28.     ...
  29.   }
  30. }

പ്രവർത്തനങ്ങളും ഗ്രിഡ് സംവിധാനവും

ചുവടെയുള്ളത് പോലെ വഴക്കമുള്ളതും ശക്തവുമായ മിക്‌സിനുകൾ സൃഷ്ടിക്കാൻ ഫാൻസി നേടുകയും കുറച്ച് ഗണിതശാസ്ത്രം നടത്തുകയും ചെയ്യുക.

  1. // ഗ്രിഡിറ്റ്യൂഡ്
  2. @ഗ്രിഡ് കോളങ്ങൾ : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // ഗ്രിഡ് സിസ്റ്റം
  8. . കണ്ടെയ്നർ {
  9.   വീതി : @siteWidth ; 
  10.   മാർജിൻ : 0 ഓട്ടോ ;  
  11.   . clearfix ();
  12. }
  13. . നിരകൾ ( @columnSpan : 1 ) {  
  14.   വീതി : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  15. }
  16. . ഓഫ്സെറ്റ് ( @columnOffset : 1 ) {  
  17.   margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
  18. }