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

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

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

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

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

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

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

GitHub-ൽ ഫോർക്ക്

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

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

ചരിത്രം

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

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

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

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

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

ഏറ്റവും പുതിയ സഫാരി
ഏറ്റവും പുതിയ Google Chrome
Firefox 4+
Internet Explorer 7+

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

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

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

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

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

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

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

<div class="row"> ക്ലാസ് = "വരി" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

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

8 ഓഫ്സെറ്റ് 4

4 ഓഫ്സെറ്റ് 4

5 ഓഫ്സെറ്റ് 3

10 ഓഫ്സെറ്റ് 6

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

ഏതെങ്കിലും സൈറ്റിനോ പേജിനോ വേണ്ടിയുള്ള അടിസ്ഥാന 940px വീതിയുള്ള, കേന്ദ്രീകൃതമായ കണ്ടെയ്‌നർ ലേഔട്ട്.

<ശരീരം>
  <div class = "container" > 
    ...
  </div>
</body>

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

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

<ശരീരം>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

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

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

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 വാഹനങ്ങൾ 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>—

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

ലിസ്റ്റുകൾ

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

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

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

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

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

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

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

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

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

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

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

<table class = "common-table" > 
  ...
</table>

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

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

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

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

<table class = "common-table zebra-striped" > 
...
</table>

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

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

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

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<സ്ക്രിപ്റ്റ് > 
  $ ( പ്രവർത്തനം () { 
    $ ( "പട്ടിക#sortTableExample" ). ടേബിൾസോർട്ടർ ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

ഫിക്സഡ് ടോപ്പ്ബാർ

എന്താണിത്

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

ഇഷ്ടാനുസൃതമാക്കാവുന്നത്

ഉള്ളിലെ എല്ലാ ഘടകങ്ങളും കൂടാതെ മുഴുവൻ ടോപ്പ്‌ബാറും ഓപ്‌ഷണലാണ്. ഒരു ലോഗോ/പേര്, nav, തിരയൽ, ഒരു ദ്വിതീയ nav-അല്ലെങ്കിൽ അതിന്റെ ഏതെങ്കിലും സംയോജനം എന്നിവ ഉൾപ്പെടുത്താൻ നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം.

ഡ്രോപ്പ്ഡൗണുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്

പ്രധാന നാവിഗേഷന്റെ ഭാഗമായി, നിങ്ങളുടെ nav-ലേക്ക് ഡ്രോപ്പ്ഡൗണുകൾ ചേർക്കാനുള്ള കഴിവ് ഞങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. ഇത് എങ്ങനെ ചെയ്യുന്നുവെന്ന് കാണാൻ മുകളിലുള്ള (വലത് വിന്യസിച്ചിരിക്കുന്ന) സെക്കൻഡറി നാവി പരിശോധിക്കുക.

ടാബുകളും ഗുളികകളും

ഒരു ഉപയോഗിച്ച് ലളിതമായ ദ്വിതീയ നാവിഗേഷൻ സൃഷ്ടിക്കുക <ul>. ഉചിതമായ ക്ലാസ് ചേർത്ത് ടാബുകൾ അല്ലെങ്കിൽ ഗുളികകൾക്കിടയിൽ സ്വാപ്പ് ചെയ്യുക.

ഞങ്ങളുടെ അക്കൗണ്ട് ക്രമീകരണ പേജുകൾ, സമാന ഉള്ളടക്കത്തിന്റെ പേജുകൾക്കിടയിൽ ടോഗിൾ ചെയ്യുന്നതിനുള്ള ഉപയോക്തൃ ടൈംലൈനുകൾ എന്നിവ പോലുള്ള ഉള്ളടക്കത്തിന്റെ ഉപവിഭാഗങ്ങൾക്ക് മികച്ചതാണ്. ടാബ്ഡ് അല്ലെങ്കിൽ ഗുളിക ശൈലികളിൽ ലഭ്യമാണ്.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > പ്രൊഫൈൽ </a></li> 
  <li><a href = "#" > സന്ദേശങ്ങൾ </a></li> 
  <li><a href = "#" > ക്രമീകരണങ്ങൾ </a></li> 
  <li><a href = "#" > ബന്ധപ്പെടുക </a></li> 
</ul>

<ul class = "ഗുളികകൾ" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > പ്രൊഫൈൽ </a></li> 
  <li><a href = "#" > സന്ദേശങ്ങൾ </a></li> 
  <li><a href = "#" > ക്രമീകരണങ്ങൾ </a></li> 
  <li><a href = "#" > ബന്ധപ്പെടുക </a></li>
</ul>

പേജിനേഷൻ

Rdio-ൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട് അൾട്രാ സിമ്പിളിസ്‌റ്റും മിനിമം ശൈലിയിലുള്ളതുമായ പേജിനേഷൻ. വലിയ ബ്ലോക്ക് നഷ്‌ടപ്പെടാൻ പ്രയാസമാണ്, എളുപ്പത്തിൽ അളക്കാവുന്നതും വലിയ ക്ലിക്ക് ഏരിയകളും നൽകുന്നു.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← മുമ്പത്തെ </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li ക്ലാസ് = "അടുത്തത്" ><a href = "#" > അടുത്തത് → </a></li>  
  </ul>
</div>

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

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

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

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

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

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

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

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

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

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

വിശുദ്ധ ഗൗകാമോൾ! ഇതൊരു മുന്നറിയിപ്പാണ്!സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ല. 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

താഴെ!

ശരിയാണ്!

ഇടത്തെ!

മുകളിൽ!

പോപോവറുകൾ

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

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

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

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

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

<link rel = "stylesheet/less" href = "less/bootstrap.less" media =    "എല്ലാം" /> 
<സ്ക്രിപ്റ്റ് src = "js/less-1.0.41.min.js"  ></script>

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

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

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

കളർ വേരിയബിളുകൾ

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

// ലിങ്കുകൾ
@linkColor : #8b59c2;         
@linkColorHover :     ഇരുണ്ടതാക്കുക ( @linkColor , 10 ); 
 
// ഗ്രേസ്
@കറുപ്പ് : #000;             
@grayDark :           പ്രകാശിപ്പിക്കുക ( @കറുപ്പ് , 25 %); 
@ചാരനിറം :               പ്രകാശിപ്പിക്കുക ( @കറുപ്പ് , 50 %); 
@grayLight :          ലൈറ്റ് ചെയ്യുക ( @കറുപ്പ് , 70 %); 
@grayLighter :        പ്രകാശിപ്പിക്കുക ( @കറുപ്പ് , 90 %); 
@വെള്ള : #fff;             
 
// ആക്സന്റ് നിറങ്ങൾ
@നീല : #08b5fb ;              
@പച്ച : #46a546 ;             
@red : #9d261d;               
@മഞ്ഞ : #ffc40d ;            
@ഓറഞ്ച് : #f89406 ;            
@പിങ്ക് : #c3325f ;              
@പർപ്പിൾ : #7a43b6 ;            
 
// അടിസ്ഥാനരേഖ
@ബേസ്ലൈൻ : 20px ;

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

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

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

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

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

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

#ഫോണ്ട് {
  . ഷോർട്ട്ഹാൻഡ് ( @ഭാരം : സാധാരണ , @വലിപ്പം : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - weight : @weight ; 
    ലൈൻ ഉയരം : @lineHeight ; _ 
  }
  . sans - serif ( @ഭാരം : സാധാരണ , @വലിപ്പം : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - weight : @weight ; 
    ലൈൻ ഉയരം : @lineHeight ; _ 
  }
  . സെരിഫ് ( @ഭാരം : സാധാരണ , @വലിപ്പം : 14px , @lineHeight : 20px ) {     
    ഫോണ്ട് - ഫാമിലി : "ജോർജിയ" , ടൈംസ് ന്യൂ റോമൻ , ടൈംസ് , സാൻസ് - സെരിഫ് ;     
    font - size : @size ; 
    font - weight : @weight ; 
    ലൈൻ ഉയരം : @lineHeight ; _ 
  }
  . മോണോസ്പേസ് ( @ഭാരം : സാധാരണ , @ വലിപ്പം : 12px , @lineHeight : 20px ) {     
    font - family : "മൊണാക്കോ" , കൊറിയർ ന്യൂ , മോണോസ്പേസ് ;   
    font - size : @size ; 
    font - weight : @weight ; 
    ലൈൻ ഉയരം : @lineHeight ; _ 
  }
}

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

#ഗ്രേഡിയന്റ് {
  . തിരശ്ചീനമായി ( @startColor : #555, @endColor: #333) { 
    പശ്ചാത്തല നിറം : @endColor ; _ 
    പശ്ചാത്തലം - ആവർത്തിക്കുക : ആവർത്തിക്കുക - x ;
    പശ്ചാത്തലം - ചിത്രം : - khtml - ഗ്രേഡിയന്റ് ( ലീനിയർ , ഇടത് മുകളിൽ , വലത് മുകളിൽ , മുതൽ ( @startColor ), വരെ ( @endColor )); // കോൺക്വറർ   
    പശ്ചാത്തലം - ചിത്രം : - moz - ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // FF 3.6+    
    പശ്ചാത്തലം - ചിത്രം : - ms - ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // IE10    
    പശ്ചാത്തലം - ചിത്രം : - വെബ്‌കിറ്റ് - ഗ്രേഡിയന്റ് ( ലീനിയർ , ഇടത് മുകളിൽ , വലത് മുകളിൽ , കളർ - സ്റ്റോപ്പ് ( 0 %, @startColor ), കളർ - സ്റ്റോപ്പ് ( 100 %, @endColor )); // സഫാരി 4+, Chrome 2+    
    പശ്ചാത്തലം - ചിത്രം : - വെബ്കിറ്റ് - ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // സഫാരി 5.1+, Chrome 10+    
    പശ്ചാത്തലം - ചിത്രം : - o - ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // ഓപ്പറ 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    പശ്ചാത്തലം - ചിത്രം : ലീനിയർ - ഗ്രേഡിയന്റ് ( ഇടത് , @startColor , @endColor ); // ലെ സ്റ്റാൻഡേർഡ്   
  }
  . ലംബമായ ( @startColor : #555, @endColor: #333) { 
    പശ്ചാത്തല നിറം : @endColor ; _ 
    പശ്ചാത്തലം - ആവർത്തിക്കുക : ആവർത്തിക്കുക - x ;
    പശ്ചാത്തലം - ചിത്രം : - khtml - ഗ്രേഡിയന്റ് ( രേഖീയ , ഇടത് മുകളിൽ , ഇടത് താഴെ , മുതൽ ( @startColor ), ( @endColor ) വരെ ); // കോൺക്വറർ   
    പശ്ചാത്തലം - ചിത്രം : - moz - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // FF 3.6+   
    പശ്ചാത്തലം - ചിത്രം : - ms - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // IE10   
    പശ്ചാത്തലം - ചിത്രം : - വെബ്കിറ്റ് - ഗ്രേഡിയന്റ് ( ലീനിയർ , ഇടത് മുകളിൽ , ഇടത് താഴെ , നിറം - നിർത്തുക ( 0 %, @startColor ), കളർ - സ്റ്റോപ്പ് ( 100 %, @endColor )); // സഫാരി 4+, Chrome 2+    
    പശ്ചാത്തലം - ചിത്രം : - വെബ്കിറ്റ് - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // സഫാരി 5.1+, Chrome 10+   
    പശ്ചാത്തലം - ചിത്രം : - o - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // ഓപ്പറ 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    ഫിൽട്ടർ : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    പശ്ചാത്തലം - ചിത്രം : ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // സ്റ്റാൻഡേർഡ്  
  }
  . ദിശാസൂചിക ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ലംബമായ - മൂന്ന് - നിറങ്ങൾ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

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

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

// ഗ്രിഡിറ്റ്യൂഡ്
@ഗ്രിഡ് കോളങ്ങൾ : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// ഗ്രിഡ് സിസ്റ്റം
. കണ്ടെയ്നർ {
  വീതി : @siteWidth ; 
  മാർജിൻ : 0 ഓട്ടോ ;  
  . clearfix ();
}
. നിരകൾ ( @columnSpan : 1 ) {  
  ഡിസ്പ്ലേ : ഇൻലൈൻ ; 
  ഫ്ലോട്ട് : ഇടത് ;
  വീതി : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  മാർജിൻ - ഇടത് : @gridGutterWidth ; 
  &: ആദ്യ - കുട്ടി {
    മാർജിൻ - ഇടത് : 0 ; 
  }
}
. ഓഫ്സെറ്റ് ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! പ്രധാനം ;          
}