ਮੁੜ - ਚਾਲੂ
ਰੀਬੂਟ, ਇੱਕ ਸਿੰਗਲ ਫਾਈਲ ਵਿੱਚ ਤੱਤ-ਵਿਸ਼ੇਸ਼ CSS ਤਬਦੀਲੀਆਂ ਦਾ ਸੰਗ੍ਰਹਿ, ਇੱਕ ਸ਼ਾਨਦਾਰ, ਇਕਸਾਰ, ਅਤੇ ਸਧਾਰਨ ਆਧਾਰਲਾਈਨ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਬੂਟਸਟਰੈਪ ਨੂੰ ਕਿੱਕਸਟਾਰਟ ਕਰੋ।
ਪਹੁੰਚ
ਰੀਬੂਟ ਸਧਾਰਣ ਬਣਾਉਣ 'ਤੇ ਬਣਦਾ ਹੈ, ਸਿਰਫ ਐਲੀਮੈਂਟ ਚੋਣਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਈ HTML ਐਲੀਮੈਂਟਸ ਨੂੰ ਕੁਝ ਹੱਦ ਤੱਕ ਵਿਚਾਰ ਵਾਲੀਆਂ ਸ਼ੈਲੀਆਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਵਾਧੂ ਸਟਾਈਲਿੰਗ ਸਿਰਫ ਕਲਾਸਾਂ ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ <table>
ਇੱਕ ਸਰਲ ਬੇਸਲਾਈਨ ਲਈ ਕੁਝ ਸਟਾਈਲ ਰੀਬੂਟ ਕਰਦੇ ਹਾਂ ਅਤੇ ਬਾਅਦ ਵਿੱਚ .table
, .table-bordered
, ਅਤੇ ਹੋਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ।
ਇਹ ਚੁਣਨ ਲਈ ਸਾਡੇ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਅਤੇ ਕਾਰਨ ਹਨ ਕਿ ਰੀਬੂਟ ਵਿੱਚ ਕੀ ਓਵਰਰਾਈਡ ਕਰਨਾ ਹੈ:
- ਸਕੇਲੇਬਲ ਕੰਪੋਨੈਂਟ ਸਪੇਸਿੰਗ ਲਈ
rem
s ਦੀ ਬਜਾਏ s ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਮੁੱਲਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰੋ ।em
- ਬਚੋ
margin-top
. ਵਰਟੀਕਲ ਹਾਸ਼ੀਏ ਨੂੰ ਢਹਿ-ਢੇਰੀ ਕਰ ਸਕਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਅਚਾਨਕ ਨਤੀਜੇ ਨਿਕਲਦੇ ਹਨ। ਵਧੇਰੇ ਮਹੱਤਵਪੂਰਨ ਹਾਲਾਂਕਿ, ਦੀ ਇੱਕ ਸਿੰਗਲ ਦਿਸ਼ਾmargin
ਇੱਕ ਸਧਾਰਨ ਮਾਨਸਿਕ ਮਾਡਲ ਹੈ. - ਡਿਵਾਈਸ ਦੇ ਆਕਾਰਾਂ ਵਿੱਚ ਆਸਾਨ ਸਕੇਲਿੰਗ ਲਈ, ਬਲਾਕ ਐਲੀਮੈਂਟਸ ਨੂੰ
rem
s ਲਈmargin
s ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। - ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ
font
ਵਰਤਦੇ ਹੋਏ, -ਸੰਬੰਧਿਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਘੋਸ਼ਣਾ ਨੂੰ ਘੱਟੋ-ਘੱਟ ਰੱਖੋ ।inherit
ਪੰਨਾ ਪੂਰਵ-ਨਿਰਧਾਰਤ
ਅਤੇ ਤੱਤ ਬਿਹਤਰ ਪੰਨਾ-ਵਿਆਪਕ ਡਿਫੌਲਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਅੱਪਡੇਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ <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
।
ਨੇਟਿਵ ਫੌਂਟ ਸਟੈਕ
ਬੂਟਸਟਰੈਪ ਹਰੇਕ ਡਿਵਾਈਸ ਅਤੇ OS 'ਤੇ ਸਰਵੋਤਮ ਟੈਕਸਟ ਰੈਂਡਰਿੰਗ ਲਈ "ਨੇਟਿਵ ਫੌਂਟ ਸਟੈਕ" ਜਾਂ "ਸਿਸਟਮ ਫੌਂਟ ਸਟੈਕ" ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ ਸਿਸਟਮ ਫੌਂਟ ਖਾਸ ਤੌਰ 'ਤੇ ਅੱਜ ਦੇ ਯੰਤਰਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖ ਕੇ ਡਿਜ਼ਾਈਨ ਕੀਤੇ ਗਏ ਹਨ, ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਬਿਹਤਰ ਰੈਂਡਰਿੰਗ, ਵੇਰੀਏਬਲ ਫੌਂਟ ਸਮਰਥਨ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦੇ ਨਾਲ। ਇਸ ਸਮੈਸ਼ਿੰਗ ਮੈਗਜ਼ੀਨ ਲੇਖ ਵਿੱਚ ਮੂਲ ਫੌਂਟ ਸਟੈਕ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ।
$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;
ਨੋਟ ਕਰੋ ਕ��� ਕਿਉਂਕਿ ਫੌਂਟ ਸਟੈਕ ਵਿੱਚ ਇਮੋਜੀ ਫੌਂਟ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ, ਬਹੁਤ ਸਾਰੇ ਆਮ ਚਿੰਨ੍ਹ/ਡਿੰਗਬੈਟ ਯੂਨੀਕੋਡ ਅੱਖਰ ਬਹੁ-ਰੰਗਦਾਰ ਪਿਕਟੋਗ੍ਰਾਫਾਂ ਵਜੋਂ ਰੈਂਡਰ ਕੀਤੇ ਜਾਣਗੇ। color
ਬ੍ਰਾਊਜ਼ਰ/ਪਲੇਟਫਾਰਮ ਦੇ ਮੂਲ ਇਮੋਜੀ ਫੌਂਟ ਵਿੱਚ ਵਰਤੀ ਗਈ ਸ਼ੈਲੀ ਦੇ ਆਧਾਰ 'ਤੇ, ਉਹਨਾਂ ਦੀ ਦਿੱਖ ਵੱਖਰੀ ਹੋਵੇਗੀ, ਅਤੇ ਉਹ ਕਿਸੇ ਵੀ CSS ਸਟਾਈਲ ਦੁਆਰਾ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੋਣਗੇ ।
ਇਹ ਪੂਰੇ ਬੂਟਸਟਰੈਪ 'ਤੇ 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
. ਅਸੀਂ padding-left
ਆਨ <ul>
ਅਤੇ <ol>
ਐਲੀਮੈਂਟਸ ਨੂੰ ਵੀ ਰੀਸੈਟ ਕੀਤਾ ਹੈ।
- ਸਾਰੀਆਂ ਸੂਚੀਆਂ ਦਾ ਸਿਖਰਲਾ ਹਾਸ਼ੀਏ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ
- ਅਤੇ ਉਹਨਾਂ ਦੇ ਹੇਠਲੇ ਹਾਸ਼ੀਏ ਨੂੰ ਆਮ ਬਣਾਇਆ ਗਿਆ
- ਨੇਸਟਡ ਸੂਚੀਆਂ ਦਾ ਕੋਈ ਹੇਠਲਾ ਹਾਸ਼ੀਆ ਨਹੀਂ ਹੈ
- ਇਸ ਤਰ੍ਹਾਂ ਉਨ੍ਹਾਂ ਦੀ ਦਿੱਖ ਹੋਰ ਵੀ ਬਰਾਬਰ ਹੈ
- ਖਾਸ ਤੌਰ 'ਤੇ ਜਦੋਂ ਹੋਰ ਸੂਚੀ ਆਈਟਮਾਂ ਦੀ ਪਾਲਣਾ ਕੀਤੀ ਜਾਂਦੀ ਹੈ
- ਖੱਬਾ ਪੈਡਿੰਗ ਵੀ ਰੀਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ
- ਇੱਥੇ ਇੱਕ ਆਰਡਰ ਕੀਤੀ ਸੂਚੀ ਹੈ
- ਕੁਝ ਸੂਚੀ ਆਈਟਮਾਂ ਦੇ ਨਾਲ
- ਇਸ ਦੀ ਸਮੁੱਚੀ ਦਿੱਖ ਇੱਕੋ ਜਿਹੀ ਹੈ
- ਪਿਛਲੀ ਅਣ-ਕ੍ਰਮਬੱਧ ਸੂਚੀ ਦੇ ਰੂਪ ਵਿੱਚ
ਸਰਲ ਸ਼ੈਲੀ, ਸਪਸ਼ਟ ਲੜੀ ਅਤੇ ਬਿਹਤਰ ਵਿੱਥ ਲਈ, ਵਰਣਨ ਸੂਚੀਆਂ ਨੇ margin
s. <dd>
ਨੂੰ ਰੀਸੈਟ margin-left
ਕਰੋ 0
ਅਤੇ ਜੋੜੋ margin-bottom: .5rem
. <dt>
s ਬੋਲਡ ਹਨ .
- ਵਰਣਨ ਸੂਚੀਆਂ
- ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।
- ਮਿਆਦ
- ਮਿਆਦ ਲਈ ਪਰਿਭਾਸ਼ਾ।
- ਉਸੇ ਮਿਆਦ ਲਈ ਇੱਕ ਦੂਜੀ ਪਰਿਭਾਸ਼ਾ।
- ਇੱਕ ਹੋਰ ਮਿਆਦ
- ਇਸ ਹੋਰ ਮਿਆਦ ਲਈ ਪਰਿਭਾਸ਼ਾ.
ਇਨਲਾਈਨ ਕੋਡ
ਕੋਡ ਦੇ ਇਨਲਾਈਨ ਸਨਿੱਪਟ ਨੂੰ ਨਾਲ ਲਪੇਟੋ <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>
ਟੇਬਲਾਂ ਨੂੰ ਸਟਾਈਲ s, ਸਮੇਟਣ ਵਾਲੀਆਂ ਬਾਰਡਰਾਂ ਲਈ ਥੋੜ੍ਹਾ ਐਡਜਸਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ , ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ ਕਿ ਉਹ text-align
ਸਾਰੇ ਪਾਸੇ ਇਕਸਾਰ ਹੋਣ। ਬਾਰਡਰ, ਪੈਡਿੰਗ, ਅਤੇ ਹੋਰ ਲਈ ਵਾਧੂ ਬਦਲਾਅ ਕਲਾਸ ਦੇ.table
ਨਾਲ ਆਉਂਦੇ ਹਨ ।
ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ |
---|---|---|---|
ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ |
ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ |
ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ |
ਫਾਰਮ
ਸਰਲ ਬੇਸ ਸਟਾਈਲ ਲਈ ਕਈ ਫਾਰਮ ਐਲੀਮੈਂਟਸ ਨੂੰ ਰੀਬੂਟ ਕੀਤਾ ਗਿਆ ਹੈ। ਇੱਥੇ ਕੁਝ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਤਬਦੀਲੀਆਂ ਹਨ:
<fieldset>
s ਕੋਲ ਕੋਈ ਬਾਰਡਰ, ਪੈਡਿੰਗ ਜਾਂ ਹਾਸ਼ੀਏ ਨਹੀਂ ਹਨ ਇਸਲਈ ਉਹਨਾਂ ਨੂੰ ਵਿਅਕਤੀਗਤ ਇਨਪੁਟਸ ਜਾਂ ਇਨਪੁਟਸ ਦੇ ਸਮੂਹਾਂ ਲਈ ਆਸਾਨੀ ਨਾਲ ਰੈਪਰ ਵਜੋਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।<legend>
s, ਫੀਲਡਸੈੱਟਾਂ ਵਾਂਗ, ਨੂੰ ਵੀ ਇੱਕ ਕਿਸਮ ਦੇ ਸਿਰਲੇਖ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਰੀਸਟਾਇਲ ਕੀਤਾ ਗਿਆ ਹੈ।<label>
s ਨੂੰ ਲਾਗੂdisplay: inline-block
ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦੇਣ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆmargin
ਹੈ।<input>
s,<select>
s,<textarea>
s, ਅਤੇ<button>
s ਨੂੰ ਜਿਆਦਾਤਰ Normalize ਦੁਆਰਾ ਸੰਬੋਧਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਰੀਬੂਟ ਉਹਨਾਂmargin
ਅਤੇ ਸੈੱਟਾਂline-height: inherit
ਨੂੰ ਵੀ ਹਟਾ ਦਿੰਦਾ ਹੈ।<textarea>
s ਨੂੰ ਸਿਰਫ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਮੁੜ ਆਕਾਰ ਦੇਣ ਯੋਗ ਹੋਣ ਲਈ ਸੰਸ਼ੋਧਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਕਿਉਂਕਿ ਹਰੀਜੱਟਲ ਰੀਸਾਈਜ਼ਿੰਗ ਅਕਸਰ ਪੇਜ ਲੇਆਉਟ ਨੂੰ "ਬ੍ਰੇਕ" ਕਰਦਾ ਹੈ।<button>
s ਅਤੇ<input>
ਬਟਨ ਦੇ ਤੱਤ ਹੁੰਦੇ ਹਨcursor: pointer
ਜਦੋਂ:not(:disabled)
.
ਇਹ ਬਦਲਾਅ, ਅਤੇ ਹੋਰ, ਹੇਠਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਗਏ ਹਨ।
ਮਿਤੀ ਅਤੇ ਰੰਗ ਇੰਪੁੱਟ ਸਮਰਥਨ
ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ ਮਿਤੀ ਇਨਪੁੱਟ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰਾਂ, ਅਰਥਾਤ Safari ਦੁਆਰਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।
ਬਟਨਾਂ 'ਤੇ ਪੁਆਇੰਟਰ
ਰੀਬੂਟ ਵਿੱਚ role="button"
ਡਿਫਾਲਟ ਕਰਸਰ ਨੂੰ ਵਿੱਚ ਬਦਲਣ ਲਈ ਇੱਕ ਸੁਧਾਰ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ pointer
। ਤੱਤ ਇੰਟਰਐਕਟਿਵ ਹਨ ਇਹ ਦਰਸਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਤੱਤਾਂ ਵਿੱਚ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ। <button>
ਇਹ ਭੂਮਿਕਾ ਉਹਨਾਂ ਤੱਤਾਂ ਲਈ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ , ਜੋ ਆਪਣੀ ਖੁਦ ਦੀ cursor
ਤਬਦੀਲੀ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ।
<span role="button" tabindex="0">Non-button element button</span>
ਫੁਟਕਲ ਤੱਤ
ਪਤਾ
ਐਲੀਮੈਂਟ ਨੂੰ <address>
ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ font-style
ਤੋਂ ਤੱਕ italic
ਰੀਸੈਟ ਕਰਨ ਲਈ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ ਹੈ normal
। line-height
ਵੀ ਹੁਣ ਵਿਰਾਸਤੀ ਹੈ, ਅਤੇ margin-bottom: 1rem
ਜੋੜਿਆ ਗਿਆ ਹੈ। <address>
s ਨਜ਼ਦੀਕੀ ਪੂਰਵਜ (ਜਾਂ ਕੰਮ ਦੇ ਪੂਰੇ ਸਰੀਰ) ਲਈ ਸੰਪਰਕ ਜਾਣਕਾਰੀ ਪੇਸ਼ ਕਰਨ ਲਈ ਹਨ। ਨਾਲ ਲਾਈਨਾਂ ਨੂੰ ਖਤਮ ਕਰਕੇ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖੋ <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]
jQuery ਦੇ $(...).hide()
ਅਤੇ $(...).show()
ਤਰੀਕਿਆਂ ਨਾਲ ਅਨੁਕੂਲ ਨਹੀਂ ਹੈ। ਇਸਲਈ, ਅਸੀਂ ਵਰਤਮਾਨ ਵਿੱਚ ਤੱਤ ਦੇ [hidden]
ਪ੍ਰਬੰਧਨ ਲਈ ਹੋਰ ਤਕਨੀਕਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਾਂ।display
ਕਿਸੇ ਤੱਤ ਦੀ ਦਿੱਖ ਨੂੰ ਸਿਰਫ਼ ਟੌਗਲ ਕਰਨ ਲਈ, ਮਤਲਬ ਕਿ ਇਸ display
ਨੂੰ ਸੋਧਿਆ ਨਹੀਂ ਗਿਆ ਹੈ ਅਤੇ ਤੱਤ ਅਜੇ ਵੀ ਦਸਤਾਵੇਜ਼ ਦੇ ਪ੍ਰਵਾਹ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ, ਇਸਦੀ ਬਜਾਏ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।.invisible