ਟਾਈਪੋਗ੍ਰਾਫੀ
ਬੂਟਸਟਰੈਪ ਟਾਈਪੋਗ੍ਰਾਫੀ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ, ਗਲੋਬਲ ਸੈਟਿੰਗਾਂ, ਸਿਰਲੇਖਾਂ, ਬਾਡੀ ਟੈਕਸਟ, ਸੂਚੀਆਂ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਸਮੇਤ।
ਬੂਟਸਟਰੈਪ ਬੁਨਿਆਦੀ ਗਲੋਬਲ ਡਿਸਪਲੇ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਅਤੇ ਲਿੰਕ ਸਟਾਈਲ ਸੈੱਟ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਟੈਕਸਟੁਅਲ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਜਾਂਚ ਕਰੋ ।
- ਇੱਕ ਮੂਲ ਫੌਂਟ ਸਟੈਕ ਵਰਤੋ ਜੋ
font-family
ਹਰੇਕ OS ਅਤੇ ਡਿਵਾਈਸ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਚੁਣਦਾ ਹੈ। - ਵਧੇਰੇ ਸੰਮਲਿਤ ਅਤੇ ਪਹੁੰਚਯੋਗ ਕਿਸਮ ਦੇ ਪੈਮਾਨੇ ਲਈ, ਅਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਰੂਟ
font-size
(ਆਮ ਤੌਰ 'ਤੇ 16px) ਨੂੰ ਮੰਨਦੇ ਹਾਂ ਤਾਂ ਜੋ ਵਿਜ਼ਟਰ ਲੋੜ ਅਨੁਸਾਰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਣ। - ਸਾਡੇ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਅਧਾਰ ਦੇ ਤੌਰ ' ਤੇ
$font-family-base
,$font-size-base
, ਅਤੇ ਗੁਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।$line-height-base
<body>
- ਦੁਆਰਾ ਗਲੋਬਲ ਲਿੰਕ ਰੰਗ ਸੈਟ ਕਰੋ
$link-color
ਅਤੇ ਲਿੰਕ ਅੰਡਰਲਾਈਨ ਨੂੰ ਸਿਰਫ 'ਤੇ ਲਾਗੂ ਕਰੋ:hover
। - ( ਮੂਲ ਰੂਪ ਵਿੱਚ) ਉੱਤੇ
$body-bg
ਇੱਕ ਸੈੱਟ ਕਰਨ ਲਈ ਵਰਤੋਂ ।background-color
<body>
#fff
ਇਹ ਸਟਾਈਲ ਦੇ ਅੰਦਰ ਲੱਭੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ _reboot.scss
, ਅਤੇ ਗਲੋਬਲ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ _variables.scss
। $font-size-base
ਵਿੱਚ ਸੈੱਟ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ rem
।
ਸਾਰੇ HTML ਸਿਰਲੇਖ, <h1>
ਦੁਆਰਾ <h6>
, ਉਪਲਬਧ ਹਨ।
ਸਿਰਲੇਖ | ਉਦਾਹਰਨ |
---|---|
|
h1. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
|
h2. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
|
h3. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
|
h4. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
|
h5. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
|
h6. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
.h1
ਦੁਆਰਾ .h6
ਕਲਾਸਾਂ ਵੀ ਉਪਲਬਧ ਹਨ, ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਸਿਰਲੇਖ ਦੇ ਫੌਂਟ ਸਟਾਈਲ ਨਾਲ ਮੇਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਪਰ ਸੰਬੰਧਿਤ HTML ਤੱਤ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹੋ।
h1. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ
h2. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ
h3. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ
h4. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ
h5. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ
h6. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ
ਬੂਟਸਟਰੈਪ 3 ਤੋਂ ਛੋਟੇ ਸੈਕੰਡਰੀ ਸਿਰਲੇਖ ਪਾਠ ਨੂੰ ਮੁੜ ਬਣਾਉਣ ਲਈ ਸ਼ਾਮਲ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਰਵਾਇਤੀ ਸਿਰਲੇਖ ਤੱਤ ਤੁਹਾਡੇ ਪੰਨੇ ਦੀ ਸਮੱਗਰੀ ਦੇ ਮੀਟ ਵਿੱਚ ਸਭ ਤੋਂ ਵਧੀਆ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੇ ਗਏ ਹਨ. ਜਦੋਂ ਤੁਹਾਨੂੰ ਵੱਖਰੇ ਹੋਣ ਲਈ ਸਿਰਲੇਖ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਇੱਕ ਡਿਸਪਲੇ ਸਿਰਲੇਖ ਦੀ ਵਰਤੋਂ ਕਰਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ — ਇੱਕ ਵੱਡਾ, ਥੋੜ੍ਹਾ ਹੋਰ ਵਿਚਾਰਵਾਨ ਸਿਰਲੇਖ ਸ਼ੈਲੀ।
ਡਿਸਪਲੇ 1 |
ਡਿਸਪਲੇ 2 |
ਡਿਸਪਲੇ 3 |
ਡਿਸਪਲੇ 4 |
ਜੋੜ ਕੇ ਇੱਕ ਪੈਰਾਗ੍ਰਾਫ ਨੂੰ ਵੱਖਰਾ ਬਣਾਓ .lead
।
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
ਆਮ ਇਨਲਾਈਨ HTML5 ਤੱਤਾਂ ਲਈ ਸਟਾਈਲਿੰਗ।
ਤੁਸੀਂ ਮਾਰਕ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋਹਾਈਲਾਈਟਟੈਕਸਟ।
ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਦਾ ਮਤਲਬ ਮਿਟਾਏ ਗਏ ਟੈਕਸਟ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।
ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਨੂੰ ਹੁਣ ਸਹੀ ਨਹੀਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।
ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇੱਕ ਜੋੜ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।
ਟੈਕਸਟ ਦੀ ਇਹ ਲਾਈਨ ਰੇਂਡਰ ਕੀਤੀ ਜਾਵੇਗੀ ਜਿਵੇਂ ਕਿ ਰੇਡਰ ਕੀਤਾ ਗਿਆ ਹੈ
ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਦਾ ਮਤਲਬ ਫਾਈਨ ਪ੍ਰਿੰਟ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।
ਇਹ ਲਾਈਨ ਬੋਲਡ ਟੈਕਸਟ ਵਜੋਂ ਰੈਂਡਰ ਕੀਤੀ ਗਈ ਹੈ।
ਇਹ ਲਾਈਨ ਇਟਾਲਿਕ ਟੈਕਸਟ ਦੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕੀਤੀ ਗਈ ਹੈ।
.mark
ਅਤੇ .small
ਕਲਾਸਾਂ ਵੀ ਉਹੀ ਸਟਾਈਲ ਲਾਗੂ ਕਰਨ ਲਈ ਉਪਲਬਧ ਹਨ ਜਿਵੇਂ ਕਿ <mark>
ਅਤੇ <small>
ਟੈਗਸ ਦੁਆਰਾ ਆਉਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਅਣਚਾਹੇ ਸਿਮੈਂਟਿਕ ਪ੍ਰਭਾਵਾਂ ਤੋਂ ਬਚਦੇ ਹੋਏ।
ਜਦੋਂ ਕਿ ਉੱਪਰ ਨਹੀਂ ਦਿਖਾਇਆ ਗਿਆ, ਬੇਝਿਜਕ ਵਰਤੋਂ <b>
ਅਤੇ <i>
HTML5 ਵਿੱਚ। <b>
ਵਾਧੂ ਮਹੱਤਵ ਦੱਸੇ ਬਿਨਾਂ ਸ਼ਬਦਾਂ ਜਾਂ ਵਾਕਾਂਸ਼ਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਨ <i>
ਲਈ ਹੈ ਜਦੋਂ ਕਿ ਜ਼ਿਆਦਾਤਰ ਆਵਾਜ਼, ਤਕਨੀਕੀ ਸ਼ਬਦਾਂ, ਆਦਿ ਲਈ ਹੈ।
ਸਾਡੀਆਂ ਟੈਕਸਟ ਉਪਯੋਗਤਾਵਾਂ ਅਤੇ ਰੰਗ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ, ਟ੍ਰਾਂਸਫਾਰਮ, ਸ਼ੈਲੀ, ਵਜ਼ਨ ਅਤੇ ਰੰਗ ਬਦਲੋ ।
<abbr>
ਹੋਵਰ 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਸੰਸਕਰਣ ਦਿਖਾਉਣ ਲਈ ਸੰਖੇਪ ਅਤੇ ਸੰਖੇਪ ਸ਼ਬਦਾਂ ਲਈ HTML ਦੇ ਤੱਤ ਦਾ ਸਟਾਈਲਾਈਜ਼ਡ ਲਾਗੂਕਰਨ । ਸੰਖੇਪ ਰੂਪਾਂ ਵਿੱਚ ਇੱਕ ਡਿਫੌਲਟ ਅੰਡਰਲਾਈਨ ਹੁੰਦੀ ਹੈ ਅਤੇ ਹੋਵਰ ਅਤੇ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਾਧੂ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਇੱਕ ਮਦਦ ਕਰਸਰ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ।
.initialism
ਥੋੜੇ ਜਿਹੇ ਛੋਟੇ ਫੌਂਟ-ਆਕਾਰ ਲਈ ਸੰਖੇਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।
attr
HTML
ਤੁਹਾਡੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਅੰਦਰ ਕਿਸੇ ਹੋਰ ਸਰੋਤ ਤੋਂ ਸਮੱਗਰੀ ਦੇ ਬਲਾਕਾਂ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ। <blockquote class="blockquote">
ਕਿਸੇ ਵੀ HTML ਨੂੰ ਹਵਾਲੇ ਵਜੋਂ ਲਪੇਟੋ ।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।
<footer class="blockquote-footer">
ਸਰੋਤ ਦੀ ਪਛਾਣ ਕਰਨ ਲਈ ਇੱਕ ਜੋੜੋ । ਵਿੱਚ ਸਰੋਤ ਕੰਮ ਦਾ ਨਾਮ ਲਪੇਟੋ <cite>
।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।
ਆਪਣੇ ਬਲਾਕਕੋਟ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਬਦਲਣ ਲਈ ਲੋੜ ਅਨੁਸਾਰ ਟੈਕਸਟ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।
ਸੂਚੀ ਆਈਟਮਾਂ 'ਤੇ ਡਿਫੌਲਟ list-style
ਅਤੇ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨੂੰ ਹਟਾਓ (ਸਿਰਫ਼ ਤੁਰੰਤ ਬੱਚੇ)। ਇਹ ਸਿਰਫ਼ ਤੁਰੰਤ ਬੱਚਿਆਂ ਦੀ ਸੂਚੀ ਵਾਲੀਆਂ ਆਈਟਮਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ , ਮਤਲਬ ਕਿ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਨੇਸਟਡ ਸੂਚੀਆਂ ਲਈ ਵੀ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ।
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
- ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
- ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
- ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
- ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
- ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
- ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
- Faucibus porta lacus fringilla vel
- ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
- Eget porttitor lorem
ਸੂਚੀ ਦੀਆਂ ਬੁਲੇਟਾਂ ਨੂੰ ਹਟਾਓ ਅਤੇ margin
ਦੋ ਕਲਾਸਾਂ ਦੇ ਸੁਮੇਲ ਨਾਲ ਕੁਝ ਰੋਸ਼ਨੀ ਲਾਗੂ ਕਰੋ, .list-inline
ਅਤੇ .list-inline-item
.
- Lorem ipsum
- ਫੈਸੇਲਸ ਆਈਕੁਲਿਸ
- ਨਲਾ ਵੁਲਟਪਟ
ਸਾਡੇ ਗਰਿੱਡ ਸਿਸਟਮ ਦੀਆਂ ਪੂਰਵ ਪਰਿਭਾਸ਼ਿਤ ਕਲਾਸਾਂ (ਜਾਂ ਅਰਥ ਮਿਕਸਿਨ) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸ਼ਬਦਾਂ ਅਤੇ ਵਰਣਨ ਨੂੰ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਇਕਸਾਰ ਕਰੋ। ਲੰਬੇ ਸ਼ਬਦਾਂ ਲਈ, ਤੁਸੀਂ .text-truncate
ਅੰਡਾਕਾਰ ਨਾਲ ਟੈਕਸਟ ਨੂੰ ਕੱਟਣ ਲਈ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਇੱਕ ਕਲਾਸ ਜੋੜ ਸਕਦੇ ਹੋ।
- ਵਰਣਨ ਸੂਚੀਆਂ
- ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- ਮਲੇਸੁਆਡਾ ਪੋਰਟਾ
- Etiam porta sem malesuada magna mollis euismod.
- ਕੱਟਿਆ ਹੋਇਆ ਪਦ ਕੱਟਿਆ ਹੋਇਆ ਹੈ
- Fusce dapibus, teleus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- ਆਲ੍ਹਣਾ
-
- ਨੇਸਟਡ ਪਰਿਭਾਸ਼ਾ ਸੂਚੀ
- ਏਨੀਅਨ ਪੋਜ਼ੂਏਰ, ਟੌਰਟਰ ਸੇਡ ਕਰਸਸ ਫਿਊਗੀਆਟ, ਨਨਕ ਔਗ ਬਲੈਂਡਿਟ ਨਨਕ.
ਜਵਾਬਦੇਹ ਟਾਈਪੋਗ੍ਰਾਫੀfont-size
ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੀ ਲੜੀ ਦੇ ਅੰਦਰ ਰੂਟ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸਿਰਫ਼ ਐਡਜਸਟ ਕਰਕੇ ਟੈਕਸਟ ਅਤੇ ਕੰਪੋਨੈਂਟ ਨੂੰ ਸਕੇਲਿੰਗ ਕਰਨ ਦਾ ਹਵਾਲਾ ਦਿੰਦੀ ਹੈ । ਬੂਟਸਟਰੈਪ ਤੁਹਾਡੇ ਲਈ ਅਜਿਹਾ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਪਰ ਜੇਕਰ ਤੁਹਾਨੂੰ ਇਸਦੀ ਲੋੜ ਹੈ ਤਾਂ ਇਸਨੂੰ ਜੋੜਨਾ ਕਾਫ਼ੀ ਆਸਾਨ ਹੈ।
ਇੱਥੇ ਅਭਿਆਸ ਵਿੱਚ ਇਸਦਾ ਇੱਕ ਉਦਾਹਰਣ ਹੈ. font-size
ਜੋ ਵੀ s ਅਤੇ ਮੀਡੀਆ ਸਵਾਲ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਚੁਣੋ ।