నావిగేషన్, అలర్ట్లు, పాపవర్లు మరియు మరిన్నింటిని అందించడానికి డజన్ల కొద్దీ పునర్వినియోగ భాగాలు బూట్స్ట్రాప్లో నిర్మించబడ్డాయి.
Rdio నుండి ప్రేరణ పొందిన అల్ట్రా సరళమైన మరియు కనిష్టంగా రూపొందించబడిన పేజినేషన్, యాప్లు మరియు శోధన ఫలితాల కోసం గొప్పది. పెద్ద బ్లాక్ను కోల్పోవడం కష్టం, సులభంగా కొలవదగినది మరియు పెద్ద క్లిక్ ప్రాంతాలను అందిస్తుంది.
లింక్లు అనుకూలీకరించదగినవి మరియు సరైన తరగతితో అనేక పరిస్థితులలో పని చేస్తాయి. .disabled
క్లిక్ చేయలేని లింక్ల .active
కోసం మరియు ప్రస్తుత పేజీ కోసం.
పేజినేషన్ లింక్ల అమరికను మార్చడానికి రెండు ఐచ్ఛిక తరగతుల్లో దేనినైనా జోడించండి: .pagination-centered
మరియు .pagination-right
.
డిఫాల్ట్ పేజినేషన్ భాగం అనువైనది మరియు అనేక వైవిధ్యాలలో పని చేస్తుంది.
ఒక చుట్టి <div>
, pagination కేవలం ఒక <ul>
.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > మునుపటి </a></li>
- <li class = "యాక్టివ్" >
- <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 = "#" > తదుపరి </a></li>
- </ul>
- </div>
పేజర్ కాంపోనెంట్ అనేది లైట్ మార్కప్ మరియు మరింత తేలికైన స్టైల్లతో సరళమైన పేజినేషన్ అమలుల కోసం లింక్ల సమితి. బ్లాగులు లేదా మ్యాగజైన్ల వంటి సాధారణ సైట్లకు ఇది చాలా బాగుంది.
డిఫాల్ట్గా, పేజర్ లింక్లను కేంద్రీకరిస్తుంది.
- <ul class = "పేజర్" >
- <li>
- <a href = "#" > మునుపటి </a>
- </li>
- <li>
- <a href = "#" > తదుపరి </a>
- </li>
- </ul>
లేబుల్స్ | మార్కప్ |
---|---|
డిఫాల్ట్ | <span class="label">Default</span> |
విజయం | <span class="label label-success">Success</span> |
హెచ్చరిక | <span class="label label-warning">Warning</span> |
ముఖ్యమైనది | <span class="label label-important">Important</span> |
సమాచారం | <span class="label label-info">Info</span> |
బూట్స్ట్రాప్ మీ సైట్లో కంటెంట్ను ప్రదర్శించడానికి హీరో యూనిట్ అని పిలువబడే తేలికైన, సౌకర్యవంతమైన భాగాన్ని అందిస్తుంది. ఇది మార్కెటింగ్ మరియు కంటెంట్-హెవీ సైట్లలో బాగా పని చేస్తుంది.
మీ కంటెంట్ని div
ఇలా వ్రాప్ చేయండి:
- <div class = "hero-unit" >
- <h1> శీర్షిక </h1>
- <p> ట్యాగ్లైన్ </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- ఇంకా నేర్చుకో
- </a>
- </p>
- </div>
ఇది ఒక సాధారణ హీరో యూనిట్, ఫీచర్ చేయబడిన కంటెంట్ లేదా సమాచారానికి అదనపు శ్రద్ధను అందించడానికి ఒక సాధారణ జంబోట్రాన్-శైలి భాగం.
h1
పేజీలోని కంటెంట్ని సముచితంగా ఖాళీ చేయడానికి మరియు సెగ్మెంట్ చేయడానికి ఒక సాధారణ షెల్ . ఇది h1
యొక్క డిఫాల్ట్ small
, మూలకం అలాగే చాలా ఇతర భాగాలను (అదనపు శైలులతో) ఉపయోగించుకోవచ్చు.
- <div class = "page-haeder" >
- <h1> ఉదాహరణ పేజీ హెడర్ </h1>
- </div>
డిఫాల్ట్గా, బూట్స్ట్రాప్ యొక్క సూక్ష్మచిత్రాలు కనీస అవసరమైన మార్కప్తో లింక్ చేయబడిన చిత్రాలను ప్రదర్శించడానికి రూపొందించబడ్డాయి.
కొంచెం అదనపు మార్కప్తో, థంబ్నెయిల్లలోకి హెడ్డింగ్లు, పేరాగ్రాఫ్లు లేదా బటన్ల వంటి ఎలాంటి HTML కంటెంట్ను జోడించడం సాధ్యమవుతుంది.
థంబ్నెయిల్లు (గతంలో .media-grid
v1.4 వరకు) ఫోటోలు లేదా వీడియోల గ్రిడ్లు, చిత్ర శోధన ఫలితాలు, రిటైల్ ఉత్పత్తులు, పోర్ట్ఫోలియోలు మరియు మరిన్నింటికి గొప్పవి. అవి లింక్లు లేదా స్టాటిక్ కంటెంట్ కావచ్చు.
థంబ్నెయిల్ మార్కప్ చాలా సులభం- ul
ఏ li
ఎలిమెంట్స్ అయినా అవసరం. ఇది చాలా సరళమైనది, మీ కంటెంట్లను చుట్టడానికి కొంచెం ఎక్కువ మార్కప్తో ఏదైనా రకమైన కంటెంట్ను అనుమతిస్తుంది.
చివరగా, థంబ్నెయిల్ల భాగం ఇప్పటికే ఉన్న గ్రిడ్ సిస్టమ్ క్లాస్లను ఉపయోగిస్తుంది—వంటి .span2
లేదా .span3
—థంబ్నెయిల్ కొలతల నియంత్రణ కోసం.
గతంలో చెప్పినట్లుగా, సూక్ష్మచిత్రాల కోసం అవసరమైన మార్కప్ తేలికగా మరియు సూటిగా ఉంటుంది. లింక్ చేయబడిన చిత్రాల కోసం డిఫాల్ట్ సెటప్ని ఇక్కడ చూడండి :
- <ul class = "థంబ్నెయిల్స్" >
- <li class = "span3" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
సూక్ష్మచిత్రాలలో అనుకూల HTML కంటెంట్ కోసం, మార్కప్ కొద్దిగా మారుతుంది. ఎక్కడైనా బ్లాక్ స్థాయి కంటెంట్ని అనుమతించడానికి, మేము <a>
ఇలా మార్చుకుంటాము <div>
:
- <ul class = "థంబ్నెయిల్స్" >
- <li class = "span3" >
- <div class = "థంబ్నెయిల్" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> థంబ్నెయిల్ లేబుల్ </h5>
- <p> థంబ్నెయిల్ క్యాప్షన్ ఇక్కడే... </p>
- </div>
- </li>
- ...
- </ul>
బూట్స్ట్రాప్ 2తో, మేము బేస్ క్లాస్ని సరళీకృతం చేసాము: .alert
బదులుగా .alert-message
. మేము అవసరమైన కనీస మార్కప్ను కూడా తగ్గించాము- <p>
డిఫాల్ట్గా అవసరం లేదు, కేవలం బాహ్య <div>
.
తక్కువ కోడ్తో మరింత మన్నికైన కాంపోనెంట్ కోసం, మేము బ్లాక్ అలర్ట్లు, ఎక్కువ ప్యాడింగ్తో వచ్చే మెసేజ్లు మరియు సాధారణంగా ఎక్కువ టెక్స్ట్ కోసం విభిన్న రూపాన్ని తీసివేసాము. తరగతి కూడా మార్చబడింది .alert-block
.
బూట్స్ట్రాప్ హెచ్చరిక సందేశాలకు మద్దతు ఇచ్చే గొప్ప j క్వెరీ ప్లగ్ఇన్తో వస్తుంది, వాటిని త్వరగా మరియు సులభంగా తొలగించేలా చేస్తుంది.
మీ సందేశాన్ని మరియు ఐచ్ఛిక క్లోజ్ చిహ్నాన్ని సాధారణ తరగతితో ఒక divలో చుట్టండి.
- <div class = "హెచ్చరిక" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <strong> హెచ్చరిక! </strong> మీరే ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు.
- </div>
రెండు ఐచ్ఛిక తరగతులతో ప్రామాణిక హెచ్చరిక సందేశాన్ని సులభంగా విస్తరించండి: .alert-block
మరిన్ని పాడింగ్ మరియు వచన నియంత్రణల .alert-heading
కోసం మరియు సరిపోలే శీర్షిక కోసం.
ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్. ప్రసెంట్ కమోడో కర్సస్ మాగ్నా, వెల్ స్కెలెరిస్క్ నిస్ల్ కన్సెక్టెచర్ ఎట్.
- <div class = "alert alert-block" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <h4 class = "alert-heading" > హెచ్చరిక! </h4>
- ఉత్తమంగా తనిఖీ చేయండి, మీరు కాదు...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "Alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
నిలువు గ్రేడియంట్తో డిఫాల్ట్ ప్రోగ్రెస్ బార్.
- <div class = "పురోగతి" >
- <div తరగతి = "బార్"
- style = " వెడల్పు : 60 %; " ></div>
- </div>
చారల ప్రభావాన్ని సృష్టించడానికి గ్రేడియంట్ని ఉపయోగిస్తుంది.
- <div class = "పురోగతి పురోగతి-సమాచారం
- పురోగతి-చారల" >
- <div తరగతి = "బార్"
- style = " వెడల్పు : 20 %; " ></div>
- </div>
చారల ఉదాహరణను తీసుకొని దానిని యానిమేట్ చేస్తుంది.
- <div class = "పురోగతి పురోగతి-ప్రమాదం
- ప్రోగ్రెస్-స్ట్రిప్డ్ యాక్టివ్" >
- <div తరగతి = "బార్"
- style = " వెడల్పు : 40 %; " ></div>
- </div>
ప్రోగ్రెస్ బార్లు ఒకే విధమైన స్టైలింగ్ కోసం బటన్లు మరియు హెచ్చరికల వలె ఒకే తరగతి పేర్లలో కొన్నింటిని ఉపయోగించుకుంటాయి.
.progress-info
.progress-success
.progress-danger
ప్రత్యామ్నాయంగా, మీరు తక్కువ ఫైల్లను అనుకూలీకరించవచ్చు మరియు మీ స్వంత రంగులు మరియు పరిమాణాలను రోల్ చేయవచ్చు.
ప్రోగ్రెస్ బార్లు CSS3 పరివర్తనలను ఉపయోగిస్తాయి, కాబట్టి మీరు జావాస్క్రిప్ట్ ద్వారా వెడల్పును డైనమిక్గా సర్దుబాటు చేస్తే, అది సజావుగా పరిమాణాన్ని మారుస్తుంది.
మీరు .active
తరగతిని ఉపయోగిస్తే, మీ .progress-striped
ప్రోగ్రెస్ బార్లు ఎడమ నుండి కుడికి చారలను యానిమేట్ చేస్తాయి.
ప్రోగ్రెస్ బార్లు వాటి అన్ని ప్రభావాలను సాధించడానికి CSS3 గ్రేడియంట్లు, పరివర్తనాలు మరియు యానిమేషన్లను ఉపయోగిస్తాయి. ఈ ఫీచర్లకు IE7-8 లేదా Firefox పాత వెర్షన్లలో మద్దతు లేదు.
Opera ఈ సమయంలో యానిమేషన్లకు మద్దతు ఇవ్వదు.
ఒక మూలకానికి ఇన్సెట్ ప్రభావాన్ని అందించడానికి బావిని సాధారణ ప్రభావంగా ఉపయోగించండి.
- <div class = "బాగా" >
- ...
- </div>
మోడల్లు మరియు హెచ్చరికల వంటి కంటెంట్ను తీసివేయడానికి సాధారణ క్లోజ్ చిహ్నాన్ని ఉపయోగించండి.
- <a class = "close" > × </a>