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

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

ഈ പേജിൽ

സമീപിക്കുക

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

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

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

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

v5.2.0 ൽ ചേർത്തു

@importv5.1.1 ഉപയോഗിച്ച്, ഞങ്ങളുടെ എല്ലാ CSS ബണ്ടിലുകളിലുടനീളം (ഉൾപ്പെടെ bootstrap.css, bootstrap-reboot.css, കൂടാതെ bootstrap-grid.css) ഉൾപ്പെടുത്തുന്നതിന് ആവശ്യമായ കൾ ഞങ്ങൾ മാനദണ്ഡമാക്കി _root.scss. ഇത് എല്ലാ ബണ്ടിലുകളിലേക്കും ലെവൽ CSS വേരിയബിളുകൾ ചേർക്കുന്നു :root, അവയിൽ എത്ര എണ്ണം ആ ബണ്ടിലിൽ ഉപയോഗിച്ചിരിക്കുന്നു എന്നത് പരിഗണിക്കാതെ തന്നെ. ആത്യന്തികമായി ബൂട്ട്‌സ്‌ട്രാപ്പ് 5 , എല്ലായ്‌പ്പോഴും Sass വീണ്ടും കംപൈൽ ചെയ്യാതെ തന്നെ കൂടുതൽ തത്സമയ ഇഷ്‌ടാനുസൃതമാക്കൽ നൽകുന്നതിന്, കാലക്രമേണ കൂടുതൽ CSS വേരിയബിളുകൾ ചേർക്കുന്നത് തുടർന്നും കാണും . ഞങ്ങളുടെ സോഴ്‌സ് സാസ് വേരിയബിളുകൾ എടുത്ത് അവയെ CSS വേരിയബിളുകളാക്കി മാറ്റുക എന്നതാണ് ഞങ്ങളുടെ സമീപനം. അതുവഴി, നിങ്ങൾ CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നില്ലെങ്കിലും, നിങ്ങൾക്ക് ഇപ്പോഴും Sass-ന്റെ എല്ലാ ശക്തിയും ഉണ്ട്. ഇത് ഇപ്പോഴും പുരോഗതിയിലാണ്, പൂർണ്ണമായി നടപ്പിലാക്കാൻ സമയമെടുക്കും.

ഉദാഹരണത്തിന്, :rootപൊതുവായ <body>ശൈലികൾക്കായി ഈ CSS വേരിയബിളുകൾ പരിഗണിക്കുക:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

പ്രായോഗികമായി, ആ വേരിയബിളുകൾ ഇതുപോലെ റീബൂട്ടിൽ പ്രയോഗിക്കുന്നു:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

നിങ്ങൾക്ക് ഇഷ്ടമുള്ളതുപോലെ തത്സമയ ഇഷ്‌ടാനുസൃതമാക്കലുകൾ നടത്താൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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

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

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

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

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

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

തിരശ്ചീന നിയമങ്ങൾ

ഘടകം <hr>ലളിതമാക്കിയിരിക്കുന്നു. ബ്രൗസർ ഡിഫോൾട്ടുകൾക്ക് സമാനമായി, <hr>കൾ വഴി സ്‌റ്റൈൽ ചെയ്‌തിരിക്കുന്നു border-top, ഒരു ഡിഫോൾട്ട് ഉണ്ടായിരിക്കും , കൂടാതെ രക്ഷിതാവ് മുഖേന സജ്ജീകരിക്കുമ്പോൾ ഉൾപ്പെടെ opacity: .25അവയുടെ border-colorവഴി സ്വയമേവ അവകാശമാക്കുകയും ചെയ്യുന്നു. ടെക്‌സ്‌റ്റ്, ബോർഡർ, അതാര്യത യൂട്ടിലിറ്റികൾ എന്നിവ ഉപയോഗിച്ച് അവ പരിഷ്‌ക്കരിക്കാനാകും.colorcolor

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

ലിസ്റ്റുകൾ

എല്ലാ ലിസ്‌റ്റുകളും- <ul>, <ol>, കൂടാതെ <dl>- margin-topനീക്കം ചെയ്‌തിരിക്കുന്നു കൂടാതെ a margin-bottom: 1rem. നെസ്റ്റഡ് ലിസ്റ്റുകൾക്ക് ഇല്ല margin-bottom. ഞങ്ങൾ ഓണും ഘടകങ്ങളും പുനഃസജ്ജീകരിച്ചു padding-left.<ul><ol>

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

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

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

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

ഇൻലൈൻ കോഡ്

ഉപയോഗിച്ച് കോഡിന്റെ ഇൻലൈൻ സ്‌നിപ്പെറ്റുകൾ പൊതിയുക <code>. HTML ആംഗിൾ ബ്രാക്കറ്റുകളിൽ നിന്ന് രക്ഷപ്പെടുന്നത് ഉറപ്പാക്കുക.

ഉദാഹരണത്തിന്, <section>ഇൻലൈൻ ആയി പൊതിയണം.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

കോഡ് ബ്ലോക്കുകൾ

<pre>കോഡിന്റെ ഒന്നിലധികം വരികൾക്കായി s ഉപയോഗിക്കുക . ഒരിക്കൽ കൂടി, ശരിയായ റെൻഡറിങ്ങിനായി കോഡിലെ ഏതെങ്കിലും ആംഗിൾ ബ്രാക്കറ്റുകളിൽ നിന്ന് രക്ഷപ്പെടുന്നത് ഉറപ്പാക്കുക. മൂലകത്തെ അതിന്റെ നീക്കം ചെയ്യാനും അതിനായി യൂണിറ്റുകൾ ഉപയോഗിക്കാനും <pre>പുനഃസജ്ജമാക്കുന്നു .margin-topremmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

വേരിയബിളുകൾ

വേരിയബിളുകൾ സൂചിപ്പിക്കാൻ <var>ടാഗ് ഉപയോഗിക്കുക.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ഉപയോക്തൃ ഇൻപുട്ട്

<kbd>കീബോർഡ് വഴി സാധാരണയായി നൽകുന്ന ഇൻപുട്ട് സൂചിപ്പിക്കാൻ ഉപയോഗിക്കുക .

ഡയറക്ടറികൾ മാറുന്നതിന്, ഡയറക്‌ടറിയുടെ cdപേര് ടൈപ്പ് ചെയ്യുക.
ക്രമീകരണങ്ങൾ എഡിറ്റുചെയ്യാൻ, അമർത്തുക ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

സാമ്പിൾ ഔട്ട്പുട്ട്

ഒരു പ്രോഗ്രാമിൽ നിന്നുള്ള സാമ്പിൾ ഔട്ട്പുട്ട് സൂചിപ്പിക്കാൻ <samp>ടാഗ് ഉപയോഗിക്കുക.

ഈ ടെക്‌സ്‌റ്റ് ഒരു കമ്പ്യൂട്ടർ പ്രോഗ്രാമിൽ നിന്നുള്ള സാമ്പിൾ ഔട്ട്‌പുട്ടായി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

പട്ടികകൾ

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

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</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).

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

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

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

ഉദാഹരണ ഇമെയിൽ

ഉദാഹരണം ടെലിഫോൺ

ഉദാഹരണം url

ഉദാഹരണ നമ്പർ

ഉദാഹരണ തിരയൽ

ഉദാഹരണ ശ്രേണി

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

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

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

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

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

ഉദാഹരണ തീയതി

ഉദാഹരണ സമയം

ഉദാഹരണം പാസ്വേഡ്

ഉദാഹരണം തീയതി-പ്രാദേശികം

ഉദാഹരണം ആഴ്ച

ഉദാഹരണം മാസം

ഉദാഹരണം നിറം

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

തീയതിയും വർണ്ണവും ഇൻപുട്ട് പിന്തുണ

സഫാരി പോലുള്ള എല്ലാ ബ്രൗസറുകളും തീയതി ഇൻപുട്ടുകളെ പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നില്ലെന്ന് ഓർമ്മിക്കുക .

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

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

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

html

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

HTML ചുരുക്കെഴുത്ത് ഘടകം.

സംഗ്രഹം

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

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

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

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

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

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

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

<input type="text" hidden>

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

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

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

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

സമീപിക്കുക

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

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

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

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

തിരശ്ചീന നിയമങ്ങൾ

ലിസ്റ്റുകൾ

ഇൻലൈൻ കോഡ്

കോഡ് ബ്ലോക്കുകൾ

വേരിയബിളുകൾ

ഉപയോക്തൃ ഇൻപുട്ട്

സാമ്പിൾ ഔട്ട്പുട്ട്

പട്ടികകൾ

ഫോമുകൾ

തീയതിയും വർണ്ണവും ഇൻപുട്ട് പിന്തുണ

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

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

വിലാസം

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

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

സംഗ്രഹം

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

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

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