గ్లిఫికాన్స్

అందుబాటులో ఉన్న గ్లిఫ్‌లు

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
  • తక్కువ కంపైలర్ అందించిన సంబంధిత 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>

లింక్‌ను నిలిపివేయడానికి డ్రాప్‌డౌన్‌లో .disabledaకి జోడించండి .<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">సెట్‌లను కలపండి .<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>

బటన్ డ్రాప్‌డౌన్‌లు

డ్రాప్‌డౌన్ మెనుని a లోపల ఉంచడం ద్వారా .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>

నవ్స్

బూట్‌స్ట్రాప్‌లో అందుబాటులో ఉన్న నావ్‌లు బేస్ .navక్లాస్‌తో ప్రారంభించి, అలాగే షేర్డ్ స్టేట్‌లను షేర్ చేసిన మార్కప్‌ను కలిగి ఉన్నాయి. ప్రతి శైలి మధ్య మారడానికి మాడిఫైయర్ తరగతులను మార్చుకోండి.

ట్యాబ్ ప్యానెల్‌ల కోసం navsని ఉపయోగించడానికి JavaScript ట్యాబ్‌ల ప్లగ్ఇన్ అవసరం

ట్యాబ్ చేయదగిన ప్రాంతాలతో ట్యాబ్‌ల కోసం, మీరు తప్పనిసరిగా జావాస్క్రిప్ట్ ప్లగ్ఇన్ ట్యాబ్‌లను ఉపయోగించాలి . మార్కప్‌కు అదనపు roleమరియు ARIA లక్షణాలు కూడా అవసరం - మరిన్ని వివరాల కోసం ప్లగిన్ ఉదాహరణ మార్కప్‌ని చూడండి.

నావిగేషన్‌గా ఉపయోగించే నావ్‌లను యాక్సెస్ చేయగలిగేలా చేయండి

మీరు నావిగేషన్ బార్‌ను అందించడానికి navsని ఉపయోగిస్తుంటే, role="navigation"యొక్క అత్యంత లాజికల్ పేరెంట్ కంటైనర్‌కు aని జోడించాలని నిర్ధారించుకోండి లేదా మొత్తం నావిగేషన్ చుట్టూ <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. చిన్న స్క్రీన్‌లలో, nav లింక్‌లు పేర్చబడి ఉంటాయి.

జస్టిఫైడ్ navbar nav లింక్‌లకు ప్రస్తుతం మద్దతు లేదు.

సఫారి మరియు రెస్పాన్సివ్ జస్టిఫైడ్ navs

v9.1.2 నాటికి, Safari ఒక బగ్‌ను ప్రదర్శిస్తుంది, దీనిలో మీ బ్రౌజర్‌ని క్షితిజ సమాంతరంగా మార్చడం వలన రిఫ్రెష్ చేసిన తర్వాత క్లియర్ చేయబడిన జస్టిఫైడ్ navలో రెండరింగ్ లోపాలు ఏర్పడతాయి. ఈ బగ్ సమర్థించబడిన nav ఉదాహరణలో కూడా చూపబడింది .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

ఏదైనా nav భాగం (ట్యాబ్‌లు లేదా మాత్రలు) కోసం, గ్రే లింక్‌ల.disabled కోసం జోడించండి మరియు హోవర్ ఎఫెక్ట్‌లు లేవు .

లింక్ కార్యాచరణ ప్రభావితం కాలేదు

ఈ తరగతి దాని రూపాన్ని మాత్రమే మారుస్తుంది, <a>దాని కార్యాచరణను కాదు. ఇక్కడ లింక్‌లను నిలిపివేయడానికి అనుకూల JavaScriptని ఉపయోగించండి.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

కొంచెం అదనపు HTML మరియు డ్రాప్‌డౌన్‌ల జావాస్క్రిప్ట్ ప్లగిన్‌తో డ్రాప్‌డౌన్ మెనులను జోడించండి .

డ్రాప్‌డౌన్‌లతో ట్యాబ్‌లు

<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 మీ అప్లికేషన్ లేదా సైట్ కోసం నావిగేషన్ హెడర్‌లుగా పనిచేసే ప్రతిస్పందించే మెటా భాగాలు. అవి మొబైల్ వీక్షణలలో కుప్పకూలడం (మరియు టోగుల్ చేయగలవు) ప్రారంభమవుతాయి మరియు అందుబాటులో ఉన్న వీక్షణపోర్ట్ వెడల్పు పెరిగేకొద్దీ అడ్డంగా మారుతాయి.

జస్టిఫైడ్ navbar nav లింక్‌లకు ప్రస్తుతం మద్దతు లేదు.

పొంగిపొర్లుతున్న కంటెంట్

మీ నావ్‌బార్‌లోని కంటెంట్‌కు ఎంత స్థలం అవసరమో బూట్‌స్ట్రాప్‌కి తెలియదు కాబట్టి, మీరు కంటెంట్‌ను రెండవ వరుసలో చుట్టే విషయంలో సమస్యలను ఎదుర్కోవచ్చు. దీన్ని పరిష్కరించడానికి, మీరు వీటిని చేయవచ్చు:

  1. నావ్‌బార్ ఐటెమ్‌ల మొత్తాన్ని లేదా వెడల్పును తగ్గించండి.
  2. ప్రతిస్పందించే యుటిలిటీ క్లాస్‌లను ఉపయోగించి నిర్దిష్ట స్క్రీన్ పరిమాణాలలో నిర్దిష్ట నావ్‌బార్ ఐటెమ్‌లను దాచండి .
  3. కూలిపోయిన మరియు క్షితిజ సమాంతర మోడ్ మధ్య మీ నావ్‌బార్ మారే పాయింట్‌ను మార్చండి. @grid-float-breakpointవేరియబుల్‌ను అనుకూలీకరించండి లేదా మీ స్వంత మీడియా ప్రశ్నను జోడించండి.

జావాస్క్రిప్ట్ ప్లగ్ఇన్ అవసరం

JavaScript డిసేబుల్ చేయబడి మరియు నావ్‌బార్ కూలిపోయేంతగా వీక్షణపోర్ట్ ఇరుకైనట్లయితే, నావ్‌బార్‌ను విస్తరించడం మరియు కంటెంట్‌ని వీక్షించడం అసాధ్యం .navbar-collapse.

ప్రతిస్పందించే నావ్‌బార్‌కు మీ బూట్‌స్ట్రాప్ వెర్షన్‌లో కూల్చివేత ప్లగ్ఇన్ చేర్చడం అవసరం.

కుదించిన మొబైల్ నావ్‌బార్ బ్రేక్‌పాయింట్‌ని మారుస్తోంది

వీక్షణపోర్ట్ కంటే ఇరుకైనప్పుడు నావ్‌బార్ దాని నిలువు మొబైల్ వీక్షణలోకి కుప్పకూలుతుంది @grid-float-breakpointమరియు వీక్షణపోర్ట్ కనీసం @grid-float-breakpointవెడల్పులో ఉన్నప్పుడు దాని క్షితిజ సమాంతర నాన్-మొబైల్ వీక్షణలోకి విస్తరిస్తుంది. నావ్‌బార్ కుప్పకూలినప్పుడు/విస్తరిస్తున్నప్పుడు నియంత్రించడానికి ఈ వేరియబుల్‌ను తక్కువ మూలంలో సర్దుబాటు చేయండి. డిఫాల్ట్ విలువ 768px(చిన్న "చిన్న" లేదా "టాబ్లెట్" స్క్రీన్).

నావ్‌బార్‌లను యాక్సెస్ చేయగలిగేలా చేయండి

ఒక మూలకాన్ని ఉపయోగించాలని నిర్ధారించుకోండి <nav>లేదా ఒక వంటి మరింత సాధారణ మూలకాన్ని ఉపయోగిస్తుంటే , సహాయక సాంకేతికతలను ఉపయోగించే వినియోగదారుల కోసం ఒక ల్యాండ్‌మార్క్ ప్రాంతంగా స్పష్టంగా గుర్తించడానికి ప్రతి నావ్‌బార్‌కు <div>aని జోడించండి .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ఇతర లేబులింగ్ పద్ధతులకు ప్రత్యామ్నాయంగా ఉపయోగించడం మంచిది కాదని గమనించండి.

నావ్‌బార్‌లో నిలువుగా మధ్యలో ఉంచడానికి a లో లేని మూలకాలకు .navbar-btnతరగతిని జోడించండి .<button><form>

<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 నావిగేషన్ కాంపోనెంట్‌లో లేని ప్రామాణిక లింక్‌లను ఉపయోగించే వ్యక్తుల .navbar-linkకోసం, డిఫాల్ట్ మరియు విలోమ నావ్‌బార్ ఎంపికల కోసం సరైన రంగులను జోడించడానికి తరగతిని ఉపయోగించండి.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftలేదా .navbar-rightయుటిలిటీ తరగతులను ఉపయోగించి nav లింక్‌లు, ఫారమ్‌లు, బటన్‌లు లేదా వచనాన్ని సమలేఖనం చేయండి . రెండు తరగతులు పేర్కొన్న దిశలో CSS ఫ్లోట్‌ను జోడిస్తాయి. ఉదాహరణకు, nav లింక్‌లను సమలేఖనం చేయడానికి, <ul>వర్తించే సంబంధిత యుటిలిటీ క్లాస్‌తో వాటిని వేరుగా ఉంచండి.

ఈ తరగతులు మరియు మిక్సిన్-ఎడ్ వెర్షన్‌లు .pull-left, .pull-rightకానీ పరికర పరిమాణాలలో నావ్‌బార్ భాగాలను సులభంగా నిర్వహించడం కోసం మీడియా ప్రశ్నలకు ఇవి స్కోప్ చేయబడతాయి.

బహుళ భాగాలను కుడి సమలేఖనం చేయడం

.navbar-rightNavbars ప్రస్తుతం బహుళ తరగతులతో పరిమితిని కలిగి ఉంది . కంటెంట్‌ని సరిగ్గా ఖాళీ చేయడానికి, మేము చివరి .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సెపరేటర్లు మరియు ద్వారా CSSలో స్వయంచాలకంగా జోడించబడతాయి 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">లింక్‌లు, బూట్‌స్ట్రాప్ navలు మరియు మరిన్నింటికి జోడించడం ద్వారా కొత్త లేదా చదవని అంశాలను సులభంగా హైలైట్ చేయండి.

ఇన్బాక్స్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సెలెక్టర్‌కు మద్దతు లేదు.

క్రియాశీల nav రాష్ట్రాలకు అనుగుణంగా ఉంటుంది

పిల్ నావిగేషన్‌లలో యాక్టివ్ స్టేట్‌లలో బ్యాడ్జ్‌లను ఉంచడం కోసం అంతర్నిర్మిత శైలులు చేర్చబడ్డాయి.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

జంబోట్రాన్

మీ సైట్‌లో కీలకమైన కంటెంట్‌ను ప్రదర్శించడానికి మొత్తం వీక్షణపోర్ట్‌ను ఐచ్ఛికంగా విస్తరించగల తేలికైన, సౌకర్యవంతమైన భాగం.

హలో, ప్రపంచం!

ఇది ఒక సాధారణ హీరో యూనిట్, ఫీచర్ చేయబడిన కంటెంట్ లేదా సమాచారానికి అదనపు శ్రద్ధను అందించడానికి ఒక సాధారణ జంబోట్రాన్-శైలి భాగం.

ఇంకా నేర్చుకో

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

జంబోట్రాన్‌ను పూర్తి వెడల్పుగా చేయడానికి మరియు గుండ్రని మూలలు లేకుండా చేయడానికి, దాన్ని అన్నింటి వెలుపల ఉంచండి .containerమరియు బదులుగా లోపలి భాగాన్ని జోడించండి .container.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

పేజీ శీర్షిక

h1పేజీలోని కంటెంట్‌ని సముచితంగా ఖాళీ చేయడానికి మరియు సెగ్మెంట్ చేయడానికి ఒక సాధారణ షెల్ . ఇది h1's డిఫాల్ట్ 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

థంబ్‌నెయిల్ లేబుల్

క్రాస్ జస్టో ఒడియో, డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్, ఎగెస్టాస్ ఎగెట్ క్వామ్. డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.

బటన్ బటన్

100%x200

థంబ్‌నెయిల్ లేబుల్

క్రాస్ జస్టో ఒడియో, డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్, ఎగెస్టాస్ ఎగెట్ క్వామ్. డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.

బటన్ బటన్

100%x200

థంబ్‌నెయిల్ లేబుల్

క్రాస్ జస్టో ఒడియో, డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్, ఎగెస్టాస్ ఎగెట్ క్వామ్. డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్. Nullam id dolor id nibh ultricies వాహనాలు 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మరియు మూసివేయి బటన్‌ను జోడించడం ద్వారా ఏదైనా హెచ్చరికను రూపొందించండి.

జావాస్క్రిప్ట్ హెచ్చరిక ప్లగ్ఇన్ అవసరం

పూర్తిగా పనిచేసే, తిరస్కరించదగిన హెచ్చరికల కోసం, మీరు తప్పనిసరిగా జావాస్క్రిప్ట్ ప్లగ్ఇన్ హెచ్చరికలను ఉపయోగించాలి .

<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 పరివర్తనాలు మరియు యానిమేషన్‌లను ఉపయోగిస్తాయి. ఈ లక్షణాలకు Internet Explorer 9 మరియు దిగువన లేదా Firefox యొక్క పాత సంస్కరణల్లో మద్దతు లేదు. Opera 12 యానిమేషన్‌లకు మద్దతు ఇవ్వదు.

కంటెంట్ సెక్యూరిటీ పాలసీ (CSP) అనుకూలత

మీ వెబ్‌సైట్ అనుమతించని కంటెంట్ భద్రతా విధానాన్ని (CSP) కలిగి ఉంటే, దిగువ మా ఉదాహరణలలో చూపిన విధంగా ప్రోగ్రెస్ బార్ వెడల్పులను సెట్ style-src 'unsafe-inline'చేయడానికి మీరు ఇన్‌లైన్ లక్షణాలను ఉపయోగించలేరు . styleకఠినమైన CSP లకు అనుకూలంగా ఉండే వెడల్పులను సెట్ చేయడానికి ప్రత్యామ్నాయ పద్ధతులు కొద్దిగా అనుకూల 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ప్రోగ్రెస్ బార్‌కి a జోడించడాన్ని పరిగణించండి.

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>

మీడియా వస్తువు

వచన కంటెంట్‌తో పాటు ఎడమ లేదా కుడికి సమలేఖనం చేయబడిన చిత్రాన్ని కలిగి ఉండే వివిధ రకాల భాగాలను (బ్లాగ్ వ్యాఖ్యలు, ట్వీట్‌లు మొదలైనవి) నిర్మించడానికి వియుక్త ఆబ్జెక్ట్ శైలులు.

డిఫాల్ట్ మీడియా

డిఫాల్ట్ మీడియా మీడియా ఆబ్జెక్ట్‌ను (చిత్రాలు, వీడియో, ఆడియో) కంటెంట్ బ్లాక్‌కు ఎడమ లేదా కుడి వైపున ప్రదర్శిస్తుంది.

మీడియా శీర్షిక

క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్‌లో డోనెక్ లాసినియా కంగూ ఫెలిస్.

మీడియా శీర్షిక

క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్‌లో డోనెక్ లాసినియా కంగూ ఫెలిస్.

నెస్టెడ్ మీడియా హెడ్డింగ్

క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్‌లో డోనెక్ లాసినియా కంగూ ఫెలిస్.

మీడియా శీర్షిక

క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.

మీడియా శీర్షిక

క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.
<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మరియు , html లో తర్వాత ఉంచాలి .media-rightతప్ప ..media-right.media-body

మీడియా అమరిక

చిత్రాలు లేదా ఇతర మీడియాను ఎగువ, మధ్య లేదా దిగువకు సమలేఖనం చేయవచ్చు. డిఫాల్ట్ ఎగువ సమలేఖనం చేయబడింది.

అగ్ర సమలేఖన మీడియా

క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్‌లో డోనెక్ లాసినియా కంగూ ఫెలిస్.

డోనెక్ సెడ్ ఒడియో డ్యూయి. నుల్లమ్ క్విస్ రిసస్ ఎగెట్ ఉర్నా మొల్లిస్ ఓర్నారే వెల్ యూ లియో. కమ్ సోసిస్ నాటోక్ పెనాటిబస్ మరియు మాగ్నిస్ డిస్ పార్ట్యురియెంట్ మోంటెస్, నాస్కేటర్ రిడిక్యులస్ మస్.

మధ్యస్థంగా సమలేఖనం చేయబడిన మీడియా

క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్‌లో డోనెక్ లాసినియా కంగూ ఫెలిస్.

డోనెక్ సెడ్ ఒడియో డ్యూయి. నుల్లమ్ క్విస్ రిసస్ ఎగెట్ ఉర్నా మొల్లిస్ ఓర్నారే వెల్ యూ లియో. కమ్ సోసిస్ నాటోక్ పెనాటిబస్ మరియు మాగ్నిస్ డిస్ పార్ట్యురియెంట్ మోంటెస్, నాస్కేటర్ రిడిక్యులస్ మస్.

దిగువకు సమలేఖనం చేయబడిన మీడియా

క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్‌లో డోనెక్ లాసినియా కంగూ ఫెలిస్.

డోనెక్ సెడ్ ఒడియో డ్యూయి. నుల్లమ్ క్విస్ రిసస్ ఎగెట్ ఉర్నా మొల్లిస్ ఓర్నారే వెల్ యూ లియో. కమ్ సోసిస్ నాటోక్ పెనాటిబస్ మరియు మాగ్నిస్ డిస్ పార్ట్యురియెంట్ మోంటెస్, నాస్కేటర్ రిడిక్యులస్ మస్.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

మీడియా జాబితా

అదనపు మార్కప్‌తో, మీరు జాబితా లోపల మీడియాను ఉపయోగించవచ్చు (వ్యాఖ్య థ్రెడ్‌లు లేదా కథనాల జాబితాలకు ఉపయోగపడుతుంది).

  • మీడియా శీర్షిక

    క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.

    నెస్టెడ్ మీడియా హెడ్డింగ్

    క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.

    నెస్టెడ్ మీడియా హెడ్డింగ్

    క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.

    నెస్టెడ్ మీడియా హెడ్డింగ్

    క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

జాబితా సమూహం

జాబితా సమూహాలు సరళమైన అంశాల జాబితాలను మాత్రమే కాకుండా, అనుకూల కంటెంట్‌తో సంక్లిష్టమైన వాటిని ప్రదర్శించడానికి అనువైన మరియు శక్తివంతమైన భాగం.

ప్రాథమిక ఉదాహరణ

అత్యంత ప్రాథమిక జాబితా సమూహం కేవలం జాబితా అంశాలు మరియు సరైన తరగతులతో క్రమం లేని జాబితా. అనుసరించే ఎంపికలతో లేదా అవసరమైన మీ స్వంత CSSతో దానిపై నిర్మించండి.

  • క్రాస్ జస్తో ఒడియో
  • డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్
  • మోర్బి లియో రిసస్
  • పోర్టా ఎసి కన్సెక్టరు ఎసి
  • వెస్టిబులం ఎట్ ఎరోస్
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

బ్యాడ్జ్‌లు

ఏదైనా జాబితా సమూహ అంశానికి బ్యాడ్జ్‌ల భాగాన్ని జోడించండి మరియు అది స్వయంచాలకంగా కుడి వైపున ఉంచబడుతుంది.

  • 14క్రాస్ జస్తో ఒడియో
  • 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, మేము వేరు చేయడానికి పట్టిక ఎగువన అదనపు అంచుని జోడిస్తాము.

ప్యానెల్ శీర్షిక

ఇక్కడ కొంత డిఫాల్ట్ ప్యానెల్ కంటెంట్. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్. ఏనియన్ లాసినియా బిబెండమ్ నుల్లా సెడ్ కన్సెక్టెచర్. ఏనియన్ ఇయు లియో క్వామ్. పెల్లెంటెస్క్ ఓర్నారే సెమ్ లాసినియా క్వామ్ వెనెనటిస్ వెస్టిబులం. Nullam id dolor id nibh ultricies వాహనాలు 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>

జాబితా సమూహాలతో

ఏదైనా ప్యానెల్‌లో పూర్తి-వెడల్పు జాబితా సమూహాలను సులభంగా చేర్చండి.

ప్యానెల్ శీర్షిక

ఇక్కడ కొంత డిఫాల్ట్ ప్యానెల్ కంటెంట్. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్. ఏనియన్ లాసినియా బిబెండమ్ నుల్లా సెడ్ కన్సెక్టెచర్. ఏనియన్ ఇయు లియో క్వామ్. పెల్లెంటెస్క్ ఓర్నారే సెమ్ లాసినియా క్వామ్ వెనెనటిస్ వెస్టిబులం. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.

  • క్రాస్ జస్తో ఒడియో
  • డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్
  • మోర్బి లియో రిసస్
  • పోర్టా ఎసి కన్సెక్టరు ఎసి
  • వెస్టిబులం ఎట్ ఎరోస్
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

రెస్పాన్సివ్ పొందుపరచండి

ఏదైనా పరికరంలో సరిగ్గా స్కేల్ చేసే అంతర్గత నిష్పత్తిని సృష్టించడం ద్వారా వీడియో లేదా స్లైడ్‌షో కొలతలను కలిగి ఉన్న బ్లాక్ యొక్క వెడల్పు ఆధారంగా నిర్ణయించడానికి బ్రౌజర్‌లను అనుమతించండి.

నియమాలు నేరుగా <iframe>, <embed>, <video>, మరియు <object>మూలకాలకు వర్తించబడతాయి; .embed-responsive-itemమీరు ఇతర లక్షణాల కోసం స్టైలింగ్‌ను సరిపోల్చాలనుకున్నప్పుడు ఐచ్ఛికంగా స్పష్టమైన సంతతి తరగతిని ఉపయోగించండి .

అనుకూల చిట్కా! మేము మీ కోసం దాన్ని భర్తీ చేస్తున్నందున మీరు frameborder="0"మీ sలో చేర్చాల్సిన అవసరం లేదు .<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>