മുകളിൽ
ഇടത്തെ
ശരിയാണ്
താഴെ
ബൂട്ട്സ്ട്രാപ്പ്

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

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

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

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

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

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

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

GitHub-ൽ ഫോർക്ക്

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

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

നിലവിൽ v1.3.0

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

ചരിത്രം

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

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

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

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

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

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

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

ദ്രുത-ആരംഭ ഉദാഹരണങ്ങൾ

ചില ദ്രുത ടെംപ്ലേറ്റുകൾ ആവശ്യമുണ്ടോ? ഞങ്ങൾ ഒരുമിച്ച് ചേർത്ത ഈ അടിസ്ഥാന ഉദാഹരണങ്ങൾ പരിശോധിക്കുക:

  • ഹീറോ യൂണിറ്റിനൊപ്പം ലളിതമായ മൂന്ന് കോളം ലേഔട്ട്
  • സ്റ്റാറ്റിക് സൈഡ്‌ബാറുള്ള ഫ്ലൂയിഡ് ലേഔട്ട്
  • ആപ്പുകൾക്കുള്ള ലളിതമായ ഹാംഗിംഗ് കണ്ടെയ്നർ

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

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

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

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

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

  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10" > 
  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

നെസ്റ്റിംഗ് നിരകൾ

.rowനിലവിലുള്ള ഒരു കോളം സൃഷ്‌ടിച്ച് ആവശ്യമെങ്കിൽ നിങ്ങളുടെ ഉള്ളടക്കം നെസ്റ്റ് ചെയ്യുക .

നെസ്റ്റഡ് കോളങ്ങളുടെ ഉദാഹരണം

നിരയുടെ ലെവൽ 1
ലെവൽ 2
ലെവൽ 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     നിരയുടെ ലെവൽ 1
  4.     <div class = "row" > 
  5.       <div class = "span6" > 
  6.         ലെവൽ 2
  7.       </div>
  8.       <div class = "span6" > 
  9.         ലെവൽ 2
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

നിങ്ങളുടെ സ്വന്തം ഗ്രിഡ് റോൾ ചെയ്യുക

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

ഗ്രിഡിനുള്ളിൽ

ഗ്രിഡ് സിസ്റ്റം പരിഷ്‌ക്കരിക്കുന്നതിന് ആവശ്യമായ വേരിയബിളുകൾ എല്ലാം നിലവിൽ വസിക്കുന്നു preboot.less.

വേരിയബിൾ സ്ഥിര മൂല്യം വിവരണം
@gridColumns 16 ഗ്രിഡിനുള്ളിലെ നിരകളുടെ എണ്ണം
@gridColumnWidth 40px ഗ്രിഡിനുള്ളിലെ ഓരോ നിരയുടെയും വീതി
@gridGutterWidth 20px ഓരോ കോളത്തിനും ഇടയിലുള്ള നെഗറ്റീവ് സ്പേസ്
@siteWidth എല്ലാ നിരകളുടെയും ഗട്ടറുകളുടെയും കണക്കാക്കിയ തുക നിരകളുടെയും ഗട്ടറുകളുടെയും എണ്ണം കണക്കാക്കാനും .fixed-container()മിക്‌സിൻ വീതി സജ്ജീകരിക്കാനും ഞങ്ങൾ ചില അടിസ്ഥാന പൊരുത്തം ഉപയോഗിക്കുന്നു.

ഇപ്പോൾ ഇഷ്ടാനുസൃതമാക്കാൻ

ഗ്രിഡ് പരിഷ്‌ക്കരിക്കുക എന്നതിനർത്ഥം മൂന്ന് @grid-*വേരിയബിളുകൾ മാറ്റുകയും ലെസ് ഫയലുകൾ വീണ്ടും കംപൈൽ ചെയ്യുകയും ചെയ്യുക എന്നാണ്.

24 നിരകൾ വരെ ഉള്ള ഒരു ഗ്രിഡ് സിസ്റ്റം കൈകാര്യം ചെയ്യാൻ ബൂട്ട്സ്ട്രാപ്പ് സജ്ജീകരിച്ചിരിക്കുന്നു; സ്ഥിരസ്ഥിതി വെറും 16 ആണ്. നിങ്ങളുടെ ഗ്രിഡ് വേരിയബിളുകൾ 24-കോളം ഗ്രിഡിലേക്ക് ഇഷ്‌ടാനുസൃതമാക്കുന്നത് എങ്ങനെയെന്ന് ഇതാ.

  1. @ഗ്രിഡ് കോളങ്ങൾ : 24 ;       
  2. @gridColumnWidth : 20px ;   
  3. @gridGutterWidth : 20px ;

വീണ്ടും കംപൈൽ ചെയ്‌തുകഴിഞ്ഞാൽ, നിങ്ങളെ സജ്ജീകരിക്കും!

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

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

ഡിഫോൾട്ടും ലളിതവുമായ 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 വാഹനങ്ങൾ 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
മുഴുവൻ പേര്
[email protected]

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

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

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

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

<blockquote> <p> <small>

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

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

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

ഡോ. ജൂലിയസ് ഹിബ്ബർട്ട് 
  1. <blockquote>
  2.   <p> ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. ഇന്റിജർ പോസുവേർ എറാറ്റ് എ ആന്റ് വെനനാറ്റിസ് ഡാപിബസ് പോസ്യുറെ വെലിറ്റ് അലിക്വറ്റ്. </p>
  3.   <small> ഡോ. ജൂലിയസ് ഹിബ്ബർട്ട് </small>
  4. </blockquote>

ലിസ്റ്റുകൾ

ഓർഡർ ചെയ്യാത്തത്<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.

കോഡ്

<code> <pre>

രണ്ട് ലളിതമായ ടാഗുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കോഡ് ശൈലിയിൽ പിംപ് ചെയ്യുക. ജാവാസ്ക്രിപ്റ്റിലൂടെ കൂടുതൽ ആകർഷണീയതയ്ക്കായി, Google-ന്റെ കോഡ് പ്രെറ്റിഫൈ ലൈബ്രറിയിൽ ഇടുക, നിങ്ങൾ സജ്ജമാക്കി.

കോഡ് അവതരിപ്പിക്കുന്നു

കോഡ്, ബ്ലോക്കുകൾ അല്ലെങ്കിൽ ഇൻലൈനിലുള്ള സ്‌നിപ്പെറ്റുകൾ, ശരിയായ ടാഗിൽ പൊതിഞ്ഞ് സ്‌റ്റൈൽ ഉപയോഗിച്ച് പ്രദർശിപ്പിക്കാനാകും. ഒന്നിലധികം വരികളുള്ള കോഡിന്റെ ബ്ലോക്കുകൾക്കായി, <pre>ഘടകം ഉപയോഗിക്കുക. ഇൻലൈൻ കോഡിനായി, <code>ഘടകം ഉപയോഗിക്കുക.

ഘടകം ഫലമായി
<code> ഇതുപോലുള്ള ഒരു വരിയിൽ, നിങ്ങളുടെ പൊതിഞ്ഞ കോഡ് ഈ >html<ഘടകം പോലെ കാണപ്പെടും.
<pre> 
<div>
  <h1>തലക്കെട്ട്</h1>
  <p>എന്തോ ഇവിടെയുണ്ട്...</p>
</div>

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

google-code-prettify ലൈബ്രറി ഉപയോഗിച്ച്, നിങ്ങളുടെ കോഡ് ബ്ലോക്കുകൾക്ക് അല്പം വ്യത്യസ്തമായ വിഷ്വൽ ശൈലിയും സ്വയമേവയുള്ള വാക്യഘടന ഹൈലൈറ്റിംഗും ലഭിക്കും.

<div> <h1> തലക്കെട്ട് </h1> <p> ഇവിടെ എന്തോ ഉണ്ട്... </p> </div>

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

ഇൻലൈൻ ലേബലുകൾ

<span class="label">

നിങ്ങളുടെ ബോഡി ടെക്‌സ്‌റ്റിലെ ഏതെങ്കിലും വാക്യത്തിലേക്ക് ശ്രദ്ധ ക്ഷണിക്കുക അല്ലെങ്കിൽ ഫ്ലാഗ് ചെയ്യുക.

എന്തും ലേബൽ ചെയ്യുക

എപ്പോഴെങ്കിലും ആ ഫാൻസി പുതിയ ഒന്ന് ആവശ്യമായിരുന്നു ! അല്ലെങ്കിൽ കോഡ് എഴുതുമ്പോൾ പ്രധാനപ്പെട്ട ഫ്ലാഗുകൾ? ശരി, ഇപ്പോൾ നിങ്ങൾക്ക് അവയുണ്ട്. സ്ഥിരസ്ഥിതിയായി ഉൾപ്പെടുത്തിയിരിക്കുന്നത് ഇതാ:

ലേബൽ ഫലമായി
<span class="label">Default</span> സ്ഥിരസ്ഥിതി
<span class="label success">New</span> പുതിയത്
<span class="label warning">Warning</span> മുന്നറിയിപ്പ്
<span class="label important">Important</span> പ്രധാനപ്പെട്ടത്
<span class="label notice">Notice</span> ശ്രദ്ധിക്കുക

മീഡിയ ചിത്രങ്ങളും വീഡിയോകളും പ്രദർശിപ്പിക്കുന്നു

മീഡിയ ഗ്രിഡ്

കുറഞ്ഞ HTML കാൽപ്പാടും കുറഞ്ഞ ശൈലികളുമുള്ള പേജുകളിൽ വ്യത്യസ്ത വലുപ്പത്തിലുള്ള ലഘുചിത്രങ്ങൾ പ്രദർശിപ്പിക്കുക.

ഉദാഹരണം ലഘുചിത്രങ്ങൾ

ലെ ലഘുചിത്രങ്ങൾ .media-gridഏത് വലുപ്പത്തിലും ആകാം, എന്നാൽ ബിൽറ്റ്-ഇൻ ബൂട്ട്സ്ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റത്തിലേക്ക് നേരിട്ട് മാപ്പ് ചെയ്യുമ്പോൾ അവ മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു. 90, 210, 330 എന്നിങ്ങനെയുള്ള ഇമേജ് വീതികൾ കുറച്ച് പിക്സൽ പാഡിംഗുമായി സംയോജിപ്പിച്ച് .span2, .span4, .span6കോളം വലുപ്പങ്ങൾക്ക് തുല്യമാണ്.

വലിയ

ഇടത്തരം

ചെറുത്

അവരെ കോഡിംഗ് ചെയ്യുന്നു

മീഡിയ ഗ്രിഡുകൾ ഉപയോഗിക്കാൻ എളുപ്പവും മാർക്ക്അപ്പ് ഭാഗത്ത് ലളിതവുമാണ്. അവയുടെ അളവുകൾ ഉൾപ്പെടുത്തിയിരിക്കുന്ന ചിത്രങ്ങളുടെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്.

  1. <ul class = "media-grid" > 
  2.   <li>
  3.     <a href = "#" > 
  4.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </li>
  7.   <li>
  8.     <a href = "#" > 
  9.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </li>
  12. </ul>

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

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

<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 വഴിയും ടേബിൾസോർട്ടർ പ്ലഗിൻ വഴിയും സോർട്ടിംഗ് പ്രവർത്തനം നൽകിക്കൊണ്ട് ഞങ്ങളുടെ പട്ടികകളുടെ ഉപയോഗക്ഷമത ഞങ്ങൾ മെച്ചപ്പെടുത്തുന്നു . അടുക്കൽ മാറ്റാൻ ഏതെങ്കിലും നിരയുടെ തലക്കെട്ടിൽ ക്ലിക്ക് ചെയ്യുക.

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഭാഷ
2 ജോ സിക്സ്പാക്ക് ഇംഗ്ലീഷ്
3 സ്തു ഡെന്റ് കോഡ്
1 നിങ്ങളുടെ ഒന്ന് ഇംഗ്ലീഷ് 
  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, നിങ്ങൾക്ക് അവരുടെ ഫീൽഡുകളുടെ ഇടതുവശത്ത് പകരം ലേബലുകൾ മുകളിൽ ഉണ്ടാകും. നിങ്ങളുടെ ഫോമുകൾ ചെറുതാണെങ്കിൽ അല്ലെങ്കിൽ കനത്ത ഫോമുകൾക്കായി നിങ്ങൾക്ക് രണ്ട് കോളം ഇൻപുട്ടുകൾ ഉണ്ടെങ്കിൽ ഇത് മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു.

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

ഫോം ഫീൽഡ് വലുപ്പങ്ങൾ

നിങ്ങളുടെ മാർക്ക്അപ്പിലേക്ക് കുറച്ച് ക്ലാസുകൾ ചേർത്ത് ഏതെങ്കിലും ഫോം input, selectഅല്ലെങ്കിൽ വീതി ഇഷ്ടാനുസൃതമാക്കുക .textarea

v1.3.0 മുതൽ, ഫോം ഘടകങ്ങൾക്കായി ഞങ്ങൾ ഗ്രിഡ് അടിസ്ഥാനമാക്കിയുള്ള സൈസിംഗ് ക്ലാസുകൾ ചേർത്തിട്ടുണ്ട്. നിലവിലുള്ള , മുതലായ ക്ലാസുകളിൽ ദയവായി ഇവ .miniഉപയോഗിക്കുക .small.

ബട്ടണുകൾ

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

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

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

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

       

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

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

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

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

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

ലിങ്കുകൾ

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

ബട്ടണുകൾ

 

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

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

.alert-message

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

ജാവാസ്ക്രിപ്റ്റ് നേടുക »

×

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

×

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

×

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

×

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

ഉദാഹരണ കോഡ്

  1. <div class = "alert-message warning" > 
  2.   <a class = "close" href = "#" > × </a>  
  3.   <p><strong> വിശുദ്ധ ഗ്വാക്കാമോൾ! </strong> സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ലെന്ന് തോന്നുന്നു. </p>
  4. </div>

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

.alert-message.block-message

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

ജാവാസ്ക്രിപ്റ്റ് നേടുക »

×

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

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

ഓ സ്നാപ്പ്! നിങ്ങൾക്ക് ഒരു പിശക് ലഭിച്ചു! അതും ഇതും മാറ്റി വീണ്ടും ശ്രമിക്കുക.

  • ഡ്യൂയിസ് മോളിസ് നോൺ കമോഡോ ലക്റ്റസ് ആണ്
  • നിസി എരറ്റ് പോർട്ടിറ്റർ ലിഗുല
  • എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം നെക് എലിറ്റ്
ഈ നടപടി സ്വീകരിക്കുക അല്ലെങ്കിൽ ഇത് ചെയ്യുക
×

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

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

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

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

ഉദാഹരണ കോഡ്

  1. <div class = "alert-message block-message warning" > 
  2.   <a class = "close" href = "#" > × </a>  
  3.   <p><strong> വിശുദ്ധ ഗ്വാക്കാമോൾ! ഇതൊരു മുന്നറിയിപ്പാണ്! </strong> സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ലെന്ന് തോന്നുന്നു. Nulla vitae elit libero, a pharetra ague. പ്രെസെന്റ് കോമോഡോ കർസസ് മാഗ്ന, അല്ലെങ്കിൽ സ്കെലറിസ്ക് നിസ്ൽ കൺസെക്റ്റേറ്റർ തുടങ്ങിയവ. </p>
  4.   <div class = "Alert-actions" > 
  5.     <a class = "btn small" href = "#" > ഈ നടപടിയെടുക്കുക </a> <a class = "btn small" href = "#" > അല്ലെങ്കിൽ ഇത് ചെയ്യുക </a>     
  6.   </div>
  7. </div>

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

മോഡലുകൾ

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

ജാവാസ്ക്രിപ്റ്റ് നേടുക »

×

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

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

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

ടൂൾടിപ്പുകൾ

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

ജാവാസ്ക്രിപ്റ്റ് നേടുക »

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ് ഇല്ലോ പിശക് ഇപ്‌സം വെരിറ്റാറ്റിസ് ഓട്ട് ഇസ്റ്റെ പെർസ്‌പിസിയാറ്റിസ് ഇസ്റ്റേ വോള്യൂപ്റ്റാസ് നാറ്റസ് ഇല്ലോ ക്വാസി ഓഡിറ്റ് ഓട്ട് നാറ്റസ് കോൺസെക്വന്റർ പരിണതഫലങ്ങൾ, ഓട്ട് നാറ്റസ് ഇല്ലോ വോള്യൂപ്റ്റേറ്റം ഓഡിറ്റ് പെർസ്‌പിസിയാറ്റിസ് ടാം ഡോളോരുപന്റിയം ലേക്ക് 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. മെസെനാസ് ഫൗസിബസ് മോളിസ് ഇന്റർഡം. മോർബി ലിയോ റിസസ്, പോർട്ട എസി കൺസെക്റ്റൂർ എസി, വെസ്റ്റിബുലം അറ്റ് ഇറോസ്.

ബൂട്ട്‌സ്‌ട്രാപ്പിനൊപ്പം ജാവാസ്‌ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നത് ആരംഭിക്കുന്നതിന് പ്ലഗിനുകളുടെ ഒരു സൂചിക

ആമുഖം

ബൂട്ട്‌സ്‌ട്രാപ്പ് ലൈബ്രറിയുമായി ജാവാസ്ക്രിപ്റ്റ് സംയോജിപ്പിക്കുന്നത് വളരെ എളുപ്പമാണ്. ചുവടെ ഞങ്ങൾ അടിസ്ഥാനകാര്യങ്ങൾ പരിശോധിക്കുകയും നിങ്ങൾക്ക് ആരംഭിക്കാൻ ചില ആകർഷണീയമായ പ്ലഗിനുകൾ നൽകുകയും ചെയ്യുന്നു!

ജാവാസ്ക്രിപ്റ്റ് ഡോക്‌സ് കാണുക »

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

jQuery , Ender എന്നിവയ്‌ക്കൊപ്പം പ്രവർത്തിക്കുന്ന പുതിയ ഇഷ്‌ടാനുസൃത പ്ലഗിനുകൾ ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്രാഥമിക ഘടകങ്ങളിൽ ചിലത് ജീവസുറ്റതാക്കുക . നിങ്ങളുടെ നിർദ്ദിഷ്ട വികസന ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായ രീതിയിൽ അവ വിപുലീകരിക്കാനും പരിഷ്കരിക്കാനും ഞങ്ങൾ നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുന്നു.

ഫയൽ വിവരണം
bootstrap-modal.js ഞങ്ങളുടെ മോഡൽ പ്ലഗിൻ പരമ്പരാഗത മോഡൽ ജെഎസ് പ്ലഗിൻ വളരെ സ്ലിം ടേക്ക് ആണ്! twitter-ൽ ഞങ്ങൾക്ക് ആവശ്യമുള്ള വെറും പ്രവർത്തനക്ഷമത മാത്രം ഉൾപ്പെടുത്താൻ ഞങ്ങൾ പ്രത്യേകം ശ്രദ്ധിച്ചു.
bootstrap-alerts.js അലേർട്ടുകളിലേക്ക് അടുത്ത പ്രവർത്തനം ചേർക്കുന്നതിനുള്ള ഒരു സൂപ്പർ ടിനി ക്ലാസാണ് അലേർട്ട് പ്ലഗിൻ.
bootstrap-dropdown.js ബൂട്ട്‌സ്‌ട്രാപ്പ് ടോപ്പ്‌ബാറിലേക്കോ ടാബ് ചെയ്‌ത നാവിഗേഷനുകളിലേക്കോ ഡ്രോപ്പ്‌ഡൗൺ ഇന്ററാക്ഷൻ ചേർക്കുന്നതിനാണ് ഈ പ്ലഗിൻ.
bootstrap-scrollspy.js ബൂട്ട്‌സ്‌ട്രാപ്പ് ടോപ്പ്‌ബാറിലേക്ക് സ്‌ക്രോൾ പൊസിഷൻ അടിസ്ഥാനമാക്കി ഒരു ഓട്ടോ അപ്‌ഡേറ്റ് നാവ് ചേർക്കുന്നതിനാണ് സ്ക്രോൾസ്പൈ പ്ലഗിൻ.
bootstrap-tabs.js ഈ പ്ലഗിൻ ദ്രുതവും ചലനാത്മകവുമായ ടാബും ഗുളിക പ്രവർത്തനവും പ്രാദേശിക ഉള്ളടക്കത്തിലൂടെ സൈക്കിൾ ചെയ്യുന്നതിനായി ചേർക്കുന്നു.
bootstrap-twipsy.js ജേസൺ ഫ്രെയിം എഴുതിയ മികച്ച jQuery.tipsy പ്ലഗിൻ അടിസ്ഥാനമാക്കി; twipsy ഒരു അപ്ഡേറ്റ് ചെയ്ത പതിപ്പാണ്, അത് ഇമേജുകളെ ആശ്രയിക്കുന്നില്ല, ആനിമേഷനുകൾക്കായി css3 ഉപയോഗിക്കുന്നു, പ്രാദേശിക തലക്കെട്ട് സംഭരണത്തിനായി ഡാറ്റ-ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു!
bootstrap-popover.js നിങ്ങളുടെ ആപ്ലിക്കേഷനിലേക്ക് പോപോവറുകൾ ചേർക്കുന്നതിനുള്ള ലളിതമായ ഒരു ഇന്റർഫേസ് പോപോവർ പ്ലഗിൻ നൽകുന്നു. ഇത് boostrap-twipsy.js പ്ലഗിൻ വിപുലീകരിക്കുന്നു, അതിനാൽ നിങ്ങളുടെ പ്രോജക്റ്റിൽ പോപോവറുകൾ ഉൾപ്പെടുത്തുമ്പോൾ ആ ഫയലും പിടിച്ചെടുക്കുന്നത് ഉറപ്പാക്കുക!

ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമാണോ?

ഇല്ല! ബൂട്ട്‌സ്‌ട്രാപ്പ് ആദ്യം രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നത് ഒരു CSS ലൈബ്രറിയായിട്ടാണ്. ഈ ജാവാസ്ക്രിപ്റ്റ് ഉൾപ്പെടുത്തിയ ശൈലികൾക്ക് മുകളിൽ ഒരു അടിസ്ഥാന ഇന്ററാക്ടീവ് ലെയർ നൽകുന്നു.

എന്നിരുന്നാലും, ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമുള്ളവർക്കായി, ജാവാസ്ക്രിപ്റ്റുമായി ബൂട്ട്സ്ട്രാപ്പ് എങ്ങനെ സംയോജിപ്പിക്കാമെന്ന് മനസിലാക്കാൻ നിങ്ങളെ സഹായിക്കുന്നതിനും അടിസ്ഥാന പ്രവർത്തനത്തിന് വേഗമേറിയതും ഭാരം കുറഞ്ഞതുമായ ഓപ്ഷൻ ഉടൻ നൽകുന്നതിനും ഞങ്ങൾ മുകളിൽ പ്ലഗിനുകൾ നൽകിയിട്ടുണ്ട്.

കൂടുതൽ വിവരങ്ങൾക്കും ചില തത്സമയ ഡെമോകൾ കാണുന്നതിനും, ദയവായി ഞങ്ങളുടെ പ്ലഗിൻ ഡോക്യുമെന്റേഷൻ പേജ് കാണുക .

വേരിയബിളുകൾ, മിക്‌സിനുകൾ, ഫംഗ്‌ഷനുകൾ എന്നിവയ്‌ക്കൊപ്പം നിങ്ങളുടെ 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.   ...
  14. }

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

  1. #ഗ്രേഡിയന്റ് {
  2.   ...
  3.   . ലംബമായ ( @startColor : #555, @endColor: #333) { 
  4.     പശ്ചാത്തല നിറം : @endColor ; _ 
  5.     പശ്ചാത്തലം - ആവർത്തിക്കുക : ആവർത്തിക്കുക - x ;
  6.     പശ്ചാത്തലം - ചിത്രം : - khtml - ഗ്രേഡിയന്റ് ( രേഖീയ , ഇടത് മുകളിൽ , ഇടത് താഴെ , മുതൽ ( @startColor ), ( @endColor ) വരെ ); // കോൺക്വറർ   
  7.     പശ്ചാത്തലം - ചിത്രം : - moz - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // FF 3.6+   
  8.     പശ്ചാത്തലം - ചിത്രം : - ms - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // IE10   
  9.     പശ്ചാത്തലം - ചിത്രം : - വെബ്കിറ്റ് - ഗ്രേഡിയന്റ് ( ലീനിയർ , ഇടത് മുകളിൽ , ഇടത് താഴെ , നിറം - നിർത്തുക ( 0 %, @startColor ), കളർ - സ്റ്റോപ്പ് ( 100 %, @endColor )); // സഫാരി 4+, Chrome 2+    
  10.     പശ്ചാത്തലം - ചിത്രം : - വെബ്കിറ്റ് - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // സഫാരി 5.1+, Chrome 10+   
  11.     പശ്ചാത്തലം - ചിത്രം : - o - ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // ഓപ്പറ 11.10   
  12.     പശ്ചാത്തലം - ചിത്രം : ലീനിയർ - ഗ്രേഡിയന്റ് ( @startColor , @endColor ); // സ്റ്റാൻഡേർഡ്  
  13.   }
  14.   ...
  15. }

പ്രവർത്തനങ്ങൾ

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

  1. // ഗ്രിഡിറ്റ്യൂഡ്
  2. @ഗ്രിഡ് കോളങ്ങൾ : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // കുറച്ച് കോളങ്ങൾ ഉണ്ടാക്കുക
  8. . നിരകൾ ( @columnSpan : 1 ) {  
  9.   വീതി : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  10. }

കുറവ് കംപൈൽ ചെയ്യുന്നു

/lib/ എന്നതിലെ ഫയലുകൾ പരിഷ്കരിച്ച ശേഷം .less, ബൂട്ട്‌സ്‌ട്രാപ്പ്-*.*.*.css, ബൂട്ട്‌സ്‌ട്രാപ്പ്-*.*.*.min.css ഫയലുകൾ എന്നിവ പുനഃസൃഷ്ടിക്കുന്നതിന് നിങ്ങൾ അവ വീണ്ടും കംപൈൽ ചെയ്യേണ്ടതുണ്ട്. നിങ്ങൾ GitHub-ലേക്ക് ഒരു പുൾ അഭ്യർത്ഥന സമർപ്പിക്കുകയാണെങ്കിൽ, നിങ്ങൾ എല്ലായ്പ്പോഴും വീണ്ടും കംപൈൽ ചെയ്യണം.

സമാഹരിക്കാനുള്ള വഴികൾ

രീതി പടികൾ
മേക്ക്‌ഫൈലുള്ള നോഡ്

ഇനിപ്പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിച്ച് npm ഉപയോഗിച്ച് കുറവ് കമാൻഡ് ലൈൻ കംപൈലർ ഇൻസ്റ്റാൾ ചെയ്യുക:

$ npm ഇൻസ്റ്റാൾ കുറവ്

ഇൻസ്റ്റാൾ ചെയ്തുകഴിഞ്ഞാൽ make, നിങ്ങളുടെ ബൂട്ട്സ്ട്രാപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിൽ നിന്ന് പ്രവർത്തിപ്പിക്കുക, നിങ്ങൾ എല്ലാം സജ്ജമാക്കിക്കഴിഞ്ഞു.

കൂടാതെ, നിങ്ങൾ വാച്ചർ ഇൻസ്റ്റാൾ ചെയ്‌തിട്ടുണ്ടെങ്കിൽ, make watchബൂട്ട്‌സ്‌ട്രാപ്പ് ലിബിൽ ഒരു ഫയൽ എഡിറ്റുചെയ്യുമ്പോഴെല്ലാം ബൂട്ട്‌സ്‌ട്രാപ്പ് സ്വയമേവ പുനർനിർമ്മിക്കുന്നതിന് നിങ്ങൾ പ്രവർത്തിപ്പിക്കാം (ഇത് ആവശ്യമില്ല, ഒരു സൗകര്യപ്രദമായ രീതി മാത്രം).
ജാവാസ്ക്രിപ്റ്റ്

ഏറ്റവും പുതിയ Les.js ഡൗൺലോഡ് ചെയ്‌ത് അതിലേക്കുള്ള പാത (ബൂട്ട്‌സ്‌ട്രാപ്പും) എന്നതിൽ ഉൾപ്പെടുത്തുക head.

  1. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" >  
  2. <script src = "/path/to/less.js" ></script>

.less ഫയലുകൾ വീണ്ടും കംപൈൽ ചെയ്യാൻ, അവ സംരക്ഷിച്ച് നിങ്ങളുടെ പേജ് വീണ്ടും ലോഡുചെയ്യുക. Less.js അവ കംപൈൽ ചെയ്യുകയും ലോക്കൽ സ്റ്റോറേജിൽ സൂക്ഷിക്കുകയും ചെയ്യുന്നു.
കമാൻഡ് ലൈൻ

നിങ്ങൾ ഇതിനകം തന്നെ കുറവ് കമാൻഡ് ലൈൻ ടൂൾ ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടെങ്കിൽ, ഇനിപ്പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിക്കുക:

$lessc ./lib/bootstrap.less > bootstrap.css

--compressനിങ്ങൾ ചില ബൈറ്റുകൾ സംരക്ഷിക്കാൻ ശ്രമിക്കുകയാണെങ്കിൽ ആ കമാൻഡിൽ ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക !
കുറവ് Mac ആപ്പ്

അനൗദ്യോഗിക Mac ആപ്പ് .less ഫയലുകളുടെ ഡയറക്‌ടറികൾ വീക്ഷിക്കുകയും കണ്ട .less ഫയലിന്റെ ഓരോ സേവ് ചെയ്‌തതിന് ശേഷവും ലോക്കൽ ഫയലുകളിലേക്ക് കോഡ് കംപൈൽ ചെയ്യുകയും ചെയ്യുന്നു.

നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, സ്വയമേവ ചെറുതാക്കുന്നതിനും കംപൈൽ ചെയ്‌ത ഫയലുകൾ ഏത് ഡയറക്‌ടറിയിലാണ് അവസാനിക്കുന്നതെന്നും ആപ്പിലെ മുൻഗണനകൾ ടോഗിൾ ചെയ്യാം.