ਉਪਲਬਧ ਗਲਾਈਫਸ
Glyphicon Halflings ਸੈੱਟ ਤੋਂ ਫੌਂਟ ਫਾਰਮੈਟ ਵਿੱਚ 250 ਤੋਂ ਵੱਧ ਗਲਾਈਫਸ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। Glyphicons Halflings ਆਮ ਤੌਰ 'ਤੇ ਮੁਫਤ ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹੁੰਦੇ ਹਨ, ਪਰ ਉਹਨਾਂ ਦੇ ਸਿਰਜਣਹਾਰ ਨੇ ਉਹਨਾਂ ਨੂੰ ਬੂਟਸਟਰੈਪ ਲਈ ਮੁਫਤ ਉਪਲਬਧ ਕਰਵਾਇਆ ਹੈ। ਤੁਹਾਡੇ ਧੰਨਵਾਦ ਦੇ ਤੌਰ 'ਤੇ, ਅਸੀਂ ਸਿਰਫ ਇਹ ਮੰਗ ਕਰਦੇ ਹਾਂ ਕਿ ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ ਤਾਂ ਤੁਸੀਂ ਗਲਾਈਫਿਕਨ ਲਈ ਇੱਕ ਲਿੰਕ ਸ਼ਾਮਲ ਕਰੋ।
ਇਹਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ
ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਕਰਕੇ, ਸਾਰੇ ਆਈਕਨਾਂ ਲਈ ਇੱਕ ਬੇਸ ਕਲਾਸ ਅਤੇ ਵਿਅਕਤੀਗਤ ਆਈਕਨ ਕਲਾਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਵਰਤਣ ਲਈ, ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਲਗਭਗ ਕਿਤੇ ਵੀ ਰੱਖੋ। ਸਹੀ ਪੈਡਿੰਗ ਲਈ ਆਈਕਨ ਅਤੇ ਟੈਕਸਟ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਪੇਸ ਛੱਡਣਾ ਯਕੀਨੀ ਬਣਾਓ।
ਹੋਰ ਭਾਗਾਂ ਨਾਲ ਨਾ ਮਿਲਾਓ
ਆਈਕਨ ਕਲਾਸਾਂ ਨੂੰ ਦੂਜੇ ਭਾਗਾਂ ਨਾਲ ਸਿੱਧਾ ਨਹੀਂ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਉਹਨਾਂ ਨੂੰ ਉਸੇ ਤੱਤ 'ਤੇ ਹੋਰ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਨਹੀਂ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਸਦੀ ਬਜਾਏ, ਇੱਕ ਨੇਸਟਡ ਸ਼ਾਮਲ <span>
ਕਰੋ ਅਤੇ ਆਈਕਨ ਕਲਾਸਾਂ ਨੂੰ <span>
.
ਸਿਰਫ਼ ਖਾਲੀ ਤੱਤਾਂ 'ਤੇ ਵਰਤੋਂ ਲਈ
ਆਈਕਨ ਕਲਾਸਾਂ ਸਿਰਫ਼ ਉਹਨਾਂ ਤੱਤਾਂ 'ਤੇ ਹੀ ਵਰਤੀਆਂ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਕੋਈ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨਹੀਂ ਹੈ ਅਤੇ ਕੋਈ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਨਹੀਂ ਹੈ।
ਆਈਕਨ ਫੌਂਟ ਟਿਕਾਣਾ ਬਦਲਣਾ
ਬੂਟਸਟਰੈਪ ਮੰਨਦਾ ਹੈ ਕਿ ਆਈਕਨ ਫੌਂਟ ਫਾਈਲਾਂ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਸਥਿਤ ਹੋਣਗੀਆਂ ../fonts/
, ਕੰਪਾਇਲ ਕੀਤੀਆਂ CSS ਫਾਈਲਾਂ ਦੇ ਅਨੁਸਾਰ। ਉਹਨਾਂ ਫੌਂਟ ਫਾਈਲਾਂ ਨੂੰ ਮੂਵ ਕਰਨਾ ਜਾਂ ਨਾਮ ਬਦਲਣ ਦਾ ਮਤਲਬ ਹੈ CSS ਨੂੰ ਤਿੰਨ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਵਿੱਚ ਅੱਪਡੇਟ ਕਰਨਾ:
ਸਰੋਤ ਘੱਟ ਫਾਈਲਾਂ ਵਿੱਚ @icon-font-path
ਅਤੇ/ਜਾਂ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਬਦਲੋ ।@icon-font-name
ਘੱਟ ਕੰਪਾਈਲਰ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਅਨੁਸਾਰੀ URL ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰੋ।
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 ਰੇਡੀਓ ਅਤੇ ਚੈਕਬਾਕਸ ਸ਼ੈਲੀ ਵਿਵਹਾਰ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ ।
ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਹੀ 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
. ਨਤੀਜੇ ਵਜੋਂ, ਬੂਟਸਟਰੈਪ ਲਈ ਤੁਹਾਡੀਆਂ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨਾਂ ਦੇ ਆਧਾਰ 'ਤੇ, ਤੁਸੀਂ ਬਾਰਡਰਾਂ ਨੂੰ ਹਟਾਉਣ ਜਾਂ ਮੁੜ-ਰੰਗ ਕਰਨਾ ਚਾਹ ਸਕਦੇ ਹੋ।
IE8 ਅਤੇ ਬਾਰਡਰ
ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 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>
ਤੱਤਾਂ ਦੇ ਨਾਲ ਜਾਇਜ਼ ਬਟਨ ਸਮੂਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ , ਤੁਹਾਨੂੰ ਹਰੇਕ ਬਟਨ ਨੂੰ ਇੱਕ ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਸਮੇਟਣਾ ਚਾਹੀਦਾ ਹੈ । ਬਹੁਤੇ ਬ੍ਰਾਊਜ਼ਰ ਸਾਡੇ 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'
ਅਣਚਾਹੇ ਮਾੜੇ ਪ੍ਰਭਾਵਾਂ ਤੋਂ ਬਚਣ ਲਈ ਵਿਕਲਪ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਨਾ ਹੋਵੇਗਾ (ਜਿਵੇਂ ਕਿ ਟੂਲਟਿਪ ਜਾਂ ਪੌਪਓਵਰ ਚਾਲੂ ਹੋਣ 'ਤੇ ਤੱਤ ਦਾ ਚੌੜਾ ਹੋਣਾ ਅਤੇ/ਜਾਂ ਇਸਦੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਗੁਆਉਣਾ)।
ਇੱਕ ਇਨਪੁਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਇੱਕ ਐਡ-ਆਨ ਜਾਂ ਬਟਨ ਰੱਖੋ। ਤੁਸੀਂ ਇੱਕ ਇਨਪੁਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਇੱਕ ਵੀ ਰੱਖ ਸਕਦੇ ਹੋ।
ਅਸੀਂ ਇੱਕ ਪਾਸੇ ਤੋਂ ਕਈ ਐਡ-ਆਨ ( .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
ਕਲਾਸ ਦੇ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ, ਸ਼ੇਅਰਡ ਸਟੇਟਸ ਦੇ ਨਾਲ ਮਾਰਕਅੱਪ ਨੂੰ ਸਾਂਝਾ ਕੀਤਾ ਹੈ। ਹਰੇਕ ਸ਼ੈਲੀ ਦੇ ਵਿਚਕਾਰ ਅਦਲਾ-ਬਦਲੀ ਕਰਨ ਲਈ ਸੋਧਕ ਕਲਾਸਾਂ ਨੂੰ ਸਵੈਪ ਕਰੋ।
ਟੈਬ ਪੈਨਲਾਂ ਲਈ navs ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ JavaScript ਟੈਬ ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ
ਟੈਬਬਲ ਖੇਤਰਾਂ ਵਾਲੀਆਂ ਟੈਬਾਂ ਲਈ, ਤੁਹਾਨੂੰ ਟੈਬਸ JavaScript ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ । ਮਾਰਕਅੱਪ ਲਈ ਵਾਧੂ ਅਤੇ ARIA ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵੀ ਲੋੜ ਹੋਵੇਗੀ - ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ role
ਪਲੱਗਇਨ ਦੀ ਉਦਾਹਰਨ ਮਾਰਕਅੱਪ ਦੇਖੋ।
ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਤੌਰ ਤੇ ਵਰਤੇ ਜਾਣ ਵਾਲੇ navs ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਓ
role="navigation"
ਜੇਕਰ ਤੁਸੀਂ ਨੈਵੀਗੇਸ਼ਨ ਪੱਟੀ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ navs ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਦੇ ਸਭ ਤੋਂ ਲਾਜ਼ੀਕਲ ਪੈਰੇਂਟ ਕੰਟੇਨਰ ਵਿੱਚ ਇੱਕ ਨੂੰ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ <ul>
, ਜਾਂ <nav>
ਪੂਰੇ ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਦੁਆਲੇ ਇੱਕ ਤੱਤ ਨੂੰ ਸਮੇਟਣਾ ਯਕੀਨੀ ਬਣਾਓ। ਭੂਮਿਕਾ ਨੂੰ ਆਪਣੇ ਆਪ ਵਿੱਚ ਨਾ ਜੋੜੋ <ul>
, ਕਿਉਂਕਿ ਇਹ ਇਸਨੂੰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੁਆਰਾ ਇੱਕ ਅਸਲ ਸੂਚੀ ਵਜੋਂ ਘੋਸ਼ਿਤ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ।
ਟੈਬਸ
ਨੋਟ ਕਰੋ ਕਿ .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
। ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ 'ਤੇ, ਨੇਵੀ ਲਿੰਕ ਸਟੈਕ ਕੀਤੇ ਗਏ ਹਨ।
ਜਾਇਜ਼ ਨਵਬਾਰ ਨੈਵੀ ਲਿੰਕ ਇਸ ਸਮੇਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।
ਸਫਾਰੀ ਅਤੇ ਜਵਾਬਦੇਹ ਜਾਇਜ਼ navs
v9.1.2 ਦੇ ਅਨੁਸਾਰ, Safari ਇੱਕ ਬੱਗ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਲੇਟਵੇਂ ਰੂਪ ਵਿੱਚ ਮੁੜ ਆਕਾਰ ਦੇਣ ਨਾਲ ਜਾਇਜ਼ ਨੈਵੀ ਵਿੱਚ ਰੈਂਡਰਿੰਗ ਗਲਤੀਆਂ ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਰਿਫਰੈਸ਼ ਹੋਣ 'ਤੇ ਸਾਫ਼ ਹੋ ਜਾਂਦੀਆਂ ਹਨ। ਇਹ ਬੱਗ ਜਾਇਜ਼ nav ਉਦਾਹਰਨ ਵਿੱਚ ਵੀ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ।
<ul class= "nav nav-tabs nav-justified" >
...
</ul>
<ul class= "nav nav-pills nav-justified" >
...
</ul>
ਅਯੋਗ ਲਿੰਕ
ਕਿਸੇ ਵੀ ਨੈਵੀ ਕੰਪੋਨੈਂਟ (ਟੈਬਾਂ ਜਾਂ ਗੋਲੀਆਂ) ਲਈ, ਸਲੇਟੀ ਲਿੰਕਾਂ .disabled
ਲਈ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਕੋਈ ਹੋਵਰ ਪ੍ਰਭਾਵ ਨਹੀਂ ।
ਲਿੰਕ ਕਾਰਜਕੁਸ਼ਲਤਾ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੋਈ
<a>
ਇਹ ਕਲਾਸ ਸਿਰਫ 'ਦੀ ਦਿੱਖ ਬਦਲੇਗੀ , ਇਸਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਨਹੀਂ। ਇੱਥੇ ਲਿੰਕਾਂ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ।
<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 ਜਵਾਬਦੇਹ ਮੈਟਾ ਭਾਗ ਹਨ ਜੋ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਜਾਂ ਸਾਈਟ ਲਈ ਨੈਵੀਗੇਸ਼ਨ ਹੈਡਰ ਵਜੋਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਉਹ ਮੋਬਾਈਲ ਵਿਯੂਜ਼ ਵਿੱਚ ਸਮੇਟਣੇ ਸ਼ੁਰੂ ਹੋ ਜਾਂਦੇ ਹਨ (ਅਤੇ ਟੌਗਲ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ) ਅਤੇ ਉਪਲਬਧ ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਵਧਣ ਦੇ ਨਾਲ ਹਰੀਜੱਟਲ ਬਣ ਜਾਂਦੇ ਹਨ।
ਜਾਇਜ਼ ਨਵਬਾਰ ਨੈਵੀ ਲਿੰਕ ਇਸ ਸਮੇਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।
ਭਰਪੂਰ ਸਮੱਗਰੀ
ਕਿਉਂਕਿ ਬੂਟਸਟਰੈਪ ਇਹ ਨਹੀਂ ਜਾਣਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਨਵਬਾਰ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਕਿੰਨੀ ਥਾਂ ਦੀ ਲੋੜ ਹੈ, ਤੁਹਾਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਦੂਜੀ ਕਤਾਰ ਵਿੱਚ ਸਮੇਟਣ ਨਾਲ ਸਮੱਸਿਆਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਇਹ ਕਰ ਸਕਦੇ ਹੋ:
ਨਵਬਾਰ ਆਈਟਮਾਂ ਦੀ ਮਾਤਰਾ ਜਾਂ ਚੌੜਾਈ ਨੂੰ ਘਟਾਓ।
ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕੁਝ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ 'ਤੇ ਕੁਝ ਨੇਵਬਾਰ ਆਈਟਮਾਂ ਨੂੰ ਲੁਕਾਓ ।
ਉਸ ਬਿੰਦੂ ਨੂੰ ਬਦਲੋ ਜਿਸ 'ਤੇ ਤੁਹਾਡਾ ਨਵਬਾਰ ਸਮੇਟਣ ਅਤੇ ਲੇਟਵੇਂ ਮੋਡ ਵਿਚਕਾਰ ਬਦਲਦਾ ਹੈ। @grid-float-breakpoint
ਵੇਰੀਏਬਲ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ ਜਾਂ ਆਪਣੀ ਖੁਦ ਦੀ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਸ਼ਾਮਲ ਕਰੋ।
JavaScript ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੈ
ਜੇਕਰ JavaScript ਅਸਮਰੱਥ ਹੈ ਅਤੇ ਵਿਊਪੋਰਟ ਐਨਾ ਤੰਗ ਹੈ ਕਿ ਨਵਬਾਰ ਸਮੇਟਦਾ ਹੈ, ਤਾਂ ਨਵਬਾਰ ਦਾ ਵਿਸਤਾਰ ਕਰਨਾ ਅਤੇ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਦੇਖਣਾ ਅਸੰਭਵ ਹੋਵੇਗਾ .navbar-collapse
।
ਜਵਾਬਦੇਹ ਨਵਬਾਰ ਨੂੰ ਬੂਟਸਟਰੈਪ ਦੇ ਤੁਹਾਡੇ ਸੰਸਕਰਣ ਵਿੱਚ ਸਮੇਟਣ ਵਾਲੇ ਪਲੱਗਇਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
ਸਮੇਟਿਆ ਮੋਬਾਈਲ ਨਵਬਾਰ ਬਰੇਕਪੁਆਇੰਟ ਬਦਲਣਾ
ਜਦੋਂ ਵਿਊਪੋਰਟ ਤੋਂ ਛੋਟਾ ਹੁੰਦਾ ਹੈ ਤਾਂ ਨਵਬਾਰ ਇਸਦੇ ਲੰਬਕਾਰੀ ਮੋਬਾਈਲ ਦ੍ਰਿਸ਼ ਵਿੱਚ ਸਮੇਟਦਾ ਹੈ @grid-float-breakpoint
, ਅਤੇ ਇਸਦੇ ਹਰੀਜੱਟਲ ਗੈਰ-ਮੋਬਾਈਲ ਦ੍ਰਿਸ਼ ਵਿੱਚ ਫੈਲਦਾ ਹੈ ਜਦੋਂ ਵਿਊਪੋਰਟ ਘੱਟੋ-ਘੱਟ @grid-float-breakpoint
ਚੌੜਾਈ ਵਿੱਚ ਹੁੰਦਾ ਹੈ। ਨਵਬਾਰ ਦੇ ਸਮੇਟਣ/ਵਿਸਤਾਰ ਹੋਣ 'ਤੇ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਇਸ ਵੇਰੀਏਬਲ ਨੂੰ ਘੱਟ ਸਰੋਤ ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰੋ। ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ ਹੈ 768px
(ਸਭ ਤੋਂ ਛੋਟੀ "ਛੋਟੀ" ਜਾਂ "ਟੈਬਲੇਟ" ਸਕ੍ਰੀਨ)।
ਨਵਬਾਰਾਂ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਓ
ਇੱਕ ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ <nav>
ਜਾਂ, ਜੇਕਰ ਇੱਕ ਹੋਰ ਆਮ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ ਜਿਵੇਂ ਕਿ a <div>
, ਜੋੜੋrole="navigation"
, ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਲੈਂਡਮਾਰਕ ਖੇਤਰ ਵਜੋਂ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਪਛਾਣ ਕਰਨ ਲਈ ਹਰ ਨਵਬਾਰ ਵਿੱਚ
<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-btn
ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ । ਹਾਲਾਂਕਿ, ਅੰਦਰਲੇ ਤੱਤਾਂ 'ਤੇ ਨਾ ਤਾਂ ਮਿਆਰੀ ਬਟਨ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ ।<a>
<input>
.navbar-btn
<a>
.navbar-nav
ਟੈਕਸਟ
ਇੱਕ ਤੱਤ ਵਿੱਚ ਟੈਕਸਟ ਦੀਆਂ ਸਤਰਾਂ ਨੂੰ ਸਮੇਟਣਾ .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-right
ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਇੱਕ ਸੀਮਾ ਹੈ। .navbar-right
ਸਮਗਰੀ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸਪੇਸ ਕਰਨ ਲਈ, ਅਸੀਂ ਆਖਰੀ ਤੱਤ 'ਤੇ ਨੈਗੇਟਿਵ ਹਾਸ਼ੀਏ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ । ਜਦੋਂ ਉਸ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਕਈ ਤੱਤ ਹੁੰਦੇ ਹਨ, ਤਾਂ ਇਹ ਹਾਸ਼ੀਏ ਇਰਾਦੇ ਅਨੁਸਾਰ ਕੰਮ ਨਹੀਂ ਕਰਦੇ ਹਨ।
ਅਸੀਂ ਇਸ 'ਤੇ ਮੁੜ ਵਿਚਾਰ ਕਰਾਂਗੇ ਜਦੋਂ ਅਸੀਂ ਉਸ ਹਿੱਸੇ ਨੂੰ v4 ਵਿੱਚ ਦੁਬਾਰਾ ਲਿਖ ਸਕਦੇ ਹਾਂ।
ਸਿਖਰ 'ਤੇ ਸਥਿਰ
ਕੇਂਦਰ ਅਤੇ ਪੈਡ ਨਵਬਾਰ ਸਮੱਗਰੀ .navbar-fixed-top
ਵਿੱਚ ਇੱਕ .container
ਜਾਂ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਸ਼ਾਮਲ ਕਰੋ।.container-fluid
<nav class= "navbar navbar-default navbar-fixed-top" >
<div class= "container" >
...
</div>
</nav>
ਬਾਡੀ ਪੈਡਿੰਗ ਦੀ ਲੋੜ ਹੈ
ਸਥਿਰ ਨਵਬਾਰ ਤੁਹਾਡੀ ਹੋਰ ਸਮੱਗਰੀ ਨੂੰ ਓਵਰਲੇ ਕਰੇਗਾ, ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ padding
ਦੇ ਸਿਖਰ 'ਤੇ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਦੇ <body>
। ਆਪਣੇ ਖੁਦ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਅਜ਼ਮਾਓ ਜਾਂ ਹੇਠਾਂ ਦਿੱਤੇ ਸਾਡੇ ਸਨਿੱਪਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਸੰਕੇਤ: ਮੂਲ ਰੂਪ ਵਿੱਚ, ਨਵਬਾਰ 50px ਉੱਚਾ ਹੈ।
body { padding-top : 70px ; }
ਕੋਰ ਬੂਟਸਟਰੈਪ CSS ਦੇ ਬਾਅਦ ਇਸਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ .
ਥੱਲੇ ਤੱਕ ਸਥਿਰ
ਕੇਂਦਰ ਅਤੇ ਪੈਡ ਨਵਬਾਰ ਸਮੱਗਰੀ .navbar-fixed-bottom
ਵਿੱਚ ਇੱਕ .container
ਜਾਂ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਸ਼ਾਮਲ ਕਰੋ।.container-fluid
<nav class= "navbar navbar-default navbar-fixed-bottom" >
<div class= "container" >
...
</div>
</nav>
ਬਾਡੀ ਪੈਡਿੰਗ ਦੀ ਲੋੜ ਹੈ
padding
ਸਥਿਰ ਨਵਬਾਰ ਤੁਹਾਡੀ ਹੋਰ ਸਮੱਗਰੀ ਨੂੰ ਓਵਰਲੇ ਕਰ ਦੇਵੇਗਾ, ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ <body>
. ਆਪਣੇ ਖੁਦ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਅਜ਼ਮਾਓ ਜਾਂ ਹੇਠਾਂ ਦਿੱਤੇ ਸਾਡੇ ਸਨਿੱਪਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਸੰਕੇਤ: ਮੂਲ ਰੂਪ ਵਿੱਚ, ਨਵਬਾਰ 50px ਉੱਚਾ ਹੈ।
body { padding-bottom : 70px ; }
ਕੋਰ ਬੂਟਸਟਰੈਪ CSS ਦੇ ਬਾਅਦ ਇਸਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ .
ਸਥਿਰ ਸਿਖਰ
ਇੱਕ ਪੂਰੀ-ਚੌੜਾਈ ਵਾਲੀ ਨਵਬਾਰ ਬਣਾਓ ਜੋ ਇੱਕ ਜਾਂ ਕੇਂਦਰ ਅਤੇ ਪੈਡ ਨਵਬਾਰ ਸਮੱਗਰੀ ਨੂੰ ਜੋੜ ਕੇ .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>
ਅਯੋਗ ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਰਾਜ
ਲਿੰਕ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਲਈ ਅਨੁਕੂਲਿਤ ਹਨ। .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 ਸਮੱਗਰੀ ਜਿਵੇਂ ਸਿਰਲੇਖ, ਪੈਰੇ ਜਾਂ ਬਟਨ ਸ਼ਾਮਲ ਕਰਨਾ ਸੰਭਵ ਹੈ।
ਥੰਬਨੇਲ ਲੇਬਲ
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
ਬਟਨ ਬਟਨ
ਥੰਬਨੇਲ ਲੇਬਲ
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
ਬਟਨ ਬਟਨ
ਥੰਬਨੇਲ ਲੇਬਲ
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
ਬਟਨ ਬਟਨ
<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 ਚੇਤਾਵਨੀ ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੈ
ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਨ ਲਈ, ਖਾਰਜ ਹੋਣ ਵਾਲੀਆਂ ਚੇਤਾਵਨੀਆਂ ਲਈ, ਤੁਹਾਨੂੰ ਚੇਤਾਵਨੀਆਂ 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>
ਚੇਤਾਵਨੀਆਂ ਵਿੱਚ ਲਿੰਕ
.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) ਅਨੁਕੂਲਤਾ
ਜੇਕਰ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਇੱਕ ਸਮੱਗਰੀ ਸੁਰੱਖਿਆ ਨੀਤੀ (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
ਉਹਨਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਲਈ ਕਈ ਬਾਰਾਂ ਨੂੰ ਇੱਕੋ ਵਿੱਚ ਰੱਖੋ ।
35% ਸੰਪੂਰਨ (ਸਫਲਤਾ)
20% ਸੰਪੂਰਨ (ਚੇਤਾਵਨੀ)
10% ਸੰਪੂਰਨ (ਖ਼ਤਰਾ)
<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
ਚਿੱਤਰਾਂ ਜਾਂ ਹੋਰ ਮੀਡੀਆ ਨੂੰ ਸਿਖਰ, ਮੱਧ ਜਾਂ ਹੇਠਾਂ ਇਕਸਾਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਿਖਰ 'ਤੇ ਇਕਸਾਰ ਹੈ।
<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>
ਥੋੜੇ ਜਿਹੇ ਵਾਧੂ ਮਾਰਕਅੱਪ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਸੂਚੀ ਦੇ ਅੰਦਰ ਮੀਡੀਆ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ (ਟਿੱਪਣੀ ਥ੍ਰੈਡਾਂ ਜਾਂ ਲੇਖ ਸੂਚੀਆਂ ਲਈ ਉਪਯੋਗੀ)।
<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 ਨਾਲ ਬਣਾਓ।
Cras justo odio
ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ
ਪੋਰਟਾ ਏਸੀ ਕੰਸੈਕਟੁਰ ਏਸੀ
ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
<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>
ਬੈਜ
ਕਿਸੇ ਵੀ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਵਿੱਚ ਬੈਜ ਕੰਪੋਨੈਂਟ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਇਹ ਆਪਣੇ ਆਪ ਸੱਜੇ ਪਾਸੇ ਸਥਿਤ ਹੋ ਜਾਵੇਗਾ।
14 Cras justo odio
2 ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
1 ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ
<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
Cras justo odio
ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ
ਪੋਰਟਾ ਏਸੀ ਕੰਸੈਕਟੁਰ ਏਸੀ
ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
<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 ਸ਼ਾਮਲ ਕਰੋ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਲਿੰਕ ਕੀਤੇ ਸੂਚੀ ਸਮੂਹਾਂ ਲਈ ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਹੈ।
<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.
Cras justo odio
ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ
ਪੋਰਟਾ ਏਸੀ ਕੰਸੈਕਟੁਰ ਏਸੀ
ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
<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>