CSS
ਗਲੋਬਲ CSS ਸੈਟਿੰਗਾਂ, ਬੁਨਿਆਦੀ HTML ਤੱਤ ਸਟਾਈਲ ਕੀਤੇ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਵਿਸਤ੍ਰਿਤ, ਅਤੇ ਇੱਕ ਉੱਨਤ ਗਰਿੱਡ ਸਿਸਟਮ।
ਗਲੋਬਲ CSS ਸੈਟਿੰਗਾਂ, ਬੁਨਿਆਦੀ HTML ਤੱਤ ਸਟਾਈਲ ਕੀਤੇ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਵਿਸਤ੍ਰਿਤ, ਅਤੇ ਇੱਕ ਉੱਨਤ ਗਰਿੱਡ ਸਿਸਟਮ।
ਬਿਹਤਰ, ਤੇਜ਼, ਮਜ਼ਬੂਤ ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਸਾਡੀ ਪਹੁੰਚ ਸਮੇਤ, ਬੂਟਸਟਰੈਪ ਦੇ ਬੁਨਿਆਦੀ ਢਾਂਚੇ ਦੇ ਮੁੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਨੀਵਾਂ ਪ੍ਰਾਪਤ ਕਰੋ।
ਬੂਟਸਟਰੈਪ ਕੁਝ HTML ਤੱਤਾਂ ਅਤੇ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਲਈ HTML5 doctype ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸਨੂੰ ਆਪਣੇ ਸਾਰੇ ਪ੍ਰੋਜੈਕਟਾਂ ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।
<!doctype html>
<html lang="en">
...
</html>
ਬੂਟਸਟਰੈਪ 2 ਦੇ ਨਾਲ, ਅਸੀਂ ਫਰੇਮਵਰਕ ਦੇ ਮੁੱਖ ਪਹਿਲੂਆਂ ਲਈ ਵਿਕਲਪਿਕ ਮੋਬਾਈਲ ਦੋਸਤਾਨਾ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕੀਤੇ ਹਨ। ਬੂਟਸਟਰੈਪ 3 ਦੇ ਨਾਲ, ਅਸੀਂ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਮੋਬਾਈਲ ਅਨੁਕੂਲ ਹੋਣ ਲਈ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਦੁਬਾਰਾ ਲਿਖਿਆ ਹੈ। ਵਿਕਲਪਿਕ ਮੋਬਾਈਲ ਸਟਾਈਲ 'ਤੇ ਜੋੜਨ ਦੀ ਬਜਾਏ, ਉਹ ਬਿਲਕੁਲ ਕੋਰ ਵਿੱਚ ਪਕਾਏ ਗਏ ਹਨ। ਅਸਲ ਵਿੱਚ, ਬੂਟਸਟਰੈਪ ਪਹਿਲਾਂ ਮੋਬਾਈਲ ਹੈ । ਮੋਬਾਈਲ ਦੀਆਂ ਪਹਿਲੀਆਂ ਸ਼ੈਲੀਆਂ ਵੱਖਰੀਆਂ ਫਾਈਲਾਂ ਦੀ ਬਜਾਏ ਪੂਰੀ ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚ ਲੱਭੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ।
ਸਹੀ ਰੈਂਡਰਿੰਗ ਅਤੇ ਟਚ ਜ਼ੂਮਿੰਗ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ, ਆਪਣੇ ਵਿੱਚ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਸ਼ਾਮਲ ਕਰੋ <head>
।
<meta name="viewport" content="width=device-width, initial-scale=1">
user-scalable=no
ਤੁਸੀਂ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਵਿੱਚ ਜੋੜ ਕੇ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ ਜ਼ੂਮਿੰਗ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਅਯੋਗ ਕਰ ਸਕਦੇ ਹੋ । ਇਹ ਜ਼ੂਮਿੰਗ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ, ਮਤਲਬ ਕਿ ਉਪਭੋਗਤਾ ਸਿਰਫ਼ ਸਕ੍ਰੋਲ ਕਰਨ ਦੇ ਯੋਗ ਹੁੰਦੇ ਹਨ, ਅਤੇ ਨਤੀਜੇ ਵਜੋਂ ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਇੱਕ ਮੂਲ ਐਪਲੀਕੇਸ਼ਨ ਵਾਂਗ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। ਕੁੱਲ ਮਿਲਾ ਕੇ, ਅਸੀਂ ਹਰ ਸਾਈਟ 'ਤੇ ਇਸ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਨਹੀਂ ਕਰਦੇ ਹਾਂ, ਇਸ ਲਈ ਸਾਵਧਾਨੀ ਵਰਤੋ!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
ਬੂਟਸਟਰੈਪ ਬੁਨਿਆਦੀ ਗਲੋਬਲ ਡਿਸਪਲੇ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਅਤੇ ਲਿੰਕ ਸਟਾਈਲ ਸੈੱਟ ਕਰਦਾ ਹੈ। ਖਾਸ ਤੌਰ 'ਤੇ, ਅਸੀਂ:
background-color: #fff;
'ਤੇ ਸੈੱਟ ਕਰੋbody
@font-family-base
, @font-size-base
, ਅਤੇ ਗੁਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ@line-height-base
@link-color
ਅਤੇ ਲਿੰਕ ਅੰਡਰਲਾਈਨਾਂ ਨੂੰ ਲਾਗੂ ਕਰੋ:hover
ਇਹ ਸਟਾਈਲ ਅੰਦਰ ਲੱਭੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ scaffolding.less
।
ਸੁਧਾਰੀ ਹੋਈ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਰੈਂਡਰਿੰਗ ਲਈ, ਅਸੀਂ Nicolas Gallagher ਅਤੇ Jonathan Neal ਦੁਆਰਾ ਇੱਕ ਪ੍ਰੋਜੈਕਟ, Normalize.css ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ।
ਬੂਟਸਟਰੈਪ ਨੂੰ ਸਾਈਟ ਸਮੱਗਰੀ ਨੂੰ ਸਮੇਟਣ ਅਤੇ ਸਾਡੇ ਗਰਿੱਡ ਸਿਸਟਮ ਨੂੰ ਰੱਖਣ ਲਈ ਇੱਕ ਤੱਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਵਰਤਣ ਲਈ ਦੋ ਕੰਟੇਨਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਚੋਣ ਕਰ ਸਕਦੇ ਹੋ। ਨੋਟ ਕਰੋ ਕਿ, padding
ਅਤੇ ਹੋਰ ਦੇ ਕਾਰਨ, ਕੋਈ ਵੀ ਕੰਟੇਨਰ ਨੈਸਟਬਲ ਨਹੀਂ ਹੈ।
.container
ਇੱਕ ਜਵਾਬਦੇਹ ਸਥਿਰ ਚੌੜਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਲਈ ਵਰਤੋਂ ।
<div class="container">
...
</div>
.container-fluid
ਆਪਣੇ ਵਿਊਪੋਰਟ ਦੀ ਪੂਰੀ ਚੌੜਾਈ ਨੂੰ ਫੈਲਾਉਂਦੇ ਹੋਏ, ਪੂਰੀ ਚੌੜਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਲਈ ਵਰਤੋਂ ।
<div class="container-fluid">
...
</div>
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਇੱਕ ਜਵਾਬਦੇਹ, ਮੋਬਾਈਲ ਫਸਟ ਫਲੂਇਡ ਗਰਿੱਡ ਸਿਸਟਮ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਜੋ ਡਿਵਾਈਸ ਜਾਂ ਵਿਊਪੋਰਟ ਦਾ ਆਕਾਰ ਵਧਣ ਨਾਲ 12 ਕਾਲਮਾਂ ਤੱਕ ਢੁਕਵੇਂ ਰੂਪ ਵਿੱਚ ਸਕੇਲ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਆਸਾਨ ਲੇਆਉਟ ਵਿਕਲਪਾਂ ਲਈ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਹਨ, ਅਤੇ ਨਾਲ ਹੀ ਹੋਰ ਅਰਥਵਾਦੀ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਮਿਸ਼ਰਣ ਸ਼ਾਮਲ ਹਨ ।
ਗਰਿੱਡ ਪ੍ਰਣਾਲੀਆਂ ਦੀ ਵਰਤੋਂ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਰੱਖਣ ਵਾਲੀਆਂ ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਲੜੀ ਰਾਹੀਂ ਪੰਨਾ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:
.container
(ਸਥਿਰ-ਚੌੜਾਈ) ਜਾਂ (ਪੂਰੀ-ਚੌੜਾਈ) ਦੇ ਅੰਦਰ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ।.container-fluid
.row
। .col-xs-4
ਘੱਟ ਮਿਕਸਿਨਾਂ ਦੀ ਵਰਤੋਂ ਵਧੇਰੇ ਅਰਥਵਾਦੀ ਲੇਆਉਟ ਲਈ ਵੀ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।padding
। ਉਹ ਪੈਡਿੰਗ ਪਹਿਲੇ ਅਤੇ ਆਖਰੀ ਕਾਲਮ ਲਈ s 'ਤੇ ਨੈਗੇਟਿਵ ਹਾਸ਼ੀਏ ਦੁਆਰਾ ਕਤਾਰਾਂ ਵਿੱਚ ਆਫਸੈੱਟ ਹੈ .row
।.col-xs-4
।.col-md-*
ਐਲੀਮੈਂਟ 'ਤੇ ਕਿਸੇ ਵੀ ਕਲਾਸ ਨੂੰ ਲਾਗੂ ਕਰਨ ਨਾਲ ਨਾ ਸਿਰਫ਼ ਮਾਧਿਅਮ ਡਿਵਾਈਸਾਂ 'ਤੇ ਬਲਕਿ ਵੱਡੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਵੀ ਇਸਦੀ ਸਟਾਈਲਿੰਗ ਪ੍ਰਭਾਵਿਤ ਹੋਵੇਗੀ ਜੇਕਰ ਕੋਈ .col-lg-*
ਕਲਾਸ ਮੌਜੂਦ ਨਹੀਂ ਹੈ।ਇਹਨਾਂ ਸਿਧਾਂਤਾਂ ਨੂੰ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਲਈ ਉਦਾਹਰਣਾਂ ਦੇਖੋ।
ਅਸੀਂ ਆਪਣੇ ਗਰਿੱਡ ਸਿਸਟਮ ਵਿੱਚ ਮੁੱਖ ਬ੍ਰੇਕਪੁਆਇੰਟ ਬਣਾਉਣ ਲਈ ਸਾਡੀਆਂ ਘੱਟ ਫਾਈਲਾਂ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
ਅਸੀਂ ਕਦੇ-ਕਦਾਈਂ ਇਹਨਾਂ ਮੀਡੀਆ ਸਵਾਲਾਂ 'ਤੇ ਵਿਸਤਾਰ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ max-width
CSS ਨੂੰ ਡਿਵਾਈਸਾਂ ਦੇ ਇੱਕ ਛੋਟੇ ਸੈੱਟ ਤੱਕ ਸੀਮਤ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕੇ।
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
ਦੇਖੋ ਕਿ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਪਹਿਲੂ ਇੱਕ ਸੌਖੀ ਟੇਬਲ ਨਾਲ ਕਈ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
ਵਾਧੂ ਛੋਟੇ ਡਿਵਾਈਸਾਂ ਵਾਲੇ ਫੋਨ (<768px) | ਛੋਟੀਆਂ ਡਿਵਾਈਸਾਂ ਦੀਆਂ ਗੋਲੀਆਂ (≥768px) | ਦਰਮਿਆਨੇ ਉਪਕਰਣ ਡੈਸਕਟਾਪ (≥992px) | ਵੱਡੇ ਡਿਵਾਈਸਾਂ ਦੇ ਡੈਸਕਟਾਪ (≥1200px) | |
---|---|---|---|---|
ਗਰਿੱਡ ਵਿਵਹਾਰ | ਹਰ ਸਮੇਂ ਹਰੀਜੱਟਲ | ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਮੇਟਿਆ ਗਿਆ, ਬਰੇਕਪੁਆਇੰਟ ਦੇ ਉੱਪਰ ਲੇਟਵੇਂ | ||
ਕੰਟੇਨਰ ਦੀ ਚੌੜਾਈ | ਕੋਈ ਨਹੀਂ (ਆਟੋ) | 750px | 970px | 1170px |
ਕਲਾਸ ਅਗੇਤਰ | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
ਕਾਲਮਾਂ ਦਾ # | 12 | |||
ਕਾਲਮ ਦੀ ਚੌੜਾਈ | ਆਟੋ | ~62px | ~81px | ~97px |
ਗਟਰ ਦੀ ਚੌੜਾਈ | 30px (ਇੱਕ ਕਾਲਮ ਦੇ ਹਰੇਕ ਪਾਸੇ 15px) | |||
ਨੇਸਟਬਲ | ਹਾਂ | |||
ਆਫਸੈੱਟ | ਹਾਂ | |||
ਕਾਲਮ ਆਰਡਰਿੰਗ | ਹਾਂ |
ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੇ ਇੱਕ ਸਿੰਗਲ ਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ .col-md-*
, ਤੁਸੀਂ ਇੱਕ ਬੁਨਿਆਦੀ ਗਰਿੱਡ ਸਿਸਟਮ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਡੈਸਕਟੌਪ (ਮੀਡੀਅਮ) ਡਿਵਾਈਸਾਂ 'ਤੇ ਹਰੀਜੱਟਲ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ ਅਤੇ ਟੈਬਲੇਟ ਡਿਵਾਈਸਾਂ (ਵਾਧੂ ਛੋਟੇ ਤੋਂ ਛੋਟੀ ਰੇਂਜ) 'ਤੇ ਸਟੈਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਕਿਸੇ ਵੀ ਵਿੱਚ ਗਰਿੱਡ ਕਾਲਮ ਰੱਖੋ .row
।
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
ਕਿਸੇ ਵੀ ਸਥਿਰ-ਚੌੜਾਈ ਵਾਲੇ ਗਰਿੱਡ ਲੇਆਉਟ ਨੂੰ ਆਪਣੇ ਬਾਹਰੀ ਹਿੱਸੇ ਨੂੰ ਵਿੱਚ ਬਦਲ ਕੇ ਪੂਰੀ-ਚੌੜਾਈ ਵਾਲੇ ਖਾਕੇ ਵਿੱਚ .container
ਬਦਲੋ .container-fluid
।
<div class="container-fluid">
<div class="row">
...
</div>
</div>
ਕੀ ਤੁਸੀਂ ਇਹ ਨਹੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਕਾਲਮ ਸਿਰਫ਼ ਛੋਟੀਆਂ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਟੈਕ ਹੋਣ? .col-xs-*
.col-md-*
ਆਪਣੇ ਕਾਲਮਾਂ ਵਿੱਚ ਜੋੜ ਕੇ ਵਾਧੂ ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ ਡਿਵਾਈਸ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਸਭ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਇਸ ਬਾਰੇ ਬਿਹਤਰ ਵਿਚਾਰ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਦੇਖੋ।
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
.col-sm-*
ਟੈਬਲੇਟ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਹੋਰ ਵੀ ਗਤੀਸ਼ੀਲ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਲੇਆਉਟ ਬਣਾ ਕੇ ਪਿਛਲੀ ਉਦਾਹਰਨ 'ਤੇ ਬਣਾਓ ।
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
ਜੇਕਰ ਇੱਕ ਕਤਾਰ ਵਿੱਚ 12 ਤੋਂ ਵੱਧ ਕਾਲਮ ਰੱਖੇ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਵਾਧੂ ਕਾਲਮਾਂ ਦਾ ਹਰੇਕ ਸਮੂਹ, ਇੱਕ ਯੂਨਿਟ ਦੇ ਰੂਪ ਵਿੱਚ, ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਲਪੇਟ ਜਾਵੇਗਾ।
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
ਉਪਲਬਧ ਗਰਿੱਡਾਂ ਦੇ ਚਾਰ ਪੱਧਰਾਂ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਉਹਨਾਂ ਮੁੱਦਿਆਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹੋ ਜਿੱਥੇ, ਕੁਝ ਖਾਸ ਬ੍ਰੇਕਪੁਆਇੰਟਾਂ 'ਤੇ, ਤੁਹਾਡੇ ਕਾਲਮ ਬਿਲਕੁਲ ਸਹੀ ਨਹੀਂ ਹੁੰਦੇ ਕਿਉਂਕਿ ਇੱਕ ਦੂਜੇ ਨਾਲੋਂ ਉੱਚਾ ਹੁੰਦਾ ਹੈ। ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, a .clearfix
ਅਤੇ ਸਾਡੀਆਂ ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੇ ਸੁਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰੋ ।
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
ਜਵਾਬਦੇਹ ਬ੍ਰੇਕਪੁਆਇੰਟਸ 'ਤੇ ਕਾਲਮ ਕਲੀਅਰਿੰਗ ਤੋਂ ਇਲਾਵਾ, ਤੁਹਾਨੂੰ ਆਫਸੈੱਟਾਂ, ਪੁਸ਼ਾਂ, ਜਾਂ ਖਿੱਚਾਂ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ । ਇਸ ਨੂੰ ਗਰਿੱਡ ਉਦਾਹਰਨ ਵਿੱਚ ਕਾਰਵਾਈ ਵਿੱਚ ਵੇਖੋ ।
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
ਇੱਕ ਕਤਾਰ ਤੋਂ ਗਟਰਾਂ ਨੂੰ ਹਟਾਓ ਅਤੇ ਇਹ .row-no-gutters
ਕਲਾਸ ਦੇ ਨਾਲ ਕਾਲਮ ਹੈ।
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
.col-md-offset-*
ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਲਮਾਂ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਲਿਜਾਓ । ਇਹ ਕਲਾਸਾਂ ਇੱਕ ਕਾਲਮ ਦੇ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨੂੰ *
ਕਾਲਮਾਂ ਦੁਆਰਾ ਵਧਾਉਂਦੀਆਂ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਚਾਰ ਕਾਲਮਾਂ ਉੱਤੇ .col-md-offset-4
ਚਲਦਾ ਹੈ।.col-md-4
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
.col-*-offset-0
ਤੁਸੀਂ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਹੇਠਲੇ ਗਰਿੱਡ ਟੀਅਰਾਂ ਤੋਂ ਆਫਸੈਟਾਂ ਨੂੰ ਵੀ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹੋ ।
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>
ਆਪਣੀ ਸਮਗਰੀ ਨੂੰ ਡਿਫੌਲਟ ਗਰਿੱਡ ਨਾਲ ਨੇਸਟ ਕਰਨ ਲਈ, ਇੱਕ ਮੌਜੂਦਾ ਕਾਲਮ ਦੇ ਅੰਦਰ ਇੱਕ ਨਵਾਂ .row
ਅਤੇ ਕਾਲਮਾਂ ਦਾ ਸੈੱਟ ਸ਼ਾਮਲ ਕਰੋ । ਨੇਸਟਡ ਕਤਾਰਾਂ ਵਿੱਚ ਕਾਲਮਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਸ਼ਾਮਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ 12 ਜਾਂ ਘੱਟ ਤੱਕ ਜੋੜਦੇ ਹਨ (ਇਹ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ ਕਿ ਤੁਸੀਂ ਸਾਰੇ 12 ਉਪਲਬਧ ਕਾਲਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ)।.col-sm-*
.col-sm-*
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
ਸਾਡੇ ਬਿਲਟ-ਇਨ ਗਰਿੱਡ ਕਾਲਮਾਂ ਦੇ ਆਰਡਰ .col-md-push-*
ਅਤੇ .col-md-pull-*
ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਬਦਲੋ।
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
ਤੇਜ਼ ਲੇਆਉਟ ਲਈ ਪ੍ਰੀਬਿਲਟ ਗਰਿੱਡ ਕਲਾਸਾਂ ਤੋਂ ਇਲਾਵਾ , ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਘੱਟ ਵੇਰੀਏਬਲ ਅਤੇ ਮਿਕਸਿਨ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਆਪਣੇ ਸਧਾਰਨ, ਸਿਮੈਂਟਿਕ ਲੇਆਉਟਸ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਤਿਆਰ ਕੀਤਾ ਜਾ ਸਕੇ।
ਵੇਰੀਏਬਲ ਕਾਲਮਾਂ ਦੀ ਗਿਣਤੀ, ਗਟਰ ਦੀ ਚੌੜਾਈ, ਅਤੇ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਬਿੰਦੂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ ਜਿਸ 'ਤੇ ਫਲੋਟਿੰਗ ਕਾਲਮ ਸ਼ੁਰੂ ਕਰਨੇ ਹਨ। ਅਸੀਂ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਉੱਪਰ ਦਸਤਾਵੇਜ਼ੀ ਤੌਰ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ ਬਣਾਉਣ ਲਈ ਕਰਦੇ ਹਾਂ, ਨਾਲ ਹੀ ਹੇਠਾਂ ਸੂਚੀਬੱਧ ਕਸਟਮ ਮਿਸ਼ਰਣਾਂ ਲਈ।
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
ਮਿਕਸਿਨਾਂ ਦੀ ਵਰਤੋਂ ਵਿਅਕਤੀਗਤ ਗਰਿੱਡ ਕਾਲਮਾਂ ਲਈ ਸਿਮੈਂਟਿਕ CSS ਬਣਾਉਣ ਲਈ ਗਰਿੱਡ ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
ਤੁਸੀਂ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਆਪਣੇ ਖੁਦ ਦੇ ਕਸਟਮ ਮੁੱਲਾਂ ਵਿੱਚ ਸੋਧ ਸਕਦੇ ਹੋ, ਜਾਂ ਉਹਨਾਂ ਦੇ ਡਿਫੌਲਟ ਮੁੱਲਾਂ ਦੇ ਨਾਲ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਵਿਚਕਾਰ ਇੱਕ ਪਾੜੇ ਦੇ ਨਾਲ ਇੱਕ ਦੋ-ਕਾਲਮ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਡਿਫੌਲਟ ਸੈਟਿੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇੱਕ ਉਦਾਹਰਣ ਇੱਥੇ ਹੈ।
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
ਸਾਰੇ HTML ਸਿਰਲੇਖ, <h1>
ਦੁਆਰਾ <h6>
, ਉਪਲਬਧ ਹਨ। .h1
ਦੁਆਰਾ .h6
ਕਲਾਸਾਂ ਵੀ ਉਪਲਬਧ ਹਨ, ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਸਿਰਲੇਖ ਦੇ ਫੌਂਟ ਸਟਾਈਲ ਨਾਲ ਮੇਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਪਰ ਫਿਰ ਵੀ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡਾ ਟੈਕਸਟ ਇਨਲਾਈਨ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇ।
h1. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
ਸੈਮੀਬੋਲਡ 36px |
h2. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
ਸੈਮੀਬੋਲਡ 30px |
h3. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
ਸੈਮੀਬੋਲਡ 24px |
h4. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
ਸੈਮੀਬੋਲਡ 18px |
h5. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
ਸੈਮੀਬੋਲਡ 14px |
h6. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ |
ਸੈਮੀਬੋਲਡ 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<small>
ਆਮ ਟੈਗ ਜਾਂ .small
ਕਲਾਸ ਦੇ ਨਾਲ ਕਿਸੇ ਵੀ ਸਿਰਲੇਖ ਵਿੱਚ ਹਲਕਾ, ਸੈਕੰਡਰੀ ਟੈਕਸਟ ਬਣਾਓ ।
h1. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ |
h2. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ |
h3. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ |
h4. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ |
h5. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ |
h6. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
ਬੂਟਸਟਰੈਪ ਦਾ ਗਲੋਬਲ ਡਿਫੌਲਟ 14pxfont-size
ਹੈ , 1.428 ਦੇ ਨਾਲ । ਇਹ ਅਤੇ ਸਾਰੇ ਪੈਰਿਆਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, (ਪੈਰਾਗ੍ਰਾਫ) ਉਹਨਾਂ ਦੀ ਗਣਨਾ ਕੀਤੀ ਲਾਈਨ-ਉਚਾਈ (ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ 10px) ਦਾ ਅੱਧਾ ਹੇਠਲਾ ਮਾਰਜਿਨ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ।line-height
<body>
<p>
ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲਿਓ. Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus. ਨੁਲ੍ਲਮ ਇਦ ਡੋਲਰ ਆਈਡੀ ਨਿਭ ਅਲਟ੍ਰੀਸੀਸ ਵਾਹਨ.
Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus. ਡੋਨੇਕ ਉਲਮਕੋਰਪਰ ਨੂਲਾ ਨਾਨ ਮੇਟਸ ਆਕਟਰ ਫਰਿੰਗਿਲਾ। Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. ਡੋਨੇਕ ਉਲਮਕੋਰਪਰ ਨੂਲਾ ਨਾਨ ਮੇਟਸ ਆਕਟਰ ਫਰਿੰਗਿਲਾ।
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
ਜੋੜ ਕੇ ਇੱਕ ਪੈਰਾਗ੍ਰਾਫ ਨੂੰ ਵੱਖਰਾ ਬਣਾਓ .lead
।
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਪੈਮਾਨਾ variables.less ਵਿੱਚ ਦੋ ਘੱਟ ਵੇਰੀਏਬਲਾਂ 'ਤੇ ਅਧਾਰਤ ਹੈ : @font-size-base
ਅਤੇ @line-height-base
. ਪਹਿਲਾ ਹੈ ਬੇਸ ਫੌਂਟ-ਸਾਈਜ਼ ਜੋ ਕਿ ਭਰ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਦੂਜਾ ਬੇਸ ਲਾਈਨ-ਉਚਾਈ ਹੈ। ਅਸੀਂ ਉਹਨਾਂ ਵੇਰੀਏਬਲਾਂ ਅਤੇ ਕੁਝ ਸਧਾਰਨ ਗਣਿਤ ਦੀ ਵਰਤੋਂ ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਕਿਸਮਾਂ ਦੇ ਹਾਸ਼ੀਏ, ਪੈਡਿੰਗ ਅਤੇ ਲਾਈਨ-ਹਾਈਟਸ ਬਣਾਉਣ ਲਈ ਕਰਦੇ ਹਾਂ। ਉਹਨਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ ਅਤੇ ਬੂਟਸਟਰੈਪ ਅਨੁਕੂਲਿਤ ਕਰੋ।
ਕਿਸੇ ਹੋਰ ਸੰਦਰਭ ਵਿੱਚ ਇਸਦੀ ਪ੍ਰਸੰਗਿਕਤਾ ਦੇ ਕਾਰਨ ਟੈਕਸਟ ਦੀ ਇੱਕ ਦੌੜ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ, <mark>
ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਤੁਸੀਂ ਮਾਰਕ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋਹਾਈਲਾਈਟਟੈਕਸਟ।
You can use the mark tag to <mark>highlight</mark> text.
ਮਿਟਾਏ ਗਏ ਟੈਕਸਟ ਦੇ ਬਲਾਕਾਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ <del>
ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਦਾ ਮਤਲਬ ਮਿਟਾਏ ਗਏ ਟੈਕਸਟ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।
<del>This line of text is meant to be treated as deleted text.</del>
ਟੈਕਸਟ ਦੇ ਉਹਨਾਂ ਬਲਾਕਾਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਜੋ ਹੁਣ ਢੁਕਵੇਂ ਨਹੀਂ ਹਨ, <s>
ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਨੂੰ ਹੁਣ ਸਹੀ ਨਹੀਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।
<s>This line of text is meant to be treated as no longer accurate.</s>
ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਜੋੜਾਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ <ins>
ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇੱਕ ਜੋੜ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।
<ins>This line of text is meant to be treated as an addition to the document.</ins>
ਟੈਕਸਟ ਨੂੰ ਰੇਖਾਂਕਿਤ ਕਰਨ ਲਈ <u>
ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਟੈਕਸਟ ਦੀ ਇਹ ਲਾਈਨ ਰੇਂਡਰ ਕੀਤੀ ਜਾਵੇਗੀ ਜਿਵੇਂ ਕਿ ਰੇਡਰ ਕੀਤਾ ਗਿਆ ਹੈ
<u>This line of text will render as underlined</u>
ਹਲਕੇ ਸਟਾਈਲ ਦੇ ਨਾਲ HTML ਦੇ ਡਿਫੌਲਟ ਜ਼ੋਰ ਟੈਗਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਇਨਲਾਈਨ ਜਾਂ ਟੈਕਸਟ ਦੇ ਬਲਾਕਾਂ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ <small>
, ਮਾਤਾ-ਪਿਤਾ ਦੇ ਆਕਾਰ ਦੇ 85% 'ਤੇ ਟੈਕਸਟ ਸੈੱਟ ਕਰਨ ਲਈ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਸਿਰਲੇਖ ਤੱਤ font-size
ਨੇਸਟਡ <small>
ਤੱਤਾਂ ਲਈ ਆਪਣੇ ਖੁਦ ਦੇ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ।
ਤੁਸੀਂ ਵਿਕਲਪਿਕ ਤੌਰ .small
'ਤੇ ਕਿਸੇ ਦੀ ਥਾਂ ' ਤੇ ਇਨਲਾਈਨ ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ <small>
।
ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਦਾ ਮਤਲਬ ਫਾਈਨ ਪ੍ਰਿੰਟ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।
<small>This line of text is meant to be treated as fine print.</small>
ਇੱਕ ਭਾਰੀ ਫੌਂਟ-ਵਜ਼ਨ ਦੇ ਨਾਲ ਟੈਕਸਟ ਦੇ ਇੱਕ ਸਨਿੱਪਟ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ।
ਟੈਕਸਟ ਦੇ ਹੇਠਲੇ ਸਨਿੱਪਟ ਨੂੰ ਬੋਲਡ ਟੈਕਸਟ ਦੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕੀਤਾ ਗਿਆ ਹੈ ।
<strong>rendered as bold text</strong>
ਇਟਾਲਿਕਸ ਦੇ ਨਾਲ ਟੈਕਸਟ ਦੇ ਇੱਕ ਸਨਿੱਪਟ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ।
ਟੈਕਸਟ ਦੇ ਹੇਠਲੇ ਸਨਿੱਪਟ ਨੂੰ ਇਟਾਲਿਕ ਟੈਕਸਟ ਦੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕੀਤਾ ਗਿਆ ਹੈ ।
<em>rendered as italicized text</em>
ਵਰਤਣ ਲਈ ਮੁਫ਼ਤ ਮਹਿਸੂਸ ਕਰੋ <b>
ਅਤੇ <i>
HTML5 ਵਿੱਚ. <b>
ਵਾਧੂ ਮਹੱਤਵ ਦੱਸੇ ਬਿਨਾਂ ਸ਼ਬਦਾਂ ਜਾਂ ਵਾਕਾਂਸ਼ਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਨ <i>
ਲਈ ਹੈ ਜਦੋਂ ਕਿ ਜ਼ਿਆਦਾਤਰ ਆਵਾਜ਼, ਤਕਨੀਕੀ ਸ਼ਬਦਾਂ, ਆਦਿ ਲਈ ਹੈ।
ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕੰਪੋਨੈਂਟਾਂ ਲਈ ਟੈਕਸਟ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਰੀਲਾਈਨ ਕਰੋ।
ਖੱਬੇ ਪਾਸੇ ਇਕਸਾਰ ਟੈਕਸਟ।
ਕੇਂਦਰ ਇਕਸਾਰ ਟੈਕਸਟ।
ਸੱਜੇ ਇਕਸਾਰ ਟੈਕਸਟ।
ਜਾਇਜ਼ ਪਾਠ.
ਕੋਈ ਰੈਪ ਟੈਕਸਟ ਨਹੀਂ।
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
ਟੈਕਸਟ ਕੈਪੀਟਲਾਈਜ਼ੇਸ਼ਨ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਬਦਲੋ।
ਛੋਟੇ ਅੱਖਰਾਂ ਵਾਲੀ ਲਿਖਤ।
ਵੱਡੇ ਅੱਖਰਾਂ ਵਾਲੀ ਲਿਖਤ।
ਕੈਪੀਟਲਾਈਜ਼ਡ ਟੈਕਸਟ।
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<abbr>
ਹੋਵਰ 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਸੰਸਕਰਣ ਦਿਖਾਉਣ ਲਈ ਸੰਖੇਪ ਅਤੇ ਸੰਖੇਪ ਸ਼ਬਦਾਂ ਲਈ HTML ਦੇ ਤੱਤ ਦਾ ਸਟਾਈਲਾਈਜ਼ਡ ਲਾਗੂਕਰਨ । ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਸੰਖੇਪ title
ਰੂਪਾਂ ਵਿੱਚ ਇੱਕ ਹਲਕਾ ਬਿੰਦੀ ਵਾਲਾ ਤਲ ਸੀਮਾ ਅਤੇ ਹੋਵਰ 'ਤੇ ਇੱਕ ਮਦਦ ਕਰਸਰ ਹੁੰਦਾ ਹੈ, ਹੋਵਰ ਅਤੇ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਾਧੂ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਗੁਣ ਸ਼ਬਦ ਦਾ ਸੰਖੇਪ ਰੂਪ attr ਹੈ ।
<abbr title="attribute">attr</abbr>
.initialism
ਥੋੜੇ ਜਿਹੇ ਛੋਟੇ ਫੌਂਟ-ਆਕਾਰ ਲਈ ਸੰਖੇਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।
ਕੱਟੀ ਹੋਈ ਰੋਟੀ ਤੋਂ ਬਾਅਦ HTML ਸਭ ਤੋਂ ਵਧੀਆ ਚੀਜ਼ ਹੈ।
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
ਨਜ਼ਦੀਕੀ ਪੂਰਵਜ ਜਾਂ ਕੰਮ ਦੇ ਪੂਰੇ ਸਰੀਰ ਲਈ ਸੰਪਰਕ ਜਾਣਕਾਰੀ ਪੇਸ਼ ਕਰੋ। ਨਾਲ ਸਾਰੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਖਤਮ ਕਰਕੇ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖੋ <br>
।
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
ਤੁਹਾਡੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਅੰਦਰ ਕਿਸੇ ਹੋਰ ਸਰੋਤ ਤੋਂ ਸਮੱਗਰੀ ਦੇ ਬਲਾਕਾਂ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ।
<blockquote>
ਕਿਸੇ ਵੀ HTML ਨੂੰ ਹਵਾਲੇ ਵਜੋਂ ਲਪੇਟੋ । ਸਿੱਧੇ ਕੋਟਸ ਲਈ, ਅਸੀਂ ਇੱਕ ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ <p>
।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
ਸਟੈਂਡਰਡ 'ਤੇ ਸਧਾਰਨ ਭਿੰਨਤਾਵਾਂ ਲਈ ਸ਼ੈਲੀ ਅਤੇ ਸਮੱਗਰੀ ਤਬਦੀਲੀਆਂ <blockquote>
।
<footer>
ਸਰੋਤ ਦੀ ਪਛਾਣ ਕਰਨ ਲਈ ਇੱਕ ਜੋੜੋ । ਵਿੱਚ ਸਰੋਤ ਕੰਮ ਦਾ ਨਾਮ ਲਪੇਟੋ <cite>
।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
.blockquote-reverse
ਸੱਜੇ-ਅਲਾਈਨ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਇੱਕ ਬਲਾਕਕੋਟ ਲਈ ਜੋੜੋ ।
<blockquote class="blockquote-reverse">
...
</blockquote>
ਆਈਟਮਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਜਿਸ ਵਿੱਚ ਆਰਡਰ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਮਾਇਨੇ ਨਹੀਂ ਰੱਖਦਾ।
<ul>
<li>...</li>
</ul>
ਆਈਟਮਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਜਿਸ ਵਿੱਚ ਆਰਡਰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ।
<ol>
<li>...</li>
</ol>
ਸੂਚੀ ਆਈਟਮਾਂ 'ਤੇ ਡਿਫੌਲਟ list-style
ਅਤੇ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨੂੰ ਹਟਾਓ (ਸਿਰਫ਼ ਤੁਰੰਤ ਬੱਚੇ)। ਇਹ ਸਿਰਫ਼ ਤੁਰੰਤ ਬੱਚਿਆਂ ਦੀ ਸੂਚੀ ਵਾਲੀਆਂ ਆਈਟਮਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ , ਮਤਲਬ ਕਿ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਨੇਸਟਡ ਸੂਚੀਆਂ ਲਈ ਵੀ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ।
<ul class="list-unstyled">
<li>...</li>
</ul>
ਸਾਰੀਆਂ ਸੂਚੀ ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ ਲਾਈਨ 'ਤੇ ਰੱਖੋ display: inline-block;
ਅਤੇ ਕੁਝ ਹਲਕੇ ਪੈਡਿੰਗ ਦੇ ਨਾਲ।
<ul class="list-inline">
<li>...</li>
</ul>
ਉਹਨਾਂ ਦੇ ਸੰਬੰਧਿਤ ਵਰਣਨ ਦੇ ਨਾਲ ਸ਼ਬਦਾਂ ਦੀ ਇੱਕ ਸੂਚੀ।
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
ਸ਼ਰਤਾਂ ਅਤੇ ਵਰਣਨ ਨੂੰ <dl>
ਨਾਲ-ਨਾਲ ਲਾਈਨ ਵਿੱਚ ਬਣਾਓ। ਡਿਫੌਲਟ s ਵਾਂਗ ਸਟੈਕਡ ਬੰਦ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ <dl>
, ਪਰ ਜਦੋਂ ਨਵਬਾਰ ਫੈਲਦਾ ਹੈ, ਤਾਂ ਇਹ ਕਰੋ।
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
ਹਰੀਜ਼ੱਟਲ ਵਰਣਨ ਸੂਚੀਆਂ ਉਹਨਾਂ ਸ਼ਬਦਾਂ ਨੂੰ ਕੱਟ ਦਿੰਦੀਆਂ ਹਨ ਜੋ ਖੱਬੇ ਕਾਲਮ ਵਿੱਚ ਫਿੱਟ ਹੋਣ ਲਈ ਬਹੁਤ ਲੰਬੇ ਹਨ text-overflow
। ਤੰਗ ਵਿਊਪੋਰਟਾਂ ਵਿੱਚ, ਉਹ ਡਿਫੌਲਟ ਸਟੈਕਡ ਲੇਆਉਟ ਵਿੱਚ ਬਦਲ ਜਾਣਗੇ।
ਕੋਡ ਦੇ ਇਨਲਾਈਨ ਸਨਿੱਪਟ ਨੂੰ ਨਾਲ ਲਪੇਟੋ <code>
।
<section>
ਇਨਲਾਈਨ ਦੇ ਰੂਪ ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ.
For example, <code><section></code> should be wrapped as inline.
<kbd>
ਇੰਪੁੱਟ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਵਰਤੋ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਕੀਬੋਰਡ ਦੁਆਰਾ ਦਾਖਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
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>
<pre>
ਕੋਡ ਦੀਆਂ ਕਈ ਲਾਈਨਾਂ ਲਈ ਵਰਤੋਂ । ਸਹੀ ਰੈਂਡਰਿੰਗ ਲਈ ਕੋਡ ਵਿੱਚ ਕਿਸੇ ਵੀ ਕੋਣ ਬਰੈਕਟਾਂ ਤੋਂ ਬਚਣਾ ਯਕੀਨੀ ਬਣਾਓ।
<p>ਇੱਥੇ ਨਮੂਨਾ ਪਾਠ...</p>
<pre><p>Sample text here...</p></pre>
ਤੁਸੀਂ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ .pre-scrollable
ਕਲਾਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ, ਜੋ 350px ਦੀ ਅਧਿਕਤਮ-ਉਚਾਈ ਸੈੱਟ ਕਰੇਗੀ ਅਤੇ ਇੱਕ y-ਧੁਰੀ ਸਕ੍ਰੌਲਬਾਰ ਪ੍ਰਦਾਨ ਕਰੇਗੀ।
ਵੇਰੀਏਬਲ ਨੂੰ ਦਰਸਾਉਣ ਲਈ <var>
ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ।
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ਇੱਕ ਪ੍ਰੋਗਰਾਮ ਤੋਂ ਬਲਾਕ ਨਮੂਨਾ ਆਉਟਪੁੱਟ ਨੂੰ ਦਰਸਾਉਣ ਲਈ <samp>
ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਇਹ ਟੈਕਸਟ ਇੱਕ ਕੰਪਿਊਟਰ ਪ੍ਰੋਗਰਾਮ ਤੋਂ ਨਮੂਨਾ ਆਉਟਪੁੱਟ ਦੇ ਰੂਪ ਵਿੱਚ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।
<samp>This text is meant to be treated as sample output from a computer program.</samp>
.table
ਮੁੱਢਲੀ ਸਟਾਈਲਿੰਗ ਲਈ—ਹਲਕੀ ਪੈਡਿੰਗ ਅਤੇ ਸਿਰਫ਼ ਹਰੀਜੱਟਲ ਡਿਵਾਈਡਰ— ਕਿਸੇ ਵੀ 'ਤੇ ਬੇਸ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ <table>
। ਇਹ ਬਹੁਤ ਬੇਲੋੜਾ ਜਾਪਦਾ ਹੈ, ਪਰ ਹੋਰ ਪਲੱਗਇਨਾਂ ਜਿਵੇਂ ਕਿ ਕੈਲੰਡਰਾਂ ਅਤੇ ਮਿਤੀ ਚੋਣਕਾਰਾਂ ਲਈ ਟੇਬਲਾਂ ਦੀ ਵਿਆਪਕ ਵਰਤੋਂ ਦੇ ਮੱਦੇਨਜ਼ਰ, ਅਸੀਂ ਆਪਣੀਆਂ ਕਸਟਮ ਟੇਬਲ ਸ਼ੈਲੀਆਂ ਨੂੰ ਅਲੱਗ ਕਰਨ ਦੀ ਚੋਣ ਕੀਤੀ ਹੈ।
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਯੂਜ਼ਰਨੇਮ |
---|---|---|---|
1 | ਮਾਰਕ | ਓਟੋ | @mdo |
2 | ਜੈਕਬ | ਥੋਰਨਟਨ | @ਚਰਬੀ |
3 | ਲੈਰੀ | ਪੰਛੀ | @ਟਵਿੱਟਰ |
<table class="table">
...
</table>
.table-striped
ਦੇ ਅੰਦਰ ਕਿਸੇ ਵੀ ਟੇਬਲ ਕਤਾਰ ਵਿੱਚ ਜ਼ੈਬਰਾ-ਸਟ੍ਰਿਪਿੰਗ ਜੋੜਨ ਲਈ ਵਰਤੋਂ <tbody>
।
ਸਟ੍ਰਿਪਡ ਟੇਬਲਾਂ ਨੂੰ :nth-child
CSS ਚੋਣਕਾਰ ਦੁਆਰਾ ਸਟਾਈਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਕਿ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਯੂਜ਼ਰਨੇਮ |
---|---|---|---|
1 | ਮਾਰਕ | ਓਟੋ | @mdo |
2 | ਜੈਕਬ | ਥੋਰਨਟਨ | @ਚਰਬੀ |
3 | ਲੈਰੀ | ਪੰਛੀ | @ਟਵਿੱਟਰ |
<table class="table table-striped">
...
</table>
.table-bordered
ਟੇਬਲ ਅਤੇ ਸੈੱਲਾਂ ਦੇ ਸਾਰੇ ਪਾਸਿਆਂ 'ਤੇ ਬਾਰਡਰਾਂ ਲਈ ਜੋੜੋ ।
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਯੂਜ਼ਰਨੇਮ |
---|---|---|---|
1 | ਮਾਰਕ | ਓਟੋ | @mdo |
2 | ਜੈਕਬ | ਥੋਰਨਟਨ | @ਚਰਬੀ |
3 | ਲੈਰੀ | ਪੰਛੀ | @ਟਵਿੱਟਰ |
<table class="table table-bordered">
...
</table>
.table-hover
ਇੱਕ ਦੇ ਅੰਦਰ ਸਾਰਣੀ ਦੀਆਂ ਕਤਾਰਾਂ 'ਤੇ ਇੱਕ ਹੋਵਰ ਸਥਿਤੀ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ <tbody>
।
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਯੂਜ਼ਰਨੇਮ |
---|---|---|---|
1 | ਮਾਰਕ | ਓਟੋ | @mdo |
2 | ਜੈਕਬ | ਥੋਰਨਟਨ | @ਚਰਬੀ |
3 | ਲੈਰੀ | ਪੰਛੀ | @ਟਵਿੱਟਰ |
<table class="table table-hover">
...
</table>
.table-condensed
ਸੈੱਲ ਪੈਡਿੰਗ ਨੂੰ ਅੱਧੇ ਵਿੱਚ ਕੱਟ ਕੇ ਟੇਬਲ ਨੂੰ ਹੋਰ ਸੰਖੇਪ ਬਣਾਉਣ ਲਈ ਜੋੜੋ ।
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਯੂਜ਼ਰਨੇਮ |
---|---|---|---|
1 | ਮਾਰਕ | ਓਟੋ | @mdo |
2 | ਜੈਕਬ | ਥੋਰਨਟਨ | @ਚਰਬੀ |
3 | ਲੈਰੀ ਦ ਬਰਡ | @ਟਵਿੱਟਰ |
<table class="table table-condensed">
...
</table>
ਸਾਰਣੀ ਦੀਆਂ ਕਤਾਰਾਂ ਜਾਂ ਵਿਅਕਤੀਗਤ ਸੈੱਲਾਂ ਨੂੰ ਰੰਗ ਦੇਣ ਲਈ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕਲਾਸ | ਵਰਣਨ |
---|---|
.active |
ਕਿਸੇ ਖਾਸ ਕਤਾਰ ਜਾਂ ਸੈੱਲ 'ਤੇ ਹੋਵਰ ਰੰਗ ਲਾਗੂ ਕਰਦਾ ਹੈ |
.success |
ਇੱਕ ਸਫਲ ਜਾਂ ਸਕਾਰਾਤਮਕ ਕਾਰਵਾਈ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ |
.info |
ਇੱਕ ਨਿਰਪੱਖ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਤਬਦੀਲੀ ਜਾਂ ਕਾਰਵਾਈ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ |
.warning |
ਇੱਕ ਚੇਤਾਵਨੀ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਸਨੂੰ ਧਿਆਨ ਦੇਣ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ |
.danger |
ਇੱਕ ਖਤਰਨਾਕ ਜਾਂ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਨਕਾਰਾਤਮਕ ਕਾਰਵਾਈ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ |
# | ਕਾਲਮ ਸਿਰਲੇਖ | ਕਾਲਮ ਸਿਰਲੇਖ | ਕਾਲਮ ਸਿਰਲੇਖ |
---|---|---|---|
1 | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ |
2 | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ |
3 | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ |
4 | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ |
5 | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ |
6 | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ |
7 | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ |
8 | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ |
9 | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ | ਕਾਲਮ ਸਮੱਗਰੀ |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
ਇੱਕ ਸਾਰਣੀ ਕਤਾਰ ਜਾਂ ਵਿਅਕਤੀਗਤ ਸੈੱਲ ਵਿੱਚ ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਸੰਬੰਧਿਤ ਸਾਰਣੀ ਕਤਾਰ/ਸੈੱਲ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਟੈਕਸਟ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਵੇਂ ਕਿ .sr-only
ਕਲਾਸ ਦੇ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ।
ਉਹਨਾਂ ਨੂੰ ਛੋਟੀਆਂ ਡਿਵਾਈਸਾਂ (768px ਤੋਂ ਘੱਟ) 'ਤੇ ਖਿਤਿਜੀ ਰੂਪ ਵਿੱਚ ਸਕ੍ਰੋਲ ਕਰਨ ਲਈ ਕਿਸੇ ਵੀ .table
ਵਿੱਚ ਲਪੇਟ ਕੇ ਜਵਾਬਦੇਹ ਟੇਬਲ ਬਣਾਓ । .table-responsive
768px ਚੌੜੀ ਤੋਂ ਵੱਡੀ ਕਿਸੇ ਵੀ ਚੀਜ਼ 'ਤੇ ਦੇਖਣ ਵੇਲੇ, ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਟੇਬਲਾਂ ਵਿੱਚ ਕੋਈ ਅੰਤਰ ਨਹੀਂ ਦਿਖਾਈ ਦੇਵੇਗਾ।
ਜਵਾਬਦੇਹ ਟੇਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ overflow-y: hidden
, ਜੋ ਕਿਸੇ ਵੀ ਸਮਗਰੀ ਨੂੰ ਕਲਿੱਪ ਕਰਦਾ ਹੈ ਜੋ ਸਾਰਣੀ ਦੇ ਹੇਠਲੇ ਜਾਂ ਉੱਪਰਲੇ ਕਿਨਾਰਿਆਂ ਤੋਂ ਪਰੇ ਜਾਂਦੀ ਹੈ। ਖਾਸ ਤੌਰ 'ਤੇ, ਇਹ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਅਤੇ ਹੋਰ ਤੀਜੀ-ਧਿਰ ਵਿਜੇਟਸ ਨੂੰ ਕਲਿੱਪ ਕਰ ਸਕਦਾ ਹੈ।
ਫਾਇਰਫਾਕਸ ਵਿੱਚ ਕੁਝ ਅਜੀਬ ਫੀਲਡਸੈੱਟ ਸਟਾਈਲਿੰਗ ਹਨ width
ਜੋ ਜਵਾਬਦੇਹ ਸਾਰਣੀ ਵਿੱਚ ਦਖਲ ਦਿੰਦੀਆਂ ਹਨ। ਇਸਨੂੰ ਫਾਇਰਫਾਕਸ-ਵਿਸ਼ੇਸ਼ ਹੈਕ ਤੋਂ ਬਿਨਾਂ ਓਵਰਰਾਈਡ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜੋ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰਦੇ ਹਾਂ:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਇਹ ਸਟੈਕ ਓਵਰਫਲੋ ਜਵਾਬ ਪੜ੍ਹੋ ।
# | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ |
---|---|---|---|---|---|---|
1 | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ |
2 | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ |
3 | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ |
# | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ | ਸਾਰਣੀ ਸਿਰਲੇਖ |
---|---|---|---|---|---|---|
1 | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ |
2 | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ |
3 | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ | ਟੇਬਲ ਸੈੱਲ |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
ਵਿਅਕਤੀਗਤ ਫਾਰਮ ਨਿਯੰਤਰਣ ਆਪਣੇ ਆਪ ਕੁਝ ਗਲੋਬਲ ਸਟਾਈਲਿੰਗ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ। ਨਾਲ ਸਾਰੇ ਪਾਠ <input>
, <textarea>
ਅਤੇ <select>
ਤੱਤ ਮੂਲ ਰੂਪ .form-control
ਵਿੱਚ ਸੈੱਟ ਕੀਤੇ width: 100%;
ਗਏ ਹਨ। .form-group
ਸਰਵੋਤਮ ਸਪੇਸਿੰਗ ਲਈ ਲੇਬਲ ਅਤੇ ਨਿਯੰਤਰਣ ਲਪੇਟੋ ।
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
ਫਾਰਮ ਗਰੁੱਪਾਂ ਨੂੰ ਸਿੱਧੇ ਇਨਪੁਟ ਗਰੁੱਪਾਂ ਨਾਲ ਨਾ ਮਿਲਾਓ । ਇਸ ਦੀ ਬਜਾਏ, ਫਾਰਮ ਗਰੁੱਪ ਦੇ ਅੰਦਰ ਇੰਪੁੱਟ ਗਰੁੱਪ ਨੂੰ ਨੇਸਟ ਕਰੋ।
ਖੱਬੇ-ਸੰਗਠਿਤ ਅਤੇ ਇਨਲਾਈਨ-ਬਲਾਕ ਨਿਯੰਤਰਣਾਂ .form-inline
ਲਈ ਆਪਣੇ ਫਾਰਮ (ਜਿਸ ਦਾ ਹੋਣਾ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ ) ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ । ਇਹ ਸਿਰਫ਼ ਵਿਊਪੋਰਟਾਂ ਦੇ ਅੰਦਰ ਉਹਨਾਂ ਫਾਰਮਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ ਜੋ ਘੱਟੋ-ਘੱਟ 768px ਚੌੜੇ ਹਨ।<form>
width: 100%;
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਮੂਲ ਰੂਪ ਵਿੱਚ ਇਨਪੁਟਸ ਅਤੇ ਚੋਣ ਲਾਗੂ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ। ਇਨਲਾਈਨ ਫਾਰਮਾਂ ਦੇ ਅੰਦਰ, ਅਸੀਂ ਇਸ ਨੂੰ ਰੀਸੈਟ ਕਰਦੇ ਹਾਂ width: auto;
ਤਾਂ ਕਿ ਕਈ ਨਿਯੰਤਰਣ ਇੱਕੋ ਲਾਈਨ 'ਤੇ ਰਹਿ ਸਕਣ। ਤੁਹਾਡੇ ਖਾਕੇ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਵਾਧੂ ਕਸਟਮ ਚੌੜਾਈ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।
ਜੇਕਰ ਤੁਸੀਂ ਹਰੇਕ ਇਨਪੁੱਟ ਲਈ ਲੇਬਲ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਦੇ ਹੋ ਤਾਂ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਤੁਹਾਡੇ ਫਾਰਮਾਂ ਨਾਲ ਸਮੱਸਿਆ ਹੋਵੇਗੀ। ਇਹਨਾਂ ਇਨਲਾਈਨ ਫਾਰਮਾਂ ਲਈ, ਤੁਸੀਂ .sr-only
ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੇਬਲਾਂ ਨੂੰ ਲੁਕਾ ਸਕਦੇ ਹੋ। ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਲਈ ਲੇਬਲ ਪ੍ਰਦਾਨ ਕਰਨ ਦੇ ਹੋਰ ਵਿਕਲਪਿਕ ਤਰੀਕੇ ਹਨ, ਜਿਵੇਂ ਕਿ aria-label
, aria-labelledby
ਜਾਂ title
ਗੁਣ। ਜੇਕਰ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਮੌਜੂਦ ਨਹੀਂ ਹੈ, ਤਾਂ ਸਕ੍ਰੀਨ ਰੀਡਰ placeholder
ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਹਾਰਾ ਲੈ ਸਕਦੇ ਹਨ, ਜੇਕਰ ਮੌਜੂਦ ਹੈ, ਪਰ ਨੋਟ ਕਰੋ ਕਿ placeholder
ਹੋਰ ਲੇਬਲਿੰਗ ਵਿਧੀਆਂ ਦੇ ਬਦਲ ਵਜੋਂ ਵਰਤਣ ਦੀ ਸਲਾਹ ਨਹੀਂ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ।
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
ਫਾਰਮ ਨੂੰ ਜੋੜ ਕੇ ਇੱਕ ਖਿਤਿਜੀ ਲੇਆਉਟ ਵਿੱਚ ਲੇਬਲਾਂ ਅਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਦੇ ਸਮੂਹਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਨ ਲਈ ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ .form-horizontal
(ਜਿਸਦਾ ਇੱਕ ਹੋਣਾ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ <form>
)। ਅਜਿਹਾ ਕਰਨ .form-group
ਨਾਲ ਗਰਿੱਡ ਕਤਾਰਾਂ ਵਾਂਗ ਵਿਵਹਾਰ ਕਰਨ ਲਈ s ਬਦਲ ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ ਕੋਈ ਲੋੜ ਨਹੀਂ .row
।
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
ਉਦਾਹਰਨ ਫਾਰਮ ਲੇਆਉਟ ਵਿੱਚ ਸਮਰਥਿਤ ਮਿਆਰੀ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਦੀਆਂ ਉਦਾਹਰਨਾਂ।
ਸਭ ਤੋਂ ਆਮ ਫਾਰਮ ਨਿਯੰਤਰਣ, ਟੈਕਸਟ-ਅਧਾਰਿਤ ਇਨਪੁਟ ਖੇਤਰ। ਸਾਰੀਆਂ HTML5 ਕਿਸਮਾਂ ਲਈ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, ਅਤੇ color
.
ਇਨਪੁਟਸ ਤਾਂ ਹੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਟਾਈਲ ਕੀਤੇ ਜਾਣਗੇ ਜੇਕਰ ਉਹਨਾਂ type
ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਘੋਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ।
<input type="text" class="form-control" placeholder="Text input">
ਕਿਸੇ ਵੀ ਟੈਕਸਟ-ਅਧਾਰਿਤ ਤੋਂ ਪਹਿਲਾਂ ਅਤੇ/ਜਾਂ ਬਾਅਦ ਵਿੱਚ ਏਕੀਕ੍ਰਿਤ ਟੈਕਸਟ ਜਾਂ ਬਟਨ ਜੋੜਨ ਲਈ <input>
, ਇਨਪੁਟ ਗਰੁੱਪ ਕੰਪੋਨੈਂਟ ਦੀ ਜਾਂਚ ਕਰੋ ।
ਫਾਰਮ ਨਿਯੰਤਰਣ ਜੋ ਟੈਕਸਟ ਦੀਆਂ ਕਈ ਲਾਈਨਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। rows
ਲੋੜ ਅਨੁਸਾਰ ਗੁਣ ਬਦਲੋ ।
<textarea class="form-control" rows="3"></textarea>
ਚੈਕਬਾਕਸ ਇੱਕ ਸੂਚੀ ਵਿੱਚ ਇੱਕ ਜਾਂ ਕਈ ਵਿਕਲਪਾਂ ਨੂੰ ਚੁਣਨ ਲਈ ਹੁੰਦੇ ਹਨ, ਜਦੋਂ ਕਿ ਰੇਡੀਓ ਬਹੁਤ ਸਾਰੇ ਵਿੱਚੋਂ ਇੱਕ ਵਿਕਲਪ ਚੁਣਨ ਲਈ ਹੁੰਦੇ ਹਨ।
ਅਸਮਰਥਿਤ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਸਮਰਥਿਤ ਹਨ, ਪਰ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਹੋਵਰ 'ਤੇ ਇੱਕ "ਅਨੁਕੂਲ ਨਹੀਂ" ਕਰਸਰ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਕਲਾਸ ਨੂੰ ਮਾਤਾ-ਪਿਤਾ , , , ਜਾਂ <label>
ਵਿੱਚ ਜੋੜਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ।.disabled
.radio
.radio-inline
.checkbox
.checkbox-inline
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
ਉਸੇ ਲਾਈਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਨਿਯੰਤਰਣ ਲਈ ਚੈਕਬਾਕਸ ਜਾਂ ਰੇਡੀਓ ਦੀ ਲੜੀ 'ਤੇ .checkbox-inline
ਜਾਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।.radio-inline
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਦੇ ਅੰਦਰ ਕੋਈ ਟੈਕਸਟ ਨਹੀਂ ਹੈ <label>
, ਤਾਂ ਇੰਪੁੱਟ ਨੂੰ ਉਸੇ ਤਰ੍ਹਾਂ ਰੱਖਿਆ ਜਾਵੇਗਾ ਜਿਵੇਂ ਤੁਸੀਂ ਉਮੀਦ ਕਰਦੇ ਹੋ। ਵਰਤਮਾਨ ਵਿੱਚ ਸਿਰਫ਼ ਗੈਰ-ਇਨਲਾਈਨ ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ। ਅਜੇ ਵੀ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਲਈ ਲੇਬਲ ਦੇ ਕੁਝ ਰੂਪ ਪ੍ਰਦਾਨ ਕਰਨਾ ਯਾਦ ਰੱਖੋ (ਉਦਾਹਰਨ ਲਈ, ਦੀ ਵਰਤੋਂ ਕਰਨਾ aria-label
)।
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>
ਨੋਟ ਕਰੋ ਕਿ ਬਹੁਤ ਸਾਰੇ ਮੂਲ ਚੋਣਵੇਂ ਮੀਨੂ - ਅਰਥਾਤ ਸਫਾਰੀ ਅਤੇ ਕ੍ਰੋਮ ਵਿੱਚ - ਦੇ ਗੋਲ ਕੋਨੇ ਹਨ ਜੋ border-radius
ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੁਆਰਾ ਸੰਸ਼ੋਧਿਤ ਨਹੀਂ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select>
ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਨਿਯੰਤਰਣ ਲਈ multiple
, ਮੂਲ ਰੂਪ ਵਿੱਚ ਕਈ ਵਿਕਲਪ ਦਿਖਾਏ ਜਾਂਦੇ ਹਨ।
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
ਜਦੋਂ ਤੁਹਾਨੂੰ ਇੱਕ ਫਾਰਮ ਦੇ ਅੰਦਰ ਇੱਕ ਫਾਰਮ ਲੇਬਲ ਦੇ ਅੱਗੇ ਸਾਦਾ ਪਾਠ ਰੱਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਤਾਂ .form-control-static
ਇੱਕ 'ਤੇ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ <p>
।
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>
outline
ਅਸੀਂ ਕੁਝ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ 'ਤੇ ਡਿਫੌਲਟ ਸਟਾਈਲ ਨੂੰ ਹਟਾਉਂਦੇ ਹਾਂ ਅਤੇ box-shadow
ਇਸਦੀ ਥਾਂ 'ਤੇ ਲਈ ਲਾਗੂ ਕਰਦੇ ਹਾਂ :focus
।
:focus
ਸਥਿਤੀਉਪਰੋਕਤ ਉਦਾਹਰਨ ਇੰਪੁੱਟ ਸਾਡੇ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਕਸਟਮ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ :focus
ਜੋ ਇੱਕ 'ਤੇ ਸਥਿਤੀ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕੀਤਾ ਜਾ ਸਕੇ .form-control
।
disabled
ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਰੋਕਣ ਲਈ ਇੱਕ ਇਨਪੁਟ 'ਤੇ ਬੂਲੀਅਨ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ । ਅਯੋਗ ਇਨਪੁਟਸ ਹਲਕੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਅਤੇ ਇੱਕ not-allowed
ਕਰਸਰ ਜੋੜਦੇ ਹਨ।
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
ਇੱਕ ਵਾਰ ਵਿੱਚ ਸਾਰੇ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਅਯੋਗ ਕਰਨ disabled
ਲਈ a ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ ।<fieldset>
<fieldset>
<a>
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ, ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਦੇ ਅੰਦਰ ਸਾਰੇ ਮੂਲ ਰੂਪ ਨਿਯੰਤਰਣ ( <input>
, <select>
ਅਤੇ <button>
ਤੱਤ) <fieldset disabled>
ਨੂੰ ਅਸਮਰੱਥ ਸਮਝਣਗੇ, ਉਹਨਾਂ 'ਤੇ ਕੀਬੋਰਡ ਅਤੇ ਮਾਊਸ ਦੇ ਆਪਸੀ ਤਾਲਮੇਲ ਨੂੰ ਰੋਕਦੇ ਹੋਏ। ਹਾਲਾਂਕਿ, ਜੇਕਰ ਤੁਹਾਡੇ ਫਾਰਮ ਵਿੱਚ <a ... class="btn btn-*">
ਤੱਤ ਵੀ ਸ਼ਾਮਲ ਹਨ, ਤਾਂ ਇਹਨਾਂ ਨੂੰ ਸਿਰਫ ਦੀ ਇੱਕ ਸ਼ੈਲੀ ਦਿੱਤੀ ਜਾਵੇਗੀ pointer-events: none
। ਜਿਵੇਂ ਕਿ ਬਟਨਾਂ ਲਈ ਅਯੋਗ ਸਥਿਤੀ ਬਾਰੇ ਭਾਗ ਵਿੱਚ ਨੋਟ ਕੀਤਾ ਗਿਆ ਹੈ (ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ ਐਂਕਰ ਐਲੀਮੈਂਟਸ ਲਈ ਉਪ-ਭਾਗ ਵਿੱਚ), ਇਹ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਅਜੇ ਪ੍ਰਮਾਣਿਤ ਨਹੀਂ ਹੈ ਅਤੇ ਓਪੇਰਾ 18 ਅਤੇ ਹੇਠਾਂ, ਜਾਂ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰਰ 11 ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ, ਅਤੇ ਜਿੱਤੀ ਗਈ ਹੈ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇਹਨਾਂ ਲਿੰਕਾਂ ਨੂੰ ਫੋਕਸ ਕਰਨ ਜਾਂ ਸਰਗਰਮ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣ ਤੋਂ ਨਹੀਂ ਰੋਕਦਾ। ਇਸ ਲਈ ਸੁਰੱਖਿਅਤ ਰਹਿਣ ਲਈ, ਅਜਿਹੇ ਲਿੰਕਾਂ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ।
disabled
ਜਦੋਂ ਕਿ ਬੂਟਸਟਰੈਪ ਇਹਨਾਂ ਸਟਾਈਲਾਂ ਨੂੰ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਲਾਗੂ ਕਰੇਗਾ, ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 11 ਅਤੇ ਇਸਤੋਂ ਹੇਠਾਂ ਇੱਕ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ <fieldset>
। ਇਹਨਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਫੀਲਡਸੈੱਟ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ।
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
readonly
ਇੰਪੁੱਟ ਦੇ ਮੁੱਲ ਨੂੰ ਸੋਧਣ ਤੋਂ ਰੋਕਣ ਲਈ ਇੱਕ ਇਨਪੁਟ 'ਤੇ ਬੂਲੀਅਨ ਗੁਣ ਸ਼ਾਮਲ ਕਰੋ । ਸਿਰਫ਼-ਪੜ੍ਹਨ ਲਈ ਇਨਪੁੱਟ ਹਲਕੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ (ਬਿਲਕੁਲ ਅਯੋਗ ਇਨਪੁਟਸ ਵਾਂਗ), ਪਰ ਮਿਆਰੀ ਕਰਸਰ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹਨ।
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
ਫਾਰਮ ਨਿਯੰਤਰਣ ਲਈ ਬਲਾਕ ਪੱਧਰ ਦੀ ਮਦਦ ਟੈਕਸਟ।
ਮਦਦ ਟੈਕਸਟ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਨਾਲ ਜੋੜਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ aria-describedby
ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੇਗਾ ਕਿ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ - ਇਸ ਮਦਦ ਟੈਕਸਟ ਦੀ ਘੋਸ਼ਣਾ ਕਰਨਗੇ ਜਦੋਂ ਉਪਭੋਗਤਾ ਫੋਕਸ ਕਰਦਾ ਹੈ ਜਾਂ ਕੰਟਰੋਲ ਵਿੱਚ ਦਾਖਲ ਹੁੰਦਾ ਹੈ।
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ 'ਤੇ ਗਲਤੀ, ਚੇਤਾਵਨੀ, ਅਤੇ ਸਫਲਤਾ ਦੀਆਂ ਸਥਿਤੀਆਂ ਲਈ ਪ੍ਰਮਾਣਿਕਤਾ ਸਟਾਈਲ ਸ਼ਾਮਲ ਹਨ। ਵਰਤਣ ਲਈ, ਜੋੜੋ .has-warning
, .has-error
, ਜਾਂ .has-success
ਮੂਲ ਤੱਤ ਵਿੱਚ। ਕੋਈ ਵੀ .control-label
, .form-control
, ਅਤੇ .help-block
ਉਸ ਤੱਤ ਦੇ ਅੰਦਰ ਪ੍ਰਮਾਣਿਕਤਾ ਸਟਾਈਲ ਪ੍ਰਾਪਤ ਕਰੇਗਾ।
ਫਾਰਮ ਨਿਯੰਤਰਣ ਦੀ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਇਹਨਾਂ ਪ੍ਰਮਾਣਿਕਤਾ ਸ਼ੈਲੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸਿਰਫ ਇੱਕ ਵਿਜ਼ੂਅਲ, ਰੰਗ-ਅਧਾਰਿਤ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ - ਜਾਂ ਕਲਰ ਬਲਾਇੰਡ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ।
ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਰਾਜ ਦਾ ਵਿਕਲਪਿਕ ਸੰਕੇਤ ਵੀ ਪ੍ਰਦਾਨ ਕੀਤਾ ਗਿਆ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਫਾਰਮ ਨਿਯੰਤਰਣ ਦੇ <label>
ਪਾਠ ਵਿੱਚ ਸਥਿਤੀ ਬਾਰੇ ਇੱਕ ਸੰਕੇਤ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ (ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿੱਤੀ ਕੋਡ ਉਦਾਹਰਨ ਵਿੱਚ ਮਾਮਲਾ ਹੈ), ਇੱਕ ਗਲਾਈਫਿਕਨ.sr-only
ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ ( ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਢੁਕਵੇਂ ਵਿਕਲਪਿਕ ਟੈਕਸਟ ਦੇ ਨਾਲ - ਗਲਾਈਫਿਕਨ ਉਦਾਹਰਨਾਂ ਦੇਖੋ ), ਜਾਂ ਇੱਕ ਪ੍ਰਦਾਨ ਕਰਕੇ ਵਾਧੂ ਮਦਦ ਟੈਕਸਟ ਬਲਾਕ। aria-invalid="true"
ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਲਈ, ਅਵੈਧ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਵੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨਿਰਧਾਰਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
ਤੁਸੀਂ ਵਿਕਲਪਿਕ ਫੀਡਬੈਕ ਆਈਕਨ ਨੂੰ ਜੋੜ ਕੇ .has-feedback
ਅਤੇ ਸਹੀ ਆਈਕਨ ਦੇ ਨਾਲ ਵੀ ਜੋੜ ਸਕਦੇ ਹੋ।
ਫੀਡਬੈਕ ਆਈਕਨ ਸਿਰਫ਼ ਪਾਠ <input class="form-control">
ਤੱਤਾਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ।
ਬਿਨਾਂ ਲੇਬਲ ਦੇ ਇਨਪੁਟਸ ਲਈ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਐਡ-ਆਨ ਵਾਲੇ ਇਨਪੁਟ ਸਮੂਹਾਂ ਲਈ ਫੀਡਬੈਕ ਆਈਕਨਾਂ ਦੀ ਮੈਨੂਅਲ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ । ਤੁਹਾਨੂੰ ਪਹੁੰਚਯੋਗਤਾ ਕਾਰਨਾਂ ਕਰਕੇ ਸਾਰੇ ਇਨਪੁਟਸ ਲਈ ਲੇਬਲ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਜ਼ੋਰਦਾਰ ਉਤਸ਼ਾਹਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਲੇਬਲਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣ ਤੋਂ ਰੋਕਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਉਹਨਾਂ ਨੂੰ .sr-only
ਕਲਾਸ ਨਾਲ ਲੁਕਾਓ। ਜੇਕਰ ਤੁਹਾਨੂੰ ਲੇਬਲਾਂ ਤੋਂ ਬਿਨਾਂ ਕਰਨਾ ਹੈ, top
ਤਾਂ ਫੀਡਬੈਕ ਪ੍ਰਤੀਕ ਦੇ ਮੁੱਲ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰੋ। ਇਨਪੁਟ ਸਮੂਹਾਂ ਲਈ, right
ਤੁਹਾਡੇ ਐਡਆਨ ਦੀ ਚੌੜਾਈ ਦੇ ਅਧਾਰ ਤੇ ਮੁੱਲ ਨੂੰ ਇੱਕ ਉਚਿਤ ਪਿਕਸਲ ਮੁੱਲ ਵਿੱਚ ਅਨੁਕੂਲਿਤ ਕਰੋ।
ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਸਹਾਇਕ ਤਕਨੀਕਾਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ - ਇੱਕ ਆਈਕਨ ਦੇ ਅਰਥ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਵਿਅਕਤ ਕਰਦੀਆਂ ਹਨ, ਵਾਧੂ ਲੁਕਵੇਂ ਟੈਕਸਟ ਨੂੰ .sr-only
ਕਲਾਸ ਦੇ ਨਾਲ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਨਾਲ ਜੋੜਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਇਸਦੀ ਵਰਤੋਂ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ aria-describedby
। ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਅਰਥ (ਉਦਾਹਰਨ ਲਈ, ਇਹ ਤੱਥ ਕਿ ਇੱਕ ਖਾਸ ਟੈਕਸਟ ਐਂਟਰੀ ਖੇਤਰ ਲਈ ਇੱਕ ਚੇਤਾਵਨੀ ਹੈ) ਕਿਸੇ ਹੋਰ ਰੂਪ ਵਿੱਚ ਵਿਅਕਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਵੇਂ ਕਿ <label>
ਫਾਰਮ ਨਿਯੰਤਰਣ ਨਾਲ ਜੁੜੇ ਅਸਲ ਦੇ ਪਾਠ ਨੂੰ ਬਦਲਣਾ।
ਹਾਲਾਂਕਿ ਨਿਮਨਲਿਖਤ ਉਦਾਹਰਨਾਂ ਪਹਿਲਾਂ ਹੀ ਟੈਕਸਟ ਵਿੱਚ ਉਹਨਾਂ ਦੇ ਸਬੰਧਤ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਦੀ ਪ੍ਰਮਾਣਿਕਤਾ ਸਥਿਤੀ ਦਾ ਜ਼ਿਕਰ ਕਰਦੀਆਂ ਹਨ <label>
, ਉਪਰੋਕਤ ਤਕਨੀਕ ( .sr-only
ਟੈਕਸਟ ਅਤੇ aria-describedby
) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਵਿਆਖਿਆਤਮਕ ਉਦੇਸ਼ਾਂ ਲਈ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ਹੈ।
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>
.sr-only
ਲੇਬਲਾਂ ਦੇ ਨਾਲ ਵਿਕਲਪਿਕ ਆਈਕਾਨਜੇਕਰ ਤੁਸੀਂ .sr-only
ਇੱਕ ਫਾਰਮ ਨਿਯੰਤਰਣ ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ <label>
(ਦੂਜੇ ਲੇਬਲਿੰਗ ਵਿਕਲਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਬਜਾਏ, ਜਿਵੇਂ ਕਿ aria-label
ਵਿਸ਼ੇਸ਼ਤਾ), ਤਾਂ ਬੂਟਸਟਰੈਪ ਆਪਣੇ ਆਪ ਹੀ ਆਈਕਨ ਦੀ ਸਥਿਤੀ ਨੂੰ ਐਡਜਸਟ ਕਰ ਦੇਵੇਗਾ ਜਦੋਂ ਇਹ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ।
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
ਵਰਗੀਆਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਚਾਈ ਸੈੱਟ ਕਰੋ .input-lg
, ਅਤੇ ਗਰਿੱਡ ਕਾਲਮ ਵਰਗਾਂ ਜਿਵੇਂ ਕਿ ਚੌੜਾਈ ਸੈੱਟ ਕਰੋ .col-lg-*
।
ਲੰਬੇ ਜਾਂ ਛੋਟੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਬਣਾਓ ਜੋ ਬਟਨ ਦੇ ਆਕਾਰ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ।
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
ਜਾਂ .form-horizontal
ਜੋੜ ਕੇ ਅੰਦਰ ਲੇਬਲ ਅਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਆਕਾਰ ਦਿਓ ।.form-group-lg
.form-group-sm
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
ਲੋੜੀਦੀ ਚੌੜਾਈ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਲਾਗੂ ਕਰਨ ਲਈ ਗਰਿੱਡ ਕਾਲਮਾਂ, ਜਾਂ ਕਿਸੇ ਵੀ ਕਸਟਮ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ ਵਿੱਚ ਇਨਪੁਟਸ ਨੂੰ ਸਮੇਟਣਾ।
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
<a>
ਇੱਕ , <button>
, ਜਾਂ <input>
ਤੱਤ 'ਤੇ ਬਟਨ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
ਜਦੋਂ ਕਿ ਬਟਨ ਕਲਾਸਾਂ ਨੂੰ ਔਨ <a>
ਅਤੇ <button>
ਐਲੀਮੈਂਟਸ 'ਤੇ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਸਿਰਫ਼ <button>
ਐਲੀਮੈਂਟਸ ਹੀ ਸਾਡੇ nav ਅਤੇ navbar ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰ ਸਮਰਥਿਤ ਹਨ।
ਜੇਕਰ <a>
ਤੱਤ ਬਟਨਾਂ ਦੇ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ - ਮੌਜੂਦਾ ਪੰਨੇ ਦੇ ਅੰਦਰ ਕਿਸੇ ਹੋਰ ਦਸਤਾਵੇਜ਼ ਜਾਂ ਸੈਕਸ਼ਨ 'ਤੇ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਬਜਾਏ - ਇਨ-ਪੇਜ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਚਾਲੂ ਕਰਨ ਲਈ - ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਢੁਕਵਾਂ ਵੀ ਦਿੱਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ role="button"
।
ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ ਦੇ ਤੌਰ 'ਤੇ, ਅਸੀਂ ਮੇਲ ਖਾਂਦੇ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਰੈਂਡਰਿੰਗ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਜ਼ੋਰਦਾਰ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ ।<button>
ਹੋਰ ਚੀਜ਼ਾਂ ਦੇ ਨਾਲ, ਫਾਇਰਫਾਕਸ <30 ਵਿੱਚ ਇੱਕ ਬੱਗ ਹੈline-height
ਜੋ ਸਾਨੂੰ -ਆਧਾਰਿਤ ਬਟਨਾਂ ਨੂੰ ਸੈੱਟ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ <input>
, ਜਿਸ ਕਾਰਨ ਉਹ ਫਾਇਰਫਾਕਸ ਦੇ ਦੂਜੇ ਬਟਨਾਂ ਦੀ ਉਚਾਈ ਨਾਲ ਬਿਲਕੁਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦੇ।
ਤੇਜ਼ੀ ਨਾਲ ਸਟਾਈਲ ਵਾਲਾ ਬਟਨ ਬਣਾਉਣ ਲਈ ਕਿਸੇ ਵੀ ਉਪਲਬਧ ਬਟਨ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
ਇੱਕ ਬਟਨ ਵਿੱਚ ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਬਟਨ ਦਾ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਟੈਕਸਟ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਵੇਂ ਕਿ .sr-only
ਕਲਾਸ ਦੇ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ।
ਫੈਨਸੀ ਵੱਡੇ ਜਾਂ ਛੋਟੇ ਬਟਨ? .btn-lg
, .btn-sm
, ਜਾਂ .btn-xs
ਵਾਧੂ ਆਕਾਰਾਂ ਲਈ ਜੋੜੋ ।
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
ਬਲਾਕ ਪੱਧਰ ਦੇ ਬਟਨ ਬਣਾਓ—ਜੋ ਮਾਤਾ-ਪਿਤਾ ਦੀ ਪੂਰੀ ਚੌੜਾਈ ਤੱਕ ਫੈਲਦੇ ਹਨ— ਜੋੜ ਕੇ .btn-block
।
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
ਸਰਗਰਮ ਹੋਣ 'ਤੇ ਬਟਨ ਦਬਾਏ ਹੋਏ ਦਿਖਾਈ ਦੇਣਗੇ (ਗੂੜ੍ਹੇ ਬੈਕਗ੍ਰਾਊਂਡ, ਗੂੜ੍ਹੇ ਕਿਨਾਰੇ ਅਤੇ ਇਨਸੈਟ ਸ਼ੈਡੋ ਦੇ ਨਾਲ)। ਤੱਤਾਂ ਲਈ <button>
, ਇਹ ਦੁਆਰਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ :active
। <a>
ਤੱਤਾਂ ਲਈ , ਇਹ ਨਾਲ ਕੀਤਾ ਗਿਆ ਹੈ .active
। ਹਾਲਾਂਕਿ, ਤੁਸੀਂ s ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ .active
( <button>
ਅਤੇ aria-pressed="true"
ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ) ਜੇਕਰ ਤੁਹਾਨੂੰ ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀ ਨੂੰ ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ ਦੁਹਰਾਉਣ ਦੀ ਲੋੜ ਹੈ।
ਜੋੜਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ :active
ਕਿਉਂਕਿ ਇਹ ਇੱਕ ਸੂਡੋ-ਕਲਾਸ ਹੈ, ਪਰ ਜੇਕਰ ਤੁਹਾਨੂੰ ਉਸੇ ਦਿੱਖ ਨੂੰ ਮਜਬੂਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਅੱਗੇ ਵਧੋ ਅਤੇ ਜੋੜੋ .active
।
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
.active
ਕਲਾਸ ਨੂੰ <a>
ਬਟਨਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
ਨਾਲ ਵਾਪਸ ਫੇਡ ਕਰਕੇ ਬਟਨਾਂ ਨੂੰ ਕਲਿੱਕ ਕਰਨਯੋਗ ਨਾ ਦਿਸਣ ਯੋਗ ਬਣਾਓ opacity
।
ਬਟਨਾਂ ਵਿੱਚ disabled
ਗੁਣ ਸ਼ਾਮਲ ਕਰੋ ।<button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
ਜੇਕਰ ਤੁਸੀਂ disabled
ਇੱਕ , ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 9 ਅਤੇ ਹੇਠਾਂ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜਦੇ ਹੋ ਤਾਂ <button>
ਟੈਕਸਟ ਨੂੰ ਇੱਕ ਘਟੀਆ ਟੈਕਸਟ-ਸ਼ੈਡੋ ਨਾਲ ਸਲੇਟੀ ਰੈਂਡਰ ਕਰੇਗਾ ਜਿਸ ਨੂੰ ਅਸੀਂ ਠੀਕ ਨਹੀਂ ਕਰ ਸਕਦੇ।
.disabled
ਕਲਾਸ ਨੂੰ <a>
ਬਟਨਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
ਅਸੀਂ .disabled
ਇੱਥੇ ਇੱਕ ਉਪਯੋਗਤਾ ਕਲਾਸ ਦੇ ਤੌਰ ਤੇ ਵਰਤਦੇ ਹਾਂ, ਆਮ ਕਲਾਸ ਦੇ ਸਮਾਨ .active
, ਇਸ ਲਈ ਕੋਈ ਅਗੇਤਰ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
ਇਹ ਕਲਾਸ s pointer-events: none
ਦੀ ਲਿੰਕ ਫੰਕਸ਼ਨੈਲਿਟੀ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਲਈ ਵਰਤਦੀ ਹੈ <a>
, ਪਰ CSS ਪ੍ਰਾਪਰਟੀ ਅਜੇ ਤੱਕ ਮਾਨਕੀਕ੍ਰਿਤ ਨਹੀਂ ਹੈ ਅਤੇ ਓਪੇਰਾ 18 ਅਤੇ ਹੇਠਾਂ, ਜਾਂ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 11 ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਉਹਨਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਵੀ ਜੋ ਸਮਰਥਨ ਕਰਦੇ ਹਨ pointer-events: none
, ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਪ੍ਰਭਾਵਤ ਨਹੀਂ ਹੈ, ਮਤਲਬ ਕਿ ਦ੍ਰਿਸ਼ਟੀਗਤ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾ ਅਤੇ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਭੋਗਤਾ ਅਜੇ ਵੀ ਇਹਨਾਂ ਲਿੰਕਾਂ ਨੂੰ ਕਿਰਿਆਸ਼ੀਲ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਗੇ। ਇਸ ਲਈ ਸੁਰੱਖਿਅਤ ਰਹਿਣ ਲਈ, ਅਜਿਹੇ ਲਿੰਕਾਂ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ।
.img-responsive
ਬੂਟਸਟਰੈਪ 3 ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਕਲਾਸ ਦੇ ਜੋੜ ਦੁਆਰਾ ਜਵਾਬਦੇਹ-ਅਨੁਕੂਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ । max-width: 100%;
ਇਹ , height: auto;
ਅਤੇ ਚਿੱਤਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ display: block;
ਹੈ ਤਾਂ ਕਿ ਇਹ ਮੂਲ ਤੱਤ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਕੇਲ ਕਰੇ।
ਚਿੱਤਰਾਂ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਜੋ .img-responsive
ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਦੀ .center-block
ਬਜਾਏ ਵਰਤੋ .text-center
। ਵਰਤੋਂ ਬਾਰੇ ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ ਸਹਾਇਕ ਕਲਾਸਾਂ ਸੈਕਸ਼ਨ ਦੇਖੋ ।.center-block
ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8-10 ਵਿੱਚ, ਨਾਲ SVG ਚਿੱਤਰਾਂ .img-responsive
ਦਾ ਆਕਾਰ ਅਨੁਪਾਤਕ ਹੈ। ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, width: 100% \9;
ਜਿੱਥੇ ਲੋੜ ਹੋਵੇ ਸ਼ਾਮਲ ਕਰੋ। ਬੂਟਸਟਰੈਪ ਇਸਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਕਰਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਹੋਰ ਚਿੱਤਰ ਫਾਰਮੈਟਾਂ ਲਈ ਪੇਚੀਦਗੀਆਂ ਪੈਦਾ ਕਰਦਾ ਹੈ।
<img src="..." class="img-responsive" alt="Responsive image">
<img>
ਕਿਸੇ ਵੀ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸਟਾਈਲ ਕਰਨ ਲਈ ਇੱਕ ਤੱਤ ਵਿੱਚ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ ।
ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਵਿੱਚ ਗੋਲ ਕੋਨਿਆਂ ਲਈ ਸਮਰਥਨ ਦੀ ਘਾਟ ਹੈ।
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
ਮੁੱਠੀ ਭਰ ਜ਼ੋਰ ਦੇਣ ਵਾਲੀਆਂ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਰੰਗ ਦੁਆਰਾ ਅਰਥ ਵਿਅਕਤ ਕਰੋ। ਇਹ ਲਿੰਕਾਂ 'ਤੇ ਵੀ ਲਾਗੂ ਹੋ ਸਕਦੇ ਹਨ ਅਤੇ ਸਾਡੀਆਂ ਡਿਫੌਲਟ ਲਿੰਕ ਸ਼ੈਲੀਆਂ ਵਾਂਗ ਹੀ ਹੋਵਰ 'ਤੇ ਹਨੇਰਾ ਹੋ ਜਾਵੇਗਾ।
ਫੂਸ ਡੈਪੀਬਸ, ਟੇਲਸ ਏਸੀ ਕਰਸਸ ਕੋਮੋਡੋ, ਟਾਰਟਰ ਮੌਰੀਸ ਨਿਭ।
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
ਡੋਨੇਕ ਉਲਮਕੋਰਪਰ ਨੂਲਾ ਨਾਨ ਮੇਟਸ ਆਕਟਰ ਫਰਿੰਗਿਲਾ।
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
ਕਈ ਵਾਰ ਕਿਸੇ ਹੋਰ ਚੋਣਕਾਰ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਕਾਰਨ ਜ਼ੋਰ ਦੇਣ ਵਾਲੀਆਂ ਕਲਾਸਾਂ ਲਾਗੂ ਨਹੀਂ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ। <span>
ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਤੁਹਾਡੇ ਟੈਕਸਟ ਨੂੰ ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਵਿੱਚ ਸਮੇਟਣਾ ਇੱਕ ਕਾਫ਼ੀ ਹੱਲ ਹੈ ।
ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨੀਕਾਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਪ੍ਰਸੰਗਿਕ ਰੰਗਾਂ ਦੀ ਵਰਤੋਂ ਸਿਰਫ ਉਹਨਾਂ ਅਰਥਾਂ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜੋ ਟੈਕਸਟ/ਮਾਰਕਅਪ ਵਿੱਚ ਪਹਿਲਾਂ ਤੋਂ ਮੌਜੂਦ ਹੈ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ਹੈ, ਜਿਵੇਂ ਕਿ .sr-only
ਕਲਾਸ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ .
ਪ੍ਰਸੰਗਿਕ ਟੈਕਸਟ ਕਲਰ ਕਲਾਸਾਂ ਦੇ ਸਮਾਨ, ਕਿਸੇ ਤੱਤ ਦੇ ਪਿਛੋਕੜ ਨੂੰ ਕਿਸੇ ਵੀ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਸੈੱਟ ਕਰੋ। ਐਂਕਰ ਕੰਪੋਨੈਂਟ ਟੈਕਸਟ ਕਲਾਸਾਂ ਵਾਂਗ, ਹੋਵਰ 'ਤੇ ਹਨੇਰਾ ਹੋ ਜਾਣਗੇ।
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
ਡੋਨੇਕ ਉਲਮਕੋਰਪਰ ਨੂਲਾ ਨਾਨ ਮੇਟਸ ਆਕਟਰ ਫਰਿੰਗਿਲਾ।
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
ਕਈ ਵਾਰ ਕਿਸੇ ਹੋਰ ਚੋਣਕਾਰ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਕਾਰਨ ਪ੍ਰਸੰਗਿਕ ਪਿਛੋਕੜ ਦੀਆਂ ਕਲਾਸਾਂ ਲਾਗੂ ਨਹੀਂ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ। <div>
ਕੁਝ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਤੁਹਾਡੇ ਤੱਤ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਵਿੱਚ ਸਮੇਟਣਾ ਇੱਕ ਕਾਫ਼ੀ ਹੱਲ ਹੈ ।
ਜਿਵੇਂ ਕਿ ਪ੍ਰਸੰਗਿਕ ਰੰਗਾਂ ਦੇ ਨਾਲ , ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਰੰਗ ਦੁਆਰਾ ਵਿਅਕਤ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਅਰਥ ਵੀ ਇੱਕ ਅਜਿਹੇ ਫਾਰਮੈਟ ਵਿੱਚ ਵਿਅਕਤ ਕੀਤਾ ਗਿਆ ਹੈ ਜੋ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪੇਸ਼ਕਾਰੀ ਨਹੀਂ ਹੈ।
ਮਾਡਲਾਂ ਅਤੇ ਚੇਤਾਵਨੀਆਂ ਵਰਗੀ ਸਮੱਗਰੀ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਆਮ ਬੰਦ ਆਈਕਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
ਡਰਾਪਡਾਊਨ ਕਾਰਜਕੁਸ਼ਲਤਾ ਅਤੇ ਦਿਸ਼ਾ ਦਰਸਾਉਣ ਲਈ ਕੈਰੇਟਸ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਨੋਟ ਕਰੋ ਕਿ ਡਿਫੌਲਟ ਕੈਰੇਟ ਡ੍ਰੌਪਅੱਪ ਮੀਨੂ ਵਿੱਚ ਆਪਣੇ ਆਪ ਉਲਟ ਜਾਵੇਗਾ ।
<span class="caret"></span>
ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਤੱਤ ਨੂੰ ਖੱਬੇ ਜਾਂ ਸੱਜੇ ਪਾਸੇ ਫਲੋਟ ਕਰੋ। !important
ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਦਿਆਂ ਤੋਂ ਬਚਣ ਲਈ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ। ਕਲਾਸਾਂ ਨੂੰ ਮਿਸ਼ਰਣ ਵਜੋਂ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।
<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
ਦੁਆਰਾ ਇੱਕ ਤੱਤ ਸੈਟ ਕਰੋ display: block
ਅਤੇ ਕੇਂਦਰ ਵਿੱਚ ਰੱਖੋ margin
। ਇੱਕ ਮਿਕਸਿਨ ਅਤੇ ਕਲਾਸ ਦੇ ਰੂਪ ਵਿੱਚ ਉਪਲਬਧ.
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ ਵਿੱਚfloat
ਜੋੜ ਕੇ s ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸਾਫ਼ ਕਰੋ । ਮਾਈਕ੍ਰੋ ਕਲੀਅਰਫਿਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਨਿਕੋਲਸ ਗਾਲਾਘਰ ਦੁਆਰਾ ਪ੍ਰਸਿੱਧ ਕੀਤਾ ਗਿਆ ਹੈ। ਇੱਕ ਮਿਸ਼ਰਣ ਦੇ ਤੌਰ ਤੇ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ..clearfix
<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
ਅਤੇ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਕਿਸੇ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਉਣ ਲਈ (ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਸਮੇਤ ) ਨੂੰ ਮਜਬੂਰ ਕਰੋ। ਇਹ ਕਲਾਸਾਂ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿਵਾਦਾਂ ਤੋਂ ਬਚਣ ਲਈ ਵਰਤਦੀਆਂ ਹਨ, ਜਿਵੇਂ ਕਿ ਤੇਜ਼ ਫਲੋਟਸ । ਉਹ ਸਿਰਫ਼ ਬਲਾਕ ਪੱਧਰੀ ਟੌਗਲਿੰਗ ਲਈ ਉਪਲਬਧ ਹਨ। ਉਹਨਾਂ ਨੂੰ ਮਿਸ਼ਰਣ ਵਜੋਂ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।.show
.hidden
!important
.hide
ਉਪਲਬਧ ਹੈ, ਪਰ ਇਹ ਹਮੇਸ਼ਾ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦਾ ਹੈ ਅਤੇ v3.0.1 ਦੇ ਤੌਰ 'ਤੇ ਬਰਤਰਫ਼ ਹੈ। ਵਰਤੋ .hidden
ਜਾਂ .sr-only
ਇਸਦੀ ਬਜਾਏ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, .invisible
ਕਿਸੇ ਤੱਤ ਦੀ ਦਿੱਖ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਮਤਲਬ ਕਿ ਇਸ display
ਨੂੰ ਸੋਧਿਆ ਨਹੀਂ ਗਿਆ ਹੈ ਅਤੇ ਤੱਤ ਅਜੇ ਵੀ ਦਸਤਾਵੇਜ਼ ਦੇ ਪ੍ਰਵਾਹ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ।
<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
ਨਾਲ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਛੱਡ ਕੇ ਸਾਰੀਆਂ ਡਿਵਾਈਸਾਂ ਲਈ ਇੱਕ ਤੱਤ ਨੂੰ ਲੁਕਾਓ .sr-only
। ਤੱਤ ਨੂੰ ਦੁਬਾਰਾ ਦਿਖਾਉਣ ਲਈ ਨਾਲ ਜੋੜੋ ਜਦੋਂ ਇਹ ਫੋਕਸ ਹੋਵੇ (ਜਿਵੇਂ ਕਿ ਕੀਬੋਰਡ-ਸਿਰਫ਼ ਉਪਭੋਗਤਾ ਦੁਆਰਾ .sr-only
) । ਅਸੈਸਬਿਲਟੀ ਸਰਵੋਤਮ ਅਭਿਆਸਾਂ.sr-only-focusable
ਦੀ ਪਾਲਣਾ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ । ਮਿਸ਼ਰਣ ਦੇ ਤੌਰ ਤੇ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}
ਬੈਕਗ੍ਰਾਊਂਡ .text-hide
ਚਿੱਤਰ ਨਾਲ ਕਿਸੇ ਤੱਤ ਦੀ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨੂੰ ਬਦਲਣ ਵਿੱਚ ਮਦਦ ਲਈ ਕਲਾਸ ਜਾਂ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
ਤੇਜ਼ ਮੋਬਾਈਲ-ਅਨੁਕੂਲ ਵਿਕਾਸ ਲਈ, ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਰਾਹੀਂ ਡਿਵਾਈਸ ਦੁਆਰਾ ਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਇਹਨਾਂ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਪ੍ਰਿੰਟ ਹੋਣ 'ਤੇ ਸਮੱਗਰੀ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਵੀ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ।
ਇਹਨਾਂ ਨੂੰ ਸੀਮਤ ਅਧਾਰ 'ਤੇ ਵਰਤਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਅਤੇ ਇੱਕੋ ਸਾਈਟ ਦੇ ਬਿਲਕੁਲ ਵੱਖਰੇ ਸੰਸਕਰਣ ਬਣਾਉਣ ਤੋਂ ਬਚੋ। ਇਸਦੀ ਬਜਾਏ, ਹਰੇਕ ਡਿਵਾਈਸ ਦੀ ਪੇਸ਼ਕਾਰੀ ਨੂੰ ਪੂਰਕ ਕਰਨ ਲਈ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਵਿਊਪੋਰਟ ਬ੍ਰੇਕਪੁਆਇੰਟਸ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਉਪਲਬਧ ਕਲਾਸਾਂ ਦੇ ਇੱਕ ਸਿੰਗਲ ਜਾਂ ਸੁਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਵਾਧੂ ਛੋਟੇ ਉਪਕਰਣਫ਼ੋਨ (<768px) | ਛੋਟੇ ਉਪਕਰਣਗੋਲੀਆਂ (≥768px) | ਮੱਧਮ ਯੰਤਰਡੈਸਕਟਾਪ (≥992px) | ਵੱਡੇ ਯੰਤਰਡੈਸਕਟਾਪ (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ | ਲੁਕਿਆ ਹੋਇਆ | ਲੁਕਿਆ ਹੋਇਆ |
.visible-sm-* |
ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ | ਲੁਕਿਆ ਹੋਇਆ |
.visible-md-* |
ਲੁਕਿਆ ਹੋਇਆ | ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ |
.visible-lg-* |
ਲੁਕਿਆ ਹੋਇਆ | ਲੁਕਿਆ ਹੋਇਆ | ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ |
.hidden-xs |
ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ | ਦਿਸਦਾ ਹੈ | ਦਿਸਦਾ ਹੈ |
.hidden-sm |
ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ | ਦਿਸਦਾ ਹੈ |
.hidden-md |
ਦਿਸਦਾ ਹੈ | ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ |
.hidden-lg |
ਦਿਸਦਾ ਹੈ | ਦਿਸਦਾ ਹੈ | ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ |
v3.2.0 ਦੇ ਅਨੁਸਾਰ, .visible-*-*
ਹਰੇਕ ਬ੍ਰੇਕਪੁਆਇੰਟ ਲਈ ਕਲਾਸਾਂ ਤਿੰਨ ਰੂਪਾਂ ਵਿੱਚ ਆਉਂਦੀਆਂ ਹਨ, display
ਹੇਠਾਂ ਸੂਚੀਬੱਧ ਹਰੇਕ CSS ਪ੍ਰਾਪਰਟੀ ਮੁੱਲ ਲਈ ਇੱਕ।
ਕਲਾਸਾਂ ਦਾ ਸਮੂਹ | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
ਇਸ ਲਈ, ਉਦਾਹਰਨ ਲਈ ਵਾਧੂ ਛੋਟੀਆਂ ( xs
) ਸਕ੍ਰੀਨਾਂ ਲਈ, ਉਪਲਬਧ .visible-*-*
ਕਲਾਸਾਂ ਹਨ: .visible-xs-block
, .visible-xs-inline
, ਅਤੇ .visible-xs-inline-block
.
ਕਲਾਸਾਂ .visible-xs
, .visible-sm
, .visible-md
, ਅਤੇ .visible-lg
ਵੀ ਮੌਜੂਦ ਹਨ, ਪਰ v3.2.0 ਦੇ ਤੌਰ 'ਤੇ ਬਰਤਰਫ਼ ਹਨ । ਟੌਗਲ -ਸਬੰਧਤ ਤੱਤਾਂ .visible-*-block
ਲਈ ਵਾਧੂ ਵਿਸ਼ੇਸ਼ ਕੇਸਾਂ ਨੂੰ ਛੱਡ ਕੇ, ਉਹ ਲਗਭਗ ਬਰਾਬਰ ਹਨ।<table>
ਰੈਗੂਲਰ ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ ਵਾਂਗ, ਪ੍ਰਿੰਟ ਲਈ ਸਮੱਗਰੀ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕਲਾਸਾਂ | ਬ੍ਰਾਊਜ਼ਰ | ਛਾਪੋ |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ |
.hidden-print |
ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ |
ਕਲਾਸ .visible-print
ਵੀ ਮੌਜੂਦ ਹੈ ਪਰ v3.2.0 ਦੇ ਤੌਰ 'ਤੇ ਬਰਤਰਫ਼ ਹੈ। ਇਹ ਲਗਭਗ ਬਰਾਬਰ ਹੈ .visible-print-block
, ਸਿਵਾਏ ਵਾਧੂ ਵਿਸ਼ੇਸ਼ ਕੇਸਾਂ ਦੇ ਨਾਲ <table>
ਸੰਬੰਧਿਤ ਤੱਤਾਂ ਲਈ।
ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਕਾਰ ਬਦਲੋ ਜਾਂ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਲੋਡ ਕਰੋ।
ਹਰੇ ਚੈੱਕਮਾਰਕ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਤੱਤ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਵਿਊਪੋਰਟ ਵਿੱਚ ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਹੈ।
ਇੱਥੇ, ਹਰੇ ਚੈੱਕਮਾਰਕ ਇਹ ਵੀ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਤੱਤ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਵਿਊਪੋਰਟ ਵਿੱਚ ਲੁਕਿਆ ਹੋਇਆ ਹੈ।
ਬੂਟਸਟਰੈਪ ਦਾ CSS Less 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ, CSS ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਲਈ ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ, ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਵਰਗੀ ਵਾਧੂ ਕਾਰਜਸ਼ੀਲਤਾ ਵਾਲਾ ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ। ਜਿਹੜੇ ਲੋਕ ਸਾਡੀਆਂ ਕੰਪਾਇਲ ਕੀਤੀਆਂ CSS ਫਾਈਲਾਂ ਦੀ ਬਜਾਏ ਸਰੋਤ ਘੱਟ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ ਉਹ ਬਹੁਤ ਸਾਰੇ ਵੇਰੀਏਬਲਾਂ ਅਤੇ ਮਿਸ਼ਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਨ ਜੋ ਅਸੀਂ ਪੂਰੇ ਫਰੇਮਵਰਕ ਵਿੱਚ ਵਰਤਦੇ ਹਾਂ।
ਗਰਿੱਡ ਵੇਰੀਏਬਲ ਅਤੇ ਮਿਕਸਿਨ ਗਰਿੱਡ ਸਿਸਟਮ ਸੈਕਸ਼ਨ ਦੇ ਅੰਦਰ ਕਵਰ ਕੀਤੇ ਗਏ ਹਨ ।
ਬੂਟਸਟਰੈਪ ਨੂੰ ਘੱਟੋ-ਘੱਟ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ: ਕੰਪਾਇਲ ਕੀਤੇ CSS ਨਾਲ ਜਾਂ ਸਰੋਤ ਘੱਟ ਫਾਈਲਾਂ ਨਾਲ। ਘੱਟ ਫਾਈਲਾਂ ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਲਈ, ਸ਼ੁਰੂ ਕਰਨਾ ਸੈਕਸ਼ਨ ਦੀ ਸਲਾਹ ਲਓ , ਲੋੜੀਂਦੇ ਕਮਾਂਡਾਂ ਨੂੰ ਚਲਾਉਣ ਲਈ ਆਪਣੇ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਨੂੰ ਕਿਵੇਂ ਸੈੱਟਅੱਪ ਕਰਨਾ ਹੈ ਲਈ
ਥਰਡ ਪਾਰਟੀ ਕੰਪਾਇਲੇਸ਼ਨ ਟੂਲ ਬੂਟਸਟਰੈਪ ਨਾਲ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ, ਪਰ ਉਹ ਸਾਡੀ ਕੋਰ ਟੀਮ ਦੁਆਰਾ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।
ਵੇਰੀਏਬਲਾਂ ਦੀ ਵਰਤੋਂ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਰੰਗ, ਸਪੇਸਿੰਗ, ਜਾਂ ਫੌਂਟ ਸਟੈਕ ਵਰਗੇ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਮੁੱਲਾਂ ਨੂੰ ਕੇਂਦਰੀਕਰਣ ਅਤੇ ਸਾਂਝਾ ਕਰਨ ਦੇ ਤਰੀਕੇ ਵਜੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇੱਕ ਪੂਰਨ ਬ੍ਰੇਕਡਾਊਨ ਲਈ, ਕਿਰਪਾ ਕਰਕੇ ਕਸਟਮਾਈਜ਼ਰ ਵੇਖੋ ।
ਆਸਾਨੀ ਨਾਲ ਦੋ ਰੰਗ ਸਕੀਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ: ਗ੍ਰੇਸਕੇਲ ਅਤੇ ਸਿਮੈਂਟਿਕ। ਗ੍ਰੇਸਕੇਲ ਰੰਗ ਕਾਲੇ ਰੰਗ ਦੇ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਸ਼ੇਡਾਂ ਤੱਕ ਤੁਰੰਤ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਜਦੋਂ ਕਿ ਅਰਥ-ਵਿਵਸਥਾ ਵਿੱਚ ਅਰਥਪੂਰਨ ਪ੍ਰਸੰਗਿਕ ਮੁੱਲਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਰੰਗ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ।
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਵੀ ਕਲਰ ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਿਵੇਂ ਕਿ ਉਹ ਹਨ ਜਾਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਵਧੇਰੇ ਅਰਥਪੂਰਨ ਵੇਰੀਏਬਲਾਂ ਲਈ ਮੁੜ-ਸਾਈਨ ਕਰੋ।
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
ਤੁਹਾਡੀ ਸਾਈਟ ਦੇ ਪਿੰਜਰ ਦੇ ਮੁੱਖ ਤੱਤਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਮੁੱਠੀ ਭਰ ਵੇਰੀਏਬਲ।
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
ਸਿਰਫ਼ ਇੱਕ ਮੁੱਲ ਦੇ ਨਾਲ ਸਹੀ ਰੰਗ ਨਾਲ ਆਪਣੇ ਲਿੰਕਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸਟਾਈਲ ਕਰੋ।
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
ਨੋਟ ਕਰੋ ਕਿ @link-hover-color
ਇੱਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਘੱਟ ਤੋਂ ਇੱਕ ਹੋਰ ਸ਼ਾਨਦਾਰ ਟੂਲ, ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਸਹੀ ਹੋਵਰ ਰੰਗ ਬਣਾਉਣ ਲਈ। ਤੁਸੀਂ darken
, lighten
, saturate
, ਅਤੇ ਵਰਤ ਸਕਦੇ ਹੋ desaturate
।
ਕੁਝ ਤੇਜ਼ ਵੇਰੀਏਬਲਾਂ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਆਪਣਾ ਟਾਈਪਫੇਸ, ਟੈਕਸਟ ਦਾ ਆਕਾਰ, ਮੋਹਰੀ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਸੈੱਟ ਕਰੋ। ਬੂਟਸਟਰੈਪ ਆਸਾਨ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਮਿਸ਼ਰਣ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰਦਾ ਹੈ।
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
ਤੁਹਾਡੇ ਆਈਕਾਨਾਂ ਦੀ ਸਥਿਤੀ ਅਤੇ ਫਾਈਲ ਨਾਮ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਦੋ ਤੇਜ਼ ਵੇਰੀਏਬਲ।
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
ਪੂਰੇ ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਆਮ ਮੁੱਲਾਂ ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ ਕੁਝ ਡਿਫੌਲਟ ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇੱਥੇ ਸਭ ਤੋਂ ਵੱਧ ਵਰਤੇ ਜਾਂਦੇ ਹਨ.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
ਵਿਕਰੇਤਾ ਮਿਕਸਿਨ ਤੁਹਾਡੇ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਸਾਰੇ ਸੰਬੰਧਿਤ ਵਿਕਰੇਤਾ ਅਗੇਤਰਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਕੇ ਮਲਟੀਪਲ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦਾ ਸਮਰਥਨ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਮਿਕਸਿਨ ਹਨ।
ਆਪਣੇ ਭਾਗਾਂ ਦੇ ਬਾਕਸ ਮਾਡਲ ਨੂੰ ਇੱਕ ਸਿੰਗਲ ਮਿਕਸਿਨ ਨਾਲ ਰੀਸੈਟ ਕਰੋ। ਸੰਦਰਭ ਲਈ, ਮੋਜ਼ੀਲਾ ਤੋਂ ਇਹ ਮਦਦਗਾਰ ਲੇਖ ਦੇਖੋ ।
ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਦੀ ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ, ਮਿਕਸਿਨ ਨੂੰ v3.2.0 ਤੋਂ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਹੈ। ਬੈਕਵਰਡ-ਅਨੁਕੂਲਤਾ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣ ਲਈ, ਬੂਟਸਟਰੈਪ ਬੂਟਸਟਰੈਪ v4 ਤੱਕ ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜਾਰੀ ਰੱਖੇਗਾ।
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
ਅੱਜ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਗੈਰ-ਅਗੇਤਰ ਵਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ border-radius
ਹਨ। ਇਸ ਤਰ੍ਹਾਂ, ਇੱਥੇ ਕੋਈ .border-radius()
ਮਿਕਸਿਨ ਨਹੀਂ ਹੈ, ਪਰ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਇੱਕ ਵਸਤੂ ਦੇ ਇੱਕ ਖਾਸ ਪਾਸੇ ਦੇ ਦੋ ਕੋਨਿਆਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਗੋਲ ਕਰਨ ਲਈ ਸ਼ਾਰਟਕੱਟ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ।
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
box-shadow
ਜੇਕਰ ਤੁਹਾਡੇ ਨਿਸ਼ਾਨੇ ਵਾਲੇ ਦਰਸ਼ਕ ਨਵੀਨਤਮ ਅਤੇ ਮਹਾਨ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਨ, ਤਾਂ ਸੰਪੱਤੀ ਨੂੰ ਆਪਣੇ ਆਪ ਹੀ ਵਰਤਣਾ ਯਕੀਨੀ ਬਣਾਓ । ਜੇਕਰ ਤੁਹਾਨੂੰ ਪੁਰਾਣੇ ਐਂਡਰੌਇਡ (ਪ੍ਰੀ-ਵੀ4) ਅਤੇ ਆਈਓਐਸ ਡਿਵਾਈਸਾਂ (ਪ੍ਰੀ-ਆਈਓਐਸ 5) ਲਈ ਸਮਰਥਨ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਲੋੜੀਂਦੇ ਨੂੰ ਚੁੱਕਣ ਲਈ ਨਾਪਸੰਦ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰੋ-webkit
ਅਗੇਤਰ
ਮਿਕਸਿਨ ਨੂੰ v3.1.0 ਦੇ ਤੌਰ 'ਤੇ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਹੈ, ਕਿਉਂਕਿ ਬੂਟਸਟਰੈਪ ਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ ਪੁਰਾਣੇ ਪਲੇਟਫਾਰਮਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ ਜੋ ਸਟੈਂਡਰਡ ਪ੍ਰਾਪਰਟੀ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ। ਬੈਕਵਰਡ-ਅਨੁਕੂਲਤਾ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣ ਲਈ, ਬੂਟਸਟਰੈਪ ਬੂਟਸਟਰੈਪ v4 ਤੱਕ ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜਾਰੀ ਰੱਖੇਗਾ।
ਆਪਣੇ ਬਾਕਸ ਸ਼ੈਡੋ ਵਿੱਚ ਰੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ rgba()
ਤਾਂ ਜੋ ਉਹ ਬੈਕਗ੍ਰਾਉਂਡ ਦੇ ਨਾਲ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਸਹਿਜਤਾ ਨਾਲ ਮਿਲ ਜਾਣ।
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
ਲਚਕਤਾ ਲਈ ਮਲਟੀਪਲ ਮਿਕਸਿਨ। ਸਾਰੀ ਪਰਿਵਰਤਨ ਜਾਣਕਾਰੀ ਨੂੰ ਇੱਕ ਨਾਲ ਸੈਟ ਕਰੋ, ਜਾਂ ਲੋੜ ਅਨੁਸਾਰ ਇੱਕ ਵੱਖਰੀ ਦੇਰੀ ਅਤੇ ਮਿਆਦ ਨਿਰਧਾਰਤ ਕਰੋ।
ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਦੀ ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ, ਮਿਕਸਿਨ v3.2.0 ਦੇ ਤੌਰ 'ਤੇ ਬਰਤਰਫ਼ ਕੀਤੇ ਗਏ ਹਨ । ਬੈਕਵਰਡ-ਅਨੁਕੂਲਤਾ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣ ਲਈ, ਬੂਟਸਟਰੈਪ ਬੂਟਸਟਰੈਪ v4 ਤੱਕ ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜਾਰੀ ਰੱਖੇਗਾ।
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
ਕਿਸੇ ਵੀ ਵਸਤੂ ਨੂੰ ਘੁੰਮਾਓ, ਸਕੇਲ ਕਰੋ, ਅਨੁਵਾਦ ਕਰੋ (ਮੂਵ ਕਰੋ), ਜਾਂ ਤਿਲਕਾਓ।
ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਦੀ ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ, ਮਿਕਸਿਨ v3.2.0 ਦੇ ਤੌਰ 'ਤੇ ਬਰਤਰਫ਼ ਕੀਤੇ ਗਏ ਹਨ । ਬੈਕਵਰਡ-ਅਨੁਕੂਲਤਾ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣ ਲਈ, ਬੂਟਸਟਰੈਪ ਬੂਟਸਟਰੈਪ v4 ਤੱਕ ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜਾਰੀ ਰੱਖੇਗਾ।
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
ਇੱਕ ਘੋਸ਼ਣਾ ਵਿੱਚ CSS3 ਦੀਆਂ ਸਾਰੀਆਂ ਐਨੀਮੇਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਇੱਕ ਸਿੰਗਲ ਮਿਕਸਿਨ ਅਤੇ ਵਿਅਕਤੀਗਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਹੋਰ ਮਿਸ਼ਰਣ।
ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਦੀ ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ, ਮਿਕਸਿਨ v3.2.0 ਦੇ ਤੌਰ 'ਤੇ ਬਰਤਰਫ਼ ਕੀਤੇ ਗਏ ਹਨ । ਬੈਕਵਰਡ-ਅਨੁਕੂਲਤਾ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣ ਲਈ, ਬੂਟਸਟਰੈਪ ਬੂਟਸਟਰੈਪ v4 ਤੱਕ ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜਾਰੀ ਰੱਖੇਗਾ।
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਧੁੰਦਲਾਪਨ ਸੈੱਟ ਕਰੋ ਅਤੇ filter
IE8 ਲਈ ਫਾਲਬੈਕ ਪ੍ਰਦਾਨ ਕਰੋ।
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
ਹਰੇਕ ਖੇਤਰ ਦੇ ਅੰਦਰ ਫਾਰਮ ਨਿਯੰਤਰਣ ਲਈ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰੋ।
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
ਇੱਕ ਸਿੰਗਲ ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰ CSS ਰਾਹੀਂ ਕਾਲਮ ਤਿਆਰ ਕਰੋ।
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
ਕਿਸੇ ਵੀ ਦੋ ਰੰਗਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਬੈਕਗਰਾਊਂਡ ਗਰੇਡੀਐਂਟ ਵਿੱਚ ਬਦਲੋ। ਵਧੇਰੇ ਉੱਨਤ ਪ੍ਰਾਪਤ ਕਰੋ ਅਤੇ ਇੱਕ ਦਿਸ਼ਾ ਸੈੱਟ ਕਰੋ, ਤਿੰਨ ਰੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਜਾਂ ਇੱਕ ਰੇਡੀਅਲ ਗਰੇਡੀਐਂਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇੱਕ ਸਿੰਗਲ ਮਿਕਸਿਨ ਨਾਲ ਤੁਸੀਂ ਸਾਰੇ ਪ੍ਰੀਫਿਕਸਡ ਸਿੰਟੈਕਸ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ ਜਿਸਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇਗੀ।
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
ਤੁਸੀਂ ਇੱਕ ਮਿਆਰੀ ਦੋ-ਰੰਗ, ਰੇਖਿਕ ਗਰੇਡੀਐਂਟ ਦਾ ਕੋਣ ਵੀ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ:
#gradient > .directional(#333; #000; 45deg);
ਜੇ ਤੁਹਾਨੂੰ ਨਾਈ-ਧਾਰੀ ਸਟਾਈਲ ਗਰੇਡੀਐਂਟ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਇਹ ਵੀ ਆਸਾਨ ਹੈ। ਸਿਰਫ਼ ਇੱਕ ਰੰਗ ਨਿਰਧਾਰਤ ਕਰੋ ਅਤੇ ਅਸੀਂ ਇੱਕ ਪਾਰਦਰਸ਼ੀ ਚਿੱਟੀ ਪੱਟੀ ਨੂੰ ਓਵਰਲੇ ਕਰਾਂਗੇ।
#gradient > .striped(#333; 45deg);
ਇਸਦੀ ਬਜਾਏ ਤਿੰਨ ਰੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹਨਾਂ ਮਿਸ਼ਰਣਾਂ ਨਾਲ ਪਹਿਲਾ ਰੰਗ, ਦੂਜਾ ਰੰਗ, ਦੂਜੇ ਰੰਗ ਦਾ ਰੰਗ ਸਟਾਪ (ਇੱਕ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਜਿਵੇਂ ਕਿ 25%), ਅਤੇ ਤੀਜਾ ਰੰਗ ਸੈੱਟ ਕਰੋ:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
ਸਿਰ! ਕੀ ਤੁਹਾਨੂੰ ਕਦੇ ਗਰੇਡੀਐਂਟ ਨੂੰ ਹਟਾਉਣ ਦੀ ਲੋੜ ਹੈ, ਕਿਸੇ ਵੀ IE-ਵਿਸ਼ੇਸ਼ ਨੂੰ ਹਟਾਉਣਾ ਯਕੀਨੀ ਬਣਾਓ ਜੋ filter
ਤੁਸੀਂ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ। ਤੁਸੀਂ ਇਸ ਦੇ .reset-filter()
ਨਾਲ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਜਿਹਾ ਕਰ ਸਕਦੇ ਹੋ background-image: none;
।
ਯੂਟਿਲਿਟੀ ਮਿਕਸਿਨ ਉਹ ਮਿਸ਼ਰਨ ਹੁੰਦੇ ਹਨ ਜੋ ਕਿਸੇ ਖਾਸ ਟੀਚੇ ਜਾਂ ਕੰਮ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਹੋਰ ਗੈਰ-ਸੰਬੰਧਿਤ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਜੋੜਦੇ ਹਨ।
class="clearfix"
ਕਿਸੇ ਵੀ ਤੱਤ ਨੂੰ ਜੋੜਨਾ ਭੁੱਲ ਜਾਓ ਅਤੇ ਇਸ ਦੀ ਬਜਾਏ .clearfix()
ਜਿੱਥੇ ਉਚਿਤ ਹੋਵੇ ਮਿਕਸਿਨ ਸ਼ਾਮਲ ਕਰੋ। ਨਿਕੋਲਸ ਗਾਲਾਘਰ ਤੋਂ ਮਾਈਕ੍ਰੋ ਕਲੀਅਰਫਿਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ।
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
ਕਿਸੇ ਵੀ ਤੱਤ ਨੂੰ ਇਸਦੇ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅੰਦਰ ਤੁਰੰਤ ਕੇਂਦਰਿਤ ਕਰੋ। ਲੋੜੀਂਦਾ ਹੈ width
ਜਾਂ max-width
ਸੈੱਟ ਕੀਤਾ ਜਾਣਾ ਹੈ।
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
ਕਿਸੇ ਵਸਤੂ ਦੇ ਮਾਪ ਹੋਰ ਆਸਾਨੀ ਨਾਲ ਨਿਸ਼ਚਿਤ ਕਰੋ।
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
ਕਿਸੇ ਵੀ ਟੈਕਸਟੇਰੀਆ, ਜਾਂ ਕਿਸੇ ਹੋਰ ਤੱਤ ਲਈ ਮੁੜ ਆਕਾਰ ਦੇ ਵਿਕਲਪਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕੌਂਫਿਗਰ ਕਰੋ। ਆਮ ਬ੍ਰਾਊਜ਼ਰ ਵਿਹਾਰ ( both
) ਲਈ ਡਿਫੌਲਟ।
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
ਇੱਕ ਸਿੰਗਲ ਮਿਕਸਿਨ ਦੇ ਨਾਲ ਅੰਡਾਕਾਰ ਦੇ ਨਾਲ ਟੈਕਸਟ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕੱਟੋ। ਹੋਣ ਜਾਂ ਪੱਧਰ ਲਈ ਤੱਤ ਦੀ ਲੋੜ ਹੈ ।block
inline-block
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
ਦੋ ਚਿੱਤਰ ਮਾਰਗ ਅਤੇ @1x ਚਿੱਤਰ ਮਾਪ ਨਿਰਧਾਰਤ ਕਰੋ, ਅਤੇ ਬੂਟਸਟਰੈਪ @2x ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਪ੍ਰਦਾਨ ਕਰੇਗਾ। ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਸੇਵਾ ਕਰਨ ਲਈ ਬਹੁਤ ਸਾਰੀਆਂ ਤਸਵੀਰਾਂ ਹਨ, ਤਾਂ ਇੱਕ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਵਿੱਚ ਆਪਣੀ ਰੈਟੀਨਾ ਚਿੱਤਰ CSS ਨੂੰ ਹੱਥੀਂ ਲਿਖਣ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ।
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
ਜਦੋਂ ਕਿ ਬੂਟਸਟਰੈਪ ਘੱਟ 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਇਸ ਵਿੱਚ ਇੱਕ ਅਧਿਕਾਰਤ Sass ਪੋਰਟ ਵੀ ਹੈ । ਅਸੀਂ ਇਸਨੂੰ ਇੱਕ ਵੱਖਰੀ GitHub ਰਿਪੋਜ਼ਟਰੀ ਵਿੱਚ ਬਣਾਈ ਰੱਖਦੇ ਹਾਂ ਅਤੇ ਇੱਕ ਪਰਿਵਰਤਨ ਸਕ੍ਰਿਪਟ ਨਾਲ ਅਪਡੇਟਾਂ ਨੂੰ ਸੰਭਾਲਦੇ ਹਾਂ।
ਕਿਉਂਕਿ ਸਾਸ ਪੋਰਟ ਦਾ ਇੱਕ ਵੱਖਰਾ ਰੈਪੋ ਹੈ ਅਤੇ ਇਹ ਥੋੜਾ ਵੱਖਰਾ ਦਰਸ਼ਕਾਂ ਦੀ ਸੇਵਾ ਕਰਦਾ ਹੈ, ਪ੍ਰੋਜੈਕਟ ਦੀ ਸਮੱਗਰੀ ਮੁੱਖ ਬੂਟਸਟਰੈਪ ਪ੍ਰੋਜੈਕਟ ਤੋਂ ਬਹੁਤ ਵੱਖਰੀ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ Sass ਪੋਰਟ ਵੱਧ ਤੋਂ ਵੱਧ Sass-ਅਧਾਰਿਤ ਸਿਸਟਮਾਂ ਦੇ ਅਨੁਕੂਲ ਹੈ।
ਮਾਰਗ | ਵਰਣਨ |
---|---|
lib/ |
ਰੂਬੀ ਰਤਨ ਕੋਡ (ਸਾਸ ਕੌਂਫਿਗਰੇਸ਼ਨ, ਰੇਲਜ਼ ਅਤੇ ਕੰਪਾਸ ਏਕੀਕਰਣ) |
tasks/ |
ਪਰਿਵਰਤਕ ਸਕ੍ਰਿਪਟਾਂ (ਅਪਸਟ੍ਰੀਮ ਲੈਸ ਨੂੰ ਸਾਸ ਵਿੱਚ ਬਦਲਣਾ) |
test/ |
ਸੰਕਲਨ ਟੈਸਟ |
templates/ |
ਕੰਪਾਸ ਪੈਕੇਜ ਮੈਨੀਫੈਸਟ |
vendor/assets/ |
Sass, JavaScript, ਅਤੇ ਫੌਂਟ ਫਾਈਲਾਂ |
Rakefile |
ਅੰਦਰੂਨੀ ਕੰਮ, ਜਿਵੇਂ ਕਿ ਰੈਕ ਅਤੇ ਕਨਵਰਟ |
ਇਹਨਾਂ ਫਾਈਲਾਂ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਣ ਲਈ Sass ਪੋਰਟ ਦੇ GitHub ਰਿਪੋਜ਼ਟਰੀ 'ਤੇ ਜਾਓ ।
Sass ਲਈ ਬੂਟਸਟਰੈਪ ਨੂੰ ਕਿਵੇਂ ਇੰਸਟਾਲ ਕਰਨਾ ਅਤੇ ਵਰਤਣਾ ਹੈ ਇਸ ਬਾਰੇ ਜਾਣਕਾਰੀ ਲਈ, GitHub ਰਿਪੋਜ਼ਟਰੀ ਰੀਡਮੀ ਨਾਲ ਸੰਪਰਕ ਕਰੋ । ਇਹ ਸਭ ਤੋਂ ਨਵੀਨਤਮ ਸਰੋਤ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਰੇਲ, ਕੰਪਾਸ, ਅਤੇ ਸਟੈਂਡਰਡ ਸਾਸ ਪ੍ਰੋਜੈਕਟਾਂ ਦੀ ਵਰਤੋਂ ਲਈ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਹੈ।