ਕੰਪੋਨੈਂਟਸ
ਆਈਕੋਨੋਗ੍ਰਾਫੀ, ਡ੍ਰੌਪਡਾਉਨ, ਇਨਪੁਟ ਸਮੂਹ, ਨੈਵੀਗੇਸ਼ਨ, ਚੇਤਾਵਨੀਆਂ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਬਣਾਏ ਗਏ ਇੱਕ ਦਰਜਨ ਤੋਂ ਵੱਧ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਹਿੱਸੇ।
ਆਈਕੋਨੋਗ੍ਰਾਫੀ, ਡ੍ਰੌਪਡਾਉਨ, ਇਨਪੁਟ ਸਮੂਹ, ਨੈਵੀਗੇਸ਼ਨ, ਚੇਤਾਵਨੀਆਂ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਬਣਾਏ ਗਏ ਇੱਕ ਦਰਜਨ ਤੋਂ ਵੱਧ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਹਿੱਸੇ।
Glyphicon Halflings ਸੈੱਟ ਤੋਂ ਫੌਂਟ ਫਾਰਮੈਟ ਵਿੱਚ 250 ਤੋਂ ਵੱਧ ਗਲਾਈਫਸ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। Glyphicons Halflings ਆਮ ਤੌਰ 'ਤੇ ਮੁਫਤ ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹੁੰਦੇ ਹਨ, ਪਰ ਉਹਨਾਂ ਦੇ ਸਿਰਜਣਹਾਰ ਨੇ ਉਹਨਾਂ ਨੂੰ ਬੂਟਸਟਰੈਪ ਲਈ ਮੁਫਤ ਉਪਲਬਧ ਕਰਵਾਇਆ ਹੈ। ਤੁਹਾਡੇ ਧੰਨਵਾਦ ਦੇ ਤੌਰ 'ਤੇ, ਅਸੀਂ ਸਿਰਫ ਇਹ ਮੰਗ ਕਰਦੇ ਹਾਂ ਕਿ ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ ਤਾਂ ਤੁਸੀਂ ਗਲਾਈਫਿਕਨ ਲਈ ਇੱਕ ਲਿੰਕ ਸ਼ਾਮਲ ਕਰੋ।
ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਕਰਕੇ, ਸਾਰੇ ਆਈਕਨਾਂ ਲਈ ਇੱਕ ਬੇਸ ਕਲਾਸ ਅਤੇ ਵਿਅਕਤੀਗਤ ਆਈਕਨ ਕਲਾਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਵਰਤਣ ਲਈ, ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਲਗਭਗ ਕਿਤੇ ਵੀ ਰੱਖੋ। ਸਹੀ ਪੈਡਿੰਗ ਲਈ ਆਈਕਨ ਅਤੇ ਟੈਕਸਟ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਪੇਸ ਛੱਡਣਾ ਯਕੀਨੀ ਬਣਾਓ।
ਆਈਕਨ ਕਲਾਸਾਂ ਨੂੰ ਦੂਜੇ ਭਾਗਾਂ ਨਾਲ ਸਿੱਧਾ ਨਹੀਂ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਉਹਨਾਂ ਨੂੰ ਉਸੇ ਤੱਤ 'ਤੇ ਹੋਰ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਨਹੀਂ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਸਦੀ ਬਜਾਏ, ਇੱਕ ਨੇਸਟਡ ਸ਼ਾਮਲ <span>
ਕਰੋ ਅਤੇ ਆਈਕਨ ਕਲਾਸਾਂ ਨੂੰ <span>
.
ਆਈਕਨ ਕਲਾਸਾਂ ਸਿਰਫ਼ ਉਹਨਾਂ ਤੱਤਾਂ 'ਤੇ ਹੀ ਵਰਤੀਆਂ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਕੋਈ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨਹੀਂ ਹੈ ਅਤੇ ਕੋਈ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਨਹੀਂ ਹੈ।
ਬੂਟਸਟਰੈਪ ਮੰਨਦਾ ਹੈ ਕਿ ਆਈਕਨ ਫੌਂਟ ਫਾਈਲਾਂ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਸਥਿਤ ਹੋਣਗੀਆਂ ../fonts/
, ਕੰਪਾਇਲ ਕੀਤੀਆਂ CSS ਫਾਈਲਾਂ ਦੇ ਅਨੁਸਾਰ। ਉਹਨਾਂ ਫੌਂਟ ਫਾਈਲਾਂ ਨੂੰ ਮੂਵ ਕਰਨਾ ਜਾਂ ਨਾਮ ਬਦਲਣ ਦਾ ਮਤਲਬ ਹੈ CSS ਨੂੰ ਤਿੰਨ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਵਿੱਚ ਅੱਪਡੇਟ ਕਰਨਾ:
@icon-font-path
ਅਤੇ/ਜਾਂ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਬਦਲੋ ।@icon-font-name
url()
ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਮਾਰਗ ਬਦਲੋ .ਤੁਹਾਡੇ ਖਾਸ ਵਿਕਾਸ ਸੈੱਟਅੱਪ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਦੇ ਆਧੁਨਿਕ ਸੰਸਕਰਣ CSS ਦੁਆਰਾ ਤਿਆਰ ਸਮੱਗਰੀ ਦੇ ਨਾਲ-ਨਾਲ ਖਾਸ ਯੂਨੀਕੋਡ ਅੱਖਰਾਂ ਦੀ ਘੋਸ਼ਣਾ ਕਰਨਗੇ। ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਵਿੱਚ ਅਣਇੱਛਤ ਅਤੇ ਉਲਝਣ ਵਾਲੇ ਆਉਟਪੁੱਟ ਤੋਂ ਬਚਣ ਲਈ (ਖਾਸ ਤੌਰ 'ਤੇ ਜਦੋਂ ਆਈਕਾਨਾਂ ਨੂੰ ਸਜਾਵਟ ਲਈ ਪੂਰੀ ਤਰ੍ਹਾਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ), ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ aria-hidden="true"
ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਲੁਕਾਉਂਦੇ ਹਾਂ।
ਜੇਕਰ ਤੁਸੀਂ ਅਰਥ ਦੱਸਣ ਲਈ ਕਿਸੇ ਆਈਕਨ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ (ਸਿਰਫ਼ ਸਜਾਵਟੀ ਤੱਤ ਦੇ ਤੌਰ 'ਤੇ), ਤਾਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇਹ ਅਰਥ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਤੱਕ ਵੀ ਪਹੁੰਚਾਇਆ ਗਿਆ ਹੈ - ਉਦਾਹਰਨ ਲਈ, .sr-only
ਕਲਾਸ ਦੇ ਨਾਲ ਦ੍ਰਿਸ਼ਟੀਗਤ ਰੂਪ ਵਿੱਚ ਲੁਕੀ ਹੋਈ ਵਾਧੂ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਕਰੋ।
ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਹੋਰ ਟੈਕਸਟ (ਜਿਵੇਂ ਕਿ <button>
ਜਿਸ ਵਿੱਚ ਸਿਰਫ਼ ਇੱਕ ਆਈਕਨ ਸ਼ਾਮਲ ਹੈ) ਦੇ ਬਿਨਾਂ ਨਿਯੰਤਰਣ ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਨਿਯੰਤਰਣ ਦੇ ਉਦੇਸ਼ ਦੀ ਪਛਾਣ ਕਰਨ ਲਈ ਹਮੇਸ਼ਾਂ ਵਿਕਲਪਕ ਸਮੱਗਰੀ ਪ੍ਰਦਾਨ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ, ਤਾਂ ਜੋ ਇਹ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਮਝ ਸਕੇ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਤੁਸੀਂ aria-label
ਨਿਯੰਤਰਣ ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
ਉਹਨਾਂ ਨੂੰ ਬਟਨਾਂ, ਟੂਲਬਾਰ, ਨੈਵੀਗੇਸ਼ਨ, ਜਾਂ ਪ੍ਰਿਪੇਂਡ ਫਾਰਮ ਇਨਪੁਟਸ ਲਈ ਬਟਨ ਸਮੂਹਾਂ ਵਿੱਚ ਵਰਤੋ।
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਇਹ ਸੰਕੇਤ ਦੇਣ ਲਈ ਅਤਿਰਿਕਤ ਟੈਕਸਟ ਦੇ ਨਾਲ, ਇਹ ਦੱਸਣ ਲਈ ਇੱਕ ਚੇਤਾਵਨੀ ਵਿੱਚ ਵਰਤਿਆ ਗਿਆ ਇੱਕ ਆਈਕਨ ਕਿ ਇਹ ਇੱਕ ਗਲਤੀ ਸੁਨੇਹਾ ਹੈ।.sr-only
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
ਲਿੰਕਾਂ ਦੀਆਂ ਸੂਚੀਆਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਟੌਗਲ ਕਰਨ ਯੋਗ, ਪ੍ਰਸੰਗਿਕ ਮੀਨੂ। ਡ੍ਰੌਪਡਾਉਨ JavaScript ਪਲੱਗਇਨ ਨਾਲ ਇੰਟਰਐਕਟਿਵ ਬਣਾਇਆ ਗਿਆ ।
ਡ੍ਰੌਪਡਾਉਨ ਦੇ ਟਰਿੱਗਰ ਅਤੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਅੰਦਰ ਲਪੇਟੋ .dropdown
, ਜਾਂ ਕੋਈ ਹੋਰ ਤੱਤ ਜੋ ਘੋਸ਼ਿਤ ਕਰਦਾ ਹੈ position: relative;
। ਫਿਰ ਮੀਨੂ ਦਾ HTML ਜੋੜੋ।
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
.dropup
ਡ੍ਰੌਪਡਾਊਨ ਮੀਨੂ ਨੂੰ ਪੇਰੈਂਟ ਨਾਲ ਜੋੜ ਕੇ ਉੱਪਰ ਵੱਲ (ਹੇਠਾਂ ਦੀ ਬਜਾਏ) ਫੈਲਾਉਣ ਲਈ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ ।
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ, ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਆਪਣੇ ਆਪ 100% ਉੱਪਰ ਤੋਂ ਅਤੇ ਇਸਦੇ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਖੱਬੇ ਪਾਸੇ ਸਥਿਤ ਹੁੰਦਾ ਹੈ। ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਸੱਜੇ ਅਲਾਈਨ ਕਰਨ .dropdown-menu-right
ਲਈ a ਵਿੱਚ ਜੋੜੋ ।.dropdown-menu
ਡ੍ਰੌਪਡਾਉਨ ਦਸਤਾਵੇਜ਼ ਦੇ ਆਮ ਪ੍ਰਵਾਹ ਦੇ ਅੰਦਰ CSS ਦੁਆਰਾ ਆਪਣੇ ਆਪ ਹੀ ਸਥਿਤੀ ਵਿੱਚ ਹੁੰਦੇ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਡ੍ਰੌਪਡਾਊਨ ਮਾਪਿਆਂ ਦੁਆਰਾ ਕੁਝ overflow
ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਾਲੇ ਕ੍ਰੌਪ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ ਜਾਂ ਵਿਊਪੋਰਟ ਦੀ ਸੀਮਾ ਤੋਂ ਬਾਹਰ ਦਿਖਾਈ ਦੇ ਸਕਦੇ ਹਨ। ਇਹਨਾਂ ਮੁੱਦਿਆਂ ਨੂੰ ਆਪਣੇ ਤੌਰ 'ਤੇ ਹੱਲ ਕਰੋ ਜਿਵੇਂ ਉਹ ਪੈਦਾ ਹੁੰਦੇ ਹਨ.
.pull-right
ਇਕਸਾਰਤਾv3.1.0 ਤੱਕ, ਅਸੀਂ .pull-right
ਡ੍ਰੌਪਡਾਊਨ ਮੀਨੂ 'ਤੇ ਨਾਪਸੰਦ ਕਰ ਦਿੱਤਾ ਹੈ। ਇੱਕ ਮੀਨੂ ਨੂੰ ਸੱਜਾ-ਅਲਾਈਨ ਕਰਨ ਲਈ, ਵਰਤੋ .dropdown-menu-right
। ਨੈਵਬਾਰ ਵਿੱਚ ਸੱਜੇ-ਅਲਾਈਨ ਕੀਤੇ nav ਹਿੱਸੇ ਮੇਨੂ ਨੂੰ ਆਟੋਮੈਟਿਕਲੀ ਇਕਸਾਰ ਕਰਨ ਲਈ ਇਸ ਕਲਾਸ ਦੇ ਇੱਕ ਮਿਕਸੀਨ ਸੰਸਕਰਣ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇਸ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ, ਵਰਤੋ .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
ਕਿਸੇ ਵੀ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿੱਚ ਕਾਰਵਾਈਆਂ ਦੇ ਭਾਗਾਂ ਨੂੰ ਲੇਬਲ ਕਰਨ ਲਈ ਇੱਕ ਸਿਰਲੇਖ ਸ਼ਾਮਲ ਕਰੋ।
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿੱਚ ਲਿੰਕਾਂ ਦੀ ਵੱਖਰੀ ਲੜੀ ਵਿੱਚ ਇੱਕ ਡਿਵਾਈਡਰ ਸ਼ਾਮਲ ਕਰੋ।
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
ਲਿੰਕ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਡ੍ਰੌਪਡਾਉਨ ਵਿੱਚ .disabled
ਇੱਕ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
ਬਟਨ ਸਮੂਹ ਦੇ ਨਾਲ ਇੱਕ ਲਾਈਨ 'ਤੇ ਇਕੱਠੇ ਬਟਨਾਂ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਸਮੂਹ ਕਰੋ। ਸਾਡੇ ਬਟਨ ਪਲੱਗਇਨ ਨਾਲ ਵਿਕਲਪਿਕ JavaScript ਰੇਡੀਓ ਅਤੇ ਚੈਕਬਾਕਸ ਸ਼ੈਲੀ ਵਿਵਹਾਰ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ ।
ਇੱਕ ਦੇ ਅੰਦਰ ਤੱਤਾਂ 'ਤੇ ਟੂਲਟਿਪਸ ਜਾਂ ਪੌਪਓਵਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ .btn-group
, ਤੁਹਾਨੂੰ container: 'body'
ਅਣਚਾਹੇ ਮਾੜੇ ਪ੍ਰਭਾਵਾਂ ਤੋਂ ਬਚਣ ਲਈ ਵਿਕਲਪ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਨਾ ਹੋਵੇਗਾ (ਜਿਵੇਂ ਕਿ ਟੂਲਟਿਪ ਜਾਂ ਪੌਪਓਵਰ ਚਾਲੂ ਹੋਣ 'ਤੇ ਤੱਤ ਦਾ ਚੌੜਾ ਹੋਣਾ ਅਤੇ/ਜਾਂ ਇਸਦੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਗੁਆਉਣਾ)।
role
ਹੈ ਅਤੇ ਇੱਕ ਲੇਬਲ ਪ੍ਰਦਾਨ ਕਰੋਸਹਾਇਕ ਤਕਨੀਕਾਂ ਲਈ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ - ਇਹ ਦੱਸਣ ਲਈ ਕਿ ਬਟਨਾਂ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਸਮੂਹਬੱਧ ਕੀਤਾ ਗਿਆ ਹੈ, ਇੱਕ ਉਚਿਤ role
ਵਿਸ਼ੇਸ਼ਤਾ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਬਟਨ ਸਮੂਹਾਂ ਲਈ, ਇਹ ਹੋਵੇਗਾ role="group"
, ਜਦੋਂ ਕਿ ਟੂਲਬਾਰ ਵਿੱਚ ਇੱਕ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ role="toolbar"
।
ਇੱਕ ਅਪਵਾਦ ਉਹ ਸਮੂਹ ਹੁੰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਸਿਰਫ਼ ਇੱਕ ਨਿਯੰਤਰਣ ਹੁੰਦਾ ਹੈ (ਉਦਾਹਰਨ ਲਈ ਤੱਤ ਵਾਲੇ ਜਾਇਜ਼ ਬਟਨ ਸਮੂਹ) ਜਾਂ ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ।<button>
role
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਸਮੂਹਾਂ ਅਤੇ ਟੂਲਬਾਰਾਂ ਨੂੰ ਇੱਕ ਸਪਸ਼ਟ ਲੇਬਲ ਦਿੱਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ, ਕਿਉਂਕਿ ਜ਼ਿਆਦਾਤਰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਸਹੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਮੌਜੂਦਗੀ ਦੇ ਬਾਵਜੂਦ, ਉਹਨਾਂ ਦੀ ਘੋਸ਼ਣਾ ਨਹੀਂ ਕਰਨਗੀਆਂ । ਇੱਥੇ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ, ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ aria-label
, ਪਰ ਵਿਕਲਪ ਜਿਵੇਂ ਕਿ aria-labelledby
ਵੀ ਵਰਤੇ ਜਾ ਸਕਦੇ ਹਨ।
.btn
ਵਿੱਚ ਨਾਲ ਬਟਨਾਂ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਸਮੇਟਣਾ .btn-group
।
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਭਾਗਾਂ ਲਈ <div class="btn-group">
a ਵਿੱਚ ਸੈੱਟਾਂ ਨੂੰ ਜੋੜੋ ।<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
ਇੱਕ ਸਮੂਹ ਵਿੱਚ ਹਰੇਕ ਬਟਨ ਲਈ ਬਟਨ ਸਾਈਜ਼ਿੰਗ ਕਲਾਸਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੀ ਬਜਾਏ, ਸਿਰਫ਼ .btn-group-*
ਹਰੇਕ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ .btn-group
, ਜਿਸ ਵਿੱਚ ਕਈ ਸਮੂਹਾਂ ਨੂੰ ਆਲ੍ਹਣਾ ਬਣਾਉਣ ਵੇਲੇ ਵੀ ਸ਼ਾਮਲ ਹੈ।
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
ਜਦੋਂ ਤੁਸੀਂ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਬਟਨਾਂ ਦੀ ਇੱਕ ਲੜੀ ਦੇ ਨਾਲ ਮਿਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਇੱਕ .btn-group
ਦੂਜੇ ਦੇ ਅੰਦਰ ਰੱਖੋ ।.btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
ਬਟਨਾਂ ਦਾ ਇੱਕ ਸੈੱਟ ਖਿਤਿਜੀ ਦੀ ਬਜਾਏ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਸਟੈਕਡ ਦਿਖਾਉਂਦਾ ਹੈ। ਸਪਲਿਟ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ ਇੱਥੇ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
ਇਸਦੇ ਮਾਤਾ-ਪਿਤਾ ਦੀ ਪੂਰੀ ਚੌੜਾਈ ਨੂੰ ਫੈਲਾਉਣ ਲਈ ਬਟਨਾਂ ਦੇ ਇੱਕ ਸਮੂਹ ਨੂੰ ਬਰਾਬਰ ਆਕਾਰ 'ਤੇ ਫੈਲਾਓ। ਬਟਨ ਸਮੂਹ ਦੇ ਅੰਦਰ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ ਨਾਲ ਵੀ ਕੰਮ ਕਰਦਾ ਹੈ।
ਬਟਨਾਂ ਨੂੰ ਜਾਇਜ਼ ਠਹਿਰਾਉਣ ਲਈ ਵਰਤੇ ਗਏ ਖਾਸ HTML ਅਤੇ CSS ਦੇ ਕਾਰਨ display: table-cell
, ਉਹਨਾਂ ਵਿਚਕਾਰ ਬਾਰਡਰ ਦੁੱਗਣੇ ਹੋ ਗਏ ਹਨ। ਨਿਯਮਤ ਬਟਨ ਸਮੂਹਾਂ ਵਿੱਚ, margin-left: -1px
ਉਹਨਾਂ ਨੂੰ ਹਟਾਉਣ ਦੀ ਬਜਾਏ ਬਾਰਡਰਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਹਾਲਾਂਕਿ, margin
ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰਦਾ display: table-cell
. ਨਤੀਜੇ ਵਜੋਂ, ਬੂਟਸਟਰੈਪ ਲਈ ਤੁਹਾਡੀਆਂ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨਾਂ ਦੇ ਆਧਾਰ 'ਤੇ, ਤੁਸੀਂ ਬਾਰਡਰਾਂ ਨੂੰ ਹਟਾਉਣ ਜਾਂ ਮੁੜ-ਰੰਗ ਕਰਨਾ ਚਾਹ ਸਕਦੇ ਹੋ।
ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਇੱਕ ਜਾਇਜ਼ ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਬਟਨਾਂ 'ਤੇ ਬਾਰਡਰ ਨਹੀਂ ਰੈਂਡਰ ਕਰਦਾ ਹੈ, ਭਾਵੇਂ ਇਹ ਚਾਲੂ <a>
ਹੋਵੇ ਜਾਂ <button>
ਤੱਤ। ਇਸਦੇ ਆਲੇ-ਦੁਆਲੇ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਹਰੇਕ ਬਟਨ ਨੂੰ ਦੂਜੇ ਵਿੱਚ ਲਪੇਟੋ .btn-group
।
ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ #12476 ਦੇਖੋ ।
<a>
ਤੱਤ ਦੇ ਨਾਲ.btn
ਬਸ ਵਿੱਚ s ਦੀ ਇੱਕ ਲੜੀ ਲਪੇਟੋ .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
ਜੇਕਰ <a>
ਤੱਤ ਬਟਨਾਂ ਦੇ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ - ਮੌਜੂਦਾ ਪੰਨੇ ਦੇ ਅੰਦਰ ਕਿਸੇ ਹੋਰ ਦਸਤਾਵੇਜ਼ ਜਾਂ ਸੈਕਸ਼ਨ 'ਤੇ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਬਜਾਏ - ਇਨ-ਪੇਜ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਚਾਲੂ ਕਰਨ ਲਈ - ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਢੁਕਵਾਂ ਵੀ ਦਿੱਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ role="button"
।
<button>
ਤੱਤ ਦੇ ਨਾਲ<button>
ਤੱਤਾਂ ਦੇ ਨਾਲ ਜਾਇਜ਼ ਬਟਨ ਸਮੂਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ , ਤੁਹਾਨੂੰ ਹਰੇਕ ਬਟਨ ਨੂੰ ਇੱਕ ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਸਮੇਟਣਾ ਚਾਹੀਦਾ ਹੈ । ਬਹੁਤੇ ਬ੍ਰਾਊਜ਼ਰ ਸਾਡੇ CSS ਨੂੰ <button>
ਤੱਤਾਂ ਲਈ ਸਹੀ ਢੰਗ ਨਾਲ ਲਾਗੂ ਨਹੀਂ ਕਰਦੇ ਹਨ, ਪਰ ਕਿਉਂਕਿ ਅਸੀਂ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਾਂ, ਅਸੀਂ ਇਸਦੇ ਆਲੇ-ਦੁਆਲੇ ਕੰਮ ਕਰ ਸਕਦੇ ਹਾਂ।
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਇੱਕ ਦੇ ਅੰਦਰ ਰੱਖ ਕੇ .btn-group
ਅਤੇ ਉਚਿਤ ਮੀਨੂ ਮਾਰਕਅੱਪ ਪ੍ਰਦਾਨ ਕਰਕੇ ਕਿਸੇ ਵੀ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਬਟਨ ਡ੍ਰੌਪਡਾਉਨ ਲਈ ਡ੍ਰੌਪਡਾਉਨ ਪਲੱਗਇਨ ਨੂੰ ਬੂਟਸਟਰੈਪ ਦੇ ਤੁਹਾਡੇ ਸੰਸਕਰਣ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਕੁਝ ਬੁਨਿਆਦੀ ਮਾਰਕਅੱਪ ਤਬਦੀਲੀਆਂ ਨਾਲ ਇੱਕ ਬਟਨ ਨੂੰ ਡ੍ਰੌਪਡਾਉਨ ਟੌਗਲ ਵਿੱਚ ਬਦਲੋ।
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ਇਸੇ ਤਰ੍ਹਾਂ, ਇੱਕੋ ਜਿਹੇ ਮਾਰਕਅੱਪ ਤਬਦੀਲੀਆਂ ਨਾਲ ਸਪਲਿਟ ਬਟਨ ਡ੍ਰੌਪਡਾਉਨ ਬਣਾਓ, ਸਿਰਫ਼ ਇੱਕ ਵੱਖਰੇ ਬਟਨ ਨਾਲ।
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ਬਟਨ ਡ੍ਰੌਪਡਾਉਨ ਸਾਰੇ ਆਕਾਰਾਂ ਦੇ ਬਟਨਾਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ।
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
ਮਾਤਾ-ਪਿਤਾ ਨੂੰ ਜੋੜ ਕੇ ਤੱਤਾਂ ਦੇ ਉੱਪਰ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰੋ .dropup
।
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
ਕਿਸੇ ਵੀ ਟੈਕਸਟ-ਆਧਾਰਿਤ ਦੇ ਅੱਗੇ, ਬਾਅਦ, ਜਾਂ ਦੋਵਾਂ ਪਾਸਿਆਂ 'ਤੇ ਟੈਕਸਟ ਜਾਂ ਬਟਨਾਂ ਨੂੰ ਜੋੜ ਕੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਨੂੰ ਵਧਾਓ <input>
। .input-group
ਇੱਕ ਦੇ ਨਾਲ .input-group-addon
ਜਾਂ .input-group-btn
ਇੱਕ ਸਿੰਗਲ ਵਿੱਚ ਐਲੀਮੈਂਟਸ ਨੂੰ ਜੋੜਨ ਜਾਂ ਜੋੜਨ ਲਈ ਵਰਤੋਂ .form-control
।
<input>
ਐੱਸਇੱਥੇ ਐਲੀਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਬਚੋ <select>
ਕਿਉਂਕਿ ਉਹਨਾਂ ਨੂੰ ਵੈਬਕਿੱਟ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਟਾਈਲ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ।
<textarea>
ਇੱਥੇ ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਬਚੋ ਕਿਉਂਕਿ rows
ਕੁਝ ਮਾਮਲਿਆਂ ਵਿੱਚ ਉਹਨਾਂ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਸਨਮਾਨ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।
ਇੱਕ ਦੇ ਅੰਦਰ ਤੱਤਾਂ 'ਤੇ ਟੂਲਟਿਪਸ ਜਾਂ ਪੌਪਓਵਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ .input-group
ਸਮੇਂ, ਤੁਹਾਨੂੰ container: 'body'
ਅਣਚਾਹੇ ਮਾੜੇ ਪ੍ਰਭਾਵਾਂ ਤੋਂ ਬਚਣ ਲਈ ਵਿਕਲਪ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਨਾ ਹੋਵੇਗਾ (ਜਿਵੇਂ ਕਿ ਟੂਲਟਿਪ ਜਾਂ ਪੌਪਓਵਰ ਚਾਲੂ ਹੋਣ 'ਤੇ ਤੱਤ ਦਾ ਚੌੜਾ ਹੋਣਾ ਅਤੇ/ਜਾਂ ਇਸਦੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਗੁਆਉਣਾ)।
ਫਾਰਮ ਗਰੁੱਪਾਂ ਜਾਂ ਗਰਿੱਡ ਕਾਲਮ ਕਲਾਸਾਂ ਨੂੰ ਸਿੱਧੇ ਇਨਪੁਟ ਗਰੁੱਪਾਂ ਨਾਲ ਨਾ ਮਿਲਾਓ। ਇਸਦੀ ਬਜਾਏ, ਫਾਰਮ ਗਰੁੱਪ ਜਾਂ ਗਰਿੱਡ-ਸਬੰਧਤ ਤੱਤ ਦੇ ਅੰਦਰ ਇਨਪੁਟ ਸਮੂਹ ਨੂੰ ਨੇਸਟ ਕਰੋ।
ਜੇਕਰ ਤੁਸੀਂ ਹਰੇਕ ਇਨਪੁੱਟ ਲਈ ਲੇਬਲ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਦੇ ਹੋ ਤਾਂ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਤੁਹਾਡੇ ਫਾਰਮਾਂ ਨਾਲ ਸਮੱਸਿਆ ਹੋਵੇਗੀ। ਇਹਨਾਂ ਇਨਪੁਟ ਸਮੂਹਾਂ ਲਈ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਕੋਈ ਵੀ ਵਾਧੂ ਲੇਬਲ ਜਾਂ ਕਾਰਜਕੁਸ਼ਲਤਾ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਨੂੰ ਦੱਸੀ ਗਈ ਹੈ।
ਵਰਤੀ ਜਾਣ ਵਾਲੀ ਸਹੀ ਤਕਨੀਕ (ਦਿੱਖਣ ਵਾਲੇ <label>
ਤੱਤ, ਕਲਾਸ <label>
ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਲੁਕੇ ਹੋਏ ਤੱਤ , ਜਾਂ , , , ਜਾਂ ਗੁਣ ਦੀ ਵਰਤੋਂ) ਅਤੇ ਕਿਹੜੀ ਵਾਧੂ ਜਾਣਕਾਰੀ ਦੇਣ ਦੀ ਲੋੜ ਹੋਵੇਗੀ, ਤੁਹਾਡੇ ਦੁਆਰਾ ਲਾਗੂ ਕੀਤੇ ਜਾ ਰਹੇ ਇੰਟਰਫੇਸ ਵਿਜੇਟ ਦੀ ਸਹੀ ਕਿਸਮ ਦੇ ਆਧਾਰ 'ਤੇ ਵੱਖੋ-ਵੱਖਰੇ ਹੋਣਗੇ। ਇਸ ਭਾਗ ਦੀਆਂ ਉਦਾਹਰਨਾਂ ਕੁਝ ਸੁਝਾਏ ਗਏ, ਕੇਸ-ਵਿਸ਼ੇਸ਼ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ।.sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
ਇੱਕ ਇਨਪੁਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਇੱਕ ਐਡ-ਆਨ ਜਾਂ ਬਟਨ ਰੱਖੋ। ਤੁਸੀਂ ਇੱਕ ਇਨਪੁਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਇੱਕ ਵੀ ਰੱਖ ਸਕਦੇ ਹੋ।
ਅਸੀਂ ਇੱਕ ਪਾਸੇ ਤੋਂ ਕਈ ਐਡ-ਆਨ ( .input-group-addon
ਜਾਂ ) ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਾਂ।.input-group-btn
ਅਸੀਂ ਇੱਕ ਸਿੰਗਲ ਇਨਪੁਟ ਸਮੂਹ ਵਿੱਚ ਕਈ ਫਾਰਮ-ਕੰਟਰੋਲਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਾਂ।
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
ਅਨੁਸਾਰੀ ਫਾਰਮ ਸਾਈਜ਼ਿੰਗ ਕਲਾਸਾਂ ਨੂੰ .input-group
ਆਪਣੇ ਆਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਅੰਦਰਲੀ ਸਮਗਰੀ ਆਪਣੇ ਆਪ ਮੁੜ ਆਕਾਰ ਦੇਵੇਗੀ - ਹਰੇਕ ਤੱਤ 'ਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਆਕਾਰ ਦੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਦੁਹਰਾਉਣ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ।
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
ਕਿਸੇ ਵੀ ਚੈਕਬਾਕਸ ਜਾਂ ਰੇਡੀਓ ਵਿਕਲਪ ਨੂੰ ਟੈਕਸਟ ਦੀ ਬਜਾਏ ਇੱਕ ਇਨਪੁਟ ਸਮੂਹ ਦੇ ਐਡਆਨ ਵਿੱਚ ਰੱਖੋ।
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
ਇਨਪੁਟ ਸਮੂਹਾਂ ਵਿੱਚ ਬਟਨ ਥੋੜੇ ਵੱਖਰੇ ਹੁੰਦੇ ਹਨ ਅਤੇ ਆਲ੍ਹਣੇ ਦੇ ਇੱਕ ਵਾਧੂ ਪੱਧਰ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਦੀ ਬਜਾਏ , ਤੁਹਾਨੂੰ ਬਟਨਾਂ ਨੂੰ ਸਮੇਟਣ .input-group-addon
ਲਈ ਵਰਤਣ ਦੀ ਲੋੜ ਪਵੇਗੀ । .input-group-btn
ਇਹ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਬ੍ਰਾਊਜ਼ਰ ਸ਼ੈਲੀਆਂ ਦੇ ਕਾਰਨ ਲੋੜੀਂਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ।
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
ਜਦੋਂ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਪ੍ਰਤੀ ਸਾਈਡ ਸਿਰਫ਼ ਇੱਕ ਐਡ-ਆਨ ਹੋ ਸਕਦਾ ਹੈ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਸਿੰਗਲ ਦੇ ਅੰਦਰ ਕਈ ਬਟਨ ਹੋ ਸਕਦੇ ਹਨ .input-group-btn
।
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਉਪਲਬਧ Navs ਨੇ ਬੇਸ .nav
ਕਲਾਸ ਦੇ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ, ਸ਼ੇਅਰਡ ਸਟੇਟਸ ਦੇ ਨਾਲ ਮਾਰਕਅੱਪ ਨੂੰ ਸਾਂਝਾ ਕੀਤਾ ਹੈ। ਹਰੇਕ ਸ਼ੈਲੀ ਦੇ ਵਿਚਕਾਰ ਅਦਲਾ-ਬਦਲੀ ਕਰਨ ਲਈ ਸੋਧਕ ਕਲਾਸਾਂ ਨੂੰ ਸਵੈਪ ਕਰੋ।
ਨੋਟ ਕਰੋ ਕਿ .nav-tabs
ਕਲਾਸ ਨੂੰ .nav
ਬੇਸ ਕਲਾਸ ਦੀ ਲੋੜ ਹੈ।
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
ਉਹੀ HTML ਲਓ, ਪਰ ਇਸਦੀ .nav-pills
ਬਜਾਏ ਵਰਤੋਂ:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
ਗੋਲੀਆਂ ਵੀ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਸਟੈਕ ਹੋਣ ਯੋਗ ਹੁੰਦੀਆਂ ਹਨ। ਬਸ ਸ਼ਾਮਲ ਕਰੋ .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
ਨਾਲ 768px ਤੋਂ ਵੱਧ ਚੌੜੀਆਂ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਆਸਾਨੀ ਨਾਲ ਟੈਬਾਂ ਜਾਂ ਗੋਲੀਆਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਬਰਾਬਰ ਚੌੜਾਈ ਬਣਾਉ .nav-justified
। ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ 'ਤੇ, ਨੇਵੀ ਲਿੰਕ ਸਟੈਕ ਕੀਤੇ ਗਏ ਹਨ।
ਜਾਇਜ਼ ਨਵਬਾਰ ਨੈਵੀ ਲਿੰਕ ਇਸ ਸਮੇਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
ਕਿਸੇ ਵੀ ਨੈਵੀ ਕੰਪੋਨੈਂਟ (ਟੈਬਾਂ ਜਾਂ ਗੋਲੀਆਂ) ਲਈ, ਸਲੇਟੀ ਲਿੰਕਾਂ .disabled
ਲਈ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਕੋਈ ਹੋਵਰ ਪ੍ਰਭਾਵ ਨਹੀਂ ।
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
ਥੋੜਾ ਜਿਹਾ ਵਾਧੂ HTML ਅਤੇ ਡ੍ਰੌਪਡਾਉਨ JavaScript ਪਲੱਗਇਨ ਦੇ ਨਾਲ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਸ਼ਾਮਲ ਕਰੋ ।
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Navbars ਜਵਾਬਦੇਹ ਮੈਟਾ ਭਾਗ ਹਨ ਜੋ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਜਾਂ ਸਾਈਟ ਲਈ ਨੈਵੀਗੇਸ਼ਨ ਹੈਡਰ ਵਜੋਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਉਹ ਮੋਬਾਈਲ ਵਿਯੂਜ਼ ਵਿੱਚ ਸਮੇਟਣੇ ਸ਼ੁਰੂ ਹੋ ਜਾਂਦੇ ਹਨ (ਅਤੇ ਟੌਗਲ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ) ਅਤੇ ਉਪਲਬਧ ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਵਧਣ ਦੇ ਨਾਲ ਹਰੀਜੱਟਲ ਬਣ ਜਾਂਦੇ ਹਨ।
ਜਾਇਜ਼ ਨਵਬਾਰ ਨੈਵੀ ਲਿੰਕ ਇਸ ਸਮੇਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
ਇੱਕ ਲਈ ਟੈਕਸਟ ਨੂੰ ਸਵੈਪ ਕਰਕੇ ਨਵਬਾਰ ਬ੍ਰਾਂਡ ਨੂੰ ਆਪਣੀ ਖੁਦ ਦੀ ਤਸਵੀਰ ਨਾਲ ਬਦਲੋ <img>
। ਕਿਉਂਕਿ .navbar-brand
ਇਸਦੀ ਆਪਣੀ ਪੈਡਿੰਗ ਅਤੇ ਉਚਾਈ ਹੈ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਚਿੱਤਰ ਦੇ ਅਧਾਰ ਤੇ ਕੁਝ CSS ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
ਅੰਦਰ ਫਾਰਮ ਸਮੱਗਰੀ ਰੱਖੋ.navbar-form
ਢੁਕਵੀਂ ਲੰਬਕਾਰੀ ਅਲਾਈਨਮੈਂਟ ਅਤੇ ਤੰਗ ਵਿਊਪੋਰਟਾਂ ਵਿੱਚ ਸਮੇਟਣ ਵਾਲੇ ਵਿਵਹਾਰ ਲਈਇਹ ਫੈਸਲਾ ਕਰਨ ਲਈ ਅਲਾਈਨਮੈਂਟ ਵਿਕਲਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਕਿ ਇਹ ਨਵਬਾਰ ਸਮੱਗਰੀ ਦੇ ਅੰਦਰ ਕਿੱਥੇ ਰਹਿੰਦਾ ਹੈ।
ਇੱਕ ਸਿਰਲੇਖ ਦੇ ਤੌਰ ਤੇ, ਮਿਕਸਿਨ ਦੁਆਰਾ .navbar-form
ਇਸਦੇ ਬਹੁਤ ਸਾਰੇ ਕੋਡ ਨੂੰ ਸਾਂਝਾ ਕਰਦਾ ਹੈ . ਕੁਝ ਫਾਰਮ ਨਿਯੰਤਰਣ, ਜਿਵੇਂ ਕਿ ਇਨਪੁਟ ਸਮੂਹ, ਨੂੰ ਇੱਕ ਨਵਬਾਰ ਦੇ ਅੰਦਰ ਸਹੀ ਢੰਗ ਨਾਲ ਦਿਖਾਉਣ ਲਈ ਸਥਿਰ ਚੌੜਾਈ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।.form-inline
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
.navbar-btn
ਕਲਾਸ ਨੂੰ ਉਹਨਾਂ <button>
ਤੱਤਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਜੋ a ਵਿੱਚ ਨਹੀਂ ਰਹਿੰਦੇ ਹਨ <form>
ਉਹਨਾਂ ਨੂੰ navbar ਵਿੱਚ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ।
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
ਇੱਕ ਤੱਤ ਵਿੱਚ ਟੈਕਸਟ ਦੀਆਂ ਸਤਰਾਂ ਨੂੰ ਸਮੇਟਣਾ .navbar-text
, ਆਮ ਤੌਰ 'ਤੇ <p>
ਸਹੀ ਲੀਡਿੰਗ ਅਤੇ ਰੰਗ ਲਈ ਇੱਕ ਟੈਗ 'ਤੇ।
<p class="navbar-text">Signed in as Mark Otto</p>
ਮਿਆਰੀ ਲਿੰਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਲੋਕਾਂ ਲਈ ਜੋ ਰੈਗੂਲਰ ਨੇਵਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰ ਨਹੀਂ ਹਨ, .navbar-link
ਡਿਫੌਲਟ ਅਤੇ ਉਲਟ ਨਵਬਾਰ ਵਿਕਲਪਾਂ ਲਈ ਉਚਿਤ ਰੰਗ ਜੋੜਨ ਲਈ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
.navbar-left
ਜਾਂ .navbar-right
ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਨੈਵੀ ਲਿੰਕ, ਫਾਰਮ, ਬਟਨ ਜਾਂ ਟੈਕਸਟ ਨੂੰ ਅਲਾਈਨ ਕਰੋ । ਦੋਵੇਂ ਕਲਾਸਾਂ ਨਿਰਧਾਰਤ ਦਿਸ਼ਾ ਵਿੱਚ ਇੱਕ CSS ਫਲੋਟ ਜੋੜਨਗੀਆਂ। ਉਦਾਹਰਨ ਲਈ, ਨੈਵੀ ਲਿੰਕਸ ਨੂੰ ਅਲਾਈਨ ਕਰਨ ਲਈ, ਉਹਨਾਂ ਨੂੰ <ul>
ਲਾਗੂ ਕੀਤੀ ਗਈ ਉਪਯੋਗਤਾ ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਵੱਖਰੇ ਵਿੱਚ ਰੱਖੋ।
.pull-left
ਇਹ ਕਲਾਸਾਂ ਅਤੇ ਦੇ ਮਿਕਸ-ਐਡ ਸੰਸਕਰਣ ਹਨ .pull-right
, ਪਰ ਉਹਨਾਂ ਨੂੰ ਡਿਵਾਈਸ ਦੇ ਆਕਾਰਾਂ ਵਿੱਚ ਨਵਬਾਰ ਭਾਗਾਂ ਦੇ ਆਸਾਨ ਪ੍ਰਬੰਧਨ ਲਈ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛਾਂ ਲਈ ਸਕੋਪ ਕੀਤਾ ਗਿਆ ਹੈ।
ਕੇਂਦਰ ਅਤੇ ਪੈਡ ਨਵਬਾਰ ਸਮੱਗਰੀ .navbar-fixed-top
ਵਿੱਚ ਇੱਕ .container
ਜਾਂ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਸ਼ਾਮਲ ਕਰੋ।.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
ਕੇਂਦਰ ਅਤੇ ਪੈਡ ਨਵਬਾਰ ਸਮੱਗਰੀ .navbar-fixed-bottom
ਵਿੱਚ ਇੱਕ .container
ਜਾਂ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਸ਼ਾਮਲ ਕਰੋ।.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
ਇੱਕ ਪੂਰੀ-ਚੌੜਾਈ ਵਾਲੀ ਨਵਬਾਰ ਬਣਾਓ ਜੋ ਇੱਕ ਜਾਂ ਕੇਂਦਰ ਅਤੇ ਪੈਡ ਨਵਬਾਰ ਸਮੱਗਰੀ ਨੂੰ ਜੋੜ ਕੇ .navbar-static-top
ਅਤੇ ਸ਼ਾਮਲ ਕਰਕੇ ਪੰਨੇ ਦੇ ਨਾਲ ਸਕ੍ਰੋਲ ਕਰਦਾ ਹੈ।.container
.container-fluid
ਕਲਾਸਾਂ ਦੇ ਉਲਟ .navbar-fixed-*
, ਤੁਹਾਨੂੰ 'ਤੇ ਕੋਈ ਪੈਡਿੰਗ ਬਦਲਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ body
।
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
ਜੋੜ ਕੇ ਨਵਬਾਰ ਦੀ ਦਿੱਖ ਨੂੰ ਸੋਧੋ .navbar-inverse
।
<nav class="navbar navbar-inverse">
...
</nav>
ਨੈਵੀਗੇਸ਼ਨਲ ਲੜੀ ਦੇ ਅੰਦਰ ਮੌਜੂਦਾ ਪੰਨੇ ਦੇ ਸਥਾਨ ਨੂੰ ਦਰਸਾਓ।
ਵਿਭਾਜਕ :before
ਅਤੇ content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
ਆਪਣੀ ਸਾਈਟ ਜਾਂ ਐਪ ਲਈ ਮਲਟੀ-ਪੇਜ ਪੇਜਿਨੇਸ਼ਨ ਕੰਪੋਨੈਂਟ, ਜਾਂ ਸਰਲ ਪੇਜਰ ਵਿਕਲਪ ਦੇ ਨਾਲ ਪੰਨਾਬੰਦੀ ਲਿੰਕ ਪ੍ਰਦਾਨ ਕਰੋ ।
Rdio ਦੁਆਰਾ ਪ੍ਰੇਰਿਤ ਸਧਾਰਨ ਪੰਨਾ ਨੰਬਰ, ਐਪਾਂ ਅਤੇ ਖੋਜ ਨਤੀਜਿਆਂ ਲਈ ਵਧੀਆ। ਵੱਡੇ ਬਲਾਕ ਨੂੰ ਮਿਸ ਕਰਨਾ ਔਖਾ ਹੈ, ਆਸਾਨੀ ਨਾਲ ਸਕੇਲੇਬਲ ਹੈ, ਅਤੇ ਵੱਡੇ ਕਲਿਕ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
ਪੇਜਿਨੇਸ਼ਨ ਕੰਪੋਨੈਂਟ <nav>
ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਅਤੇ ਹੋਰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਲਈ ਨੈਵੀਗੇਸ਼ਨ ਸੈਕਸ਼ਨ ਵਜੋਂ ਪਛਾਣ ਕਰਨ ਲਈ ਇੱਕ ਤੱਤ ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜਿਵੇਂ ਕਿ ਇੱਕ ਪੰਨੇ ਵਿੱਚ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਇੱਕ ਤੋਂ ਵੱਧ ਅਜਿਹੇ ਨੈਵੀਗੇਸ਼ਨ ਸੈਕਸ਼ਨ ਹੋਣ ਦੀ ਸੰਭਾਵਨਾ ਹੈ (ਜਿਵੇਂ ਕਿ ਸਿਰਲੇਖ ਵਿੱਚ ਪ੍ਰਾਇਮਰੀ ਨੈਵੀਗੇਸ਼ਨ, ਜਾਂ ਇੱਕ ਸਾਈਡਬਾਰ ਨੈਵੀਗੇਸ਼ਨ), ਇਸਦੇ ਉਦੇਸ਼ ਨੂੰ ਦਰਸਾਉਣ aria-label
ਲਈ ਇੱਕ ਵਰਣਨ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਸਲਾਹ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ। <nav>
ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਪੰਨਾਬੰਦੀ ਭਾਗ ਨੂੰ ਖੋਜ ਨਤੀਜਿਆਂ ਦੇ ਇੱਕ ਸਮੂਹ ਦੇ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇੱਕ ਢੁਕਵਾਂ ਲੇਬਲ ਹੋ ਸਕਦਾ ਹੈ aria-label="Search results pages"
।
ਲਿੰਕ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਲਈ ਅਨੁਕੂਲਿਤ ਹਨ। .disabled
ਅਣ-ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਲਿੰਕਾਂ ਅਤੇ .active
ਮੌਜੂਦਾ ਪੰਨੇ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਵਰਤੋਂ ।
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
ਅਸੀਂ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ <span>
ਇੱਛਤ ਸ਼ੈਲੀਆਂ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹੋਏ ਕਲਿੱਕ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਹਟਾਉਣ ਲਈ, ਲਈ ਕਿਰਿਆਸ਼ੀਲ ਜਾਂ ਅਯੋਗ ਐਂਕਰਾਂ ਨੂੰ ਸਵੈਪ ਕਰੋ, ਜਾਂ ਪਿਛਲੇ/ਅਗਲੇ ਤੀਰਾਂ ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਐਂਕਰ ਨੂੰ ਛੱਡ ਦਿਓ।
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
ਫੈਨਸੀ ਵੱਡਾ ਜਾਂ ਛੋਟਾ ਪੰਨਾ ਨੰਬਰ? ਜੋੜੋ .pagination-lg
ਜਾਂ .pagination-sm
ਵਾਧੂ ਆਕਾਰਾਂ ਲਈ।
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
ਹਲਕੇ ਮਾਰਕਅੱਪ ਅਤੇ ਸਟਾਈਲ ਦੇ ਨਾਲ ਸਧਾਰਨ ਪੰਨਾਬੰਦੀ ਲਾਗੂ ਕਰਨ ਲਈ ਤੇਜ਼ ਪਿਛਲੇ ਅਤੇ ਅਗਲੇ ਲਿੰਕ। ਬਲੌਗ ਜਾਂ ਮੈਗਜ਼ੀਨਾਂ ਵਰਗੀਆਂ ਸਧਾਰਨ ਸਾਈਟਾਂ ਲਈ ਇਹ ਬਹੁਤ ਵਧੀਆ ਹੈ।
ਮੂਲ ਰੂਪ ਵਿੱਚ, ਪੇਜ਼ਰ ਲਿੰਕਾਂ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਹਰੇਕ ਲਿੰਕ ਨੂੰ ਪਾਸਿਆਂ ਨਾਲ ਇਕਸਾਰ ਕਰ ਸਕਦੇ ਹੋ:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
ਪੇਜਰ ਲਿੰਕ ਪੰਨਾਬੰਦੀ .disabled
ਤੋਂ ਆਮ ਉਪਯੋਗਤਾ ਸ਼੍ਰੇਣੀ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰਦੇ ਹਨ।
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
ਇੱਕ ਲੇਬਲ ਦੀ ਦਿੱਖ ਨੂੰ ਬਦਲਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਸੋਧਕ ਸ਼੍ਰੇਣੀਆਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਸ਼ਾਮਲ ਕਰੋ।
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
ਰੈਂਡਰਿੰਗ ਸਮੱਸਿਆਵਾਂ ਉਦੋਂ ਪੈਦਾ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਤੰਗ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਦਰਜਨਾਂ ਇਨਲਾਈਨ ਲੇਬਲ ਹੁੰਦੇ ਹਨ, ਹਰ ਇੱਕ ਦਾ ਆਪਣਾ inline-block
ਤੱਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ ਇੱਕ ਆਈਕਨ)। ਇਸ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਦਾ ਰਸਤਾ ਸੈਟਿੰਗ ਹੈ display: inline-block;
. ਸੰਦਰਭ ਅਤੇ ਉਦਾਹਰਨ ਲਈ, #13219 ਵੇਖੋ ।
<span class="badge">
ਲਿੰਕਾਂ, ਬੂਟਸਟਰੈਪ ਨੈਵ, ਅਤੇ ਹੋਰ ਵਿੱਚ ਇੱਕ ਜੋੜ ਕੇ ਆਸਾਨੀ ਨਾਲ ਨਵੀਆਂ ਜਾਂ ਨਾ-ਪੜ੍ਹੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰੋ ।
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
ਜਦੋਂ ਕੋਈ ਨਵੀਂ ਜਾਂ ਨਾ-ਪੜ੍ਹੀ ਆਈਟਮਾਂ ਨਹੀਂ ਹੁੰਦੀਆਂ, ਤਾਂ ਬੈਜ ਸਿਰਫ਼ (CSS ਦੇ :empty
ਚੋਣਕਾਰ ਰਾਹੀਂ) ਸਮੇਟਣਗੇ, ਬਸ਼ਰਤੇ ਅੰਦਰ ਕੋਈ ਸਮੱਗਰੀ ਮੌਜੂਦ ਨਾ ਹੋਵੇ।
ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਵਿੱਚ ਬੈਜ ਸਵੈ-ਨਿਰਭਰ ਨਹੀਂ ਹੋਣਗੇ ਕਿਉਂਕਿ ਇਸ ਵਿੱਚ :empty
ਚੋਣਕਾਰ ਲਈ ਸਮਰਥਨ ਦੀ ਘਾਟ ਹੈ।
ਪਿਲ ਨੈਵੀਗੇਸ਼ਨ ਵਿੱਚ ਸਰਗਰਮ ਅਵਸਥਾਵਾਂ ਵਿੱਚ ਬੈਜ ਲਗਾਉਣ ਲਈ ਬਿਲਟ-ਇਨ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ।
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
ਇੱਕ ਹਲਕਾ, ਲਚਕਦਾਰ ਹਿੱਸਾ ਜੋ ਤੁਹਾਡੀ ਸਾਈਟ 'ਤੇ ਮੁੱਖ ਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਪੂਰੇ ਵਿਊਪੋਰਟ ਨੂੰ ਵਧਾ ਸਕਦਾ ਹੈ।
ਇਹ ਇੱਕ ਸਧਾਰਨ ਹੀਰੋ ਯੂਨਿਟ ਹੈ, ਫੀਚਰਡ ਸਮੱਗਰੀ ਜਾਂ ਜਾਣਕਾਰੀ 'ਤੇ ਵਾਧੂ ਧਿਆਨ ਦੇਣ ਲਈ ਇੱਕ ਸਧਾਰਨ ਜੰਬੋਟ੍ਰੋਨ-ਸ਼ੈਲੀ ਦਾ ਹਿੱਸਾ ਹੈ।
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
ਜੰਬੋਟ੍ਰੋਨ ਨੂੰ ਪੂਰੀ ਚੌੜਾਈ ਬਣਾਉਣ ਲਈ, ਅਤੇ ਗੋਲ ਕੋਨਿਆਂ ਤੋਂ ਬਿਨਾਂ, ਇਸਨੂੰ ਸਾਰੇ .container
s ਦੇ ਬਾਹਰ ਰੱਖੋ ਅਤੇ ਇਸਦੇ .container
ਅੰਦਰ ਇੱਕ ਜੋੜੋ।
<div class="jumbotron">
<div class="container">
...
</div>
</div>
h1
ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਮੱਗਰੀ ਦੇ ਭਾਗਾਂ ਨੂੰ ਉਚਿਤ ਤੌਰ 'ਤੇ ਬਾਹਰ ਕੱਢਣ ਅਤੇ ਭਾਗਾਂ ਨੂੰ ਵੰਡਣ ਲਈ ਇੱਕ ਸਧਾਰਨ ਸ਼ੈੱਲ । ਇਹ h1
ਦੇ ਡਿਫਾਲਟ small
ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ, ਨਾਲ ਹੀ ਜ਼ਿਆਦਾਤਰ ਹੋਰ ਭਾਗਾਂ (ਵਾਧੂ ਸ਼ੈਲੀਆਂ ਦੇ ਨਾਲ)।
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
ਚਿੱਤਰਾਂ, ਵੀਡੀਓਜ਼, ਟੈਕਸਟ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦੇ ਗਰਿੱਡਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਥੰਬਨੇਲ ਕੰਪੋਨੈਂਟ ਨਾਲ ਬੂਟਸਟਰੈਪ ਦੇ ਗਰਿੱਡ ਸਿਸਟਮ ਨੂੰ ਵਧਾਓ।
ਜੇਕਰ ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਉਚਾਈਆਂ ਅਤੇ/ਜਾਂ ਚੌੜਾਈ ਦੇ ਥੰਬਨੇਲ ਦੀ Pinterest-ਵਰਗੀ ਪੇਸ਼ਕਾਰੀ ਲੱਭ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇੱਕ ਤੀਜੀ-ਧਿਰ ਪਲੱਗਇਨ ਜਿਵੇਂ ਕਿ ਮੇਸਨਰੀ , ਆਈਸੋਟੋਪ , ਜਾਂ ਸਲਵਾਟੋਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ।
ਮੂਲ ਰੂਪ ਵਿੱਚ, ਬੂਟਸਟਰੈਪ ਦੇ ਥੰਬਨੇਲ ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੇ ਮਾਰਕਅੱਪ ਨਾਲ ਲਿੰਕ ਕੀਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਤਿਆਰ ਕੀਤੇ ਗਏ ਹਨ।
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
ਥੋੜ੍ਹੇ ਜਿਹੇ ਵਾਧੂ ਮਾਰਕਅੱਪ ਦੇ ਨਾਲ, ਥੰਬਨੇਲ ਵਿੱਚ ਕਿਸੇ ਵੀ ਕਿਸਮ ਦੀ HTML ਸਮੱਗਰੀ ਜਿਵੇਂ ਸਿਰਲੇਖ, ਪੈਰੇ ਜਾਂ ਬਟਨ ਸ਼ਾਮਲ ਕਰਨਾ ਸੰਭਵ ਹੈ।
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
ਮੁੱਠੀ ਭਰ ਉਪਲਬਧ ਅਤੇ ਲਚਕਦਾਰ ਚੇਤਾਵਨੀ ਸੁਨੇਹਿਆਂ ਦੇ ਨਾਲ ਆਮ ਉਪਭੋਗਤਾ ਕਿਰਿਆਵਾਂ ਲਈ ਪ੍ਰਸੰਗਿਕ ਫੀਡਬੈਕ ਸੁਨੇਹੇ ਪ੍ਰਦਾਨ ਕਰੋ।
ਬੁਨਿਆਦੀ ਚੇਤਾਵਨੀ ਸੁਨੇਹਿਆਂ ਲਈ ਕਿਸੇ ਵੀ ਟੈਕਸਟ ਅਤੇ ਇੱਕ ਵਿਕਲਪਿਕ ਬਰਖਾਸਤਗੀ ਬਟਨ ਨੂੰ .alert
ਅਤੇ ਚਾਰ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਇੱਕ (ਉਦਾਹਰਨ ਲਈ, ) ਨੂੰ ਲਪੇਟੋ।.alert-success
ਚੇਤਾਵਨੀਆਂ ਵਿੱਚ ਡਿਫੌਲਟ ਕਲਾਸਾਂ ਨਹੀਂ ਹੁੰਦੀਆਂ, ਸਿਰਫ ਬੇਸ ਅਤੇ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਹੁੰਦੀਆਂ ਹਨ। ਇੱਕ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਲੇਟੀ ਚੇਤਾਵਨੀ ਬਹੁਤ ਜ਼ਿਆਦਾ ਅਰਥ ਨਹੀਂ ਰੱਖਦੀ, ਇਸਲਈ ਤੁਹਾਨੂੰ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸ ਦੁਆਰਾ ਇੱਕ ਕਿਸਮ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਸਫਲਤਾ, ਜਾਣਕਾਰੀ, ਚੇਤਾਵਨੀ, ਜਾਂ ਖ਼ਤਰੇ ਵਿੱਚੋਂ ਚੁਣੋ।
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
ਇੱਕ ਵਿਕਲਪਿਕ .alert-dismissible
ਅਤੇ ਬੰਦ ਬਟਨ ਨੂੰ ਜੋੜ ਕੇ ਕਿਸੇ ਵੀ ਚੇਤਾਵਨੀ 'ਤੇ ਬਣਾਓ।
ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਨ ਲਈ, ਖਾਰਜ ਹੋਣ ਵਾਲੀਆਂ ਚੇਤਾਵਨੀਆਂ ਲਈ, ਤੁਹਾਨੂੰ ਚੇਤਾਵਨੀਆਂ JavaScript ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ।
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ <button>
ਦੇ ਨਾਲ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।data-dismiss="alert"
.alert-link
ਕਿਸੇ ਵੀ ਚੇਤਾਵਨੀ ਦੇ ਅੰਦਰ ਮੇਲ ਖਾਂਦੇ ਰੰਗਦਾਰ ਲਿੰਕਾਂ ਨੂੰ ਜਲਦੀ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਉਪਯੋਗਤਾ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ ।
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
ਸਧਾਰਨ ਪਰ ਲਚਕਦਾਰ ਪ੍ਰਗਤੀ ਬਾਰਾਂ ਦੇ ਨਾਲ ਇੱਕ ਵਰਕਫਲੋ ਜਾਂ ਕਾਰਵਾਈ ਦੀ ਪ੍ਰਗਤੀ 'ਤੇ ਅੱਪ-ਟੂ-ਡੇਟ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰੋ।
ਪ੍ਰਗਤੀ ਬਾਰ ਉਹਨਾਂ ਦੇ ਕੁਝ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ CSS3 ਪਰਿਵਰਤਨ ਅਤੇ ਐਨੀਮੇਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 9 ਅਤੇ ਫਾਇਰਫਾਕਸ ਦੇ ਹੇਠਲੇ ਜਾਂ ਪੁਰਾਣੇ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ। ਓਪੇਰਾ 12 ਐਨੀਮੇਸ਼ਨਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ।
ਜੇਕਰ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਇੱਕ ਸਮੱਗਰੀ ਸੁਰੱਖਿਆ ਨੀਤੀ (CSP) ਹੈ ਜੋ ਕਿ ਇਜਾਜ਼ਤ ਨਹੀਂ ਦਿੰਦੀ , ਤਾਂ ਤੁਸੀਂ ਪ੍ਰਗਤੀ ਪੱਟੀ ਚੌੜਾਈ ਨੂੰ ਸੈੱਟ style-src 'unsafe-inline'
ਕਰਨ ਲਈ ਇਨਲਾਈਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਨਹੀਂ ਹੋਵੋਗੇ ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਸਾਡੀਆਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ। style
ਸਖਤ CSPs ਦੇ ਅਨੁਕੂਲ ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਦੇ ਵਿਕਲਪਿਕ ਤਰੀਕਿਆਂ ਵਿੱਚ ਥੋੜਾ ਕਸਟਮ JavaScript (ਜੋ ਸੈੱਟ ਕਰਦਾ ਹੈ element.style.width
) ਜਾਂ ਕਸਟਮ CSS ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ।
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤਰੱਕੀ ਪੱਟੀ।
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
ਦਿਖਾਈ ਦੇਣ ਵਾਲੀ ਪ੍ਰਤੀਸ਼ਤਤਾ ਦਿਖਾਉਣ ਲਈ ਪ੍ਰਗਤੀ ਪੱਟੀ ਦੇ ਅੰਦਰੋਂ ਕਲਾਸ ਦੇ <span>
ਨਾਲ ਹਟਾਓ ।.sr-only
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਲੇਬਲ ਟੈਕਸਟ ਘੱਟ ਪ੍ਰਤੀਸ਼ਤਾਂ ਲਈ ਵੀ ਪੜ੍ਹਨਯੋਗ ਰਹੇ, min-width
ਤਰੱਕੀ ਪੱਟੀ ਵਿੱਚ ਇੱਕ ਜੋੜਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
ਪ੍ਰਗਤੀ ਬਾਰ ਇਕਸਾਰ ਸਟਾਈਲ ਲਈ ਕੁਝ ਸਮਾਨ ਬਟਨ ਅਤੇ ਚੇਤਾਵਨੀ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
ਇੱਕ ਧਾਰੀਦਾਰ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਇੱਕ ਗਰੇਡੀਐਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। IE9 ਅਤੇ ਹੇਠਾਂ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਪੱਟੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਵਿੱਚ .active
ਸ਼ਾਮਲ ਕਰੋ । .progress-bar-striped
IE9 ਅਤੇ ਹੇਠਾਂ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
.progress
ਉਹਨਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਲਈ ਕਈ ਬਾਰਾਂ ਨੂੰ ਇੱਕੋ ਵਿੱਚ ਰੱਖੋ ।
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਭਾਗਾਂ (ਜਿਵੇਂ ਕਿ ਬਲੌਗ ਟਿੱਪਣੀਆਂ, ਟਵੀਟਸ, ਆਦਿ) ਨੂੰ ਬਣਾਉਣ ਲਈ ਐਬਸਟ੍ਰੈਕਟ ਆਬਜੈਕਟ ਸ਼ੈਲੀਆਂ ਜੋ ਪਾਠ ਸਮੱਗਰੀ ਦੇ ਨਾਲ-ਨਾਲ ਇੱਕ ਖੱਬੇ- ਜਾਂ ਸੱਜੇ-ਸੰਗਠਿਤ ਚਿੱਤਰ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਕਰਦੀਆਂ ਹਨ।
ਡਿਫੌਲਟ ਮੀਡੀਆ ਸਮੱਗਰੀ ਬਲਾਕ ਦੇ ਖੱਬੇ ਜਾਂ ਸੱਜੇ ਪਾਸੇ ਮੀਡੀਆ ਆਬਜੈਕਟ (ਚਿੱਤਰਾਂ, ਵੀਡੀਓ, ਆਡੀਓ) ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ।
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
ਕਲਾਸਾਂ .pull-left
ਅਤੇ .pull-right
ਮੌਜੂਦ ਵੀ ਹਨ ਅਤੇ ਪਹਿਲਾਂ ਮੀਡੀਆ ਕੰਪੋਨੈਂਟ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਵਰਤੇ ਗਏ ਸਨ, ਪਰ v3.3.0 ਦੇ ਤੌਰ 'ਤੇ ਉਸ ਵਰਤੋਂ ਲਈ ਬਰਤਰਫ਼ ਕੀਤੇ ਗਏ ਹਨ। ਉਹ ਲਗਭਗ ਬਰਾਬਰ ਹਨ .media-left
ਅਤੇ .media-right
, ਸਿਵਾਏ ਇਸ ਨੂੰ html ਵਿੱਚ ਦੇ .media-right
ਬਾਅਦ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ।.media-body
ਚਿੱਤਰਾਂ ਜਾਂ ਹੋਰ ਮੀਡੀਆ ਨੂੰ ਸਿਖਰ, ਮੱਧ ਜਾਂ ਹੇਠਾਂ ਇਕਸਾਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਿਖਰ 'ਤੇ ਇਕਸਾਰ ਹੈ।
ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ। Fusce condimentum nunc ac nisi vulputate fringilla. ਫੌਸੀਬਸ ਵਿੱਚ ਡੋਨੇਕ ਲੈਸੀਨੀਆ ਕੋਂਗੂ ਫੈਲਿਸ।
Donec sed odio dui. ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲਿਓ. Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus.
ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ। Fusce condimentum nunc ac nisi vulputate fringilla. ਫੌਸੀਬਸ ਵਿੱਚ ਡੋਨੇਕ ਲੈਸੀਨੀਆ ਕੋਂਗੂ ਫੈਲਿਸ।
Donec sed odio dui. ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲਿਓ. Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus.
ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ। Fusce condimentum nunc ac nisi vulputate fringilla. ਫੌਸੀਬਸ ਵਿੱਚ ਡੋਨੇਕ ਲੈਸੀਨੀਆ ਕੋਂਗੂ ਫੈਲਿਸ।
Donec sed odio dui. ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲਿਓ. Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
ਥੋੜੇ ਜਿਹੇ ਵਾਧੂ ਮਾਰਕਅੱਪ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਸੂਚੀ ਦੇ ਅੰਦਰ ਮੀਡੀਆ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ (ਟਿੱਪਣੀ ਥ੍ਰੈਡਾਂ ਜਾਂ ਲੇਖ ਸੂਚੀਆਂ ਲਈ ਉਪਯੋਗੀ)।
ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
ਸੂਚੀ ਸਮੂਹ ਨਾ ਸਿਰਫ਼ ਤੱਤਾਂ ਦੀਆਂ ਸਧਾਰਨ ਸੂਚੀਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕ ਲਚਕਦਾਰ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਭਾਗ ਹਨ, ਪਰ ਕਸਟਮ ਸਮੱਗਰੀ ਵਾਲੇ ਗੁੰਝਲਦਾਰ।
ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਸੂਚੀ ਸਮੂਹ ਸਿਰਫ਼ ਸੂਚੀ ਆਈਟਮਾਂ, ਅਤੇ ਉਚਿਤ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਇੱਕ ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ ਸੂਚੀ ਹੈ। ਇਸ 'ਤੇ ਪਾਲਣਾ ਕਰਨ ਵਾਲੇ ਵਿਕਲਪਾਂ ਨਾਲ, ਜਾਂ ਲੋੜ ਅਨੁਸਾਰ ਆਪਣੇ ਖੁਦ ਦੇ CSS ਨਾਲ ਬਣਾਓ।
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
ਕਿਸੇ ਵੀ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਵਿੱਚ ਬੈਜ ਕੰਪੋਨੈਂਟ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਇਹ ਆਪਣੇ ਆਪ ਸੱਜੇ ਪਾਸੇ ਸਥਿਤ ਹੋ ਜਾਵੇਗਾ।
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
ਸੂਚੀ ਆਈਟਮਾਂ ਦੀ ਬਜਾਏ ਐਂਕਰ ਟੈਗਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮਾਂ ਨੂੰ ਲਿੰਕ ਕਰੋ (ਜਿਸਦਾ ਮਤਲਬ ਇੱਕ <div>
ਦੀ ਬਜਾਏ ਇੱਕ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਵੀ ਹੈ <ul>
)। ਹਰੇਕ ਤੱਤ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਵਿਅਕਤੀਗਤ ਮਾਪਿਆਂ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ।
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
ਸੂਚੀ ਸਮੂਹ ਆਈਟਮਾਂ ਸੂਚੀ ਆਈਟਮਾਂ ਦੀ ਬਜਾਏ ਬਟਨ ਹੋ ਸਕਦੀਆਂ ਹਨ (ਜਿਸਦਾ ਮਤਲਬ ਇੱਕ <div>
ਦੀ ਬਜਾਏ ਇੱਕ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਵੀ ਹੈ <ul>
)। ਹਰੇਕ ਤੱਤ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਵਿਅਕਤੀਗਤ ਮਾਪਿਆਂ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ। ਇੱਥੇ ਮਿਆਰੀ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ।.btn
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
ਅਯੋਗ ਦਿਖਾਈ ਦੇਣ ਲਈ ਇਸਨੂੰ ਸਲੇਟੀ ਕਰਨ .disabled
ਲਈ ਇੱਕ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।.list-group-item
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਜਾਂ ਲਿੰਕ ਕੀਤੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਰਾਜ ਵੀ ਸ਼ਾਮਲ .active
ਹੈ।
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
ਇਸ ਦੇ ਅੰਦਰ ਲਗਭਗ ਕੋਈ ਵੀ HTML ਸ਼ਾਮਲ ਕਰੋ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਲਿੰਕ ਕੀਤੇ ਸੂਚੀ ਸਮੂਹਾਂ ਲਈ ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਹੈ।
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
ਹਾਲਾਂਕਿ ਹਮੇਸ਼ਾ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੁੰਦਾ, ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਆਪਣੇ DOM ਨੂੰ ਇੱਕ ਬਕਸੇ ਵਿੱਚ ਰੱਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਉਹਨਾਂ ਸਥਿਤੀਆਂ ਲਈ, ਪੈਨਲ ਕੰਪੋਨੈਂਟ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
ਮੂਲ ਰੂਪ ਵਿੱਚ, .panel
ਕੁਝ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਕੁਝ ਬੁਨਿਆਦੀ ਬਾਰਡਰ ਅਤੇ ਪੈਡਿੰਗ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਹੈ।
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
ਨਾਲ ਆਪਣੇ ਪੈਨਲ ਵਿੱਚ ਇੱਕ ਸਿਰਲੇਖ ਵਾਲਾ ਕੰਟੇਨਰ ਆਸਾਨੀ ਨਾਲ ਸ਼ਾਮਲ ਕਰੋ .panel-heading
। ਤੁਸੀਂ ਪੂਰਵ-ਸਟਾਈਲ ਵਾਲਾ ਸਿਰਲੇਖ ਜੋੜਨ ਲਈ ਕਲਾਸ <h1>
ਦੇ <h6>
ਨਾਲ ਕੋਈ ਵੀ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ । .panel-title
ਹਾਲਾਂਕਿ, <h1>
- ਦੇ ਫੌਂਟ ਆਕਾਰ <h6>
ਦੁਆਰਾ ਓਵਰਰਾਈਡ ਕੀਤੇ ਗਏ ਹਨ .panel-heading
।
ਸਹੀ ਲਿੰਕ ਕਲਰਿੰਗ ਲਈ, ਲਿੰਕ ਨੂੰ ਸਿਰਲੇਖਾਂ ਵਿੱਚ ਦੇ ਅੰਦਰ ਰੱਖਣਾ ਯਕੀਨੀ ਬਣਾਓ .panel-title
।
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
ਵਿੱਚ ਰੈਪ ਬਟਨ ਜਾਂ ਸੈਕੰਡਰੀ ਟੈਕਸਟ .panel-footer
। ਨੋਟ ਕਰੋ ਕਿ ਪੈਨਲ ਫੁੱਟਰ ਸੰਦਰਭੀ ਭਿੰਨਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਰੰਗਾਂ ਅਤੇ ਬਾਰਡਰਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਨਹੀਂ ਕਰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਫੋਰਗਰਾਉਂਡ ਵਿੱਚ ਹੋਣ ਲਈ ਨਹੀਂ ਹਨ।
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
ਦੂਜੇ ਭਾਗਾਂ ਵਾਂਗ, ਕਿਸੇ ਵੀ ਪ੍ਰਸੰਗਿਕ ਸਟੇਟ ਕਲਾਸਾਂ ਨੂੰ ਜੋੜ ਕੇ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਸੰਦਰਭ ਲਈ ਪੈਨਲ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਵਧੇਰੇ ਅਰਥਪੂਰਨ ਬਣਾਓ।
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
.table
ਇੱਕ ਸਹਿਜ ਡਿਜ਼ਾਈਨ ਲਈ ਇੱਕ ਪੈਨਲ ਦੇ ਅੰਦਰ ਕੋਈ ਵੀ ਗੈਰ-ਬਾਰਡਰ ਸ਼ਾਮਲ ਕਰੋ । ਜੇਕਰ ਕੋਈ ਹੈ .panel-body
, ਤਾਂ ਅਸੀਂ ਵੱਖ ਕਰਨ ਲਈ ਸਾਰਣੀ ਦੇ ਸਿਖਰ 'ਤੇ ਇੱਕ ਵਾਧੂ ਬਾਰਡਰ ਜੋੜਦੇ ਹਾਂ।
ਇੱਥੇ ਕੁਝ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਪੈਨਲ ਸਮੱਗਰੀ। ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ। ਏਨੀਅਨ ਲੈਸੀਨੀਆ ਬਿਬੇਂਡਮ ਨੱਲਾ ਸੇਡ ਕੰਸੇਕਟੁਰ। ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਯੂਜ਼ਰਨੇਮ |
---|---|---|---|
1 | ਮਾਰਕ | ਓਟੋ | @mdo |
2 | ਜੈਕਬ | ਥੋਰਨਟਨ | @ਚਰਬੀ |
3 | ਲੈਰੀ | ਪੰਛੀ | @ਟਵਿੱਟਰ |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
ਜੇਕਰ ਕੋਈ ਪੈਨਲ ਬਾਡੀ ਨਹੀਂ ਹੈ, ਤਾਂ ਕੰਪੋਨੈਂਟ ਬਿਨਾਂ ਕਿਸੇ ਰੁਕਾਵਟ ਦੇ ਪੈਨਲ ਸਿਰਲੇਖ ਤੋਂ ਸਾਰਣੀ ਵਿੱਚ ਚਲਦਾ ਹੈ।
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਯੂਜ਼ਰਨੇਮ |
---|---|---|---|
1 | ਮਾਰਕ | ਓਟੋ | @mdo |
2 | ਜੈਕਬ | ਥੋਰਨਟਨ | @ਚਰਬੀ |
3 | ਲੈਰੀ | ਪੰਛੀ | @ਟਵਿੱਟਰ |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
ਕਿਸੇ ਵੀ ਪੈਨਲ ਦੇ ਅੰਦਰ ਪੂਰੀ-ਚੌੜਾਈ ਵਾਲੇ ਸੂਚੀ ਸਮੂਹਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸ਼ਾਮਲ ਕਰੋ।
ਇੱਥੇ ਕੁਝ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਪੈਨਲ ਸਮੱਗਰੀ। ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ। ਏਨੀਅਨ ਲੈਸੀਨੀਆ ਬਿਬੇਂਡਮ ਨੱਲਾ ਸੇਡ ਕੰਸੇਕਟੁਰ। ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਇੱਕ ਅੰਦਰੂਨੀ ਅਨੁਪਾਤ ਬਣਾ ਕੇ ਉਹਨਾਂ ਦੇ ਮੌਜੂਦ ਬਲਾਕ ਦੀ ਚੌੜਾਈ ਦੇ ਆਧਾਰ 'ਤੇ ਵੀਡੀਓ ਜਾਂ ਸਲਾਈਡਸ਼ੋ ਮਾਪ ਨਿਰਧਾਰਤ ਕਰਨ ਦਿਓ ਜੋ ਕਿਸੇ ਵੀ ਡਿਵਾਈਸ 'ਤੇ ਸਹੀ ਢੰਗ ਨਾਲ ਸਕੇਲ ਕਰੇਗਾ।
ਨਿਯਮ ਸਿੱਧੇ ਤੌਰ 'ਤੇ <iframe>
, <embed>
, <video>
, ਅਤੇ <object>
ਤੱਤਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ; .embed-responsive-item
ਜਦੋਂ ਤੁਸੀਂ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਸਟਾਈਲਿੰਗ ਨਾਲ ਮੇਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਇੱਕ ਸਪਸ਼ਟ ਉੱਤਰੀ ਸ਼੍ਰੇਣੀ ਦੀ ਵਰਤੋਂ ਕਰੋ ।
ਪ੍ਰੋ-ਟਿਪ! frameborder="0"
ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ <iframe>
ਕਿਉਂਕਿ ਅਸੀਂ ਤੁਹਾਡੇ ਲਈ ਇਸਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦੇ ਹਾਂ।
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
ਇਸ ਨੂੰ ਇੱਕ ਇਨਸੈੱਟ ਪ੍ਰਭਾਵ ਦੇਣ ਲਈ ਇੱਕ ਤੱਤ 'ਤੇ ਇੱਕ ਸਧਾਰਨ ਪ੍ਰਭਾਵ ਦੇ ਰੂਪ ਵਿੱਚ ਖੂਹ ਦੀ ਵਰਤੋਂ ਕਰੋ।
<div class="well">...</div>
ਦੋ ਵਿਕਲਪਿਕ ਸੋਧਕ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਪੈਡਿੰਗ ਅਤੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਕੰਟਰੋਲ ਕਰੋ।
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>