റീബൂട്ട് ചെയ്യുക

റീബൂട്ട്, ഒരൊറ്റ ഫയലിലെ എലമെന്റ്-നിർദ്ദിഷ്ട CSS മാറ്റങ്ങളുടെ ഒരു ശേഖരം, കെട്ടിപ്പടുക്കാൻ ഗംഭീരവും സ്ഥിരതയുള്ളതും ലളിതവുമായ ഒരു അടിസ്ഥാനരേഖ നൽകുന്നതിന് കിക്ക്സ്റ്റാർട്ട് ബൂട്ട്സ്ട്രാപ്പ്.

സമീപിക്കുക

എലമെന്റ് സെലക്ടറുകൾ മാത്രം ഉപയോഗിച്ച് കുറച്ച് അഭിപ്രായമുള്ള ശൈലികളുള്ള നിരവധി HTML ഘടകങ്ങൾ നൽകിക്കൊണ്ട്, നോർമലൈസ് ചെയ്യുമ്പോൾ റീബൂട്ട് നിർമ്മിക്കുന്നു. അധിക സ്റൈലിംഗ് ക്ലാസുകൾ ഉപയോഗിച്ച് മാത്രമേ ചെയ്യൂ. ഉദാഹരണത്തിന്, ഞങ്ങൾ ചില <table>ശൈലികൾ ഒരു ലളിതമായ അടിസ്ഥാനത്തിനായി റീബൂട്ട് ചെയ്യുകയും പിന്നീട് .table, .table-bordered, എന്നിവയും മറ്റും നൽകുകയും ചെയ്യുന്നു.

റീബൂട്ടിൽ എന്ത് അസാധുവാക്കണമെന്ന് തിരഞ്ഞെടുക്കുന്നതിനുള്ള ഞങ്ങളുടെ മാർഗ്ഗനിർദ്ദേശങ്ങളും കാരണങ്ങളും ഇതാ:

സ്കേലബിൾ കോംപോണന്റ് സ്‌പെയ്‌സിംഗിനായി s-ന് remപകരം s ഉപയോഗിക്കുന്നതിന് ചില ബ്രൗസർ ഡിഫോൾട്ട് മൂല്യങ്ങൾ അപ്‌ഡേറ്റ് ചെയ്യുക .em
ഒഴിവാക്കുക margin-top. ലംബമായ അരികുകൾ തകർന്നേക്കാം, ഇത് അപ്രതീക്ഷിത ഫലങ്ങൾ നൽകുന്നു. അതിലും പ്രധാനമായി, ഒരൊറ്റ ദിശ marginഒരു ലളിതമായ മാനസിക മാതൃകയാണ്.
ഉപകരണ വലുപ്പത്തിലുടനീളം എളുപ്പത്തിൽ സ്കെയിലിംഗിനായി, ബ്ലോക്ക് ഘടകങ്ങൾ rems-ന് margins ഉപയോഗിക്കണം.
സാധ്യമാകുമ്പോഴെല്ലാം fontഉപയോഗിച്ച് - ബന്ധപ്പെട്ട പ്രോപ്പർട്ടികളുടെ പ്രഖ്യാപനങ്ങൾ പരമാവധി കുറയ്ക്കുക.inherit

പേജ് ഡിഫോൾട്ടുകൾ

മികച്ച പേജ്-വൈഡ് ഡിഫോൾട്ടുകൾ <html>നൽകുന്നതിന് <body>ഘടകങ്ങളും അപ്‌ഡേറ്റ് ചെയ്‌തിരിക്കുന്നു. കൂടുതൽ വ്യക്തമായി:

ആഗോളതലത്തിൽ എല്ലാ ഘടകങ്ങളിലും സജ്ജീകരിച്ചിരിക്കുന്നു box-sizing- ഉൾപ്പെടെ *::before. പാഡിംഗ് അല്ലെങ്കിൽ ബോർഡർ കാരണം മൂലകത്തിന്റെ പ്രഖ്യാപിത വീതി ഒരിക്കലും കവിയുന്നില്ലെന്ന് ഇത് ഉറപ്പാക്കുന്നു.*::afterborder-box
എന്നതിൽ അടിസ്ഥാനമൊന്നും font-sizeപ്രഖ്യാപിച്ചിട്ടില്ല <html>, എന്നാൽ 16pxഅനുമാനിക്കപ്പെടുന്നു (ബ്രൗസർ ഡിഫോൾട്ട്). ഉപയോക്തൃ മുൻഗണനകളെ മാനിക്കുകയും കൂടുതൽ ആക്‌സസ് ചെയ്യാവുന്ന സമീപനം ഉറപ്പാക്കുകയും ചെയ്യുമ്പോൾ മീഡിയ അന്വേഷണങ്ങൾ വഴി എളുപ്പത്തിൽ പ്രതികരിക്കുന്ന തരം സ്കെയിലിംഗിനായി font-size: 1remഇത് പ്രയോഗിക്കുന്നു .<body>
ഒരു <body>ആഗോള font-family, line-height, കൂടാതെ text-align. ഫോണ്ട് പൊരുത്തക്കേടുകൾ തടയാൻ ചില ഫോം ഘടകങ്ങൾ വഴി ഇത് പിന്നീട് പാരമ്പര്യമായി ലഭിക്കുന്നു.
സുരക്ഷയ്ക്കായി, <body>ഒരു പ്രഖ്യാപിത background-color, സ്ഥിരസ്ഥിതിയായി #fff.

നേറ്റീവ് ഫോണ്ട് സ്റ്റാക്ക്

ഡിഫോൾട്ട് വെബ് ഫോണ്ടുകൾ (ഹെൽവെറ്റിക്ക ന്യൂ, ഹെൽവെറ്റിക്ക, ഏരിയൽ) ബൂട്ട്‌സ്‌ട്രാപ്പ് 4-ൽ ഒഴിവാക്കി, എല്ലാ ഉപകരണത്തിലും ഒഎസിലും ഒപ്റ്റിമൽ ടെക്‌സ്‌റ്റ് റെൻഡറിങ്ങിന് പകരം “നേറ്റീവ് ഫോണ്ട് സ്റ്റാക്ക്” നൽകി. ഈ സ്മാഷിംഗ് മാഗസിൻ ലേഖനത്തിൽ നേറ്റീവ് ഫോണ്ട് സ്റ്റാക്കുകളെ കുറിച്ച് കൂടുതൽ വായിക്കുക .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

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

ഇത് ബൂട്ട്‌സ്‌ട്രാപ്പിലുടനീളം ആഗോളതലത്തിൽ സ്വയമേവ പാരമ്പര്യമായി നൽകുകയും font-familyപ്രയോഗിക്കുകയും ചെയ്യുന്നു . <body>ഗ്ലോബൽ സ്വിച്ചുചെയ്യാൻ, ബൂട്ട്സ്ട്രാപ്പ് font-familyഅപ്ഡേറ്റ് $font-family-baseചെയ്ത് വീണ്ടും കംപൈൽ ചെയ്യുക.

തലക്കെട്ടുകളും ഖണ്ഡികകളും

എല്ലാ ശീർഷക ഘടകങ്ങളും-ഉദാ, <h1>- <p>അവ margin-topനീക്കം ചെയ്യുന്നതിനായി പുനഃസജ്ജീകരിച്ചിരിക്കുന്നു. എളുപ്പത്തിലുള്ള ഇടത്തിനായി തലക്കെട്ടുകളും margin-bottom: .5remഖണ്ഡികകളും ചേർത്തിട്ടുണ്ട് .margin-bottom: 1rem

തലക്കെട്ട്	ഉദാഹരണം
`<h1></h1>`	h1. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
`<h2></h2>`	h2. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
`<h3></h3>`	h3. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
`<h4></h4>`	h4. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
`<h5></h5>`	h5. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
`<h6></h6>`	h6. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

ലിസ്റ്റുകൾ

എല്ലാ ലിസ്‌റ്റുകളും- <ul>, <ol>, കൂടാതെ <dl>- margin-topനീക്കം ചെയ്‌തിരിക്കുന്നു കൂടാതെ a margin-bottom: 1rem. നെസ്റ്റഡ് ലിസ്റ്റുകൾക്ക് ഇല്ല margin-bottom.

എല്ലാ ലിസ്‌റ്റുകളുടെയും മുകളിലെ മാർജിൻ നീക്കം ചെയ്‌തിരിക്കുന്നു
അവരുടെ താഴെയുള്ള മാർജിൻ നോർമലൈസ് ചെയ്തു
നെസ്റ്റഡ് ലിസ്റ്റുകൾക്ക് താഴെയുള്ള മാർജിൻ ഇല്ല
- ഈ രീതിയിൽ, അവർക്ക് കൂടുതൽ തുല്യമായ രൂപം ലഭിക്കും
- കൂടുതൽ ലിസ്റ്റ് ഇനങ്ങൾ പിന്തുടരുമ്പോൾ പ്രത്യേകിച്ചും
ഇടത് പാഡിംഗും പുനഃസജ്ജീകരിച്ചു

ഓർഡർ ചെയ്ത ഒരു ലിസ്റ്റ് ഇതാ
കുറച്ച് ലിസ്റ്റ് ഇനങ്ങൾക്കൊപ്പം
മൊത്തത്തിലുള്ള അതേ രൂപമാണ് ഇതിന്
മുമ്പത്തെ ക്രമപ്പെടുത്താത്ത പട്ടിക പോലെ

ലളിതമായ ശൈലി, വ്യക്തമായ ശ്രേണി, മികച്ച സ്‌പെയ്‌സിംഗ് എന്നിവയ്‌ക്കായി, വിവരണ ലിസ്റ്റുകൾ അപ്‌ഡേറ്റ് ചെയ്‌തു margin. ലേക്ക് <dd>പുനഃസജ്ജമാക്കുകയും ചേർക്കുകയും ചെയ്യുക . കൾ ബോൾഡാണ് .margin-left0margin-bottom: .5rem<dt>

വിവരണ ലിസ്റ്റുകൾ: നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.
കാലാവധി: പദത്തിന്റെ നിർവചനം.; ഒരേ പദത്തിനുള്ള രണ്ടാമത്തെ നിർവചനം.
മറ്റൊരു പദം: ഈ മറ്റൊരു പദത്തിന്റെ നിർവ്വചനം.

മുൻകൂട്ടി ഫോർമാറ്റ് ചെയ്ത വാചകം

മൂലകത്തെ അതിന്റെ നീക്കം ചെയ്യാനും അതിനായി യൂണിറ്റുകൾ ഉപയോഗിക്കാനും <pre>പുനഃസജ്ജീകരിച്ചിരിക്കുന്നു .margin-topremmargin-bottom

.ഉദാഹരണം-ഘടകം {
  മാർജിൻ-ബോട്ടം: 1rem;
}

പട്ടികകൾ

ടേബിളുകൾ ശൈലികളിലേക്ക് ചെറുതായി ക്രമീകരിച്ചിരിക്കുന്നു <caption>, ബോർഡറുകൾ ചുരുക്കി, text-alignഉടനീളം സ്ഥിരത ഉറപ്പാക്കുന്നു. ബോർഡറുകൾ, പാഡിംഗ് എന്നിവയ്‌ക്കായുള്ള അധിക മാറ്റങ്ങൾ ക്ലാസിനൊപ്പം വരുന്നു ..table

ഇതൊരു ഉദാഹരണ പട്ടികയാണ്, ഉള്ളടക്കം വിവരിക്കുന്നതിനുള്ള അതിന്റെ അടിക്കുറിപ്പാണിത്.
പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്
ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ
ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ
ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ

ഫോമുകൾ

ലളിതമായ അടിസ്ഥാന ശൈലികൾക്കായി വിവിധ ഫോം ഘടകങ്ങൾ റീബൂട്ട് ചെയ്തു. ഏറ്റവും ശ്രദ്ധേയമായ ചില മാറ്റങ്ങൾ ഇതാ:

<fieldset>കൾക്ക് അതിരുകളോ പാഡിംഗോ മാർജിനോ ഇല്ലാത്തതിനാൽ അവ വ്യക്തിഗത ഇൻപുട്ടുകൾക്കോ ഇൻപുട്ടുകളുടെ ഗ്രൂപ്പുകൾക്കോ റാപ്പറുകളായി എളുപ്പത്തിൽ ഉപയോഗിക്കാനാകും.
<legend>ഫീൽഡ്സെറ്റുകൾ പോലെ, ഒരു തരം തലക്കെട്ടായി പ്രദർശിപ്പിക്കുന്നതിനായി റീസ്റ്റൈൽ ചെയ്തിട്ടുണ്ട്.
<label>കൾ പ്രയോഗിക്കാൻ display: inline-blockഅനുവദിക്കുന്നതിന് സജ്ജീകരിച്ചിരിക്കുന്നു.margin
<input>s, <select>s, <textarea>s, <button>s എന്നിവ സാധാരണയായി നോർമലൈസ് ചെയ്യുകയാണ് അഭിസംബോധന ചെയ്യുന്നത്, എന്നാൽ റീബൂട്ട് അവയും marginസെറ്റുകളും നീക്കംചെയ്യുന്നു line-height: inherit.
<textarea>തിരശ്ചീന വലുപ്പം മാറ്റുന്നത് പലപ്പോഴും പേജ് ലേഔട്ടിനെ "ബ്രേക്ക്" ചെയ്യുന്നതിനാൽ ലംബമായി മാത്രം വലുപ്പം മാറ്റാവുന്ന തരത്തിൽ s പരിഷ്‌ക്കരിച്ചിരിക്കുന്നു.
<button>s, <input>ബട്ടൺ ഘടകങ്ങൾ എന്നിവയ്ക്ക് cursor: pointerഎപ്പോൾ ഉണ്ട് :not(:disabled).

ഈ മാറ്റങ്ങളും മറ്റും താഴെ പ്രദർശിപ്പിച്ചിരിക്കുന്നു.

ഉദാഹരണം ഇതിഹാസം

ഉദാഹരണ ഇൻപുട്ട്

ഉദാഹരണം തിരഞ്ഞെടുക്കുക

ഈ ചെക്ക്ബോക്സ് പരിശോധിക്കുക

ഓപ്ഷൻ ഒന്ന് ഇതും അതും ഈ ഫാൻസി ഫോം നിയന്ത്രണങ്ങളുടെ പൊതിയൽ പ്രകടമാക്കാൻ വളരെ ദൈർഘ്യമേറിയ മറ്റൊന്നാണ് ഓപ്ഷൻ രണ്ട്. ഓപ്ഷൻ മൂന്ന് പ്രവർത്തനരഹിതമാക്കി

ഉദാഹരണം ടെക്സ്റ്റ് ഏരിയ

ഉദാഹരണ തീയതി

ഉദാഹരണ സമയം

ഉദാഹരണ ഔട്ട്പുട്ട് 100

ബട്ടണുകളിലെ പോയിന്ററുകൾ

role="button"സ്ഥിരസ്ഥിതി കഴ്‌സർ എന്നതിലേക്ക് മാറ്റുന്നതിനുള്ള ഒരു മെച്ചപ്പെടുത്തൽ റീബൂട്ടിൽ ഉൾപ്പെടുന്നു pointer. ഘടകങ്ങൾ സംവേദനാത്മകമാണെന്ന് സൂചിപ്പിക്കാൻ സഹായിക്കുന്ന ഘടകങ്ങളിലേക്ക് ഈ ആട്രിബ്യൂട്ട് ചേർക്കുക. <button>സ്വന്തം cursorമാറ്റം വരുത്തുന്ന ഘടകങ്ങൾക്ക് ഈ റോൾ ആവശ്യമില്ല .

നോൺ-ബട്ടൺ എലമെന്റ് ബട്ടൺ

<span role="button" tabindex="0">Non-button element button</span>

മറ്റ് ഘടകങ്ങൾ

വിലാസം

എന്നതിൽ നിന്ന് ബ്രൗസർ ഡിഫോൾട്ട് പുനഃസജ്ജമാക്കാൻ ഘടകം <address>അപ്ഡേറ്റ് ചെയ്തു . ഇപ്പോൾ പാരമ്പര്യമായി ലഭിച്ചതും ചേർത്തിട്ടുണ്ട്. ഏറ്റവും അടുത്തുള്ള പൂർവ്വികരെ (അല്ലെങ്കിൽ മുഴുവൻ ജോലിയും) ബന്ധപ്പെടാനുള്ള വിവരങ്ങൾ അവതരിപ്പിക്കുന്നതിനാണ് s. ഉപയോഗിച്ച് വരികൾ അവസാനിപ്പിച്ച് ഫോർമാറ്റിംഗ് സംരക്ഷിക്കുക .font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

മുഴുവൻ പേര്
[email protected]

ബ്ലോക്ക്ക്വോട്ട്

ബ്ലോക്ക്ക്വോട്ടുകളിലെ ഡിഫോൾട്ട് marginആണ് , അതിനാൽ മറ്റ് ഘടകങ്ങളുമായി കൂടുതൽ സ്ഥിരതയുള്ള ഒന്നിലേക്ക് 1em 40pxഞങ്ങൾ അത് പുനഃസജ്ജമാക്കുന്നു .0 0 1rem

ഒരു ബ്ലോക്ക്‌ക്വോട്ട് എലമെന്റിൽ അടങ്ങിയിരിക്കുന്ന അറിയപ്പെടുന്ന ഉദ്ധരണി.

ഉറവിട ശീർഷകത്തിൽ പ്രശസ്തനായ ഒരാൾ

ഇൻലൈൻ ഘടകങ്ങൾ

<abbr>ഖണ്ഡിക വാചകങ്ങൾക്കിടയിൽ വേറിട്ടുനിൽക്കാൻ മൂലകത്തിന് അടിസ്ഥാന ശൈലി ലഭിക്കുന്നു .

Nulla attr vitae elit libero, a pharetra ague.

സംഗ്രഹം

സംഗ്രഹത്തിലെ ഡിഫോൾട്ട് cursorആണ് , അതിനാൽ മൂലകത്തിൽ ക്ലിക്ക് ചെയ്യുന്നതിലൂടെ സംവദിക്കാൻ കഴിയുമെന്ന് അറിയിക്കാൻ textഞങ്ങൾ അത് പുനഃസജ്ജമാക്കുന്നു .pointer

ചില വിശദാംശങ്ങൾ

വിശദാംശങ്ങളെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾ.

കൂടുതൽ വിശദാംശങ്ങൾ

വിശദാംശങ്ങളെക്കുറിച്ചുള്ള കൂടുതൽ വിശദാംശങ്ങൾ ഇവിടെയുണ്ട്.

HTML5 `[hidden]`ആട്രിബ്യൂട്ട്

HTML5 എന്ന പേരിൽ ഒരു പുതിയ ആഗോള ആട്രിബ്യൂട്ട്[hidden]display: none ചേർക്കുന്നു, അത് സ്ഥിരസ്ഥിതിയായി സ്റ്റൈൽ ചെയ്തിരിക്കുന്നു . PureCSS- ൽ നിന്ന് ഒരു ആശയം കടമെടുക്കുന്നു , ഇത് ആകസ്മികമായി അസാധുവാക്കുന്നത് [hidden] { display: none !important; }തടയാൻ സഹായിക്കുന്നതിലൂടെ ഞങ്ങൾ ഈ സ്ഥിരസ്ഥിതി മെച്ചപ്പെടുത്തുന്നു . displayപ്രാദേശികമായി IE10 [hidden]പിന്തുണയ്‌ക്കുന്നില്ലെങ്കിലും, ഞങ്ങളുടെ CSS-ലെ വ്യക്തമായ പ്രഖ്യാപനം ആ പ്രശ്‌നത്തെ മറികടക്കുന്നു.

<input type="text" hidden>

jQuery പൊരുത്തക്കേട്

[hidden]$(...).hide()jQuery-കളുമായും രീതികളുമായും പൊരുത്തപ്പെടുന്നില്ല $(...).show(). അതിനാൽ, മൂലകങ്ങൾ [hidden]കൈകാര്യം ചെയ്യുന്നതിനുള്ള മറ്റ് സാങ്കേതികതകളെ ഞങ്ങൾ നിലവിൽ അംഗീകരിക്കുന്നില്ല .display

ഒരു മൂലകത്തിന്റെ ദൃശ്യപരത ടോഗിൾ ചെയ്യാൻ, displayഅത് പരിഷ്‌ക്കരിച്ചിട്ടില്ലെന്നും ഘടകത്തിന് ഇപ്പോഴും പ്രമാണത്തിന്റെ ഒഴുക്കിനെ ബാധിക്കാമെന്നും അർത്ഥമാക്കുന്നു, പകരം .invisibleക്ലാസ് ഉപയോഗിക്കുക.