భాగాలు
ఐకానోగ్రఫీ, డ్రాప్డౌన్లు, ఇన్పుట్ గ్రూప్లు, నావిగేషన్, అలర్ట్లు మరియు మరిన్నింటిని అందించడానికి డజనుకు పైగా పునర్వినియోగ భాగాలు నిర్మించబడ్డాయి.
ఐకానోగ్రఫీ, డ్రాప్డౌన్లు, ఇన్పుట్ గ్రూప్లు, నావిగేషన్, అలర్ట్లు మరియు మరిన్నింటిని అందించడానికి డజనుకు పైగా పునర్వినియోగ భాగాలు నిర్మించబడ్డాయి.
Glyphicon Halflings సెట్ నుండి ఫాంట్ ఆకృతిలో 250కి పైగా గ్లిఫ్లను కలిగి ఉంటుంది. Glyphicons Halflings సాధారణంగా ఉచితంగా అందుబాటులో ఉండవు, కానీ వాటి సృష్టికర్త వాటిని బూట్స్ట్రాప్ కోసం ఉచితంగా అందుబాటులో ఉంచారు. కృతజ్ఞతగా, సాధ్యమైనప్పుడల్లా మీరు Glyphicons కి తిరిగి లింక్ను చేర్చవలసిందిగా మాత్రమే మేము అడుగుతున్నాము .
పనితీరు కారణాల దృష్ట్యా, అన్ని చిహ్నాలకు బేస్ క్లాస్ మరియు వ్యక్తిగత ఐకాన్ క్లాస్ అవసరం. ఉపయోగించడానికి, కింది కోడ్ను ఎక్కడైనా ఉంచండి. సరైన పాడింగ్ కోసం చిహ్నం మరియు వచనం మధ్య ఖాళీని ఉంచాలని నిర్ధారించుకోండి.
ఐకాన్ తరగతులు నేరుగా ఇతర భాగాలతో కలపబడవు. అదే మూలకంపై ఇతర తరగతులతో పాటు వాటిని ఉపయోగించకూడదు. బదులుగా, ఒక సమూహాన్ని జోడించి <span>
, చిహ్నం తరగతులను వర్తింపజేయండి <span>
.
టెక్స్ట్ కంటెంట్ లేని మరియు చైల్డ్ ఎలిమెంట్స్ లేని ఎలిమెంట్స్పై మాత్రమే ఐకాన్ క్లాస్లను ఉపయోగించాలి.
../fonts/
సంకలనం చేయబడిన CSS ఫైల్లకు సంబంధించి ఐకాన్ ఫాంట్ ఫైల్లు డైరెక్టరీలో ఉన్నాయని బూట్స్ట్రాప్ ఊహిస్తుంది . ఆ ఫాంట్ ఫైల్లను తరలించడం లేదా పేరు మార్చడం అంటే CSSని మూడు మార్గాలలో ఒకదానిలో నవీకరించడం:
@icon-font-path
మరియు/లేదా వేరియబుల్లను మార్చండి .@icon-font-name
url()
కంపైల్ చేయబడిన CSS లో మార్గాలను మార్చండి .మీ నిర్దిష్ట డెవలప్మెంట్ సెటప్కు సరిపోయే ఏదైనా ఎంపికను ఉపయోగించండి.
సహాయక సాంకేతికతల యొక్క ఆధునిక సంస్కరణలు CSS ఉత్పత్తి చేయబడిన కంటెంట్తో పాటు నిర్దిష్ట యూనికోడ్ అక్షరాలను ప్రకటిస్తాయి. స్క్రీన్ రీడర్లలో అనాలోచిత మరియు గందరగోళ అవుట్పుట్ను నివారించడానికి (ముఖ్యంగా చిహ్నాలను పూర్తిగా అలంకరణ కోసం ఉపయోగించినప్పుడు), మేము వాటిని aria-hidden="true"
లక్షణంతో దాచిపెడతాము.
మీరు అర్థాన్ని తెలియజేయడానికి చిహ్నాన్ని ఉపయోగిస్తుంటే (అలంకరణ మూలకం వలె కాకుండా), ఈ అర్థం సహాయక సాంకేతికతలకు కూడా తెలియజేయబడిందని నిర్ధారించుకోండి - ఉదాహరణకు, .sr-only
తరగతితో దృశ్యమానంగా దాచబడిన అదనపు కంటెంట్ను చేర్చండి.
మీరు ఏ ఇతర టెక్స్ట్ లేకుండా నియంత్రణలను సృష్టిస్తుంటే ( <button>
ఐకాన్ను మాత్రమే కలిగి ఉంటుంది), మీరు ఎల్లప్పుడూ నియంత్రణ యొక్క ప్రయోజనాన్ని గుర్తించడానికి ప్రత్యామ్నాయ కంటెంట్ను అందించాలి, తద్వారా సహాయక సాంకేతికతలను ఉపయోగించే వినియోగదారులకు ఇది అర్ధమవుతుంది. ఈ సందర్భంలో, మీరు aria-label
నియంత్రణలోనే ఒక లక్షణాన్ని జోడించవచ్చు.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
టూల్బార్, నావిగేషన్ లేదా ముందుగా రూపొందించిన ఫారమ్ ఇన్పుట్ల కోసం బటన్లు, బటన్ సమూహాలలో వాటిని ఉపయోగించండి.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
సహాయక సాంకేతికతలను ఉపయోగించే వినియోగదారులకు ఈ సూచనను అందించడానికి అదనపు వచనంతో, ఇది ఎర్రర్ మెసేజ్ అని తెలియజేయడానికి హెచ్చరికలో ఉపయోగించే చిహ్నం ..sr-only
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
లింక్ల జాబితాలను ప్రదర్శించడానికి టోగుల్ చేయగల, సందర్భోచిత మెను. డ్రాప్డౌన్ JavaScript ప్లగిన్తో ఇంటరాక్టివ్గా రూపొందించబడింది .
డ్రాప్డౌన్ ట్రిగ్గర్ మరియు డ్రాప్డౌన్ మెను లోపల .dropdown
లేదా ప్రకటించే మరొక మూలకాన్ని చుట్టండి position: relative;
. ఆపై మెను యొక్క HTMLని జోడించండి.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
డ్రాప్డౌన్ మెనులను పేరెంట్కి జోడించడం ద్వారా పైకి (క్రిందికి బదులుగా) విస్తరించేలా మార్చవచ్చు .dropup
.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
డిఫాల్ట్గా, డ్రాప్డౌన్ మెను స్వయంచాలకంగా ఎగువ నుండి 100% దాని పేరెంట్కి ఎడమ వైపున ఉంచబడుతుంది. డ్రాప్డౌన్ మెనుని కుడికి సమలేఖనం .dropdown-menu-right
చేయడానికి a కి జోడించండి ..dropdown-menu
పత్రం యొక్క సాధారణ ప్రవాహంలో CSS ద్వారా డ్రాప్డౌన్లు స్వయంచాలకంగా ఉంచబడతాయి. దీనర్థం డ్రాప్డౌన్లు నిర్దిష్ట overflow
లక్షణాలతో తల్లిదండ్రులు కత్తిరించబడవచ్చు లేదా వీక్షణపోర్ట్కు వెలుపల కనిపించవచ్చు. ఈ సమస్యలు తలెత్తినప్పుడు మీ స్వంతంగా పరిష్కరించండి.
.pull-right
అమరికv3.1.0 నాటికి, మేము .pull-right
డ్రాప్డౌన్ మెనుల్లో విస్మరించాము. మెనుని కుడి-సమలేఖనం చేయడానికి, ఉపయోగించండి .dropdown-menu-right
. నావ్బార్లోని కుడి-సమలేఖనం చేయబడిన nav భాగాలు మెనుని స్వయంచాలకంగా సమలేఖనం చేయడానికి ఈ తరగతి యొక్క మిక్సిన్ వెర్షన్ను ఉపయోగిస్తాయి. దాన్ని భర్తీ చేయడానికి, ఉపయోగించండి .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
ఏదైనా డ్రాప్డౌన్ మెనులో చర్యల విభాగాలను లేబుల్ చేయడానికి హెడర్ను జోడించండి.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
డ్రాప్డౌన్ మెనులో ప్రత్యేక లింక్ల శ్రేణికి డివైడర్ను జోడించండి.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
లింక్ను నిలిపివేయడానికి డ్రాప్డౌన్లో .disabled
aకి జోడించండి .<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
. ఫలితంగా, బూట్స్ట్రాప్కు మీ అనుకూలీకరణలను బట్టి, మీరు సరిహద్దులను తీసివేయవచ్చు లేదా మళ్లీ రంగు వేయవచ్చు.
ఇంటర్నెట్ ఎక్స్ప్లోరర్ 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-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
ఇన్పుట్కి ఇరువైపులా ఒక యాడ్-ఆన్ లేదా బటన్ను ఉంచండి. మీరు ఇన్పుట్కి రెండు వైపులా ఒకదాన్ని కూడా ఉంచవచ్చు.
మేము ఒకే వైపు బహుళ యాడ్-ఆన్లకు ( .input-group-addon
లేదా ) మద్దతు ఇవ్వము..input-group-btn
మేము ఒకే ఇన్పుట్ సమూహంలో బహుళ ఫారమ్-నియంత్రణలకు మద్దతు ఇవ్వము.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
సాపేక్ష ఫారమ్ సైజింగ్ తరగతులను .input-group
దానికదే జోడించండి మరియు లోపల ఉన్న కంటెంట్లు స్వయంచాలకంగా పరిమాణం మార్చబడతాయి-ప్రతి మూలకంపై ఫారమ్ నియంత్రణ పరిమాణ తరగతులను పునరావృతం చేయవలసిన అవసరం లేదు.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
ఏదైనా చెక్బాక్స్ లేదా రేడియో ఎంపికను ఇన్పుట్ గ్రూప్ యాడ్ఆన్లో టెక్స్ట్కు బదులుగా ఉంచండి.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
ఇన్పుట్ గ్రూపులలోని బటన్లు కొంచెం భిన్నంగా ఉంటాయి మరియు ఒక అదనపు స్థాయి గూడు అవసరం. బదులుగా .input-group-addon
, మీరు .input-group-btn
బటన్లను చుట్టడానికి ఉపయోగించాల్సి ఉంటుంది. ఓవర్రైడ్ చేయలేని డిఫాల్ట్ బ్రౌజర్ శైలుల కారణంగా ఇది అవసరం.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
మీరు ప్రతి వైపు ఒక యాడ్-ఆన్ను మాత్రమే కలిగి ఉండగలరు, మీరు ఒకే లోపల బహుళ బటన్లను కలిగి ఉండవచ్చు .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
బూట్స్ట్రాప్లో అందుబాటులో ఉన్న నావ్లు బేస్ .nav
క్లాస్తో ప్రారంభించి, అలాగే షేర్డ్ స్టేట్లను షేర్ చేసిన మార్కప్ను కలిగి ఉన్నాయి. ప్రతి శైలి మధ్య మారడానికి మాడిఫైయర్ తరగతులను మార్చుకోండి.
తరగతికి బేస్ క్లాస్ .nav-tabs
అవసరమని గమనించండి ..nav
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
అదే HTMLని తీసుకోండి, కానీ .nav-pills
బదులుగా ఉపయోగించండి:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
మాత్రలు కూడా నిలువుగా పేర్చవచ్చు. కేవలం జోడించండి .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
తో 768px కంటే ఎక్కువ వెడల్పు ఉన్న స్క్రీన్ల వద్ద సులభంగా ట్యాబ్లు లేదా మాత్రలను వారి పేరెంట్కి సమాన వెడల్పుతో తయారు చేయండి .nav-justified
. చిన్న స్క్రీన్లలో, nav లింక్లు పేర్చబడి ఉంటాయి.
జస్టిఫైడ్ navbar nav లింక్లకు ప్రస్తుతం మద్దతు లేదు.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
ఏదైనా nav భాగం (ట్యాబ్లు లేదా మాత్రలు) కోసం, గ్రే లింక్ల.disabled
కోసం జోడించండి మరియు హోవర్ ఎఫెక్ట్లు లేవు .
<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 లింక్లకు ప్రస్తుతం మద్దతు లేదు.
<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>
నావ్బార్లో నిలువుగా మధ్యలో ఉంచడానికి a లో లేని మూలకాలకు .navbar-btn
తరగతిని జోడించండి .<button>
<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
టెక్స్ట్ స్ట్రింగ్లను ఎలిమెంట్లో వ్రాప్ చేయండి .navbar-text
, సాధారణంగా <p>
సరైన లీడింగ్ మరియు రంగు కోసం ట్యాగ్పై.
<p class="navbar-text">Signed in as Mark Otto</p>
సాధారణ navbar నావిగేషన్ కాంపోనెంట్లో లేని ప్రామాణిక లింక్లను ఉపయోగించే వ్యక్తుల .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-fixed-top
మరియు చేర్చండి ..container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
ఒక లేదా మధ్యలో మరియు ప్యాడ్ నావ్బార్ కంటెంట్ని జోడించండి .navbar-fixed-bottom
మరియు చేర్చండి ..container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
ఒక లేదా మధ్యలో మరియు ప్యాడ్ నావ్బార్ కంటెంట్ని జోడించడం .navbar-static-top
మరియు చేర్చడం ద్వారా పేజీతో పాటు స్క్రోల్ చేసే పూర్తి-వెడల్పు నావ్బార్ను సృష్టించండి ..container
.container-fluid
తరగతుల మాదిరిగా కాకుండా .navbar-fixed-*
, మీరు పై ఎలాంటి పాడింగ్ను మార్చాల్సిన అవసరం లేదు body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
జోడించడం ద్వారా నావ్బార్ రూపాన్ని సవరించండి .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
నావిగేషనల్ సోపానక్రమంలో ప్రస్తుత పేజీ స్థానాన్ని సూచించండి.
:before
సెపరేటర్లు మరియు ద్వారా 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">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
స్క్రీన్ రీడర్లు మరియు ఇతర సహాయక సాంకేతికతలకు నావిగేషన్ విభాగంగా గుర్తించడానికి పేజినేషన్ కాంపోనెంట్ను ఎలిమెంట్తో చుట్టి ఉండాలి . అదనంగా, ఒక పేజీ ఇప్పటికే అటువంటి నావిగేషన్ విభాగాలను ఒకటి కంటే ఎక్కువ కలిగి ఉండే అవకాశం ఉన్నందున (హెడర్లోని ప్రాథమిక నావిగేషన్ లేదా సైడ్బార్ నావిగేషన్ వంటివి), దాని ప్రయోజనాన్ని ప్రతిబింబించే వివరణాత్మకంగా aria-label
అందించడం మంచిది. <nav>
ఉదాహరణకు, శోధన ఫలితాల సమితి మధ్య నావిగేట్ చేయడానికి పేజినేషన్ భాగం ఉపయోగించబడితే, తగిన లేబుల్ కావచ్చు aria-label="Search results pages"
.
వివిధ పరిస్థితుల కోసం లింక్లు అనుకూలీకరించబడతాయి. .disabled
క్లిక్ చేయలేని లింక్ల కోసం మరియు .active
ప్రస్తుత పేజీని సూచించడానికి ఉపయోగించండి .
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
<span>
ఉద్దేశించిన స్టైల్లను నిలుపుకుంటూ క్లిక్ ఫంక్షనాలిటీని తీసివేయడానికి, మీరు యాక్టివ్ లేదా డిసేబుల్ యాంకర్లను మార్చుకోవాలని లేదా మునుపటి/తదుపరి బాణాల విషయంలో యాంకర్ను వదిలివేయాలని మేము సిఫార్సు చేస్తున్నాము.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
పెద్ద లేదా చిన్న పేజీని ఇష్టపడతారా? జోడించు .pagination-lg
లేదా .pagination-sm
అదనపు పరిమాణాల కోసం.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
తేలికపాటి మార్కప్ మరియు స్టైల్లతో సరళమైన పేజినేషన్ అమలుల కోసం త్వరిత మునుపటి మరియు తదుపరి లింక్లు. బ్లాగులు లేదా మ్యాగజైన్ల వంటి సాధారణ సైట్లకు ఇది చాలా బాగుంది.
డిఫాల్ట్గా, పేజర్ లింక్లను కేంద్రీకరిస్తుంది.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
ప్రత్యామ్నాయంగా, మీరు ప్రతి లింక్ను వైపులా సమలేఖనం చేయవచ్చు:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
పేజర్ లింక్లు పేజినేషన్ .disabled
నుండి సాధారణ యుటిలిటీ క్లాస్ను కూడా ఉపయోగిస్తాయి.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
లేబుల్ రూపాన్ని మార్చడానికి దిగువ పేర్కొన్న మాడిఫైయర్ తరగతుల్లో దేనినైనా జోడించండి.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
మీరు ఇరుకైన కంటైనర్లో డజన్ల కొద్దీ ఇన్లైన్ లేబుల్లను కలిగి ఉన్నప్పుడు రెండరింగ్ సమస్యలు తలెత్తుతాయి, ఒక్కొక్కటి దాని స్వంత inline-block
మూలకాన్ని (ఐకాన్ లాగా) కలిగి ఉంటాయి. దీని చుట్టూ మార్గం సెట్ చేయబడింది display: inline-block;
. సందర్భం మరియు ఉదాహరణ కోసం, #13219 చూడండి .
<span class="badge">
లింక్లు, బూట్స్ట్రాప్ navలు మరియు మరిన్నింటికి జోడించడం ద్వారా కొత్త లేదా చదవని అంశాలను సులభంగా హైలైట్ చేయండి.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
కొత్త లేదా చదవని ఐటెమ్లు లేనప్పుడు, బ్యాడ్జ్లు కేవలం (CSS :empty
ఎంపిక సాధనం ద్వారా) కుప్పకూలిపోతాయి.
ఇంటర్నెట్ ఎక్స్ప్లోరర్ 8లో బ్యాడ్జ్లు స్వయంచాలకంగా కుప్పకూలవు ఎందుకంటే దీనికి :empty
సెలెక్టర్కు మద్దతు లేదు.
పిల్ నావిగేషన్లలో యాక్టివ్ స్టేట్లలో బ్యాడ్జ్లను ఉంచడం కోసం అంతర్నిర్మిత శైలులు చేర్చబడ్డాయి.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
మీ సైట్లో కీలకమైన కంటెంట్ను ప్రదర్శించడానికి మొత్తం వీక్షణపోర్ట్ను ఐచ్ఛికంగా విస్తరించగల తేలికైన, సౌకర్యవంతమైన భాగం.
ఇది ఒక సాధారణ హీరో యూనిట్, ఫీచర్ చేయబడిన కంటెంట్ లేదా సమాచారానికి అదనపు శ్రద్ధను అందించడానికి ఒక సాధారణ జంబోట్రాన్-శైలి భాగం.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
జంబోట్రాన్ను పూర్తి వెడల్పుగా చేయడానికి మరియు గుండ్రని మూలలు లేకుండా చేయడానికి, దాన్ని అన్నింటి వెలుపల ఉంచండి .container
మరియు బదులుగా లోపలి భాగాన్ని జోడించండి .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 కంటెంట్ను జోడించడం సాధ్యమవుతుంది.
<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">×</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) కలిగి ఉంటే, దిగువ మా ఉదాహరణలలో చూపిన విధంగా ప్రోగ్రెస్ బార్ వెడల్పులను సెట్ style-src 'unsafe-inline'
చేయడానికి మీరు ఇన్లైన్ లక్షణాలను ఉపయోగించలేరు . style
కఠినమైన CSP లకు అనుకూలంగా ఉండే వెడల్పులను సెట్ చేయడానికి ప్రత్యామ్నాయ పద్ధతులు కొద్దిగా అనుకూల JavaScript (అది సెట్ చేస్తుంది element.style.width
) లేదా అనుకూల CSS తరగతులను ఉపయోగించడం.
డిఫాల్ట్ ప్రోగ్రెస్ బార్.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
కనిపించే శాతాన్ని చూపించడానికి ప్రోగ్రెస్ బార్లో నుండి క్లాస్ని <span>
తీసివేయండి ..sr-only
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
తక్కువ శాతాలకు కూడా లేబుల్ వచనం స్పష్టంగా ఉండేలా చూసుకోవడానికి, min-width
ప్రోగ్రెస్ బార్కి a జోడించడాన్ని పరిగణించండి.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
ప్రోగ్రెస్ బార్లు స్థిరమైన శైలుల కోసం ఒకే రకమైన బటన్ను మరియు హెచ్చరిక తరగతులను ఉపయోగిస్తాయి.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
చారల ప్రభావాన్ని సృష్టించడానికి గ్రేడియంట్ని ఉపయోగిస్తుంది. IE9 మరియు దిగువన అందుబాటులో లేదు.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
కుడి నుండి ఎడమకు చారలను యానిమేట్ .active
చేయడానికి కు జోడించండి . .progress-bar-striped
IE9 మరియు దిగువన అందుబాటులో లేదు.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
.progress
వాటిని పేర్చడానికి బహుళ బార్లను ఒకే విధంగా ఉంచండి .
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
వచన కంటెంట్తో పాటు ఎడమ లేదా కుడికి సమలేఖనం చేయబడిన చిత్రాన్ని కలిగి ఉండే వివిధ రకాల భాగాలను (బ్లాగ్ వ్యాఖ్యలు, ట్వీట్లు మొదలైనవి) నిర్మించడానికి వియుక్త ఆబ్జెక్ట్ శైలులు.
డిఫాల్ట్ మీడియా మీడియా ఆబ్జెక్ట్ను (చిత్రాలు, వీడియో, ఆడియో) కంటెంట్ బ్లాక్కు ఎడమ లేదా కుడి వైపున ప్రదర్శిస్తుంది.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
తరగతులు .pull-left
మరియు .pull-right
ఉనికిలో ఉన్నాయి మరియు మునుపు మీడియా కాంపోనెంట్లో భాగంగా ఉపయోగించబడ్డాయి, కానీ v3.3.0 నాటికి ఆ ఉపయోగం కోసం నిలిపివేయబడ్డాయి. అవి ఇంచుమించుగా సమానం .media-left
మరియు , 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>
ఏదైనా జాబితా సమూహ అంశానికి బ్యాడ్జ్ల భాగాన్ని జోడించండి మరియు అది స్వయంచాలకంగా కుడి వైపున ఉంచబడుతుంది.
<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>