ఐకానోగ్రఫీ, డ్రాప్డౌన్లు, ఇన్పుట్ గ్రూప్లు, నావిగేషన్, అలర్ట్లు మరియు మరిన్నింటిని అందించడానికి డజనుకు పైగా పునర్వినియోగ భాగాలు నిర్మించబడ్డాయి.
గ్లిఫికాన్స్
అందుబాటులో ఉన్న గ్లిఫ్లు
Glyphicon Halflings సెట్ నుండి ఫాంట్ ఆకృతిలో 250కి పైగా గ్లిఫ్లను కలిగి ఉంటుంది. Glyphicons Halflings సాధారణంగా ఉచితంగా అందుబాటులో ఉండవు, కానీ వాటి సృష్టికర్త వాటిని బూట్స్ట్రాప్ కోసం ఉచితంగా అందుబాటులో ఉంచారు. కృతజ్ఞతగా, సాధ్యమైనప్పుడల్లా మీరు Glyphicons కి తిరిగి లింక్ను చేర్చవలసిందిగా మాత్రమే మేము అడుగుతున్నాము .
glyphicon glyphicon-నక్షత్రం
glyphicon glyphicon-plus
గ్లిఫికాన్ గ్లిఫికాన్-యూరో
glyphicon glyphicon-eur
glyphicon glyphicon-మైనస్
glyphicon glyphicon-క్లౌడ్
glyphicon glyphicon-ఎన్వలప్
glyphicon glyphicon-పెన్సిల్
glyphicon glyphicon-గ్లాస్
glyphicon glyphicon-సంగీతం
glyphicon glyphicon-శోధన
glyphicon glyphicon-గుండె
glyphicon glyphicon-star
glyphicon glyphicon-star-ఖాళీ
glyphicon glyphicon-యూజర్
glyphicon glyphicon-చిత్రం
glyphicon glyphicon-th-large
glyphicon glyphicon-వ
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-తొలగించు
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-సిగ్నల్
glyphicon glyphicon-cog
glyphicon glyphicon-ట్రాష్
glyphicon glyphicon-హోమ్
glyphicon glyphicon-ఫైల్
glyphicon glyphicon-సమయం
glyphicon glyphicon-రోడ్
glyphicon glyphicon-download-alt
glyphicon glyphicon-డౌన్లోడ్
glyphicon glyphicon-అప్లోడ్
glyphicon glyphicon-ఇన్బాక్స్
glyphicon glyphicon-play-circle
glyphicon glyphicon-రిపీట్
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-జెండా
glyphicon glyphicon-హెడ్ఫోన్లు
glyphicon glyphicon-వాల్యూమ్-ఆఫ్
glyphicon glyphicon-వాల్యూమ్-డౌన్
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-బార్కోడ్
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-బుక్
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-కెమెరా
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-ఇటాలిక్
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-జాబితా
glyphicon glyphicon-ఇండెంట్-ఎడమ
glyphicon glyphicon-ఇండెంట్-కుడి
glyphicon glyphicon-facetime-video
glyphicon glyphicon-చిత్రం
glyphicon glyphicon-map-marker
glyphicon glyphicon-సర్దుబాటు
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-షేర్
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-ఎజెక్ట్
glyphicon glyphicon-chevron-left
గ్లిఫికాన్ గ్లిఫికాన్-చెవ్రాన్-కుడి
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-తొలగింపు-సంకేతం
glyphicon glyphicon-ok-sign
glyphicon glyphicon-ప్రశ్న-సంకేతం
glyphicon glyphicon-info-sign
glyphicon glyphicon-స్క్రీన్షాట్
glyphicon glyphicon-తొలగించు-వృత్తం
glyphicon glyphicon-ok-వృత్తం
glyphicon glyphicon-ban-circle
glyphicon glyphicon-బాణం-ఎడమ
glyphicon glyphicon-బాణం-కుడి
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-ఆశ్చర్య-సంకేతం
glyphicon glyphicon-బహుమతి
glyphicon glyphicon-leaf
glyphicon glyphicon-అగ్ని
glyphicon glyphicon-కన్ను తెరవండి
glyphicon glyphicon-కన్ను దగ్గరగా
glyphicon glyphicon-హెచ్చరిక-సంకేతం
glyphicon glyphicon-విమానం
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-ఫోల్డర్-క్లోజ్
glyphicon glyphicon-ఫోల్డర్-ఓపెన్
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bulhorn
glyphicon glyphicon-బెల్
glyphicon glyphicon-సర్టిఫికేట్
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-చేతి-కుడి
glyphicon glyphicon-చేతి-ఎడమ
glyphicon glyphicon-హ్యాండ్-అప్
glyphicon glyphicon-హ్యాండ్-డౌన్
glyphicon glyphicon-వృత్తం-బాణం-కుడి
glyphicon glyphicon-వృత్తం-బాణం-ఎడమ
glyphicon glyphicon-వృత్తం-బాణం-పైకి
glyphicon glyphicon-వృత్తం-బాణం-దిగువ
glyphicon glyphicon-globe
గ్లిఫికాన్ గ్లిఫికాన్-రెంచ్
glyphicon glyphicon-పనులు
glyphicon glyphicon-వడపోత
glyphicon glyphicon-బ్రీఫ్కేస్
glyphicon glyphicon-పూర్తి స్క్రీన్
glyphicon glyphicon-డ్యాష్బోర్డ్
glyphicon glyphicon-paperclip
glyphicon glyphicon-గుండె-ఖాళీ
glyphicon glyphicon-link
glyphicon glyphicon-ఫోన్
గ్లిఫికాన్ గ్లిఫికాన్-పుష్పిన్
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
గ్లిఫికాన్ గ్లిఫికాన్-క్రమబద్ధీకరణ
గ్లిఫికాన్ గ్లిఫికాన్-సార్ట్-బై-ఆల్ఫాబెట్
glyphicon glyphicon-sort-by-alphabet-alt
గ్లిఫికాన్ గ్లిఫికాన్-క్రమం వారీగా
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-tributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-తనిఖీ చేయబడలేదు
glyphicon glyphicon-విస్తరించు
గ్లిఫికాన్ గ్లిఫికాన్-కూలిపోవడం-డౌన్
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-ఫ్లాష్
glyphicon glyphicon-log-out
glyphicon glyphicon-కొత్త-విండో
glyphicon glyphicon-రికార్డు
glyphicon glyphicon-సేవ్
glyphicon glyphicon-ఓపెన్
glyphicon glyphicon-సేవ్ చేయబడింది
glyphicon glyphicon-దిగుమతి
glyphicon glyphicon-ఎగుమతి
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-ఫ్లాపీ-సేవ్ చేయబడింది
glyphicon glyphicon-ఫ్లాపీ-తొలగించు
glyphicon glyphicon-ఫ్లాపీ-సేవ్
glyphicon glyphicon-ఫ్లాపీ-ఓపెన్
glyphicon glyphicon-క్రెడిట్-కార్డ్
glyphicon glyphicon-బదిలీ
glyphicon glyphicon-కట్లరీ
glyphicon glyphicon-హెడర్
glyphicon glyphicon-కంప్రెస్డ్
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-టవర్
glyphicon glyphicon-గణాంకాలు
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-వీడియో
glyphicon glyphicon-ఉపశీర్షికలు
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-కాపీరైట్-మార్క్
glyphicon glyphicon-రిజిస్ట్రేషన్-మార్క్
glyphicon glyphicon-Cloud-download
glyphicon glyphicon-Cloud-upload
glyphicon glyphicon-చెట్టు-శంఖాకార
glyphicon glyphicon-చెట్టు-ఆకురాల్చే
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-ఓపెన్-ఫైల్
glyphicon glyphicon-level-up
glyphicon glyphicon-కాపీ
glyphicon glyphicon-పేస్ట్
glyphicon glyphicon-అలర్ట్
glyphicon glyphicon-equalizer
glyphicon glyphicon-రాజు
glyphicon glyphicon-రాణి
glyphicon glyphicon-పాన్
glyphicon glyphicon-బిషప్
glyphicon glyphicon-నైట్
గ్లిఫికాన్ గ్లిఫికాన్-బేబీ-ఫార్ములా
glyphicon glyphicon-టెన్త్
glyphicon glyphicon-బ్లాక్బోర్డ్
glyphicon glyphicon-మంచం
glyphicon glyphicon-యాపిల్
glyphicon glyphicon-చెరిపివేయు
గ్లిఫికాన్ గ్లిఫికాన్-గంట గాజు
glyphicon glyphicon-దీపం
glyphicon glyphicon-నకిలీ
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-కత్తెర
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-రూబుల్
glyphicon glyphicon-rub
glyphicon glyphicon-స్కేల్
glyphicon glyphicon-ice-lolly
glyphicon గ్లిఫికాన్-ఐస్-లాలీ-రుచి
glyphicon glyphicon-విద్య
glyphicon glyphicon-ఎంపిక-క్షితిజ సమాంతర
glyphicon glyphicon-ఎంపిక-నిలువు
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-నూనె
glyphicon glyphicon-ధాన్యం
glyphicon glyphicon-సన్ గ్లాసెస్
glyphicon glyphicon-text-size
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-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-త్రిభుజం-కుడి
glyphicon glyphicon-త్రిభుజం-ఎడమ
glyphicon glyphicon-త్రిభుజం-దిగువ
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-మెను-కుడివైపు
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
ఎలా ఉపయోగించాలి
పనితీరు కారణాల దృష్ట్యా, అన్ని చిహ్నాలకు బేస్ క్లాస్ మరియు వ్యక్తిగత ఐకాన్ క్లాస్ అవసరం. ఉపయోగించడానికి, కింది కోడ్ను ఎక్కడైనా ఉంచండి. సరైన పాడింగ్ కోసం చిహ్నం మరియు వచనం మధ్య ఖాళీని ఉంచాలని నిర్ధారించుకోండి.
ఇతర భాగాలతో కలపవద్దు
ఐకాన్ తరగతులు నేరుగా ఇతర భాగాలతో కలపబడవు. అదే మూలకంపై ఇతర తరగతులతో పాటు వాటిని ఉపయోగించకూడదు. బదులుగా, ఒక సమూహాన్ని జోడించి <span>, చిహ్నం తరగతులను వర్తింపజేయండి <span>.
ఖాళీ మూలకాలపై మాత్రమే ఉపయోగం కోసం
టెక్స్ట్ కంటెంట్ లేని మరియు చైల్డ్ ఎలిమెంట్స్ లేని ఎలిమెంట్స్పై మాత్రమే ఐకాన్ క్లాస్లను ఉపయోగించాలి.
చిహ్నం ఫాంట్ స్థానాన్ని మార్చడం
../fonts/సంకలనం చేయబడిన CSS ఫైల్లకు సంబంధించి ఐకాన్ ఫాంట్ ఫైల్లు డైరెక్టరీలో ఉన్నాయని బూట్స్ట్రాప్ ఊహిస్తుంది . ఆ ఫాంట్ ఫైల్లను తరలించడం లేదా పేరు మార్చడం అంటే CSSని మూడు మార్గాలలో ఒకదానిలో నవీకరించడం:
మూలం తక్కువ ఫైల్లలో @icon-font-pathమరియు/లేదా వేరియబుల్లను మార్చండి .@icon-font-name
మీ నిర్దిష్ట డెవలప్మెంట్ సెటప్కు సరిపోయే ఏదైనా ఎంపికను ఉపయోగించండి.
యాక్సెస్ చేయగల చిహ్నాలు
సహాయక సాంకేతికతల యొక్క ఆధునిక సంస్కరణలు CSS ఉత్పత్తి చేయబడిన కంటెంట్తో పాటు నిర్దిష్ట యూనికోడ్ అక్షరాలను ప్రకటిస్తాయి. స్క్రీన్ రీడర్లలో అనాలోచిత మరియు గందరగోళ అవుట్పుట్ను నివారించడానికి (ముఖ్యంగా చిహ్నాలను పూర్తిగా అలంకరణ కోసం ఉపయోగించినప్పుడు), మేము వాటిని aria-hidden="true"లక్షణంతో దాచిపెడతాము.
మీరు అర్థాన్ని తెలియజేయడానికి చిహ్నాన్ని ఉపయోగిస్తుంటే (అలంకరణ మూలకం వలె కాకుండా), ఈ అర్థం సహాయక సాంకేతికతలకు కూడా తెలియజేయబడిందని నిర్ధారించుకోండి - ఉదాహరణకు, .sr-onlyతరగతితో దృశ్యమానంగా దాచబడిన అదనపు కంటెంట్ను చేర్చండి.
మీరు ఏ ఇతర టెక్స్ట్ లేకుండా నియంత్రణలను సృష్టిస్తుంటే ( <button>ఐకాన్ను మాత్రమే కలిగి ఉంటుంది), మీరు ఎల్లప్పుడూ నియంత్రణ యొక్క ప్రయోజనాన్ని గుర్తించడానికి ప్రత్యామ్నాయ కంటెంట్ను అందించాలి, తద్వారా సహాయక సాంకేతికతలను ఉపయోగించే వినియోగదారులకు ఇది అర్ధమవుతుంది. ఈ సందర్భంలో, మీరు aria-labelనియంత్రణలోనే ఒక లక్షణాన్ని జోడించవచ్చు.
ఉదాహరణలు
టూల్బార్, నావిగేషన్ లేదా ముందుగా రూపొందించిన ఫారమ్ ఇన్పుట్ల కోసం బటన్లు, బటన్ సమూహాలలో వాటిని ఉపయోగించండి.
సహాయక సాంకేతికతలను ఉపయోగించే వినియోగదారులకు ఈ సూచనను అందించడానికి అదనపు వచనంతో, ఇది ఎర్రర్ మెసేజ్ అని తెలియజేయడానికి హెచ్చరికలో ఉపయోగించే చిహ్నం ..sr-only
లోపం:చెల్లుబాటు అయ్యే ఇమెయిల్ చిరునామాను నమోదు చేయండి
డ్రాప్డౌన్ ట్రిగ్గర్ మరియు డ్రాప్డౌన్ మెను లోపల .dropdownలేదా ప్రకటించే మరొక మూలకాన్ని చుట్టండి position: relative;. ఆపై మెను యొక్క HTMLని జోడించండి.
డిఫాల్ట్గా, డ్రాప్డౌన్ మెను స్వయంచాలకంగా ఎగువ నుండి 100% దాని పేరెంట్కి ఎడమ వైపున ఉంచబడుతుంది. డ్రాప్డౌన్ మెనుని కుడికి సమలేఖనం .dropdown-menu-rightచేయడానికి a కి జోడించండి ..dropdown-menu
అదనపు స్థానాలు అవసరం కావచ్చు
పత్రం యొక్క సాధారణ ప్రవాహంలో CSS ద్వారా డ్రాప్డౌన్లు స్వయంచాలకంగా ఉంచబడతాయి. దీనర్థం డ్రాప్డౌన్లు నిర్దిష్ట overflowలక్షణాలతో తల్లిదండ్రులు కత్తిరించబడవచ్చు లేదా వీక్షణపోర్ట్కు వెలుపల కనిపించవచ్చు. ఈ సమస్యలు తలెత్తినప్పుడు మీ స్వంతంగా పరిష్కరించండి.
విస్మరించబడిన .pull-rightఅమరిక
v3.1.0 నాటికి, మేము .pull-rightడ్రాప్డౌన్ మెనుల్లో విస్మరించాము. మెనుని కుడి-సమలేఖనం చేయడానికి, ఉపయోగించండి .dropdown-menu-right. నావ్బార్లోని కుడి-సమలేఖనం చేయబడిన nav భాగాలు మెనుని స్వయంచాలకంగా సమలేఖనం చేయడానికి ఈ తరగతి యొక్క మిక్సిన్ వెర్షన్ను ఉపయోగిస్తాయి. దాన్ని భర్తీ చేయడానికి, ఉపయోగించండి .dropdown-menu-left.
శీర్షికలు
ఏదైనా డ్రాప్డౌన్ మెనులో చర్యల విభాగాలను లేబుల్ చేయడానికి హెడర్ను జోడించండి.
బటన్ల శ్రేణిని ఒకే లైన్లో బటన్ సమూహంతో సమూహపరచండి. మా బటన్ల ప్లగ్ఇన్తో ఐచ్ఛిక JavaScript రేడియో మరియు చెక్బాక్స్ శైలి ప్రవర్తనను జోడించండి .
బటన్ సమూహాలలో టూల్టిప్లు & పాపవర్లకు ప్రత్యేక సెట్టింగ్ అవసరం
ఒక లోపు మూలకాలపై టూల్టిప్లు లేదా పాప్ఓవర్లను ఉపయోగిస్తున్నప్పుడు , అవాంఛిత దుష్ప్రభావాలను నివారించే .btn-groupఎంపికను మీరు పేర్కొనాలి (ఎలిమెంట్ విస్తృతంగా పెరగడం మరియు/లేదా టూల్టిప్ లేదా పాప్ఓవర్ ట్రిగ్గర్ అయినప్పుడు దాని గుండ్రని మూలలను కోల్పోవడం వంటివి).container: 'body'
స్క్రీన్ రీడర్ల వంటి సహాయక సాంకేతికతల కోసం, బటన్ల శ్రేణి సమూహం చేయబడిందని తెలియజేయడానికి, తగిన roleలక్షణాన్ని అందించడం అవసరం. బటన్ సమూహాల కోసం, ఇది role="group", టూల్బార్లు ఒక కలిగి ఉండాలి role="toolbar".
ఒక మినహాయింపు ఒకే నియంత్రణను కలిగి ఉన్న సమూహాలు (ఉదాహరణకు మూలకాలతో సమర్థించబడిన బటన్ సమూహాలు<button> ) లేదా డ్రాప్డౌన్.
roleఅదనంగా, సమూహాలు మరియు టూల్బార్లకు స్పష్టమైన లేబుల్ ఇవ్వాలి, ఎందుకంటే సరైన లక్షణం ఉన్నప్పటికీ చాలా సహాయక సాంకేతికతలు వాటిని ప్రకటించవు . ఇక్కడ అందించిన ఉదాహరణలలో, మేము ఉపయోగిస్తాము aria-label, కానీ ప్రత్యామ్నాయాలను aria-labelledbyకూడా ఉపయోగించవచ్చు.
ప్రాథమిక ఉదాహరణ
.btnఇన్ తో బటన్ల శ్రేణిని చుట్టండి .btn-group.
బటన్ టూల్ బార్
మరింత సంక్లిష్టమైన భాగాల కోసం <div class="btn-group">సెట్లను కలపండి .<div class="btn-toolbar">
సైజింగ్
సమూహంలోని ప్రతి బటన్కు బటన్ సైజింగ్ తరగతులను వర్తింపజేయడానికి బదులుగా, బహుళ సమూహాలను గూడు కట్టుకునేటప్పుడు సహా .btn-group-*ప్రతి ఒక్కదానికి జోడించండి..btn-group
గూడు కట్టడం
మీరు బటన్ల శ్రేణితో డ్రాప్డౌన్ మెనులను కలపాలనుకున్నప్పుడు .btn-groupమరొక దానిలో ఉంచండి ..btn-group
బటన్ల సమూహాన్ని దాని పేరెంట్ యొక్క మొత్తం వెడల్పును విస్తరించడానికి సమాన పరిమాణాలలో సాగదీయండి. బటన్ సమూహంలోని బటన్ డ్రాప్డౌన్లతో కూడా పని చేస్తుంది.
సరిహద్దులను నిర్వహించడం
బటన్లను సమర్థించడానికి ఉపయోగించే నిర్దిష్ట HTML మరియు CSS కారణంగా (అంటే display: table-cell), వాటి మధ్య సరిహద్దులు రెట్టింపు అవుతాయి. సాధారణ బటన్ సమూహాలలో, margin-left: -1pxసరిహద్దులను తీసివేయడానికి బదులుగా వాటిని పేర్చడానికి ఉపయోగించబడుతుంది. అయితే, marginతో పని లేదు display: table-cell. ఫలితంగా, బూట్స్ట్రాప్కు మీ అనుకూలీకరణలను బట్టి, మీరు సరిహద్దులను తీసివేయవచ్చు లేదా మళ్లీ రంగు వేయవచ్చు.
IE8 మరియు సరిహద్దులు
ఇంటర్నెట్ ఎక్స్ప్లోరర్ 8 జస్టిఫైడ్ బటన్ గ్రూప్లోని బటన్లపై సరిహద్దులను అందించదు, అది ఆన్లో ఉన్నా <a>లేదా <button>ఎలిమెంట్స్ అయినా. దాన్ని పొందడానికి, ప్రతి బటన్ను మరొక దానిలో చుట్టండి .btn-group.
మూలకాలు బటన్ల వలె పని చేయడానికి <a>ఉపయోగించినట్లయితే - పేజీలోని కార్యాచరణను ట్రిగ్గర్ చేయడం, ప్రస్తుత పేజీలోని మరొక పత్రం లేదా విభాగానికి నావిగేట్ చేయడం కంటే - వాటికి తగినది కూడా ఇవ్వాలి role="button".
<button>అంశాలతో _
<button>మూలకాలతో సమర్థించబడిన బటన్ సమూహాలను ఉపయోగించడానికి , మీరు ప్రతి బటన్ను తప్పనిసరిగా బటన్ సమూహంలో చుట్టాలి . చాలా బ్రౌజర్లు మూలకాలకు సమర్థన కోసం మా CSSని సరిగ్గా వర్తింపజేయవు <button>, కానీ మేము బటన్ డ్రాప్డౌన్లకు మద్దతు ఇస్తున్నందున, మేము దాని చుట్టూ పని చేయవచ్చు.
బటన్ డ్రాప్డౌన్లు
డ్రాప్డౌన్ మెనుని a లోపల ఉంచడం ద్వారా .btn-groupమరియు సరైన మెను మార్కప్ను అందించడం ద్వారా దాన్ని ట్రిగ్గర్ చేయడానికి ఏదైనా బటన్ని ఉపయోగించండి.
ఏదైనా టెక్స్ట్-ఆధారిత టెక్స్ట్కు ముందు, తర్వాత లేదా రెండు వైపులా టెక్స్ట్ లేదా బటన్లను జోడించడం ద్వారా ఫారమ్ నియంత్రణలను విస్తరించండి <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
మేము ఒకే ఇన్పుట్ సమూహంలో బహుళ ఫారమ్-నియంత్రణలకు మద్దతు ఇవ్వము.
సైజింగ్
సాపేక్ష ఫారమ్ సైజింగ్ తరగతులను .input-groupదానికదే జోడించండి మరియు లోపల ఉన్న కంటెంట్లు స్వయంచాలకంగా పరిమాణం మార్చబడతాయి-ప్రతి మూలకంపై ఫారమ్ నియంత్రణ పరిమాణ తరగతులను పునరావృతం చేయవలసిన అవసరం లేదు.
చెక్బాక్స్లు మరియు రేడియో యాడ్ఆన్లు
ఏదైనా చెక్బాక్స్ లేదా రేడియో ఎంపికను ఇన్పుట్ గ్రూప్ యాడ్ఆన్లో టెక్స్ట్కు బదులుగా ఉంచండి.
బటన్ యాడ్ఆన్లు
ఇన్పుట్ గ్రూపులలోని బటన్లు కొంచెం భిన్నంగా ఉంటాయి మరియు ఒక అదనపు స్థాయి గూడు అవసరం. బదులుగా .input-group-addon, మీరు .input-group-btnబటన్లను చుట్టడానికి ఉపయోగించాల్సి ఉంటుంది. ఓవర్రైడ్ చేయలేని డిఫాల్ట్ బ్రౌజర్ శైలుల కారణంగా ఇది అవసరం.
డ్రాప్డౌన్లతో బటన్లు
విభజించబడిన బటన్లు
బహుళ బటన్లు
మీరు ప్రతి వైపు ఒక యాడ్-ఆన్ను మాత్రమే కలిగి ఉండగలరు, మీరు ఒకే లోపల బహుళ బటన్లను కలిగి ఉండవచ్చు .input-group-btn.
నవ్స్
బూట్స్ట్రాప్లో అందుబాటులో ఉన్న నావ్లు బేస్ .navక్లాస్తో ప్రారంభించి, అలాగే షేర్డ్ స్టేట్లను షేర్ చేసిన మార్కప్ను కలిగి ఉన్నాయి. ప్రతి శైలి మధ్య మారడానికి మాడిఫైయర్ తరగతులను మార్చుకోండి.
ట్యాబ్ ప్యానెల్ల కోసం navsని ఉపయోగించడానికి JavaScript ట్యాబ్ల ప్లగ్ఇన్ అవసరం
నావిగేషన్గా ఉపయోగించే నావ్లను యాక్సెస్ చేయగలిగేలా చేయండి
మీరు నావిగేషన్ బార్ను అందించడానికి navsని ఉపయోగిస్తుంటే, role="navigation"యొక్క అత్యంత లాజికల్ పేరెంట్ కంటైనర్కు aని జోడించాలని నిర్ధారించుకోండి లేదా మొత్తం నావిగేషన్ చుట్టూ <ul>ఒక మూలకాన్ని చుట్టండి. <nav>పాత్రను దానికే జోడించవద్దు <ul>, ఇది సహాయక సాంకేతికతల ద్వారా వాస్తవ జాబితాగా ప్రకటించబడకుండా నిరోధిస్తుంది.
ట్యాబ్లు
తరగతికి బేస్ క్లాస్ .nav-tabsఅవసరమని గమనించండి ..nav
తో 768px కంటే ఎక్కువ వెడల్పు ఉన్న స్క్రీన్ల వద్ద సులభంగా ట్యాబ్లు లేదా మాత్రలను వారి పేరెంట్కి సమాన వెడల్పుతో తయారు చేయండి .nav-justified. చిన్న స్క్రీన్లలో, nav లింక్లు పేర్చబడి ఉంటాయి.
జస్టిఫైడ్ navbar nav లింక్లకు ప్రస్తుతం మద్దతు లేదు.
సఫారి మరియు రెస్పాన్సివ్ జస్టిఫైడ్ navs
v9.1.2 నాటికి, Safari ఒక బగ్ను ప్రదర్శిస్తుంది, దీనిలో మీ బ్రౌజర్ని క్షితిజ సమాంతరంగా మార్చడం వలన రిఫ్రెష్ చేసిన తర్వాత క్లియర్ చేయబడిన జస్టిఫైడ్ navలో రెండరింగ్ లోపాలు ఏర్పడతాయి. ఈ బగ్ సమర్థించబడిన nav ఉదాహరణలో కూడా చూపబడింది .
Navbars మీ అప్లికేషన్ లేదా సైట్ కోసం నావిగేషన్ హెడర్లుగా పనిచేసే ప్రతిస్పందించే మెటా భాగాలు. అవి మొబైల్ వీక్షణలలో కుప్పకూలడం (మరియు టోగుల్ చేయగలవు) ప్రారంభమవుతాయి మరియు అందుబాటులో ఉన్న వీక్షణపోర్ట్ వెడల్పు పెరిగేకొద్దీ అడ్డంగా మారుతాయి.
జస్టిఫైడ్ navbar nav లింక్లకు ప్రస్తుతం మద్దతు లేదు.
పొంగిపొర్లుతున్న కంటెంట్
మీ నావ్బార్లోని కంటెంట్కు ఎంత స్థలం అవసరమో బూట్స్ట్రాప్కి తెలియదు కాబట్టి, మీరు కంటెంట్ను రెండవ వరుసలో చుట్టే విషయంలో సమస్యలను ఎదుర్కోవచ్చు. దీన్ని పరిష్కరించడానికి, మీరు వీటిని చేయవచ్చు:
నావ్బార్ ఐటెమ్ల మొత్తాన్ని లేదా వెడల్పును తగ్గించండి.
కూలిపోయిన మరియు క్షితిజ సమాంతర మోడ్ మధ్య మీ నావ్బార్ మారే పాయింట్ను మార్చండి. @grid-float-breakpointవేరియబుల్ను అనుకూలీకరించండి లేదా మీ స్వంత మీడియా ప్రశ్నను జోడించండి.
జావాస్క్రిప్ట్ ప్లగ్ఇన్ అవసరం
JavaScript డిసేబుల్ చేయబడి మరియు నావ్బార్ కూలిపోయేంతగా వీక్షణపోర్ట్ ఇరుకైనట్లయితే, నావ్బార్ను విస్తరించడం మరియు కంటెంట్ని వీక్షించడం అసాధ్యం .navbar-collapse.
ప్రతిస్పందించే నావ్బార్కు మీ బూట్స్ట్రాప్ వెర్షన్లో కూల్చివేత ప్లగ్ఇన్ చేర్చడం అవసరం.
కుదించిన మొబైల్ నావ్బార్ బ్రేక్పాయింట్ని మారుస్తోంది
వీక్షణపోర్ట్ కంటే ఇరుకైనప్పుడు నావ్బార్ దాని నిలువు మొబైల్ వీక్షణలోకి కుప్పకూలుతుంది @grid-float-breakpointమరియు వీక్షణపోర్ట్ కనీసం @grid-float-breakpointవెడల్పులో ఉన్నప్పుడు దాని క్షితిజ సమాంతర నాన్-మొబైల్ వీక్షణలోకి విస్తరిస్తుంది. నావ్బార్ కుప్పకూలినప్పుడు/విస్తరిస్తున్నప్పుడు నియంత్రించడానికి ఈ వేరియబుల్ను తక్కువ మూలంలో సర్దుబాటు చేయండి. డిఫాల్ట్ విలువ 768px(చిన్న "చిన్న" లేదా "టాబ్లెట్" స్క్రీన్).
నావ్బార్లను యాక్సెస్ చేయగలిగేలా చేయండి
ఒక మూలకాన్ని ఉపయోగించాలని నిర్ధారించుకోండి <nav>లేదా ఒక వంటి మరింత సాధారణ మూలకాన్ని ఉపయోగిస్తుంటే , సహాయక సాంకేతికతలను ఉపయోగించే వినియోగదారుల కోసం ఒక ల్యాండ్మార్క్ ప్రాంతంగా స్పష్టంగా గుర్తించడానికి ప్రతి నావ్బార్కు <div>aని జోడించండి .role="navigation"
బ్రాండ్ ఇమేజ్
ఒక కోసం వచనాన్ని మార్చుకోవడం ద్వారా నావ్బార్ బ్రాండ్ను మీ స్వంత చిత్రంతో భర్తీ చేయండి <img>. దాని స్వంత పాడింగ్ మరియు ఎత్తు ఉన్నందున .navbar-brand, మీరు మీ చిత్రాన్ని బట్టి కొంత CSSని భర్తీ చేయాల్సి రావచ్చు.
రూపాలు
.navbar-formఇరుకైన వీక్షణపోర్ట్లలో సరైన నిలువు అమరిక మరియు కుదించిన ప్రవర్తన కోసం ఫారమ్ కంటెంట్ను లోపల ఉంచండి . నావ్బార్ కంటెంట్లో అది ఎక్కడ నివసిస్తుందో నిర్ణయించడానికి సమలేఖన ఎంపికలను ఉపయోగించండి.
ముందస్తుగా , మిక్సిన్ ద్వారా .navbar-formదాని కోడ్లో ఎక్కువ భాగాన్ని షేర్ చేస్తుంది . ఇన్పుట్ గ్రూపుల వంటి కొన్ని ఫారమ్ నియంత్రణలు, నావ్బార్లో సరైన వెడల్పులను చూపడం అవసరం కావచ్చు..form-inline
మీరు ప్రతి ఇన్పుట్కు లేబుల్ని చేర్చకుంటే స్క్రీన్ రీడర్లు మీ ఫారమ్లతో సమస్యను ఎదుర్కొంటారు. ఈ ఇన్లైన్ ఫారమ్ల కోసం, మీరు .sr-onlyక్లాస్ని ఉపయోగించి లేబుల్లను దాచవచ్చు. aria-label, aria-labelledbyలేదా titleలక్షణం వంటి సహాయక సాంకేతికతలకు లేబుల్ని అందించడానికి మరిన్ని ప్రత్యామ్నాయ పద్ధతులు ఉన్నాయి . వీటిలో ఏదీ లేనట్లయితే, స్క్రీన్ రీడర్లు placeholderఅట్రిబ్యూట్ని ఉపయోగించడాన్ని ఆశ్రయించవచ్చు, అయితే placeholderఇతర లేబులింగ్ పద్ధతులకు ప్రత్యామ్నాయంగా ఉపయోగించడం మంచిది కాదని గమనించండి.
బటన్లు
నావ్బార్లో నిలువుగా మధ్యలో ఉంచడానికి a లో లేని మూలకాలకు .navbar-btnతరగతిని జోడించండి .<button><form>
సందర్భ-నిర్దిష్ట వినియోగం
స్టాండర్డ్ బటన్ క్లాస్ల వలె , .navbar-btnఆన్ <a>మరియు <input>ఎలిమెంట్లను ఉపయోగించవచ్చు. ఏదేమైనప్పటికీ, లోపు మూలకాలపై .navbar-btnప్రామాణిక బటన్ క్లాస్లు లేదా ఉపయోగించకూడదు .<a>.navbar-nav
వచనం
టెక్స్ట్ స్ట్రింగ్లను ఎలిమెంట్లో వ్రాప్ చేయండి .navbar-text, సాధారణంగా <p>సరైన లీడింగ్ మరియు రంగు కోసం ట్యాగ్పై.
నాన్-నేవ్ లింక్లు
సాధారణ navbar నావిగేషన్ కాంపోనెంట్లో లేని ప్రామాణిక లింక్లను ఉపయోగించే వ్యక్తుల .navbar-linkకోసం, డిఫాల్ట్ మరియు విలోమ నావ్బార్ ఎంపికల కోసం సరైన రంగులను జోడించడానికి తరగతిని ఉపయోగించండి.
కాంపోనెంట్ అమరిక
.navbar-leftలేదా .navbar-rightయుటిలిటీ తరగతులను ఉపయోగించి nav లింక్లు, ఫారమ్లు, బటన్లు లేదా వచనాన్ని సమలేఖనం చేయండి . రెండు తరగతులు పేర్కొన్న దిశలో CSS ఫ్లోట్ను జోడిస్తాయి. ఉదాహరణకు, nav లింక్లను సమలేఖనం చేయడానికి, <ul>వర్తించే సంబంధిత యుటిలిటీ క్లాస్తో వాటిని వేరుగా ఉంచండి.
ఈ తరగతులు మరియు మిక్సిన్-ఎడ్ వెర్షన్లు .pull-left, .pull-rightకానీ పరికర పరిమాణాలలో నావ్బార్ భాగాలను సులభంగా నిర్వహించడం కోసం మీడియా ప్రశ్నలకు ఇవి స్కోప్ చేయబడతాయి.
బహుళ భాగాలను కుడి సమలేఖనం చేయడం
.navbar-rightNavbars ప్రస్తుతం బహుళ తరగతులతో పరిమితిని కలిగి ఉంది . కంటెంట్ని సరిగ్గా ఖాళీ చేయడానికి, మేము చివరి .navbar-rightమూలకంపై ప్రతికూల మార్జిన్ని ఉపయోగిస్తాము. ఆ తరగతిని ఉపయోగించే బహుళ అంశాలు ఉన్నప్పుడు, ఈ మార్జిన్లు ఉద్దేశించిన విధంగా పని చేయవు.
మేము ఆ భాగాన్ని v4లో తిరిగి వ్రాయగలిగినప్పుడు మేము దీన్ని మళ్లీ సందర్శిస్తాము.
ఎగువకు పరిష్కరించబడింది
ఒక లేదా మధ్యలో మరియు ప్యాడ్ నావ్బార్ కంటెంట్ని జోడించండి .navbar-fixed-topమరియు చేర్చండి ..container.container-fluid
బాడీ పాడింగ్ అవసరం
స్థి�� నావ్బార్ మీ ఇతర కంటెంట్ను అతివ్యాప్తి చేస్తుంది, మీరు paddingఎగువ భాగానికి జోడిస్తే తప్ప <body>. మీ స్వంత విలువలను ప్రయత్నించండి లేదా దిగువన ఉన్న మా స్నిప్పెట్ని ఉపయోగించండి. చిట్కా: డిఫాల్ట్గా, నావ్బార్ 50px ఎత్తులో ఉంటుంది.
కోర్ బూట్స్ట్రాప్ CSS తర్వాత దీన్ని చేర్చారని నిర్ధారించుకోండి .
దిగువకు పరిష్కరించబడింది
ఒక లేదా మధ్యలో మరియు ప్యాడ్ నావ్బార్ కంటెంట్ని జోడించండి .navbar-fixed-bottomమరియు చేర్చండి ..container.container-fluid
బాడీ పాడింగ్ అవసరం
స్థిర నావ్బార్ మీ ఇతర కంటెంట్ను అతివ్యాప్తి చేస్తుంది, మీరు paddingదిగువకు జోడిస్తే తప్ప <body>. మీ స్వంత విలువలను ప్రయత్నించండి లేదా దిగువన ఉన్న మా స్నిప్పెట్ని ఉపయోగించండి. చిట్కా: డిఫాల్ట్గా, నావ్బార్ 50px ఎత్తులో ఉంటుంది.
కోర్ బూట్స్ట్రాప్ CSS తర్వాత దీన్ని చేర్చారని నిర్ధారించుకోండి .
స్టాటిక్ టాప్
ఒక లేదా మధ్యలో మరియు ప్యాడ్ నావ్బార్ కంటెంట్ని జోడించడం .navbar-static-topమరియు చేర్చడం ద్వారా పేజీతో పాటు స్క్రోల్ చేసే పూర్తి-వెడల్పు నావ్బార్ను సృష్టించండి ..container.container-fluid
తరగతుల మాదిరిగా కాకుండా .navbar-fixed-*, మీరు పై ఎలాంటి పాడింగ్ను మార్చాల్సిన అవసరం లేదు body.
విలోమ నావ్బార్
జోడించడం ద్వారా నావ్బార్ రూపాన్ని సవరించండి .navbar-inverse.
బ్రెడ్ క్రంబ్స్
నావిగేషనల్ సోపానక్రమంలో ప్రస్తుత పేజీ స్థానాన్ని సూచించండి.
:beforeసెపరేటర్లు మరియు ద్వారా CSSలో స్వయంచాలకంగా జోడించబడతాయి content.
Rdio నుండి ప్రేరణ పొందిన సరళమైన పేజినేషన్, యాప్లు మరియు శోధన ఫలితాల కోసం గొప్పది. పెద్ద బ్లాక్ను కోల్పోవడం కష్టం, సులభంగా కొలవదగినది మరియు పెద్ద క్లిక్ ప్రాంతాలను అందిస్తుంది.
పేజినేషన్ కాంపోనెంట్ని లేబుల్ చేయడం
<nav>స్క్రీన్ రీడర్లు మరియు ఇతర సహాయక సాంకేతికతలకు నావిగేషన్ విభాగంగా గుర్తించడానికి పేజినేషన్ కాంపోనెంట్ను ఎలిమెంట్తో చుట్టి ఉండాలి . అదనంగా, ఒక పేజీ ఇప్పటికే అటువంటి నావిగేషన్ విభాగాలను ఒకటి కంటే ఎక్కువ కలిగి ఉండే అవకాశం ఉన్నందున (హెడర్లోని ప్రాథమిక నావిగేషన్ లేదా సైడ్బార్ నావిగేషన్ వంటివి), దాని ప్రయోజనాన్ని ప్రతిబింబించే వివరణాత్మకంగా aria-labelఅందించడం మంచిది. <nav>ఉదాహరణకు, శోధన ఫలితాల సమితి మధ్య నావిగేట్ చేయడానికి పేజినేషన్ భాగం ఉపయోగించబడితే, తగిన లేబుల్ కావచ్చు aria-label="Search results pages".
వికలాంగ మరియు క్రియాశీల రాష్ట్రాలు
వివిధ పరిస్థితుల కోసం లింక్లు అనుకూలీకరించబడతాయి. .disabledక్లిక్ చేయలేని లింక్ల కోసం మరియు .activeప్రస్తుత పేజీని సూచించడానికి ఉపయోగించండి .
<span>ఉద్దేశించిన స్టైల్లను నిలుపుకుంటూ క్లిక్ ఫంక్షనాలిటీని తీసివేయడానికి, మీరు యాక్టివ్ లేదా డిసేబుల్ యాంకర్లను మార్చుకోవాలని లేదా మునుపటి/తదుపరి బాణాల విషయంలో యాంకర్ను వదిలివేయాలని మేము సిఫార్సు చేస్తున్నాము.
సైజింగ్
పెద్ద లేదా చిన్న పేజీని ఇష్టపడతారా? జోడించు .pagination-lgలేదా .pagination-smఅదనపు పరిమాణాల కోసం.
పేజర్
తేలికపాటి మార్కప్ మరియు స్టైల్లతో సరళమైన పేజినేషన్ అమలుల కోసం త్వరిత మునుపటి మరియు తదుపరి లింక్లు. బ్లాగులు లేదా మ్యాగజైన్ల వంటి సాధారణ సైట్లకు ఇది చాలా బాగుంది.
డిఫాల్ట్ ఉదాహరణ
డిఫాల్ట్గా, పేజర్ లింక్లను కేంద్రీకరిస్తుంది.
సమలేఖనం చేయబడిన లింక్లు
ప్రత్యామ్నాయంగా, మీరు ప్రతి లింక్ను వైపులా సమలేఖనం చేయవచ్చు:
ఐచ్ఛిక వికలాంగ స్థితి
పేజర్ లింక్లు పేజినేషన్ .disabledనుండి సాధారణ యుటిలిటీ క్లాస్ను కూడా ఉపయోగిస్తాయి.
లేబుల్స్
ఉదాహరణ
ఉదాహరణ శీర్షిక కొత్తది
ఉదాహరణ శీర్షిక కొత్తది
ఉదాహరణ శీర్షిక కొత్తది
ఉదాహరణ శీర్షిక కొత్తది
ఉదాహరణ శీర్షిక కొత్తది
ఉదాహరణ శీర్షిక కొత్తది
అందుబాటులో ఉన్న వైవిధ్యాలు
లేబుల్ రూపాన్ని మార్చడానికి దిగువ పేర్కొన్న మాడిఫైయర్ తరగతుల్లో దేనినైనా జోడించండి.
డిఫాల్ట్ ప్రాథమిక విజయ సమాచారం హెచ్చరిక ప్రమాదం
టన్నుల కొద్దీ లేబుల్లు ఉన్నాయా?
మీరు ఇరుకైన కంటైనర్లో డజన్ల కొద్దీ ఇన్లైన్ లేబుల్లను కలిగి ఉన్నప్పుడు రెండరింగ్ సమస్యలు తలెత్తుతాయి, ఒక్కొక్కటి దాని స్వంత inline-blockమూలకాన్ని (ఐకాన్ లాగా) కలిగి ఉంటాయి. దీని చుట్టూ మార్గం సెట్ చేయబడింది display: inline-block;. సందర్భం మరియు ఉదాహరణ కోసం, #13219 చూడండి .
బ్యాడ్జ్లు
<span class="badge">లింక్లు, బూట్స్ట్రాప్ navలు మరియు మరిన్నింటికి జోడించడం ద్వారా కొత్త లేదా చదవని అంశాలను సులభంగా హైలైట్ చేయండి.
జంబోట్రాన్ను పూర్తి వెడల్పుగా చేయడానికి మరియు గుండ్రని మూలలు లేకుండా చేయడానికి, దాన్ని అన్నింటి వెలుపల ఉంచండి .containerమరియు బదులుగా లోపలి భాగాన్ని జోడించండి .container.
పేజీ శీర్షిక
h1పేజీలోని కంటెంట్ని సముచితంగా ఖాళీ చేయడానికి మరియు సెగ్మెంట్ చేయడానికి ఒక సాధారణ షెల్ . ఇది h1's డిఫాల్ట్ smallమూలకం, అలాగే చాలా ఇతర భాగాలను (అదనపు స్టైల్స్తో) ఉపయోగించుకోవచ్చు.
హెడర్ కోసం ఉదాహరణ పేజీ హెడర్ సబ్టెక్స్ట్
సూక్ష్మచిత్రాలు
చిత్రాలు, వీడియోలు, వచనం మరియు మరిన్నింటి గ్రిడ్లను సులభంగా ప్రదర్శించడానికి థంబ్నెయిల్ భాగంతో బూట్స్ట్రాప్ యొక్క గ్రిడ్ సిస్టమ్ను విస్తరించండి.
మీరు వివిధ ఎత్తులు మరియు/లేదా వెడల్పుల సూక్ష్మచిత్రాల Pinterest-వంటి ప్రదర్శన కోసం చూస్తున్నట్లయితే, మీరు తాపీపని , ఐసోటోప్ లేదా సాల్వటోర్ వంటి మూడవ పక్ష ప్లగ్ఇన్ని ఉపయోగించాలి .
డిఫాల్ట్ ఉదాహరణ
డిఫాల్ట్గా, బూట్స్ట్రాప్ యొక్క సూక్ష్మచిత్రాలు కనీస అవసరమైన మార్కప్తో లింక్ చేయబడిన చిత్రాలను ప్రదర్శించడానికి రూపొందించబడ్డాయి.
అనుకూల కంటెంట్
కొంచెం అదనపు మార్కప్తో, థంబ్నెయిల్లలోకి హెడ్డింగ్లు, పేరాగ్రాఫ్లు లేదా బటన్ల వంటి ఎలాంటి HTML కంటెంట్ను జోడించడం సాధ్యమవుతుంది.
థంబ్నెయిల్ లేబుల్
క్రాస్ జస్టో ఒడియో, డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్, ఎగెస్టాస్ ఎగెట్ క్వామ్. డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.
క్రాస్ జస్టో ఒడియో, డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్, ఎగెస్టాస్ ఎగెట్ క్వామ్. డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.
క్రాస్ జస్టో ఒడియో, డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్, ఎగెస్టాస్ ఎగెట్ క్వామ్. డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.
అందుబాటులో ఉన్న మరియు సౌకర్యవంతమైన హెచ్చరిక సందేశాలతో సాధారణ వినియోగదారు చర్యల కోసం సందర్భోచిత అభిప్రాయ సందేశాలను అందించండి.
ఉదాహరణలు
ప్రాథమిక హెచ్చరిక సందేశాల కోసం ఏదైనా వచనాన్ని మరియు ఐచ్ఛిక తొలగింపు బటన్ను .alertమరియు నాలుగు సందర్భోచిత తరగతుల్లో ఒకదానిని (ఉదా, ) వ్రాప్ చేయండి..alert-success
డిఫాల్ట్ క్లాస్ లేదు
హెచ్చరికలకు డిఫాల్ట్ తరగతులు లేవు, బేస్ మరియు మాడిఫైయర్ తరగతులు మాత్రమే. డిఫాల్ట్ గ్రే హెచ్చరిక చాలా అర్ధవంతం కాదు, కాబట్టి మీరు సందర్భోచిత తరగతి ద్వారా రకాన్ని పేర్కొనాలి. విజయం, సమాచారం, హెచ్చరిక లేదా ప్రమాదం నుండి ఎంచుకోండి.
బాగా చేసారు! మీరు ఈ ముఖ్యమైన హెచ్చరిక సందేశాన్ని విజయవంతంగా చదివారు.
హెడ్ అప్! ఈ హెచ్చరికకు మీ శ్రద్ధ అవసరం, కానీ ఇది చాలా ముఖ్యమైనది కాదు.
హెచ్చరిక! మిమ్మల్ని మీరు తనిఖీ చేసుకోవడం మంచిది, మీరు చాలా బాగా కనిపించడం లేదు.
ఓహ్ స్నాప్! కొన్ని అంశాలను మార్చండి మరియు మళ్లీ సమర్పించడానికి ప్రయత్నించండి.
తిరస్కరించదగిన హెచ్చరికలు
ఐచ్ఛిక .alert-dismissibleమరియు మూసివేయి బటన్ను జోడించడం ద్వారా ఏదైనా హెచ్చరికను రూపొందించండి.
సరళమైన ఇంకా సౌకర్యవంతమైన ప్రోగ్రెస్ బార్లతో వర్క్ఫ్లో లేదా చర్య యొక్క పురోగతిపై తాజా అభిప్రాయాన్ని అందించండి.
క్రాస్ బ్రౌజర్ అనుకూలత
ప్రోగ్రెస్ బార్లు వాటి కొన్ని ప్రభావాలను సాధించడానికి CSS3 పరివర్తనాలు మరియు యానిమేషన్లను ఉపయోగిస్తాయి. ఈ లక్షణాలకు Internet Explorer 9 మరియు దిగువన లేదా Firefox యొక్క పాత సంస్కరణల్లో మద్దతు లేదు. Opera 12 యానిమేషన్లకు మద్దతు ఇవ్వదు.
కంటెంట్ సెక్యూరిటీ పాలసీ (CSP) అనుకూలత
మీ వెబ్సైట్ అనుమతించని కంటెంట్ భద్రతా విధానాన్ని (CSP) కలిగి ఉంటే, దిగువ మా ఉదాహరణలలో చూపిన విధంగా ప్రోగ్రెస్ బార్ వెడల్పులను సెట్ style-src 'unsafe-inline'చేయడానికి మీరు ఇన్లైన్ లక్షణాలను ఉపయోగించలేరు . styleకఠినమైన CSP లకు అనుకూలంగా ఉండే వెడల్పులను సెట్ చేయడానికి ప్రత్యామ్నాయ పద్ధతులు కొద్దిగా అనుకూల JavaScript (అది సెట్ చేస్తుంది element.style.width) లేదా అనుకూల CSS తరగతులను ఉపయోగించడం.
ప్రాథమిక ఉదాహరణ
డిఫాల్ట్ ప్రోగ్రెస్ బార్.
60% పూర్తయింది
లేబుల్తో
కనిపించే శాతాన్ని చూపించడానికి ప్రోగ్రెస్ బార్లో నుండి క్లాస్ని <span>తీసివేయండి ..sr-only
60%
తక్కువ శాతాలకు కూడా లేబుల్ వచనం స్పష్టంగా ఉండేలా చూసుకోవడానికి, min-widthప్రోగ్రెస్ బార్కి a జోడించడాన్ని పరిగణించండి.
0%
2%
సందర్భోచిత ప్రత్యామ్నాయాలు
ప్రోగ్రెస్ బార్లు స్థిరమైన శైలుల కోసం ఒకే రకమైన బటన్ను మరియు హెచ్చరిక తరగతులను ఉపయోగిస్తాయి.
40% పూర్తి (విజయం)
20% పూర్తయింది
60% పూర్తయింది (హెచ్చరిక)
80% పూర్తి (ప్రమాదం)
చారల
చారల ప్రభావాన్ని సృష్టించడానికి గ్రేడియంట్ని ఉపయోగిస్తుంది. IE9 మరియు దిగువన అందుబాటులో లేదు.
40% పూర్తి (విజయం)
20% పూర్తయింది
60% పూర్తయింది (హెచ్చరిక)
80% పూర్తి (ప్రమాదం)
యానిమేటెడ్
కుడి నుండి ఎడమకు చారలను యానిమేట్ .activeచేయడానికి కు జోడించండి . .progress-bar-stripedIE9 మరియు దిగువన అందుబాటులో లేదు.
45% పూర్తయింది
పేర్చబడినది
.progressవాటిని పేర్చడానికి బహుళ బార్లను ఒకే విధంగా ఉంచండి .
35% పూర్తి (విజయం)
20% పూర్తయింది (హెచ్చరిక)
10% పూర్తి (ప్రమాదం)
మీడియా వస్తువు
వచన కంటెంట్తో పాటు ఎడమ లేదా కుడికి సమలేఖనం చేయబడిన చిత్రాన్ని కలిగి ఉండే వివిధ రకాల భాగాలను (బ్లాగ్ వ్యాఖ్యలు, ట్వీట్లు మొదలైనవి) నిర్మించడానికి వియుక్త ఆబ్జెక్ట్ శైలులు.
డిఫాల్ట్ మీడియా
డిఫాల్ట్ మీడియా మీడియా ఆబ్జెక్ట్ను (చిత్రాలు, వీడియో, ఆడియో) కంటెంట్ బ్లాక్కు ఎడమ లేదా కుడి వైపున ప్రదర్శిస్తుంది.
మీడియా శీర్షిక
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్లో డోనెక్ లాసినియా కంగూ ఫెలిస్.
మీడియా శీర్షిక
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్లో డోనెక్ లాసినియా కంగూ ఫెలిస్.
నెస్టెడ్ మీడియా హెడ్డింగ్
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్లో డోనెక్ లాసినియా కంగూ ఫెలిస్.
మీడియా శీర్షిక
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.
మీడియా శీర్షిక
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.
తరగతులు .pull-leftమరియు .pull-rightఉనికిలో ఉన్నాయి మరియు మునుపు మీడియా కాంపోనెంట్లో భాగంగా ఉపయోగించబడ్డాయి, కానీ v3.3.0 నాటికి ఆ ఉపయోగం కోసం నిలిపివేయబడ్డాయి. అవి ఇంచుమించుగా సమానం .media-leftమరియు , html లో తర్వాత ఉంచాలి .media-rightతప్ప ..media-right.media-body
మీడియా అమరిక
చిత్రాలు లేదా ఇతర మీడియాను ఎగువ, మధ్య లేదా దిగువకు సమలేఖనం చేయవచ్చు. డిఫాల్ట్ ఎగువ సమలేఖనం చేయబడింది.
అగ్ర సమలేఖన మీడియా
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్లో డోనెక్ లాసినియా కంగూ ఫెలిస్.
అదనపు మార్కప్తో, మీరు జాబితా లోపల మీడియాను ఉపయోగించవచ్చు (వ్యాఖ్య థ్రెడ్లు లేదా కథనాల జాబితాలకు ఉపయోగపడుతుంది).
మీడియా శీర్షిక
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.
నెస్టెడ్ మీడియా హెడ్డింగ్
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.
నెస్టెడ్ మీడియా హెడ్డింగ్
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.
నెస్టెడ్ మీడియా హెడ్డింగ్
క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.
జాబితా సమూహం
జాబితా సమూహాలు సరళమైన అంశాల జాబితాలను మాత్రమే కాకుండా, అనుకూల కంటెంట్తో సంక్లిష్టమైన వాటిని ప్రదర్శించడానికి అనువైన మరియు శక్తివంతమైన భాగం.
ప్రాథమిక ఉదాహరణ
అత్యంత ప్రాథమిక జాబితా సమూహం కేవలం జాబితా అంశాలు మరియు సరైన తరగతులతో క్రమం లేని జాబితా. అనుసరించే ఎంపికలతో లేదా అవసరమైన మీ స్వంత CSSతో దానిపై నిర్మించండి.
క్రాస్ జస్తో ఒడియో
డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్
మోర్బి లియో రిసస్
పోర్టా ఎసి కన్సెక్టరు ఎసి
వెస్టిబులం ఎట్ ఎరోస్
బ్యాడ్జ్లు
ఏదైనా జాబితా సమూహ అంశానికి బ్యాడ్జ్ల భాగాన్ని జోడించండి మరియు అది స్వయంచాలకంగా కుడి వైపున ఉంచబడుతుంది.
14క్రాస్ జస్తో ఒడియో
2డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్
1మోర్బి లియో రిసస్
లింక్ చేయబడిన అంశాలు
జాబితా ఐటెమ్లకు బదులుగా యాంకర్ ట్యాగ్లను ఉపయోగించడం ద్వారా జాబితా సమూహ అంశాలను లింక్ చేయండి (అంటే ఒక పేరెంట్కి <div>బదులుగా పేరెంట్ అని కూడా అర్థం <ul>). ప్రతి మూలకం చుట్టూ వ్యక్తిగత తల్లిదండ్రులు అవసరం లేదు.
జాబితా సమూహ అంశాలు జాబితా అంశాలకు బదులుగా బటన్లు కావచ్చు (అంటే ఒక పేరెంట్కి <div>బదులుగా పేరెంట్ అని కూడా అర్థం <ul>). ప్రతి మూలకం చుట్టూ వ్యక్తిగత తల్లిదండ్రులు అవసరం లేదు. ఇక్కడ ప్రామాణిక .btnతరగతులను ఉపయోగించవద్దు.
నిలిపివేయబడిన అంశాలు
డిజేబుల్డ్గా కనిపించడానికి దాన్ని గ్రే అవుట్కి .disabledజోడించండి ..list-group-item
ఎల్లప్పుడూ అవసరం లేనప్పటికీ, కొన్నిసార్లు మీరు మీ DOMని పెట్టెలో ఉంచాలి. ఆ పరిస్థితుల కోసం, ప్యానెల్ భాగాన్ని ప్రయత్నించండి.
ప్రాథమిక ఉదాహరణ
డిఫాల్ట్గా, .panelకొంత కంటెంట్ని కలిగి ఉండటానికి కొన్ని ప్రాథమిక అంచు మరియు పాడింగ్ని వర్తింపజేయడమే.
ప్రాథమిక ప్యానెల్ ఉదాహరణ
శీర్షికతో ప్యానెల్
తో మీ ప్యానెల్కు హెడ్డింగ్ కంటైనర్ను సులభంగా జోడించండి .panel-heading. మీరు ముందే స్టైల్ చేసిన హెడ్డింగ్ని జోడించడానికి క్లాస్తో <h1>ఏదైనా కూడా <h6>చేర్చవచ్చు . .panel-titleఅయితే, ఫాంట్ పరిమాణాలు <h1>- <h6>ద్వారా భర్తీ చేయబడ్డాయి .panel-heading.
సరైన లింక్ కలరింగ్ కోసం, లోని హెడ్డింగ్లలో లింక్లను ఉంచాలని నిర్ధారించుకోండి .panel-title.
టైటిల్ లేకుండా ప్యానెల్ శీర్షిక
ప్యానెల్ కంటెంట్
ప్యానెల్ శీర్షిక
ప్యానెల్ కంటెంట్
ఫుటర్తో ప్యానెల్
లో బటన్లు లేదా ద్వితీయ వచనాన్ని చుట్టండి .panel-footer. సందర్భోచిత వైవిధ్యాలను ఉపయోగిస్తున్నప్పుడు ప్యానెల్ ఫుటర్లు రంగులు మరియు సరిహద్దులను వారసత్వంగా పొందవని గుర్తుంచుకోండి, ఎందుకంటే అవి ముందుభాగంలో ఉండకూడదు .
ప్యానెల్ కంటెంట్
సందర్భోచిత ప్రత్యామ్నాయాలు
ఇతర భాగాల మాదిరిగానే, ఏదైనా సందర్భోచిత స్థితి తరగతులను జోడించడం ద్వారా నిర్దిష్ట సందర్భానికి సులభంగా ప్యానెల్ను మరింత అర్ధవంతం చేయండి.
ప్యానెల్ శీర్షిక
ప్యానెల్ కంటెంట్
ప్యానెల్ శీర్షిక
ప్యానెల్ కంటెంట్
ప్యానెల్ శీర్షిక
ప్యానెల్ కంటెంట్
ప్యానెల్ శీర్షిక
ప్యానెల్ కంటెంట్
ప్యానెల్ శీర్షిక
ప్యానెల్ కంటెంట్
పట్టికలతో
.tableఅతుకులు లేని డిజైన్ కోసం ప్యానెల్లో ఏదైనా సరిహద్దు లేని వాటిని జోడించండి . ఒక ఉంటే .panel-body, మేము వేరు చేయడానికి పట్టిక ఎగువన అదనపు అంచుని జోడిస్తాము.
ప్యానెల్ శీర్షిక
ఇక్కడ కొంత డిఫాల్ట్ ప్యానెల్ కంటెంట్. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్. ఏనియన్ లాసినియా బిబెండమ్ నుల్లా సెడ్ కన్సెక్టెచర్. ఏనియన్ ఇయు లియో క్వామ్. పెల్లెంటెస్క్ ఓర్నారే సెమ్ లాసినియా క్వామ్ వెనెనటిస్ వెస్టిబులం. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.
#
మొదటి పేరు
చివరి పేరు
వినియోగదారు పేరు
1
మార్క్
ఒట్టో
@mdo
2
జాకబ్
తోర్న్టన్
@కొవ్వు
3
లారీ
పక్షి
@ట్విట్టర్
ప్యానెల్ బాడీ లేకపోతే, కాంపోనెంట్ అంతరాయం లేకుండా ప్యానెల్ హెడర్ నుండి టేబుల్కి కదులుతుంది.
ఇక్కడ కొంత డిఫాల్ట్ ప్యానెల్ కంటెంట్. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్. ఏనియన్ లాసినియా బిబెండమ్ నుల్లా సెడ్ కన్సెక్టెచర్. ఏనియన్ ఇయు లియో క్వామ్. పెల్లెంటెస్క్ ఓర్నారే సెమ్ లాసినియా క్వామ్ వెనెనటిస్ వెస్టిబులం. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.
క్రాస్ జస్తో ఒడియో
డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్
మోర్బి లియో రిసస్
పోర్టా ఎసి కన్సెక్టరు ఎసి
వెస్టిబులం ఎట్ ఎరోస్
రెస్పాన్సివ్ పొందుపరచండి
ఏదైనా పరికరంలో సరిగ్గా స్కేల్ చేసే అంతర్గత నిష్పత్తిని సృష్టించడం ద్వారా వీడియో లేదా స్లైడ్షో కొలతలను కలిగి ఉన్న బ్లాక్ యొక్క వెడల్పు ఆధారంగా నిర్ణయించడానికి బ్రౌజర్లను అనుమతించండి.
నియమాలు నేరుగా <iframe>, <embed>, <video>, మరియు <object>మూలకాలకు వర్తించబడతాయి; .embed-responsive-itemమీరు ఇతర లక్షణాల కోసం స్టైలింగ్ను సరిపోల్చాలనుకున్నప్పుడు ఐచ్ఛికంగా స్పష్టమైన సంతతి తరగతిని ఉపయోగించండి .
అనుకూల చిట్కా! మేము మీ కోసం దాన్ని భర్తీ చేస్తున్నందున మీరు frameborder="0"మీ sలో చేర్చాల్సిన అవసరం లేదు .<iframe>
బావులు
డిఫాల్ట్ బాగా
ఒక మూలకానికి ఇన్సెట్ ప్రభావాన్ని అందించడానికి బావిని సాధారణ ప్రభావంగా ఉపయోగించండి.
చూడు, నేను బావిలో ఉన్నాను!
ఐచ్ఛిక తరగతులు
రెండు ఐచ్ఛిక మాడిఫైయర్ తరగతులతో ప్యాడింగ్ మరియు గుండ్రని మూలలను నియంత్రించండి.