റീബൂട്ട് ചെയ്യുക
റീബൂട്ട്, ഒരൊറ്റ ഫയലിലെ എലമെന്റ്-നിർദ്ദിഷ്ട CSS മാറ്റങ്ങളുടെ ഒരു ശേഖരം, നിർമ്മിക്കാൻ ഗംഭീരവും സ്ഥിരതയുള്ളതും ലളിതവുമായ ഒരു ബേസ്ലൈൻ നൽകുന്നതിന് കിക്ക്സ്റ്റാർട്ട് ബൂട്ട്സ്ട്രാപ്പ്.
സമീപിക്കുക
എലമെന്റ് സെലക്ടറുകൾ മാത്രം ഉപയോഗിച്ച് കുറച്ച് അഭിപ്രായമുള്ള ശൈലികളുള്ള നിരവധി HTML ഘടകങ്ങൾ നൽകിക്കൊണ്ട്, നോർമലൈസ് ചെയ്യുമ്പോൾ റീബൂട്ട് നിർമ്മിക്കുന്നു. അധിക സ്റൈലിംഗ് ക്ലാസുകൾ ഉപയോഗിച്ച് മാത്രമേ ചെയ്യൂ. ഉദാഹരണത്തിന്, ഞങ്ങൾ ചില <table>
ശൈലികൾ ഒരു ലളിതമായ അടിസ്ഥാനത്തിനായി റീബൂട്ട് ചെയ്യുകയും പിന്നീട് .table
, .table-bordered
, എന്നിവയും മറ്റും നൽകുകയും ചെയ്യുന്നു.
റീബൂട്ടിൽ എന്ത് അസാധുവാക്കണമെന്ന് തിരഞ്ഞെടുക്കുന്നതിനുള്ള ഞങ്ങളുടെ മാർഗ്ഗനിർദ്ദേശങ്ങളും കാരണങ്ങളും ഇതാ:
- സ്കേലബിൾ കോംപോണന്റ് സ്പെയ്സിംഗിനായി s-ന്
rem
പകരം s ഉപയോഗിക്കുന്നതിന് ചില ബ്രൗസർ ഡിഫോൾട്ട് മൂല്യങ്ങൾ അപ്ഡേറ്റ് ചെയ്യുക .em
- ഒഴിവാക്കുക
margin-top
. ലംബമായ അരികുകൾ തകർന്നേക്കാം, ഇത് അപ്രതീക്ഷിത ഫലങ്ങൾ നൽകുന്നു. അതിലും പ്രധാനമായി, ഒരൊറ്റ ദിശmargin
ഒരു ലളിതമായ മാനസിക മാതൃകയാണ്. - ഉപകരണ വലുപ്പത്തിലുടനീളം എളുപ്പത്തിൽ സ്കെയിലിംഗിനായി, ബ്ലോക്ക് ഘടകങ്ങൾ
rem
s-ന്margin
s ഉപയോഗിക്കണം. - സാധ്യമാകുമ്പോഴെല്ലാം
font
ഉപയോഗിച്ച് - ബന്ധപ്പെട്ട പ്രോപ്പർട്ടികളുടെ പ്രഖ്യാപനങ്ങൾ പരമാവധി കുറയ്ക്കുക.inherit
CSS വേരിയബിളുകൾ
v5.1.1-ൽ ചേർത്തു
v5.1.1 ഉപയോഗിച്ച്, ഞങ്ങളുടെ @import
എല്ലാ CSS ബണ്ടിലുകളിലുടനീളം ( bootstrap.css
, bootstrap-reboot.css
, കൂടാതെ bootstrap-grid.css
ഉൾപ്പെടുത്തുന്നതിന് എന്നിവയുൾപ്പെടെയുള്ളവ ഞങ്ങൾ സ്റ്റാൻഡേർഡ് ചെയ്തു _root.scss
. ഇത് എല്ലാ ബണ്ടിലുകളിലേക്കും ലെവൽ CSS വേരിയബിളുകൾ ചേർക്കുന്നു :root
, അവയിൽ എത്രയെണ്ണം ആ ബണ്ടിലിൽ ഉപയോഗിച്ചിരിക്കുന്നു എന്നത് പരിഗണിക്കാതെ തന്നെ. ആത്യന്തികമായി Bootstrap 5 തുടരും. കാലക്രമേണ ചേർത്ത കൂടുതൽ CSS വേരിയബിളുകൾ കാണുക.
പേജ് ഡിഫോൾട്ടുകൾ
മികച്ച പേജ്-വൈഡ് ഡിഫോൾട്ടുകൾ <html>
നൽകുന്നതിന് <body>
ഘടകങ്ങളും അപ്ഡേറ്റ് ചെയ്തിരിക്കുന്നു. കൂടുതൽ വ്യക്തമായി:
- ആഗോളതലത്തിൽ എല്ലാ ഘടകങ്ങളിലും സജ്ജീകരിച്ചിരിക്കുന്നു
box-sizing
- ഉൾപ്പെടെ*::before
. പാഡിംഗ് അല്ലെങ്കിൽ ബോർഡർ കാരണം മൂലകത്തിന്റെ പ്രഖ്യാപിത വീതി ഒരിക്കലും കവിയുന്നില്ലെന്ന് ഇത് ഉറപ്പാക്കുന്നു.*::after
border-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,
// 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
ചെയ്ത് വീണ്ടും കംപൈൽ ചെയ്യുക.
CSS വേരിയബിളുകൾ
ബൂട്ട്സ്ട്രാപ്പ് 5 പക്വത പ്രാപിക്കുന്നത് തുടരുന്നതിനാൽ, എപ്പോഴും സാസ് വീണ്ടും കംപൈൽ ചെയ്യാതെ തന്നെ കൂടുതൽ തത്സമയ ഇഷ്ടാനുസൃതമാക്കൽ നൽകുന്നതിനുള്ള ഉപാധിയായി കൂടുതൽ കൂടുതൽ ശൈലികൾ CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് നിർമ്മിക്കപ്പെടും. ഞങ്ങളുടെ സോഴ്സ് സാസ് വേരിയബിളുകൾ എടുത്ത് അവയെ CSS വേരിയബിളുകളാക്കി മാറ്റുക എന്നതാണ് ഞങ്ങളുടെ സമീപനം. അതുവഴി, നിങ്ങൾ CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നില്ലെങ്കിലും, നിങ്ങൾക്ക് ഇപ്പോഴും Sass-ന്റെ എല്ലാ ശക്തിയും ഉണ്ട്. ഇത് ഇപ്പോഴും പുരോഗതിയിലാണ്, പൂർണ്ണമായി നടപ്പിലാക്കാൻ സമയമെടുക്കും.
ഉദാഹരണത്തിന്, :root
പൊതുവായ <body>
ശൈലികൾക്കായി ഈ CSS വേരിയബിളുകൾ പരിഗണിക്കുക:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
പ്രായോഗികമായി, ആ വേരിയബിളുകൾ ഇതുപോലെ റീബൂട്ടിൽ പ്രയോഗിക്കുന്നു:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-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>
തലക്കെട്ടുകളും ഖണ്ഡികകളും
എല്ലാ ശീർഷക ഘടകങ്ങളും-ഉദാ, <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
. ഞങ്ങൾ ഓണും ഘടകങ്ങളും പുനഃസജ്ജീകരിച്ചു padding-left
.<ul>
<ol>
- എല്ലാ ലിസ്റ്റുകളുടെയും മുകളിലെ മാർജിൻ നീക്കം ചെയ്തിരിക്കുന്നു
- അവരുടെ താഴെയുള്ള മാർജിൻ നോർമലൈസ് ചെയ്തു
- നെസ്റ്റഡ് ലിസ്റ്റുകൾക്ക് താഴെയുള്ള മാർജിൻ ഇല്ല
- ഈ രീതിയിൽ, അവർക്ക് കൂടുതൽ തുല്യമായ രൂപം ലഭിക്കും
- കൂടുതൽ ലിസ്റ്റ് ഇനങ്ങൾ പിന്തുടരുമ്പോൾ പ്രത്യേകിച്ചും
- ഇടത് പാഡിംഗും പുനഃസജ്ജീകരിച്ചു
- ഓർഡർ ചെയ്ത ഒരു ലിസ്റ്റ് ഇതാ
- കുറച്ച് ലിസ്റ്റ് ഇനങ്ങൾക്കൊപ്പം
- മൊത്തത്തിലുള്ള അതേ രൂപമാണ് ഇതിന്
- മുമ്പത്തെ ക്രമപ്പെടുത്താത്ത പട്ടിക പോലെ
ലളിതമായ ശൈലി, വ്യക്തമായ ശ്രേണി, മികച്ച സ്പെയ്സിംഗ് എന്നിവയ്ക്കായി, വിവരണ ലിസ്റ്റുകൾ അപ്ഡേറ്റ് ചെയ്തു margin
. ലേക്ക് <dd>
പുനഃസജ്ജമാക്കുകയും ചേർക്കുകയും ചെയ്യുക . കൾ ബോൾഡാണ് .margin-left
0
margin-bottom: .5rem
<dt>
- വിവരണ ലിസ്റ്റുകൾ
- നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.
- കാലാവധി
- പദത്തിന്റെ നിർവചനം.
- അതേ പദത്തിനുള്ള രണ്ടാമത്തെ നിർവചനം.
- മറ്റൊരു പദം
- ഈ മറ്റൊരു പദത്തിന്റെ നിർവ്വചനം.
ഇൻലൈൻ കോഡ്
ഉപയോഗിച്ച് കോഡിന്റെ ഇൻലൈൻ സ്നിപ്പെറ്റുകൾ പൊതിയുക <code>
. HTML ആംഗിൾ ബ്രാക്കറ്റുകളിൽ നിന്ന് രക്ഷപ്പെടുന്നത് ഉറപ്പാക്കുക.
<section>
ഇൻലൈൻ ആയി പൊതിയണം.
For example, <code><section></code> should be wrapped as inline.
കോഡ് ബ്ലോക്കുകൾ
<pre>
കോഡിന്റെ ഒന്നിലധികം വരികൾക്കായി s ഉപയോഗിക്കുക . ഒരിക്കൽ കൂടി, ശരിയായ റെൻഡറിങ്ങിനായി കോഡിലെ ഏതെങ്കിലും ആംഗിൾ ബ്രാക്കറ്റുകളിൽ നിന്ന് രക്ഷപ്പെടുന്നത് ഉറപ്പാക്കുക. മൂലകത്തെ അതിന്റെ നീക്കം ചെയ്യാനും അതിനായി യൂണിറ്റുകൾ ഉപയോഗിക്കാനും <pre>
പുനഃസജ്ജീകരിച്ചിരിക്കുന്നു .margin-top
rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
വേരിയബിളുകൾ
വേരിയബിളുകൾ സൂചിപ്പിക്കാൻ <var>
ടാഗ് ഉപയോഗിക്കുക.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ഉപയോക്തൃ ഇൻപുട്ട്
<kbd>
കീബോർഡ് വഴി സാധാരണയായി നൽകുന്ന ഇൻപുട്ട് സൂചിപ്പിക്കാൻ ഉപയോഗിക്കുക .
ക്രമീകരണങ്ങൾ എഡിറ്റുചെയ്യാൻ, അമർത്തുക ctrl + ,
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>
ടാഗ് ഉപയോഗിക്കുക.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
പട്ടികകൾ
ടേബിളുകൾ ശൈലികളിലേക്ക് ചെറുതായി ക്രമീകരിച്ചിരിക്കുന്നു <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)
.
ഈ മാറ്റങ്ങളും മറ്റും താഴെ പ്രദർശിപ്പിച്ചിരിക്കുന്നു.
തീയതിയും വർണ്ണവും ഇൻപുട്ട് പിന്തുണ
സഫാരി പോലുള്ള എല്ലാ ബ്രൗസറുകളും തീയതി ഇൻപുട്ടുകളെ പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നില്ലെന്ന് ഓർമ്മിക്കുക .
ബട്ടണുകളിലെ പോയിന്ററുകൾ
role="button"
സ്ഥിരസ്ഥിതി കഴ്സർ എന്നതിലേക്ക് മാറ്റുന്നതിനുള്ള ഒരു മെച്ചപ്പെടുത്തൽ റീബൂട്ടിൽ ഉൾപ്പെടുന്നു pointer
. ഘടകങ്ങൾ സംവേദനാത്മകമാണെന്ന് സൂചിപ്പിക്കാൻ സഹായിക്കുന്ന ഘടകങ്ങളിലേക്ക് ഈ ആട്രിബ്യൂട്ട് ചേർക്കുക. <button>
സ്വന്തം cursor
മാറ്റം വരുത്തുന്ന ഘടകങ്ങൾക്ക് ഈ റോൾ ആവശ്യമില്ല .
<span role="button" tabindex="0">Non-button element button</span>
മറ്റ് ഘടകങ്ങൾ
വിലാസം
എന്നതിൽ നിന്ന് ബ്രൗസർ ഡിഫോൾട്ട് പുനഃസജ്ജമാക്കാൻ ഘടകം <address>
അപ്ഡേറ്റ് ചെയ്തു . ഇപ്പോൾ പാരമ്പര്യമായി ലഭിച്ചതും ചേർത്തിട്ടുണ്ട്. ഏറ്റവും അടുത്തുള്ള പൂർവ്വികരെ (അല്ലെങ്കിൽ മുഴുവൻ ജോലിയും) ബന്ധപ്പെടാനുള്ള വിവരങ്ങൾ അവതരിപ്പിക്കുന്നതിനാണ് s. ഉപയോഗിച്ച് വരികൾ അവസാനിപ്പിച്ച് ഫോർമാറ്റിംഗ് സംരക്ഷിക്കുക .font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 മുഴുവൻ പേര്
[email protected]
ബ്ലോക്ക്ക്വോട്ട്
ബ്ലോക്ക്ക്വോട്ടുകളിലെ ഡിഫോൾട്ട് margin
ആണ് , അതിനാൽ മറ്റ് ഘടകങ്ങളുമായി കൂടുതൽ സ്ഥിരതയുള്ള ഒന്നിലേക്ക് 1em 40px
ഞങ്ങൾ അത് പുനഃസജ്ജമാക്കുന്നു .0 0 1rem
ഒരു ബ്ലോക്ക്ക്വോട്ട് എലമെന്റിൽ അടങ്ങിയിരിക്കുന്ന അറിയപ്പെടുന്ന ഉദ്ധരണി.
ഉറവിട ശീർഷകത്തിൽ പ്രശസ്തനായ ഒരാൾ
ഇൻലൈൻ ഘടകങ്ങൾ
<abbr>
ഖണ്ഡിക വാചകങ്ങൾക്കിടയിൽ വേറിട്ടുനിൽക്കാൻ മൂലകത്തിന് അടിസ്ഥാന ശൈലി ലഭിക്കുന്നു .
സംഗ്രഹം
സംഗ്രഹത്തിലെ ഡിഫോൾട്ട് 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
ക്ലാസ് ഉപയോഗിക്കുക.