ਬਿਹਤਰ, ਤੇਜ਼, ਮਜ਼ਬੂਤ ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਸਾਡੀ ਪਹੁੰਚ ਸਮੇਤ, ਬੂਟਸਟਰੈਪ ਦੇ ਬੁਨਿਆਦੀ ਢਾਂਚੇ ਦੇ ਮੁੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਨੀਵਾਂ ਪ੍ਰਾਪਤ ਕਰੋ।

HTML5 doctype

ਬੂਟਸਟਰੈਪ ਕੁਝ 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।

Normalize.css

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

@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।

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<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-*ਆਪਣੇ ਕਾਲਮਾਂ ਵਿੱਚ ਜੋੜ ਕੇ ਵਾਧੂ ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ ਡਿਵਾਈਸ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਸਭ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਇਸ ਬਾਰੇ ਬਿਹਤਰ ਵਿਚਾਰ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਦੇਖੋ।

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- 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-*ਟੈਬਲੇਟ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਹੋਰ ਵੀ ਗਤੀਸ਼ੀਲ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਲੇਆਉਟ ਬਣਾ ਕੇ ਪਿਛਲੀ ਉਦਾਹਰਨ 'ਤੇ ਬਣਾਓ ।

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<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 ਤੋਂ ਵੱਧ ਕਾਲਮ ਰੱਖੇ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਵਾਧੂ ਕਾਲਮਾਂ ਦਾ ਹਰੇਕ ਸਮੂਹ, ਇੱਕ ਯੂਨਿਟ ਦੇ ਰੂਪ ਵਿੱਚ, ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਲਪੇਟ ਜਾਵੇਗਾ।

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 ਤੋਂ, ਇਹ 4-ਕਾਲਮ-ਵਿਆਪਕ ਡਿਵ ਇੱਕ ਸੰਮਿਲਿਤ ਯੂਨਿਟ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਉੱਤੇ ਲਪੇਟਿਆ ਜਾਂਦਾ ਹੈ।

.col-xs-6
ਬਾਅਦ ਦੇ ਕਾਲਮ ਨਵੀਂ ਲਾਈਨ ਦੇ ਨਾਲ ਜਾਰੀ ਰਹਿੰਦੇ ਹਨ।

<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 &gt; 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ਅਤੇ ਸਾਡੀਆਂ ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੇ ਸੁਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

.col-xs-6 .col-sm-3
ਆਪਣੇ ਵਿਊਪੋਰਟ ਦਾ ਆਕਾਰ ਬਦਲੋ ਜਾਂ ਉਦਾਹਰਨ ਲਈ ਆਪਣੇ ਫ਼ੋਨ 'ਤੇ ਇਸਨੂੰ ਦੇਖੋ।

.col-xs-6 .col-sm-3

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

ਔਫਸੈਟਿੰਗ ਕਾਲਮਾਂ

.col-md-offset-*ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਲਮਾਂ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਲਿਜਾਓ । ਇਹ ਕਲਾਸਾਂ ਇੱਕ ਕਾਲਮ ਦੇ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨੂੰ *ਕਾਲਮਾਂ ਦੁਆਰਾ ਵਧਾਉਂਦੀਆਂ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਚਾਰ ਕਾਲਮਾਂ ਉੱਤੇ .col-md-offset-4ਚਲਦਾ ਹੈ।.col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<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-*

ਪੱਧਰ 1: .col-sm-9

ਪੱਧਰ 2: .col-xs-8 .col-sm-6

ਪੱਧਰ 2: .col-xs-4 .col-sm-6

<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-*ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਬਦਲੋ।

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<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>।

Twitter, Inc.
1355 ਮਾਰਕੀਟ ਸਟ੍ਰੀਟ, ਸੂਟ 900
ਸੈਨ ਫਰਾਂਸਿਸਕੋ, CA 94103
P: (123) 456-7890

ਪੂਰਾ ਨਾਮ
[email protected]

<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ਸੱਜੇ-ਅਲਾਈਨ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਇੱਕ ਬਲਾਕਕੋਟ ਲਈ ਜੋੜੋ ।

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।

ਸਰੋਤ ਸਿਰਲੇਖ ਵਿੱਚ ਮਸ਼ਹੂਰ ਕੋਈ ਵਿਅਕਤੀ

<blockquote class="blockquote-reverse">
  ...
</blockquote>

ਸੂਚੀਆਂ

ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ

ਆਈਟਮਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਜਿਸ ਵਿੱਚ ਆਰਡਰ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਮਾਇਨੇ ਨਹੀਂ ਰੱਖਦਾ।

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
- ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
- ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
- ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
- ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
Faucibus porta lacus fringilla vel
ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

ਆਰਡਰ ਕੀਤਾ

ਆਈਟਮਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਜਿਸ ਵਿੱਚ ਆਰਡਰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ।

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
Faucibus porta lacus fringilla vel
ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

ਅਨਸਟਾਇਲਡ

ਸੂਚੀ ਆਈਟਮਾਂ 'ਤੇ ਡਿਫੌਲਟ list-styleਅਤੇ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨੂੰ ਹਟਾਓ (ਸਿਰਫ਼ ਤੁਰੰਤ ਬੱਚੇ)। ਇਹ ਸਿਰਫ਼ ਤੁਰੰਤ ਬੱਚਿਆਂ ਦੀ ਸੂਚੀ ਵਾਲੀਆਂ ਆਈਟਮਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ , ਮਤਲਬ ਕਿ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਨੇਸਟਡ ਸੂਚੀਆਂ ਲਈ ਵੀ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ।

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
- ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
- ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
- ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
- ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
Faucibus porta lacus fringilla vel
ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
Eget porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

ਇਨ ਲਾਇਨ

ਸਾਰੀਆਂ ਸੂਚੀ ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ ਲਾਈਨ 'ਤੇ ਰੱਖੋ display: inline-block;ਅਤੇ ਕੁਝ ਹਲਕੇ ਪੈਡਿੰਗ ਦੇ ਨਾਲ।

Lorem ipsum
ਫੈਸੇਲਸ ਆਈਕੁਲਿਸ
ਨਲਾ ਵੁਲਟਪਟ

<ul class="list-inline">
  <li>...</li>
</ul>

ਵਰਣਨ

ਉਹਨਾਂ ਦੇ ਸੰਬੰਧਿਤ ਵਰਣਨ ਦੇ ਨਾਲ ਸ਼ਬਦਾਂ ਦੀ ਇੱਕ ਸੂਚੀ।

ਵਰਣਨ ਸੂਚੀਆਂ: ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।
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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

ਹਰੀਜ਼ੱਟਲ ਵਰਣਨ

ਸ਼ਰਤਾਂ ਅਤੇ ਵਰਣਨ ਨੂੰ <dl>ਨਾਲ-ਨਾਲ ਲਾਈਨ ਵਿੱਚ ਬਣਾਓ। ਡਿਫੌਲਟ s ਵਾਂਗ ਸਟੈਕਡ ਬੰਦ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ <dl>, ਪਰ ਜਦੋਂ ਨਵਬਾਰ ਫੈਲਦਾ ਹੈ, ਤਾਂ ਇਹ ਕਰੋ।

ਵਰਣਨ ਸੂਚੀਆਂ: ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।
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.
Felis euismod semper eget lacinia: Fusce dapibus, teleus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ਆਟੋ-ਟਰੰਕੇਟਿੰਗ

ਹਰੀਜ਼ੱਟਲ ਵਰਣਨ ਸੂਚੀਆਂ ਉਹਨਾਂ ਸ਼ਬਦਾਂ ਨੂੰ ਕੱਟ ਦਿੰਦੀਆਂ ਹਨ ਜੋ ਖੱਬੇ ਕਾਲਮ ਵਿੱਚ ਫਿੱਟ ਹੋਣ ਲਈ ਬਹੁਤ ਲੰਬੇ ਹਨ text-overflow। ਤੰਗ ਵਿਊਪੋਰਟਾਂ ਵਿੱਚ, ਉਹ ਡਿਫੌਲਟ ਸਟੈਕਡ ਲੇਆਉਟ ਵਿੱਚ ਬਦਲ ਜਾਣਗੇ।

ਇਨ ਲਾਇਨ

ਕੋਡ ਦੇ ਇਨਲਾਈਨ ਸਨਿੱਪਟ ਨੂੰ ਨਾਲ ਲਪੇਟੋ <code>।

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

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

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

<kbd>ਇੰਪੁੱਟ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਵਰਤੋ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਕੀਬੋਰਡ ਦੁਆਰਾ ਦਾਖਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਡਾਇਰੈਕਟਰੀਆਂ ਨੂੰ ਬਦਲਣ ਲਈ, ਡਾਇਰੈਕਟਰੀ cdਦੇ ਨਾਮ ਤੋਂ ਬਾਅਦ ਟਾਈਪ ਕਰੋ।
ਸੈਟਿੰਗਾਂ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨ ਲਈ, ਦਬਾਓ ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

ਬੁਨਿਆਦੀ ਬਲਾਕ

<pre>ਕੋਡ ਦੀਆਂ ਕਈ ਲਾਈਨਾਂ ਲਈ ਵਰਤੋਂ । ਸਹੀ ਰੈਂਡਰਿੰਗ ਲਈ ਕੋਡ ਵਿੱਚ ਕਿਸੇ ਵੀ ਕੋਣ ਬਰੈਕਟਾਂ ਤੋਂ ਬਚਣਾ ਯਕੀਨੀ ਬਣਾਓ।

<p>ਇੱਥੇ ਨਮੂਨਾ ਪਾਠ...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</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-childCSS ਚੋਣਕਾਰ ਦੁਆਰਾ ਸਟਾਈਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਕਿ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 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-responsive768px ਚੌੜੀ ਤੋਂ ਵੱਡੀ ਕਿਸੇ ਵੀ ਚੀਜ਼ 'ਤੇ ਦੇਖਣ ਵੇਲੇ, ਤੁਸੀਂ ਇਹਨਾਂ ਟੇਬਲਾਂ ਵਿੱਚ ਕੋਈ ਅੰਤਰ ਨਹੀਂ ਦੇਖ ਸਕੋਗੇ।

ਵਰਟੀਕਲ ਕਲਿਪਿੰਗ/ਟਰੰਕੇਸ਼ਨ

ਜਵਾਬਦੇਹ ਟੇਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ 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&mdash;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&mdash;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 class="sr-only" 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

SVG ਚਿੱਤਰ ਅਤੇ IE 8-10

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 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">&times;</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 ਪ੍ਰਾਪਰਟੀ ਮੁੱਲ ਲਈ ਇੱਕ।

ਕਲਾਸਾਂ ਦਾ ਸਮੂਹ	CSS`display`
`.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>ਸੰਬੰਧਿਤ ਤੱਤਾਂ ਲਈ।

ਟੈਸਟ ਕੇਸ

ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਕਾਰ ਬਦਲੋ ਜਾਂ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਲੋਡ ਕਰੋ।

ਇਸ 'ਤੇ ਦਿਖਣਯੋਗ...

ਹਰੇ ਚੈੱਕਮਾਰਕ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਤੱਤ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਵਿਊਪੋਰਟ ਵਿੱਚ ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਹੈ।

ਵਾਧੂ ਛੋਟਾ ✔ x-ਛੋਟੇ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਛੋਟਾ ✔ ਛੋਟੇ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਦਰਮਿਆਨਾ ✔ ਮੀਡੀਅਮ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਵੱਡਾ ✔ ਵੱਡੇ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਵਾਧੂ ਛੋਟੇ ਅਤੇ ਛੋਟੇ ✔ x-ਛੋਟੇ ਅਤੇ ਛੋਟੇ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਦਰਮਿਆਨੇ ਅਤੇ ਵੱਡੇ ✔ ਮੱਧਮ ਅਤੇ ਵੱਡੇ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਵਾਧੂ ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ ✔ x-ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਛੋਟੇ ਅਤੇ ਵੱਡੇ ✔ ਛੋਟੇ ਅਤੇ ਵੱਡੇ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਵਾਧੂ ਛੋਟੇ ਅਤੇ ਵੱਡੇ ✔ x-ਛੋਟੇ ਅਤੇ ਵੱਡੇ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ ✔ ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

'ਤੇ ਲੁਕਿਆ ਹੋਇਆ...

ਇੱਥੇ, ਹਰੇ ਚੈੱਕਮਾਰਕ ਇਹ ਵੀ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਤੱਤ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਵਿਊਪੋਰਟ ਵਿੱਚ ਲੁਕਿਆ ਹੋਇਆ ਹੈ।

ਵਾਧੂ ਛੋਟਾ ✔ x-ਛੋਟੇ 'ਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਛੋਟਾ ✔ ਛੋਟੇ 'ਤੇ ਲੁਕਿਆ

ਦਰਮਿਆਨਾ ✔ ਮੀਡੀਅਮ 'ਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਵੱਡਾ ✔ ਵੱਡੇ ਉੱਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਵਾਧੂ ਛੋਟੇ ਅਤੇ ਛੋਟੇ ✔ x-ਛੋਟੇ ਅਤੇ ਛੋਟੇ 'ਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਦਰਮਿਆਨੇ ਅਤੇ ਵੱਡੇ ✔ ਦਰਮਿਆਨੇ ਅਤੇ ਵੱਡੇ 'ਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਵਾਧੂ ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ ✔ x-ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ 'ਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਛੋਟੇ ਅਤੇ ਵੱਡੇ ✔ ਛੋਟੇ ਅਤੇ ਵੱਡੇ 'ਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਵਾਧੂ ਛੋਟੇ ਅਤੇ ਵੱਡੇ ✔ x-ਛੋਟੇ ਅਤੇ ਵੱਡੇ 'ਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ ✔ ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ 'ਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਬੂਟਸਟਰੈਪ ਦਾ 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ਜੇਕਰ ਤੁਹਾਡੇ ਨਿਸ਼ਾਨੇ ਵਾਲੇ ਦਰਸ਼ਕ ਨਵੀਨਤਮ ਅਤੇ ਮਹਾਨ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਨ, ਤਾਂ ਸੰਪੱਤੀ ਨੂੰ ਆਪਣੇ ਆਪ ਹੀ ਵਰਤਣਾ ਯਕੀਨੀ ਬਣਾਓ । ਜੇਕਰ ਤੁਹਾਨੂੰ ਪੁਰਾਣੇ Android (pre-v4) ਅਤੇ iOS ਡਿਵਾਈਸਾਂ (pre-iOS 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;
}

ਪਰਿਵਰਤਨ

ਕਿਸੇ ਵੀ ਵਸਤੂ ਨੂੰ ਘੁੰਮਾਓ, ਸਕੇਲ ਕਰੋ, ਅਨੁਵਾਦ ਕਰੋ (ਮੂਵ ਕਰੋ), ਜਾਂ ਤਿਲਕਾਓ।

.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 ਦੀਆਂ ਸਾਰੀਆਂ ਐਨੀਮੇਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਇੱਕ ਸਿੰਗਲ ਮਿਕਸਿਨ ਅਤੇ ਵਿਅਕਤੀਗਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਹੋਰ ਮਿਸ਼ਰਣ।

.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;
}

ਧੁੰਦਲਾਪਨ

ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਧੁੰਦਲਾਪਨ ਸੈੱਟ ਕਰੋ ਅਤੇ filterIE8 ਲਈ ਫਾਲਬੈਕ ਪ੍ਰਦਾਨ ਕਰੋ।

.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;
}

ਟੈਕਸਟ ਨੂੰ ਕੱਟਿਆ ਜਾ ਰਿਹਾ ਹੈ

ਇੱਕ ਸਿੰਗਲ ਮਿਕਸਿਨ ਦੇ ਨਾਲ ਅੰਡਾਕਾਰ ਦੇ ਨਾਲ ਟੈਕਸਟ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕੱਟੋ। ਹੋਣ ਜਾਂ ਪੱਧਰ ਲਈ ਤੱਤ ਦੀ ਲੋੜ ਹੈ ।blockinline-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 ਰਿਪੋਜ਼ਟਰੀ ਰੀਡਮੀ ਨਾਲ ਸੰਪਰਕ ਕਰੋ । ਇਹ ਸਭ ਤੋਂ ਨਵੀਨਤਮ ਸਰੋਤ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਰੇਲ, ਕੰਪਾਸ, ਅਤੇ ਸਟੈਂਡਰਡ ਸਾਸ ਪ੍ਰੋਜੈਕਟਾਂ ਦੀ ਵਰਤੋਂ ਲਈ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਹੈ।

Sass ਲਈ ਬੂਟਸਟਰੈਪ

CSS

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

HTML5 doctype

ਪਹਿਲਾਂ ਮੋਬਾਈਲ

ਟਾਈਪੋਗ੍ਰਾਫੀ ਅਤੇ ਲਿੰਕ

Normalize.css

ਕੰਟੇਨਰ

ਗਰਿੱਡ ਸਿਸਟਮ

ਜਾਣ-ਪਛਾਣ

ਮੀਡੀਆ ਸਵਾਲ

ਗਰਿੱਡ ਵਿਕਲਪ

ਉਦਾਹਰਨ: ਸਟੈਕਡ-ਟੂ-ਰੀਜ਼ੈਂਟਲ

ਉਦਾਹਰਨ: ਤਰਲ ਕੰਟੇਨਰ

ਉਦਾਹਰਨ: ਮੋਬਾਈਲ ਅਤੇ ਡੈਸਕਟਾਪ

ਉਦਾਹਰਨ: ਮੋਬਾਈਲ, ਟੈਬਲੈੱਟ, ਡੈਸਕਟਾਪ

ਉਦਾਹਰਨ: ਕਾਲਮ ਰੈਪਿੰਗ

ਜਵਾਬਦੇਹ ਕਾਲਮ ਰੀਸੈੱਟ

ਔਫਸੈਟਿੰਗ ਕਾਲਮਾਂ

ਨੇਸਟਿੰਗ ਕਾਲਮ

ਕਾਲਮ ਆਰਡਰਿੰਗ

ਘੱਟ ਮਿਸ਼ਰਣ ਅਤੇ ਵੇਰੀਏਬਲ

ਵੇਰੀਏਬਲ

ਮਿਕਸਿਨਸ

ਉਦਾਹਰਨ ਵਰਤੋਂ

ਟਾਈਪੋਗ੍ਰਾਫੀ

ਸਿਰਲੇਖ

h1. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ

h2. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ

h3. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ

h4. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ

h5. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ

h6. ਬੂਟਸਟਰੈਪ ਸਿਰਲੇਖ

h1. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ

h2. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ

h3. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ

h4. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ

h5. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ

h6. ਬੂਟਸਟਰੈਪ ਹੈਡਿੰਗ ਸੈਕੰਡਰੀ ਟੈਕਸਟ

ਸਰੀਰ ਦੀ ਨਕਲ

ਲੀਡ ਬਾਡੀ ਕਾਪੀ

ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ

ਇਨਲਾਈਨ ਟੈਕਸਟ ਤੱਤ

ਚਿੰਨ੍ਹਿਤ ਟੈਕਸਟ

ਮਿਟਾਇਆ ਟੈਕਸਟ

ਸਟ੍ਰਾਈਕਥਰੂ ਟੈਕਸਟ

ਲਿਖਤ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ

ਰੇਖਾਂਕਿਤ ਟੈਕਸਟ

ਛੋਟਾ ਟੈਕਸਟ

ਬੋਲਡ

ਤਿਰਛੀ

ਬਦਲਵੇਂ ਤੱਤ

ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ

ਪਰਿਵਰਤਨ ਕਲਾਸਾਂ

ਸੰਖੇਪ ਰੂਪ

ਮੂਲ ਸੰਖੇਪ

ਆਰੰਭਵਾਦ

ਪਤੇ

ਬਲਾਕਕੋਟ

ਡਿਫੌਲਟ ਬਲਾਕਕੋਟ

ਬਲਾਕਕੋਟ ਵਿਕਲਪ

ਇੱਕ ਸਰੋਤ ਦਾ ਨਾਮ ਦੇਣਾ

ਵਿਕਲਪਿਕ ਡਿਸਪਲੇ

ਸੂਚੀਆਂ

ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ

ਆਰਡਰ ਕੀਤਾ

ਅਨਸਟਾਇਲਡ

ਇਨ ਲਾਇਨ

ਵਰਣਨ

ਹਰੀਜ਼ੱਟਲ ਵਰਣਨ

ਆਟੋ-ਟਰੰਕੇਟਿੰਗ

ਕੋਡ

ਇਨ ਲਾਇਨ

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

ਬੁਨਿਆਦੀ ਬਲਾਕ

ਵੇਰੀਏਬਲ

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

ਟੇਬਲ

ਬੁਨਿਆਦੀ ਉਦਾਹਰਨ

ਧਾਰੀਦਾਰ ਕਤਾਰਾਂ

ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ

ਡੈਮੋ `:focus`ਸਥਿਤੀ

ਦੀ ਲਿੰਕ ਕਾਰਜਕੁਸ਼ਲਤਾ ਬਾਰੇ ਚੇਤਾਵਨੀ`<a>`

ਲੁਕਵੇਂ `.sr-only`ਲੇਬਲਾਂ ਦੇ ਨਾਲ ਵਿਕਲਪਿਕ ਆਈਕਾਨ