ਮੁੜ - ਚਾਲੂ

ਰੀਬੂਟ, ਇੱਕ ਸਿੰਗਲ ਫਾਈਲ ਵਿੱਚ ਤੱਤ-ਵਿਸ਼ੇਸ਼ CSS ਤਬਦੀਲੀਆਂ ਦਾ ਸੰਗ੍ਰਹਿ, ਇੱਕ ਸ਼ਾਨਦਾਰ, ਇਕਸਾਰ, ਅਤੇ ਸਧਾਰਨ ਆਧਾਰਲਾਈਨ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਬੂਟਸਟਰੈਪ ਨੂੰ ਕਿੱਕਸਟਾਰਟ ਕਰੋ।

ਪਹੁੰਚ

ਰੀਬੂਟ ਸਧਾਰਣ ਬਣਾਉਣ 'ਤੇ ਬਣਦਾ ਹੈ, ਸਿਰਫ ਐਲੀਮੈਂਟ ਚੋਣਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਈ HTML ਐਲੀਮੈਂਟਸ ਨੂੰ ਕੁਝ ਹੱਦ ਤੱਕ ਵਿਚਾਰ ਵਾਲੀਆਂ ਸ਼ੈਲੀਆਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਵਾਧੂ ਸਟਾਈਲਿੰਗ ਸਿਰਫ ਕਲਾਸਾਂ ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ <table>ਇੱਕ ਸਰਲ ਬੇਸਲਾਈਨ ਲਈ ਕੁਝ ਸਟਾਈਲ ਰੀਬੂਟ ਕਰਦੇ ਹਾਂ ਅਤੇ ਬਾਅਦ ਵਿੱਚ .table, .table-bordered, ਅਤੇ ਹੋਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ।

ਇਹ ਚੁਣਨ ਲਈ ਸਾਡੇ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਅਤੇ ਕਾਰਨ ਹਨ ਕਿ ਰੀਬੂਟ ਵਿੱਚ ਕੀ ਓਵਰਰਾਈਡ ਕਰਨਾ ਹੈ:

ਸਕੇਲੇਬਲ ਕੰਪੋਨੈਂਟ ਸਪੇਸਿੰਗ ਲਈ rems ਦੀ ਬਜਾਏ s ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਮੁੱਲਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰੋ ।em
ਬਚੋ margin-top. ਵਰਟੀਕਲ ਹਾਸ਼ੀਏ ਨੂੰ ਢਹਿ-ਢੇਰੀ ਕਰ ਸਕਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਅਚਾਨਕ ਨਤੀਜੇ ਨਿਕਲਦੇ ਹਨ। ਵਧੇਰੇ ਮਹੱਤਵਪੂਰਨ ਹਾਲਾਂਕਿ, ਦੀ ਇੱਕ ਸਿੰਗਲ ਦਿਸ਼ਾ marginਇੱਕ ਸਧਾਰਨ ਮਾਨਸਿਕ ਮਾਡਲ ਹੈ.
ਡਿਵਾਈਸ ਦੇ ਆਕਾਰਾਂ ਵਿੱਚ ਆਸਾਨ ਸਕੇਲਿੰਗ ਲਈ, ਬਲਾਕ ਐਲੀਮੈਂਟਸ ਨੂੰ rems ਲਈ margins ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ fontਵਰਤਦੇ ਹੋਏ, -ਸੰਬੰਧਿਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਘੋਸ਼ਣਾ ਨੂੰ ਘੱਟੋ-ਘੱਟ ਰੱਖੋ ।inherit

ਪੰਨਾ ਪੂਰਵ-ਨਿਰਧਾਰਤ

ਅਤੇ ਤੱਤ ਬਿਹਤਰ ਪੰਨਾ-ਵਿਆਪਕ ਡਿਫੌਲਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਅੱਪਡੇਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ <html>। <body>ਹੋਰ ਖਾਸ ਤੌਰ 'ਤੇ:

ਗਲੋਬਲ ਤੌਰ ' box-sizingਤੇ ਹਰ ਤੱਤ ਉੱਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ—ਸਮੇਤ *::beforeਅਤੇ *::after, ਤੋਂ border-box। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੱਤ ਦੀ ਘੋਸ਼ਿਤ ਚੌੜਾਈ ਪੈਡਿੰਗ ਜਾਂ ਬਾਰਡਰ ਦੇ ਕਾਰਨ ਕਦੇ ਵੀ ਵੱਧ ਨਾ ਜਾਵੇ।
'ਤੇ ਕੋਈ ਅਧਾਰ font-sizeਘੋਸ਼ਿਤ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਹੈ <html>, ਪਰ 16pxਮੰਨਿਆ ਜਾਂਦਾ ਹੈ (ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ)। ਉਪਭੋਗਤਾ ਤਰਜੀਹਾਂ ਦਾ ਆਦਰ ਕਰਦੇ ਹੋਏ ਅਤੇ ਵਧੇਰੇ ਪਹੁੰਚਯੋਗ ਪਹੁੰਚ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋਏ ਮੀਡੀਆ ਸਵਾਲਾਂ ਰਾਹੀਂ ਆਸਾਨ ਜਵਾਬਦੇਹ ਟਾਈਪ-ਸਕੇਲਿੰਗ ਲਈ font-size: 1remਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ।<body>
ਇਹ <body>ਇੱਕ ਗਲੋਬਲ font-family, line-heightਅਤੇ text-align. ਇਹ ਬਾਅਦ ਵਿੱਚ ਫੌਂਟ ਅਸੰਗਤਤਾਵਾਂ ਨੂੰ ਰੋਕਣ ਲਈ ਕੁਝ ਫਾਰਮ ਤੱਤਾਂ ਦੁਆਰਾ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਸੁਰੱਖਿਆ ਲਈ, <body>ਨੇ ਇੱਕ ਘੋਸ਼ਿਤ ਕੀਤਾ ਹੈ background-color, ਨੂੰ ਡਿਫਾਲਟ ਹੈ #fff।

ਨੇਟਿਵ ਫੌਂਟ ਸਟੈਕ

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਵੈੱਬ ਫੌਂਟਾਂ (Helvetica Neue, Helvetica, and Arial) ਨੂੰ ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਹੈ ਅਤੇ ਹਰੇਕ ਡਿਵਾਈਸ ਅਤੇ OS 'ਤੇ ਸਰਵੋਤਮ ਟੈਕਸਟ ਰੈਂਡਰਿੰਗ ਲਈ "ਨੇਟਿਵ ਫੌਂਟ ਸਟੈਕ" ਨਾਲ ਬਦਲ ਦਿੱਤਾ ਗਿਆ ਹੈ। ਇਸ ਸਮੈਸ਼ਿੰਗ ਮੈਗਜ਼ੀਨ ਲੇਖ ਵਿੱਚ ਮੂਲ ਫੌਂਟ ਸਟੈਕ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ।

$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;

ਨੋਟ ਕਰੋ ਕਿ ਕਿਉਂਕਿ ਫੌਂਟ ਸਟੈਕ ਵਿੱਚ ਇਮੋਜੀ ਫੌਂਟ ਸ਼ਾਮਲ ਹਨ, ਬਹੁਤ ਸਾਰੇ ਆਮ ਚਿੰਨ੍ਹ/ਡਿੰਗਬੈਟ ਯੂਨੀਕੋਡ ਅੱਖਰ ਬਹੁ-ਰੰਗੀ ਪਿਕਟੋਗ੍ਰਾਫ ਦੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕੀਤੇ ਜਾਣਗੇ। 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.

ਸਾਰੀਆਂ ਸੂਚੀਆਂ ਦਾ ਸਿਖਰਲਾ ਹਾਸ਼ੀਏ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ
ਅਤੇ ਉਹਨਾਂ ਦੇ ਹੇਠਲੇ ਹਾਸ਼ੀਏ ਨੂੰ ਆਮ ਬਣਾਇਆ ਗਿਆ
ਨੇਸਟਡ ਸੂਚੀਆਂ ਦਾ ਕੋਈ ਹੇਠਲਾ ਹਾਸ਼ੀਆ ਨਹੀਂ ਹੈ
- ਇਸ ਤਰ੍ਹਾਂ ਉਨ੍ਹਾਂ ਦੀ ਦਿੱਖ ਹੋਰ ਵੀ ਬਰਾਬਰ ਹੈ
- ਖਾਸ ਤੌਰ 'ਤੇ ਜਦੋਂ ਹੋਰ ਸੂਚੀ ਆਈਟਮਾਂ ਦੀ ਪਾਲਣਾ ਕੀਤੀ ਜਾਂਦੀ ਹੈ
ਖੱਬਾ ਪੈਡਿੰਗ ਵੀ ਰੀਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ

ਇੱਥੇ ਇੱਕ ਆਰਡਰ ਕੀਤੀ ਸੂਚੀ ਹੈ
ਕੁਝ ਸੂਚੀ ਆਈਟਮਾਂ ਦੇ ਨਾਲ
ਇਸ ਦੀ ਸਮੁੱਚੀ ਦਿੱਖ ਇੱਕੋ ਜਿਹੀ ਹੈ
ਪਿਛਲੀ ਅਣ-ਕ੍ਰਮਬੱਧ ਸੂਚੀ ਦੇ ਰੂਪ ਵਿੱਚ

ਸਰਲ ਸ਼ੈਲੀ, ਸਪਸ਼ਟ ਲੜੀ ਅਤੇ ਬਿਹਤਰ ਵਿੱਥ ਲਈ, ਵਰਣਨ ਸੂਚੀਆਂ ਨੇ margins. <dd>ਨੂੰ ਰੀਸੈਟ margin-leftਕਰੋ 0ਅਤੇ ਜੋੜੋ margin-bottom: .5rem. <dt>s ਬੋਲਡ ਹਨ .

ਵਰਣਨ ਸੂਚੀਆਂ: ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।
ਮਿਆਦ: ਮਿਆਦ ਲਈ ਪਰਿਭਾਸ਼ਾ।; ਉਸੇ ਮਿਆਦ ਲਈ ਇੱਕ ਦੂਜੀ ਪਰਿਭਾਸ਼ਾ।
ਇੱਕ ਹੋਰ ਮਿਆਦ: ਇਸ ਹੋਰ ਮਿਆਦ ਲਈ ਪਰਿਭਾਸ਼ਾ.

ਪਹਿਲਾਂ ਤੋਂ ਫਾਰਮੈਟ ਕੀਤਾ ਟੈਕਸਟ

<pre>ਤੱਤ ਨੂੰ ਹਟਾਉਣ ਲਈ ਰੀਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਇਸਦੇ ਲਈ ਯੂਨਿਟਾਂ ਦੀ margin-topਵਰਤੋਂ ਕਰੋ ।remmargin-bottom

.ਉਦਾਹਰਨ-ਤੱਤ {
  ਹਾਸ਼ੀਏ-ਤਲ: 1rem;
}

ਟੇਬਲ

<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).

ਇਹ ਬਦਲਾਅ, ਅਤੇ ਹੋਰ, ਹੇਠਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਗਏ ਹਨ।

ਉਦਾਹਰਨ ਦੰਤਕਥਾ

ਉਦਾਹਰਨ ਇੰਪੁੱਟ

ਉਦਾਹਰਨ ਚੁਣੋ

ਇਸ ਚੈਕਬਾਕਸ 'ਤੇ ਨਿਸ਼ਾਨ ਲਗਾਓ

ਵਿਕਲਪ ਇੱਕ ਇਹ ਅਤੇ ਉਹ ਹੈ ਵਿਕਲਪ ਦੋ ਕੁਝ ਹੋਰ ਹੈ ਜੋ ਇਹਨਾਂ ਫੈਂਸੀ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਦੀ ਲਪੇਟਣ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨ ਲਈ ਬਹੁਤ ਲੰਬਾ ਹੈ। ਵਿਕਲਪ ਤਿੰਨ ਅਯੋਗ ਹੈ

ਉਦਾਹਰਨ ਟੈਕਸਟੇਰੀਆ

ਉਦਾਹਰਨ ਮਿਤੀ

ਉਦਾਹਰਨ ਸਮਾਂ

ਉਦਾਹਰਨ ਆਉਟਪੁੱਟ 100

ਬਟਨਾਂ 'ਤੇ ਪੁਆਇੰਟਰ

ਰੀਬੂਟ ਵਿੱਚ 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>।

Twitter, Inc.
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ਹਾਲਾਂਕਿ [hidden]IE10 ਦੁਆਰਾ ਮੂਲ ਰੂਪ ਵਿੱਚ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ, ਸਾਡੇ CSS ਵਿੱਚ ਸਪੱਸ਼ਟ ਘੋਸ਼ਣਾ ਉਸ ਸਮੱਸਿਆ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਹੋ ਜਾਂਦੀ ਹੈ।

<input type="text" hidden>

jQuery ਅਸੰਗਤਤਾ

[hidden]jQuery ਦੇ $(...).hide()ਅਤੇ $(...).show()ਤਰੀਕਿਆਂ ਨਾਲ ਅਨੁਕੂਲ ਨਹੀਂ ਹੈ। ਇਸਲਈ, ਅਸੀਂ ਵਰਤਮਾਨ ਵਿੱਚ ਤੱਤ ਦੇ [hidden]ਪ੍ਰਬੰਧਨ ਲਈ ਹੋਰ ਤਕਨੀਕਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਾਂ।display

ਕਿਸੇ ਤੱਤ ਦੀ ਦਿੱਖ ਨੂੰ ਸਿਰਫ਼ ਟੌਗਲ ਕਰਨ ਲਈ, ਮਤਲਬ ਕਿ ਇਸ displayਨੂੰ ਸੋਧਿਆ ਨਹੀਂ ਗਿਆ ਹੈ ਅਤੇ ਤੱਤ ਅਜੇ ਵੀ ਦਸਤਾਵੇਜ਼ ਦੇ ਪ੍ਰਵਾਹ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ, ਇਸਦੀ ਬਜਾਏ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।.invisible