ਗਲਾਈਫਿਕਨ

ਉਪਲਬਧ ਗਲਾਈਫਸ

Glyphicon Halflings ਸੈੱਟ ਤੋਂ ਫੌਂਟ ਫਾਰਮੈਟ ਵਿੱਚ 250 ਤੋਂ ਵੱਧ ਗਲਾਈਫਸ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। Glyphicons Halflings ਆਮ ਤੌਰ 'ਤੇ ਮੁਫਤ ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹੁੰਦੇ ਹਨ, ਪਰ ਉਹਨਾਂ ਦੇ ਸਿਰਜਣਹਾਰ ਨੇ ਉਹਨਾਂ ਨੂੰ ਬੂਟਸਟਰੈਪ ਲਈ ਮੁਫਤ ਉਪਲਬਧ ਕਰਵਾਇਆ ਹੈ। ਤੁਹਾਡੇ ਧੰਨਵਾਦ ਦੇ ਤੌਰ 'ਤੇ, ਅਸੀਂ ਸਿਰਫ ਇਹ ਮੰਗ ਕਰਦੇ ਹਾਂ ਕਿ ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ ਤਾਂ ਤੁਸੀਂ ਗਲਾਈਫਿਕਨ ਲਈ ਇੱਕ ਲਿੰਕ ਸ਼ਾਮਲ ਕਰੋ।

  • glyphicon glyphicon- ਤਾਰਾ
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-ਯੂਰੋ
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-Cloud
  • glyphicon glyphicon-ਲਿਫਾਫਾ
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-ਗਲਾਸ
  • glyphicon glyphicon-ਸੰਗੀਤ
  • glyphicon glyphicon-ਖੋਜ
  • glyphicon glyphicon-ਦਿਲ
  • glyphicon glyphicon-ਤਾਰਾ
  • glyphicon glyphicon-ਤਾਰਾ-ਖਾਲੀ
  • glyphicon glyphicon-ਉਪਭੋਗਤਾ
  • glyphicon glyphicon-ਫ਼ਿਲਮ
  • glyphicon glyphicon-th-ਵੱਡਾ
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ਠੀਕ ਹੈ
  • glyphicon glyphicon-ਹਟਾਓ
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-ਬੰਦ
  • glyphicon glyphicon-ਸਿਗਨਲ
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-ਰੱਦੀ
  • glyphicon glyphicon-ਘਰ
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-ਸੜਕ
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-ਡਾਊਨਲੋਡ
  • glyphicon glyphicon-ਅੱਪਲੋਡ
  • glyphicon glyphicon-ਇਨਬਾਕਸ
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-ਦੁਹਰਾਓ
  • glyphicon glyphicon-ਤਾਜ਼ਾ
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-ਲਾਕ
  • glyphicon glyphicon-ਝੰਡਾ
  • glyphicon glyphicon-ਹੈੱਡਫੋਨ
  • glyphicon glyphicon-ਵਾਲੀਅਮ-ਬੰਦ
  • glyphicon glyphicon-ਵਾਲੀਅਮ-ਡਾਊਨ
  • glyphicon glyphicon-ਵਾਲੀਅਮ-ਅੱਪ
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-ਬਾਰਕੋਡ
  • glyphicon glyphicon-ਟੈਗ
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-ਕਿਤਾਬ
  • glyphicon glyphicon-ਬੁੱਕਮਾਰਕ
  • glyphicon glyphicon-ਪ੍ਰਿੰਟ
  • glyphicon glyphicon-ਕੈਮਰਾ
  • glyphicon glyphicon-font
  • glyphicon glyphicon-ਬੋਲਡ
  • glyphicon glyphicon-ਇਟਾਲਿਕ
  • glyphicon glyphicon-ਟੈਕਸਟ-ਉਚਾਈ
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-ਅਲਾਈਨ-ਖੱਬੇ
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-ਅਲਾਈਨ-ਸੱਜੇ
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-ਸੂਚੀ
  • glyphicon glyphicon-Indent-ਖੱਬੇ
  • glyphicon glyphicon-Indent-ਸੱਜੇ
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-ਤਸਵੀਰ
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-ਵਿਵਸਥਿਤ ਕਰੋ
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-ਸੰਪਾਦਨ
  • glyphicon glyphicon-share
  • glyphicon glyphicon-ਚੈੱਕ
  • glyphicon glyphicon-ਚਾਲ
  • glyphicon glyphicon-ਕਦਮ-ਪਿੱਛੇ
  • glyphicon glyphicon-ਤੇਜ਼-ਪਿੱਛੇ
  • glyphicon glyphicon-ਪਿੱਛੇ
  • glyphicon glyphicon-play
  • glyphicon glyphicon-ਵਿਰਾਮ
  • glyphicon glyphicon-ਸਟਾਪ
  • glyphicon glyphicon-ਅੱਗੇ
  • glyphicon glyphicon-ਫਾਸਟ-ਫਾਰਵਰਡ
  • glyphicon glyphicon-ਕਦਮ-ਅੱਗੇ
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-ਖੱਬੇ
  • glyphicon glyphicon-chevron-ਸੱਜੇ
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-ਚਿੰਨ੍ਹ
  • glyphicon glyphicon-ਹਟਾਓ-ਚਿੰਨ੍ਹ
  • glyphicon glyphicon-ਠੀਕ-ਚਿੰਨ੍ਹ
  • glyphicon glyphicon-ਸਵਾਲ-ਚਿੰਨ੍ਹ
  • glyphicon glyphicon-ਜਾਣਕਾਰੀ-ਚਿੰਨ੍ਹ
  • glyphicon glyphicon-ਸਕ੍ਰੀਨਸ਼ਾਟ
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ਠੀਕ-ਸਰਕਲ
  • glyphicon glyphicon-ban-Circle
  • glyphicon glyphicon-ਤੀਰ-ਖੱਬੇ
  • glyphicon glyphicon-ਤੀਰ-ਸੱਜੇ
  • glyphicon glyphicon-ਤੀਰ-ਅੱਪ
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-ਵਿਸਮਿਕ ਚਿੰਨ੍ਹ-ਚਿੰਨ੍ਹ
  • glyphicon glyphicon-ਤੋਹਫ਼ਾ
  • glyphicon glyphicon-ਪੱਤਾ
  • glyphicon glyphicon-ਅੱਗ
  • glyphicon glyphicon-ਅੱਖ-ਖੋਲ੍ਹੀ
  • glyphicon glyphicon-ਅੱਖ ਬੰਦ
  • glyphicon glyphicon-ਚੇਤਾਵਨੀ-ਚਿੰਨ੍ਹ
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-ਕੈਲੰਡਰ
  • glyphicon glyphicon-ਬੇਤਰਤੀਬ
  • glyphicon glyphicon-ਟਿੱਪਣੀ
  • glyphicon glyphicon-ਚੁੰਬਕ
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-ਫੋਲਡਰ-ਓਪਨ
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-ਘੰਟੀ
  • glyphicon glyphicon-ਸਰਟੀਫਿਕੇਟ
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-ਹੱਥ-ਸੱਜੇ
  • glyphicon glyphicon-ਹੱਥ-ਖੱਬੇ
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-ਸਰਕਲ-ਤੀਰ-ਸੱਜੇ
  • glyphicon glyphicon-ਸਰਕਲ-ਤੀਰ-ਖੱਬੇ
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-ਗਲੋਬ
  • glyphicon glyphicon-ਰੈਂਚ
  • glyphicon glyphicon-ਕਾਰਜ
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-ਬ੍ਰੀਫਕੇਸ
  • glyphicon glyphicon-ਪੂਰੀ ਸਕਰੀਨ
  • glyphicon glyphicon-ਡੈਸ਼ਬੋਰਡ
  • glyphicon glyphicon-ਪੇਪਰ ਕਲਿੱਪ
  • glyphicon glyphicon-ਦਿਲ-ਖਾਲੀ
  • glyphicon glyphicon-link
  • glyphicon glyphicon-ਫੋਨ
  • glyphicon glyphicon-ਪੁਸ਼ਪਿਨ
  • glyphicon glyphicon-USD
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-ਕ੍ਰਮਬੱਧ
  • glyphicon glyphicon-ਵਰਣਮਾਲਾ ਅਨੁਸਾਰ ਲੜੀਬੱਧ
  • glyphicon glyphicon-ਵਰਣਮਾਲਾ-alt-ਦਰ-ਛਾਂਟ
  • glyphicon glyphicon-ਕ੍ਰਮ-ਦਰ-ਕ੍ਰਮ
  • glyphicon glyphicon-ਕ੍ਰਮ-ਦਰ-ਕ੍ਰਮ-alt
  • glyphicon glyphicon-ਕ੍ਰਮ-ਦਰ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
  • glyphicon glyphicon-ਕ੍ਰਮ-ਦਰ-ਵਿਸ਼ੇਸ਼ਤਾ-alt
  • glyphicon glyphicon-ਅਨਚੈਕ ਕੀਤਾ ਗਿਆ
  • glyphicon glyphicon-ਪਸਾਰ
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-ਲੌਗ-ਇਨ
  • glyphicon glyphicon-ਫਲੈਸ਼
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-ਨਵੀਂ-ਵਿੰਡੋ
  • glyphicon glyphicon-ਰਿਕਾਰਡ
  • glyphicon glyphicon-ਬਚਾਓ
  • glyphicon glyphicon-ਓਪਨ
  • glyphicon glyphicon-ਸੰਭਾਲਿਆ
  • glyphicon glyphicon-ਆਯਾਤ
  • glyphicon glyphicon-ਨਿਰਯਾਤ
  • glyphicon glyphicon-ਭੇਜੋ
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-ਫਲਾਪੀ-ਸੰਭਾਲਿਆ
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-ਫਲਾਪੀ-ਓਪਨ
  • glyphicon glyphicon-ਕ੍ਰੈਡਿਟ-ਕਾਰਡ
  • glyphicon glyphicon-ਤਬਾਦਲਾ
  • glyphicon glyphicon-ਕਟਲਰੀ
  • glyphicon glyphicon-ਸਿਰਲੇਖ
  • glyphicon glyphicon-ਸੰਕੁਚਿਤ
  • glyphicon glyphicon-ਈਅਰਫੋਨ
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-ਟਾਵਰ
  • glyphicon glyphicon-ਅੰਕੜੇ
  • glyphicon glyphicon-sd-ਵੀਡੀਓ
  • glyphicon glyphicon-hd-ਵੀਡੀਓ
  • glyphicon glyphicon-ਉਪਸਿਰਲੇਖ
  • glyphicon glyphicon-ਧੁਨੀ-ਸਟੀਰੀਓ
  • glyphicon glyphicon- sound-dolby
  • glyphicon glyphicon-ਧੁਨੀ-5-1
  • glyphicon glyphicon-ਧੁਨੀ-6-1
  • glyphicon glyphicon-ਧੁਨੀ-7-1
  • glyphicon glyphicon-ਕਾਪੀਰਾਈਟ-ਮਾਰਕ
  • glyphicon glyphicon-ਰਜਿਸਟ੍ਰੇਸ਼ਨ-ਮਾਰਕ
  • glyphicon glyphicon-Cloud-download
  • glyphicon glyphicon-Cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-ਰੁੱਖ-ਪਤਝੜੀ
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-ਪੱਧਰ-ਅੱਪ
  • glyphicon glyphicon-ਨਕਲ
  • glyphicon glyphicon-ਪੇਸਟ
  • glyphicon glyphicon-ਚੇਤਾਵਨੀ
  • glyphicon glyphicon-ਬਰਾਬਰ
  • glyphicon glyphicon-king
  • glyphicon glyphicon-ਰਾਣੀ
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-ਬਿਸ਼ਪ
  • glyphicon glyphicon-ਨਾਈਟ
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-ਤੰਬੂ
  • glyphicon glyphicon-ਬਲੈਕਬੋਰਡ
  • glyphicon glyphicon-ਬੈੱਡ
  • glyphicon glyphicon-ਸੇਬ
  • glyphicon glyphicon-ਮਿਟਾਓ
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-ਦੀਵਾ
  • glyphicon glyphicon-ਡੁਪਲੀਕੇਟ
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-ਕੈਂਚੀ
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-ਯੇਨ
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ਰੂਬਲ
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-ਪੈਮਾਨਾ
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ਆਈਸ-ਲੋਲੀ-ਚੱਖਿਆ
  • glyphicon glyphicon-ਸਿੱਖਿਆ
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-ਤੇਲ
  • glyphicon glyphicon-ਅਨਾਜ
  • glyphicon glyphicon-ਸਨਗਲਾਸ
  • glyphicon glyphicon-ਟੈਕਸਟ-ਆਕਾਰ
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-ਆਬਜੈਕਟ-ਅਲਾਈਨ-ਖੱਬੇ
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-ਆਬਜੈਕਟ-ਅਲਾਈਨ-ਸੱਜੇ
  • glyphicon glyphicon-ਤਿਕੋਣ-ਸੱਜੇ
  • glyphicon glyphicon-ਤਿਕੋਣ-ਖੱਬੇ
  • glyphicon glyphicon-ਤਿਕੋਣ-ਤਲ
  • glyphicon glyphicon-ਤਿਕੋਣ-ਚੋਟੀ
  • glyphicon glyphicon-ਕੰਸੋਲ
  • glyphicon glyphicon-ਸੁਪਰਸਕ੍ਰਿਪਟ
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-ਮੀਨੂ-ਖੱਬੇ
  • glyphicon glyphicon-ਮੇਨੂ-ਸੱਜੇ
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-ਮੇਨੂ-ਅੱਪ

ਇਹਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਕਰਕੇ, ਸਾਰੇ ਆਈਕਨਾਂ ਲਈ ਇੱਕ ਬੇਸ ਕਲਾਸ ਅਤੇ ਵਿਅਕਤੀਗਤ ਆਈਕਨ ਕਲਾਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਵਰਤਣ ਲਈ, ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਲਗਭਗ ਕਿਤੇ ਵੀ ਰੱਖੋ। ਸਹੀ ਪੈਡਿੰਗ ਲਈ ਆਈਕਨ ਅਤੇ ਟੈਕਸਟ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਪੇਸ ਛੱਡਣਾ ਯਕੀਨੀ ਬਣਾਓ।

ਹੋਰ ਭਾਗਾਂ ਨਾਲ ਨਾ ਮਿਲਾਓ

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

ਬਟਨ ਸਮੂਹਾਂ ਵਿੱਚ ਟੂਲਟਿਪਸ ਅਤੇ ਪੌਪਓਵਰ ਖਾਸ ਸੈਟਿੰਗ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ

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

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>ਤੱਤ ਦੇ ਨਾਲ

<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-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

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

ਇੱਕ ਇਨਪੁਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਇੱਕ ਐਡ-ਆਨ ਜਾਂ ਬਟਨ ਰੱਖੋ। ਤੁਸੀਂ ਇੱਕ ਇਨਪੁਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਇੱਕ ਵੀ ਰੱਖ ਸਕਦੇ ਹੋ।

ਅਸੀਂ ਇੱਕ ਪਾਸੇ ਤੋਂ ਕਈ ਐਡ-ਆਨ ( .input-group-addonਜਾਂ ) ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਾਂ।.input-group-btn

ਅਸੀਂ ਇੱਕ ਸਿੰਗਲ ਇਨਪੁਟ ਸਮੂਹ ਵਿੱਚ ਕਈ ਫਾਰਮ-ਕੰਟਰੋਲਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਾਂ।

@

@example.com

$ .00

https://example.com/users/
<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 ਜਵਾਬਦੇਹ ਮੈਟਾ ਭਾਗ ਹਨ ਜੋ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਜਾਂ ਸਾਈਟ ਲਈ ਨੈਵੀਗੇਸ਼ਨ ਹੈਡਰ ਵਜੋਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਉਹ ਮੋਬਾਈਲ ਵਿਯੂਜ਼ ਵਿੱਚ ਸਮੇਟਣੇ ਸ਼ੁਰੂ ਹੋ ਜਾਂਦੇ ਹਨ (ਅਤੇ ਟੌਗਲ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ) ਅਤੇ ਉਪਲਬਧ ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਵਧਣ ਦੇ ਨਾਲ ਹਰੀਜੱਟਲ ਬਣ ਜਾਂਦੇ ਹਨ।

ਜਾਇਜ਼ ਨਵਬਾਰ ਨੈਵੀ ਲਿੰਕ ਇਸ ਸਮੇਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।

ਭਰਪੂਰ ਸਮੱਗਰੀ

ਕਿਉਂਕਿ ਬੂਟਸਟਰੈਪ ਇਹ ਨਹੀਂ ਜਾਣਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਨਵਬਾਰ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਕਿੰਨੀ ਥਾਂ ਦੀ ਲੋੜ ਹੈ, ਤੁਹਾਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਦੂਜੀ ਕਤਾਰ ਵਿੱਚ ਸਮੇਟਣ ਨਾਲ ਸਮੱਸਿਆਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਇਹ ਕਰ ਸਕਦੇ ਹੋ:

  1. ਨਵਬਾਰ ਆਈਟਮਾਂ ਦੀ ਮਾਤਰਾ ਜਾਂ ਚੌੜਾਈ ਨੂੰ ਘਟਾਓ।
  2. ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕੁਝ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ 'ਤੇ ਕੁਝ ਨੇਵਬਾਰ ਆਈਟਮਾਂ ਨੂੰ ਲੁਕਾਓ ।
  3. ਉਸ ਬਿੰਦੂ ਨੂੰ ਬਦਲੋ ਜਿਸ 'ਤੇ ਤੁਹਾਡਾ ਨਵਬਾਰ ਸਮੇਟਣ ਅਤੇ ਲੇਟਵੇਂ ਮੋਡ ਵਿਚਕਾਰ ਬਦਲਦਾ ਹੈ। @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>

ਮੋਬਾਈਲ ਡਿਵਾਈਸ ਚੇਤਾਵਨੀਆਂ

ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ ਸਥਿਰ ਤੱਤਾਂ ਦੇ ਅੰਦਰ ਫਾਰਮ ਨਿਯੰਤਰਣ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਸੰਬੰਧ ਵਿੱਚ ਕੁਝ ਚੇਤਾਵਨੀਆਂ ਹਨ। ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ

ਹਮੇਸ਼ਾ ਲੇਬਲ ਸ਼ਾਮਲ ਕਰੋ

ਜੇਕਰ ਤੁਸੀਂ ਹਰੇਕ ਇਨਪੁੱਟ ਲਈ ਲੇਬਲ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਦੇ ਹੋ ਤਾਂ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਤੁਹਾਡੇ ਫਾਰਮਾਂ ਨਾਲ ਸਮੱਸਿਆ ਹੋਵੇਗੀ। ਇਹਨਾਂ ਇਨਲਾਈਨ ਫਾਰਮਾਂ ਲਈ, ਤੁਸੀਂ .sr-onlyਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੇਬਲਾਂ ਨੂੰ ਲੁਕਾ ਸਕਦੇ ਹੋ। ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਲਈ ਲੇਬਲ ਪ੍ਰਦਾਨ ਕਰਨ ਦੇ ਹੋਰ ਵਿਕਲਪਿਕ ਤਰੀਕੇ ਹਨ, ਜਿਵੇਂ ਕਿ aria-label, aria-labelledbyਜਾਂ titleਗੁਣ। ਜੇਕਰ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਮੌਜੂਦ ਨਹੀਂ ਹੈ, ਤਾਂ ਸਕ੍ਰੀਨ ਰੀਡਰ placeholderਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਹਾਰਾ ਲੈ ਸਕਦੇ ਹਨ, ਜੇਕਰ ਮੌਜੂਦ ਹੈ, ਪਰ ਨੋਟ ਕਰੋ ਕਿ placeholderਹੋਰ ਲੇਬਲਿੰਗ ਵਿਧੀਆਂ ਦੇ ਬਦਲ ਵਜੋਂ ਵਰਤਣ ਦੀ ਸਲਾਹ ਨਹੀਂ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ।

.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">&laquo;</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">&raquo;</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">&laquo;</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">&laquo;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ਵਿਕਲਪਿਕ ਅਯੋਗ ਸਥਿਤੀ

ਪੇਜਰ ਲਿੰਕ ਪੰਨਾਬੰਦੀ .disabledਤੋਂ ਆਮ ਉਪਯੋਗਤਾ ਸ਼੍ਰੇਣੀ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰਦੇ ਹਨ।

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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">ਲਿੰਕਾਂ, ਬੂਟਸਟਰੈਪ ਨੈਵ, ਅਤੇ ਹੋਰ ਵਿੱਚ ਇੱਕ ਜੋੜ ਕੇ ਆਸਾਨੀ ਨਾਲ ਨਵੀਆਂ ਜਾਂ ਨਾ-ਪੜ੍ਹੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰੋ ।

ਇਨਬਾਕਸ42

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

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

100%x200

ਥੰਬਨੇਲ ਲੇਬਲ

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.

ਬਟਨ ਬਟਨ

100%x200

ਥੰਬਨੇਲ ਲੇਬਲ

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.

ਬਟਨ ਬਟਨ

100%x200

ਥੰਬਨੇਲ ਲੇਬਲ

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">&times;</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) ਅਨੁਕੂਲਤਾ

ਜੇਕਰ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਇੱਕ ਸਮੱਗਰੀ ਸੁਰੱਖਿਆ ਨੀਤੀ (CSP) ਹੈ ਜੋ ਕਿ ਇਜਾਜ਼ਤ ਨਹੀਂ ਦਿੰਦੀ , ਤਾਂ ਤੁਸੀਂ ਪ੍ਰਗਤੀ ਪੱਟੀ ਚੌੜਾਈ ਨੂੰ ਸੈੱਟ style-src 'unsafe-inline'ਕਰਨ ਲਈ ਇਨਲਾਈਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਨਹੀਂ ਹੋਵੋਗੇ ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਸਾਡੀਆਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ। styleਸਖਤ CSPs ਦੇ ਅਨੁਕੂਲ ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਦੇ ਵਿਕਲਪਿਕ ਤਰੀਕਿਆਂ ਵਿੱਚ ਥੋੜਾ ਕਸਟਮ JavaScript (ਜੋ ਸੈੱਟ ਕਰਦਾ ਹੈ element.style.width) ਜਾਂ ਕਸਟਮ CSS ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ।

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

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤਰੱਕੀ ਪੱਟੀ।

60% ਪੂਰਾ
<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

60%
<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ਤਰੱਕੀ ਪੱਟੀ ਵਿੱਚ ਇੱਕ ਜੋੜਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।

0%
2%
<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>

ਸੰਦਰਭੀ ਵਿਕਲਪ

ਪ੍ਰਗਤੀ ਬਾਰ ਇਕਸਾਰ ਸਟਾਈਲ ਲਈ ਕੁਝ ਸਮਾਨ ਬਟਨ ਅਤੇ ਚੇਤਾਵਨੀ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

40% ਸੰਪੂਰਨ (ਸਫਲਤਾ)
20% ਪੂਰਾ
60% ਸੰਪੂਰਨ (ਚੇਤਾਵਨੀ)
80% ਸੰਪੂਰਨ (ਖ਼ਤਰਾ)
<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 ਅਤੇ ਹੇਠਾਂ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।

40% ਸੰਪੂਰਨ (ਸਫਲਤਾ)
20% ਪੂਰਾ
60% ਸੰਪੂਰਨ (ਚੇਤਾਵਨੀ)
80% ਸੰਪੂਰਨ (ਖ਼ਤਰਾ)
<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-stripedIE9 ਅਤੇ ਹੇਠਾਂ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।

45% ਪੂਰਾ
<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>

ਮੀਡੀਆ ਵਸਤੂ

ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਭਾਗਾਂ (ਜਿਵੇਂ ਕਿ ਬਲੌਗ ਟਿੱਪਣੀਆਂ, ਟਵੀਟਸ, ਆਦਿ) ਨੂੰ ਬਣਾਉਣ ਲਈ ਐਬਸਟ੍ਰੈਕਟ ਆਬਜੈਕਟ ਸ਼ੈਲੀਆਂ ਜੋ ਪਾਠ ਸਮੱਗਰੀ ਦੇ ਨਾਲ-ਨਾਲ ਇੱਕ ਖੱਬੇ- ਜਾਂ ਸੱਜੇ-ਸੰਗਠਿਤ ਚਿੱਤਰ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਕਰਦੀਆਂ ਹਨ।

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੀਡੀਆ

ਡਿਫੌਲਟ ਮੀਡੀਆ ਸਮੱਗਰੀ ਬਲਾਕ ਦੇ ਖੱਬੇ ਜਾਂ ਸੱਜੇ ਪਾਸੇ ਮੀਡੀਆ ਆਬਜੈਕਟ (ਚਿੱਤਰਾਂ, ਵੀਡੀਓ, ਆਡੀਓ) ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ।

ਮੀਡੀਆ ਸਿਰਲੇਖ

ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ। Fusce condimentum nunc ac nisi vulputate fringilla. ਫੌਸੀਬਸ ਵਿੱਚ ਡੋਨੇਕ ਲੈਸੀਨੀਆ ਕੋਂਗੂ ਫੈਲਿਸ।

ਮੀਡੀਆ ਸਿਰਲੇਖ

ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ। Fusce condimentum nunc ac nisi vulputate fringilla. ਫੌਸੀਬਸ ਵਿੱਚ ਡੋਨੇਕ ਲੈਸੀਨੀਆ ਕੋਂਗੂ ਫੈਲਿਸ।

ਨੇਸਟਡ ਮੀਡੀਆ ਸਿਰਲੇਖ

ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ। Fusce condimentum nunc ac nisi vulputate fringilla. ਫੌਸੀਬਸ ਵਿੱਚ ਡੋਨੇਕ ਲੈਸੀਨੀਆ ਕੋਂਗੂ ਫੈਲਿਸ।

ਮੀਡੀਆ ਸਿਰਲੇਖ

ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।

ਮੀਡੀਆ ਸਿਰਲੇਖ

ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।
<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. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।

    ਨੇਸਟਡ ਮੀਡੀਆ ਸਿਰਲੇਖ

    ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।

    ਨੇਸਟਡ ਮੀਡੀਆ ਸਿਰਲੇਖ

    ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।

    ਨੇਸਟਡ ਮੀਡੀਆ ਸਿਰਲੇਖ

    ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। 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 ਨਾਲ ਬਣਾਓ।

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

ਬੈਜ

ਕਿਸੇ ਵੀ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਵਿੱਚ ਬੈਜ ਕੰਪੋਨੈਂਟ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਇਹ ਆਪਣੇ ਆਪ ਸੱਜੇ ਪਾਸੇ ਸਥਿਤ ਹੋ ਜਾਵੇਗਾ।

  • 14Cras 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

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