ਮੁੜ - ਚਾਲੂ

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

ਇਸ ਪੰਨੇ 'ਤੇ

ਪਹੁੰਚ

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

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

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

CSS ਵੇਰੀਏਬਲ

v5.2.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

v5.1.1 ਦੇ ਨਾਲ, ਅਸੀਂ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਸਾਡੇ @importਸਾਰੇ CSS ਬੰਡਲਾਂ (ਸਮੇਤ bootstrap.css, bootstrap-reboot.css, ਅਤੇ bootstrap-grid.css) ਵਿੱਚ ਸਾਡੇ ਲੋੜੀਂਦੇ s ਨੂੰ ਮਾਨਕੀਕ੍ਰਿਤ ਕੀਤਾ ਹੈ _root.scss। ਇਹ ਸਾਰੇ ਬੰਡਲਾਂ ਵਿੱਚ ਲੈਵਲ CSS ਵੇਰੀਏਬਲ ਜੋੜਦਾ :rootਹੈ, ਭਾਵੇਂ ਉਹਨਾਂ ਵਿੱਚੋਂ ਕਿੰਨੇ ਵੀ ਬੰਡਲ ਵਿੱਚ ਵਰਤੇ ਗਏ ਹੋਣ। ਅਖੀਰ ਵਿੱਚ ਬੂਟਸਟਰੈਪ 5 ਸਮੇਂ ਦੇ ਨਾਲ ਜੋੜੀਆਂ ਗਈਆਂ ਹੋਰ CSS ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਦੇਖਣਾ ਜਾਰੀ ਰੱਖੇਗਾ , ਤਾਂ ਜੋ Sass ਨੂੰ ਹਮੇਸ਼ਾ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਨ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਹੋਰ ਰੀਅਲ-ਟਾਈਮ ਅਨੁਕੂਲਤਾ ਪ੍ਰਦਾਨ ਕੀਤੀ ਜਾ ਸਕੇ। ਸਾਡੀ ਪਹੁੰਚ ਸਾਡੇ ਸਰੋਤ Sass ਵੇਰੀਏਬਲ ਨੂੰ ਲੈਣਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ CSS ਵੇਰੀਏਬਲ ਵਿੱਚ ਬਦਲਣਾ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਭਾਵੇਂ ਤੁਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦੇ, ਤੁਹਾਡੇ ਕੋਲ ਅਜੇ ਵੀ Sass ਦੀ ਸਾਰੀ ਸ਼ਕਤੀ ਹੈ। ਇਹ ਅਜੇ ਵੀ ਪ੍ਰਗਤੀ ਵਿੱਚ ਹੈ ਅਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲਾਗੂ ਹੋਣ ਵਿੱਚ ਸਮਾਂ ਲੱਗੇਗਾ।

ਉਦਾਹਰਨ ਲਈ, ਆਮ ਸ਼ੈਲੀਆਂ :rootਲਈ ਇਹਨਾਂ CSS ਵੇਰੀਏਬਲਾਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ:<body>

  @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ਅਤੇ *::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,
  // 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;

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

ਹਰੀਜ਼ੱਟਲ ਨਿਯਮ

<hr>ਤੱਤ ਨੂੰ ਸਰਲ ਬਣਾਇਆ ਗਿਆ ਹੈ । ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਦੇ ਸਮਾਨ, <hr>s ਨੂੰ ਦੁਆਰਾ ਸਟਾਈਲ ਕੀਤਾ ਜਾਂਦਾ border-topਹੈ, ਇੱਕ ਡਿਫੌਲਟ ਹੁੰਦਾ ਹੈ , ਅਤੇ ਉਹਨਾਂ ਦੇ ਦੁਆਰਾ opacity: .25ਆਪਣੇ ਆਪ ਹੀ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਹੁੰਦਾ ਹੈ , ਜਿਸ ਵਿੱਚ ਮਾਤਾ-ਪਿਤਾ ਦੁਆਰਾ ਕਦੋਂ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਉਹਨਾਂ ਨੂੰ ਟੈਕਸਟ, ਬਾਰਡਰ, ਅਤੇ ਧੁੰਦਲਾਪਣ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਸੋਧਿਆ ਜਾ ਸਕਦਾ ਹੈ।border-colorcolorcolor

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>ਐਲੀਮੈਂਟਸ ਨੂੰ ਵੀ ਰੀਸੈਟ ਕੀਤਾ ਹੈ।

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

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

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

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

ਇਨਲਾਈਨ ਕੋਡ

ਕੋਡ ਦੇ ਇਨਲਾਈਨ ਸਨਿੱਪਟ ਨੂੰ ਨਾਲ ਲਪੇਟੋ <code>। HTML ਕੋਣ ਬਰੈਕਟਾਂ ਤੋਂ ਬਚਣਾ ਯਕੀਨੀ ਬਣਾਓ।

ਉਦਾਹਰਨ ਲਈ, <section>ਇਨਲਾਈਨ ਦੇ ਰੂਪ ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ.

html

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

ਕੋਡ ਬਲਾਕ

<pre>ਕੋਡ ਦੀਆਂ ਕਈ ਲਾਈਨਾਂ ਲਈ s ਦੀ ਵਰਤੋਂ ਕਰੋ । ਇੱਕ ਵਾਰ ਫਿਰ, ਸਹੀ ਰੈਂਡਰਿੰਗ ਲਈ ਕੋਡ ਵਿੱਚ ਕਿਸੇ ਵੀ ਕੋਣ ਬਰੈਕਟਾਂ ਤੋਂ ਬਚਣਾ ਯਕੀਨੀ ਬਣਾਓ। <pre>ਤੱਤ ਨੂੰ ਹਟਾਉਣ ਲਈ ਰੀਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਇਸਦੇ ਲਈ ਯੂਨਿਟਾਂ ਦੀ margin-topਵਰਤੋਂ ਕਰੋ ।remmargin-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>ਟੇਬਲਾਂ ਨੂੰ ਸਟਾਈਲ s, ਸਮੇਟਣ ਵਾਲੀਆਂ ਬਾਰਡਰਾਂ ਲਈ ਥੋੜ੍ਹਾ ਐਡਜਸਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ , ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ ਕਿ ਉਹ 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>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).

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

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

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

ਉਦਾਹਰਨ ਈਮੇਲ

ਉਦਾਹਰਨ ਟੈਲੀਫੋਨ

ਉਦਾਹਰਨ url

ਉਦਾਹਰਨ ਨੰਬਰ

ਉਦਾਹਰਨ ਖੋਜ

ਉਦਾਹਰਨ ਰੇਂਜ

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

ਉਦਾਹਰਨ ਚੁਣੋ

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

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

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

ਉਦਾਹਰਨ ਮਿਤੀ

ਉਦਾਹਰਨ ਸਮਾਂ

ਉਦਾਹਰਨ ਪਾਸਵਰਡ

ਉਦਾਹਰਨ ਮਿਤੀ ਸਮਾਂ-ਸਥਾਨਕ

ਉਦਾਹਰਨ ਹਫ਼ਤੇ

ਉਦਾਹਰਨ ਮਹੀਨਾ

ਉਦਾਹਰਨ ਰੰਗ

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

ਮਿਤੀ ਅਤੇ ਰੰਗ ਇੰਪੁੱਟ ਸਮਰਥਨ

ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ ਮਿਤੀ ਇਨਪੁੱਟ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰਾਂ, ਅਰਥਾਤ Safari ਦੁਆਰਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।

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

ਰੀਬੂਟ ਵਿੱਚ role="button"ਡਿਫਾਲਟ ਕਰਸਰ ਨੂੰ ਵਿੱਚ ਬਦਲਣ ਲਈ ਇੱਕ ਸੁਧਾਰ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ pointer। ਤੱਤ ਇੰਟਰਐਕਟਿਵ ਹਨ ਇਹ ਦਰਸਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਤੱਤਾਂ ਵਿੱਚ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ। <button>ਇਹ ਭੂਮਿਕਾ ਉਹਨਾਂ ਤੱਤਾਂ ਲਈ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ , ਜੋ ਆਪਣੀ ਖੁਦ ਦੀ cursorਤਬਦੀਲੀ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ।

ਗੈਰ-ਬਟਨ ਤੱਤ ਬਟਨ

html

<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>ਤੱਤ ਨੂੰ ਪੈਰਾਗ੍ਰਾਫ ਟੈਕਸਟ ਵਿੱਚ ਵੱਖਰਾ ਬਣਾਉਣ ਲਈ ਬੁਨਿਆਦੀ ਸਟਾਈਲਿੰਗ ਪ੍ਰਾਪਤ ਹੁੰਦੀ ਹੈ ।

HTML ਸੰਖੇਪ ਤੱਤ ।

ਸੰਖੇਪ

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

ਮੁੜ - ਚਾਲੂ

ਪਹੁੰਚ

CSS ਵੇਰੀਏਬਲ

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

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

ਸਿਰਲੇਖ ਅਤੇ ਪੈਰੇ

ਹਰੀਜ਼ੱਟਲ ਨਿਯਮ

ਸੂਚੀਆਂ

ਇਨਲਾਈਨ ਕੋਡ

ਕੋਡ ਬਲਾਕ

ਵੇਰੀਏਬਲ

ਉਪਭੋਗਤਾ ਇੰਪੁੱਟ

ਨਮੂਨਾ ਆਉਟਪੁੱਟ

ਟੇਬਲ

ਫਾਰਮ

ਮਿਤੀ ਅਤੇ ਰੰਗ ਇੰਪੁੱਟ ਸਮਰਥਨ

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

ਫੁਟਕਲ ਤੱਤ

ਪਤਾ

ਬਲਾਕਕੋਟ

ਇਨਲਾਈਨ ਤੱਤ

ਸੰਖੇਪ

HTML5 [hidden]ਗੁਣ

jQuery ਅਸੰਗਤਤਾ

HTML5 `[hidden]`ਗੁਣ