Source

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

റീബൂട്ട്, ഒരൊറ്റ ഫയലിലെ എലമെന്റ്-നിർദ്ദിഷ്ട 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

ഇത് ബൂട്ട്‌സ്‌ട്രാപ്പിലുടനീളം ആഗോളതലത്തിൽ സ്വയമേവ പാരമ്പര്യമായി നൽകുകയും 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.

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

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

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

വിവരണ ലിസ്റ്റുകൾ: നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.
യൂയിസ്മോഡ്: വെസ്റ്റിബുലം ഐഡി ലിഗുല പോർട്ട ഫെലിസ് യൂയിസ്മോഡ് സെമ്പർ എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം.; ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്.
Malesuada പോർട്ട: Etiam porta sem malesuada Magna mollis euismod.

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

മൂലകത്തെ അതിന്റെ നീക്കം ചെയ്യാനും അതിനായി യൂണിറ്റുകൾ ഉപയോഗിക്കാനും <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

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

വിലാസം

എന്നതിൽ നിന്ന് ബ്രൗസർ ഡിഫോൾട്ട് പുനഃസജ്ജമാക്കാൻ ഘടകം <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ക്ലാസ് ഉപയോഗിക്കുക.