బూట్స్ట్రాప్

భాగాలు

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

మరిన్ని టూల్‌బార్ లాంటి కార్యాచరణ కోసం బటన్ సమూహాలు చేరండి

బటన్ సమూహాలు

బహుళ బటన్‌లను కలిపి ఒక మిశ్రమ భాగం వలె చేర్చడానికి బటన్ సమూహాలను ఉపయోగించండి. వాటిని వరుస <a>లేదా <button>మూలకాలతో నిర్మించండి.

మీరు మరింత క్లిష్టమైన ప్రాజెక్ట్‌ల కోసం సెట్‌లను <div class="btn-group">కూడా కలపవచ్చు .<div class="btn-toolbar">

ఎడమ మధ్య కుడి
1 2 3 4
5 6 7
8

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

యాంకర్ ట్యాగ్ బటన్‌లతో నిర్మించిన ప్రామాణిక బటన్ సమూహం కోసం HTML ఎలా కనిపిస్తుందో ఇక్కడ ఉంది:

  1. <div class = "btn-group" > 
  2.   <a class = "btn" href = "#" > 1 </a>  
  3.   <a class = "btn" href = "#" > 2 </a>  
  4.   <a class = "btn" href = "#" > 3 </a>  
  5. </div>

మరియు బహుళ సమూహాల కోసం టూల్‌బార్‌తో:

  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     ...
  4.   </div>
  5. </div>

చెక్‌బాక్స్ మరియు రేడియో రుచులు

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

జావాస్క్రిప్ట్ పొందండి »

హెడ్ ​​అప్

బటన్ సమూహాల కోసం CSS ప్రత్యేక ఫైల్‌లో ఉంది, button-groups.less.

బటన్‌ల డ్రాప్‌డౌన్‌లు బటన్ సమూహాలపై నిర్మించిన సందర్భానుసార డ్రాప్‌డౌన్ మెనులు

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

డ్రాప్‌డౌన్ మెనుని a లోపల ఉంచడం ద్వారా .btn-groupమరియు సరైన మెను మార్కప్‌ను అందించడం ద్వారా దాన్ని ట్రిగ్గర్ చేయడానికి ఏదైనా బటన్‌ని ఉపయోగించండి.

చర్య
చర్య
ప్రమాదం
విజయం
సమాచారం

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

బటన్ సమూహం వలె, మా మార్కప్ సాధారణ బటన్ మార్కప్‌ను ఉపయోగిస్తుంది, కానీ శైలిని మెరుగుపరచడానికి మరియు బూట్‌స్ట్రాప్ యొక్క డ్రాప్‌డౌన్ j క్వెరీ ప్లగ్ఇన్‌కు మద్దతు ఇవ్వడానికి కొన్ని జోడింపులతో.

  1. <div class = "btn-group" > 
  2.   <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
  3.     చర్య
  4.     <span class = "caret" ></span> 
  5.   </a>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- డ్రాప్‌డౌన్ మెను లింక్‌లు -->
  8.   </ul>
  9. </div>

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

బటన్ సమూహ శైలులు మరియు మార్కప్‌పై ఆధారపడి, మేము స్ప్లిట్ బటన్‌ను సులభంగా సృష్టించవచ్చు. స్ప్లిట్ బటన్‌లు ఎడమ వైపున ప్రామాణిక చర్యను మరియు సందర్భానుసార లింక్‌లతో కుడి వైపున డ్రాప్‌డౌన్ టోగుల్‌ను కలిగి ఉంటాయి.

చర్య
చర్య
ప్రమాదం
విజయం
సమాచారం

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

ప్రత్యేక డ్రాప్‌డౌన్ ట్రిగ్గర్‌గా పనిచేసే రెండవ బటన్ చర్యను అందించడానికి మేము సాధారణ బటన్ డ్రాప్‌డౌన్‌లను విస్తరిస్తాము.

  1. <div class = "btn-group" > 
  2.   <a class = "btn" href = "#" > చర్య </a>  
  3.   <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
  4.     <span class = "caret" ></span> 
  5.   </a>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- డ్రాప్‌డౌన్ మెను లింక్‌లు -->
  8.   </ul>
  9. </div>

పేజినేషన్ కంటెంట్ ద్వారా పేజింగ్ కోసం రెండు ఎంపికలు

బహుళ-పేజీ పేజినేషన్

ఎప్పుడు ఉపయోగించాలి

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

స్టేట్‌ఫుల్ పేజీ లింక్‌లు

లింక్‌లు అనుకూలీకరించదగినవి మరియు సరైన తరగతితో అనేక పరిస్థితులలో పని చేస్తాయి. .disabledక్లిక్ చేయలేని లింక్‌ల .activeకోసం మరియు ప్రస్తుత పేజీ కోసం.

సౌకర్యవంతమైన అమరిక

పేజినేషన్ లింక్‌ల అమరికను మార్చడానికి రెండు ఐచ్ఛిక తరగతుల్లో దేనినైనా జోడించండి: .pagination-centeredమరియు .pagination-right.

ఉదాహరణలు

డిఫాల్ట్ పేజినేషన్ భాగం అనువైనది మరియు అనేక వైవిధ్యాలలో పని చేస్తుంది.

మార్కప్

ఒక చుట్టి <div>, pagination కేవలం ఒక <ul>.

  1. <div class = "pagination" > 
  2.   <ul>
  3.     <li><a href = "#" > మునుపటి </a></li> 
  4.     <li class = "యాక్టివ్" > 
  5.       <a href = "#" > 1 </a> 
  6.     </li>
  7.     <li><a href = "#" > 2 </a></li> 
  8.     <li><a href = "#" > 3 </a></li> 
  9.     <li><a href = "#" > 4 ​​</a></li> 
  10.     <li><a href = "#" > తదుపరి </a></li> 
  11.   </ul>
  12. </div>

శీఘ్ర మునుపటి మరియు తదుపరి లింక్‌ల కోసం పేజర్

పేజర్ గురించి

పేజర్ కాంపోనెంట్ అనేది లైట్ మార్కప్ మరియు మరింత తేలికైన స్టైల్‌లతో సరళమైన పేజినేషన్ ఇంప్లిమెనేషన్‌ల కోసం లింక్‌ల సమితి. బ్లాగులు లేదా మ్యాగజైన్‌ల వంటి సాధారణ సైట్‌లకు ఇది చాలా బాగుంది.

డిఫాల్ట్ ఉదాహరణ

డిఫాల్ట్‌గా, పేజర్ లింక్‌లను కేంద్రీకరిస్తుంది.

  1. <ul class = "పేజర్" > 
  2.   <li>
  3.     <a href = "#" > మునుపటి </a> 
  4.   </li>
  5.   <li>
  6.     <a href = "#" > తదుపరి </a> 
  7.   </li>
  8. </ul>

సమలేఖనం చేయబడిన లింక్‌లు

ప్రత్యామ్నాయంగా, మీరు ప్రతి లింక్‌ను వైపులా సమలేఖనం చేయవచ్చు:

  1. <ul class = "పేజర్" > 
  2.   <li class = "మునుపటి" > 
  3.     <a href = "#" > ← పాతది </a> 
  4.   </li>
  5.   <li class = "తదుపరి" > 
  6.     <a href = "#" > కొత్తది → </a> 
  7.   </li>
  8. </ul>

ఇన్‌లైన్ లేబుల్స్ లేబుల్ మరియు ఉల్లేఖన వచనం

లేబుల్స్ మార్కప్
డిఫాల్ట్ <span class="label">Default</span>
కొత్తది <span class="label label-success">New</span>
హెచ్చరిక <span class="label label-warning">Warning</span>
ముఖ్యమైనది <span class="label label-important">Important</span>
సమాచారం <span class="label label-info">Info</span>

చిత్రాలు, వీడియోలు, వచనం మరియు మరిన్ని థంబ్‌నెయిల్‌ల గ్రిడ్‌లు

డిఫాల్ట్ సూక్ష్మచిత్రాలు

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

అత్యంత అనుకూలీకరించదగినది

కొంచెం అదనపు మార్కప్‌తో, థంబ్‌నెయిల్‌లలోకి హెడ్డింగ్‌లు, పేరాగ్రాఫ్‌లు లేదా బటన్‌ల వంటి ఎలాంటి HTML కంటెంట్‌ను జోడించడం సాధ్యమవుతుంది.

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

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

    చర్య చర్య

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

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

    చర్య చర్య

సూక్ష్మచిత్రాలను ఎందుకు ఉపయోగించాలి

థంబ్‌నెయిల్‌లు (గతంలో .media-gridv1.4 వరకు) ఫోటోలు లేదా వీడియోల గ్రిడ్‌లు, చిత్ర శోధన ఫలితాలు, రిటైల్ ఉత్పత్తులు, పోర్ట్‌ఫోలియోలు మరియు మరిన్నింటికి గొప్పవి. అవి లింక్‌లు లేదా స్టాటిక్ కంటెంట్ కావచ్చు.

సరళమైన, సౌకర్యవంతమైన మార్కప్

థంబ్‌నెయిల్ మార్కప్ చాలా సులభం- ulఏ liఎలిమెంట్స్ అయినా అవసరం. ఇది చాలా సరళమైనది, మీ కంటెంట్‌లను చుట్టడానికి కొంచెం ఎక్కువ మార్కప్‌తో ఏదైనా రకమైన కంటెంట్‌ను అనుమతిస్తుంది.

గ్రిడ్ కాలమ్ పరిమాణాలను ఉపయోగిస్తుంది

చివరగా, థంబ్‌నెయిల్‌ల భాగం ఇప్పటికే ఉన్న గ్రిడ్ సిస్టమ్ క్లాస్‌లను ఉపయోగిస్తుంది—వంటి .span2లేదా .span3—థంబ్‌నెయిల్ కొలతల నియంత్రణ కోసం.

మార్కప్

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

  1. <ul class = "థంబ్‌నెయిల్స్" > 
  2.   <li class = "span3" > 
  3.     <a href = "#" class = "thumbnail" >  
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

సూక్ష్మచిత్రాలలో అనుకూల HTML కంటెంట్ కోసం, మార్కప్ కొద్దిగా మారుతుంది. ఎక్కడైనా బ్లాక్ స్థాయి కంటెంట్‌ని అనుమతించడానికి, మేము <a>ఇలా మార్చుకుంటాము <div>:

  1. <ul class = "థంబ్‌నెయిల్స్" > 
  2.   <li class = "span3" > 
  3.     <div class = "థంబ్‌నెయిల్" > 
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.       <h5> థంబ్‌నెయిల్ లేబుల్ </h5>
  6.       <p> థంబ్‌నెయిల్ క్యాప్షన్ ఇక్కడే... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

మరిన్ని ఉదాహరణలు

మీకు అందుబాటులో ఉన్న వివిధ గ్రిడ్ తరగతులతో మీ అన్ని ఎంపికలను అన్వేషించండి. మీరు వివిధ పరిమాణాలను కూడా కలపవచ్చు మరియు సరిపోల్చవచ్చు.

విజయం, హెచ్చరిక మరియు దోష సందేశాల కోసం అలర్ట్ స్టైల్స్

తేలికపాటి డిఫాల్ట్‌లు

తిరిగి వ్రాయబడిన బేస్ క్లాస్

బూట్‌స్ట్రాప్ 2తో, మేము బేస్ క్లాస్‌ని సరళీకృతం చేసాము: .alertబదులుగా .alert-message. మేము అవసరమైన కనీస మార్కప్‌ను కూడా తగ్గించాము- <p>డిఫాల్ట్‌గా అవసరం లేదు, కేవలం బయట మాత్రమే <div>.

ఒకే హెచ్చరిక సందేశం

తక్కువ కోడ్‌తో మరింత మన్నికైన కాంపోనెంట్ కోసం, మేము బ్లాక్ అలర్ట్‌లు, ఎక్కువ ప్యాడింగ్‌తో వచ్చే మెసేజ్‌లు మరియు సాధారణంగా ఎక్కువ టెక్స్ట్ కోసం విభిన్న రూపాన్ని తీసివేసాము. తరగతి కూడా మార్చబడింది .alert-block.

జావాస్క్రిప్ట్‌తో అద్భుతంగా ఉంటుంది

బూట్‌స్ట్రాప్ హెచ్చరిక సందేశాలకు మద్దతు ఇచ్చే గొప్ప j క్వెరీ ప్లగ్ఇన్‌తో వస్తుంది, వాటిని త్వరగా మరియు సులభంగా తొలగించేలా చేస్తుంది.

ప్లగ్ఇన్ పొందండి »

ఉదాహరణ హెచ్చరికలు

మీ సందేశాన్ని మరియు ఐచ్ఛిక క్లోజ్ చిహ్నాన్ని సాధారణ తరగతితో ఒక divలో చుట్టండి.

× హెచ్చరిక! ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు. 
  1. <div class = "హెచ్చరిక" > 
  2.   <a class = "close" > × </a> 
  3.   <strong> హెచ్చరిక! </strong> మీరే ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు.
  4. </div>

రెండు ఐచ్ఛిక తరగతులతో ప్రామాణిక హెచ్చరిక సందేశాన్ని సులభంగా విస్తరించండి: .alert-blockమరిన్ని పాడింగ్ మరియు వచన నియంత్రణల .alert-headingకోసం మరియు సరిపోలే శీర్షిక కోసం.

×

హెచ్చరిక!

ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు. నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్. ప్రసెంట్ కమోడో కర్సస్ మాగ్నా, వెల్ స్కెలెరిస్క్ నిస్ల్ కన్సెక్టెచర్ ఎట్.

  1. <div class = "alert alert-block" > 
  2.   <a class = "close" > × </a> 
  3.   <h4 class = "alert-heading" > హెచ్చరిక! </h4> 
  4.   ఉత్తమంగా తనిఖీ చేయండి, మీరు కాదు...
  5. </div>

సందర్భానుసార ప్రత్యామ్నాయాలు హెచ్చరిక యొక్క అర్థాన్ని మార్చడానికి ఐచ్ఛిక తరగతులను జోడించండి

లోపం లేదా ప్రమాదం

× ఓహ్ స్నాప్! కొన్ని అంశాలను మార్చండి మరియు మళ్లీ సమర్పించడానికి ప్రయత్నించండి. 
  1. <div class = "alert alert-error" > 
  2.   ...
  3. </div>

విజయం

× బాగా చేసారు! మీరు ఈ ముఖ్యమైన హెచ్చరిక సందేశాన్ని విజయవంతంగా చదివారు. 
  1. <div class = "Alert alert-success" > 
  2.   ...
  3. </div>

సమాచారం

× హెడ్ ​​అప్! ఈ హెచ్చరికకు మీ శ్రద్ధ అవసరం, కానీ ఇది చాలా ముఖ్యమైనది కాదు. 
  1. <div class = "alert alert-info" > 
  2.   ...
  3. </div>

లోడ్ చేయడం, దారి మళ్లించడం లేదా చర్య స్థితి కోసం ప్రోగ్రెస్ బార్‌లు

ఉదాహరణలు మరియు మార్కప్

ప్రాథమిక

నిలువు గ్రేడియంట్‌తో డిఫాల్ట్ ప్రోగ్రెస్ బార్.

  1. <div class = "పురోగతి" > 
  2.   <div తరగతి = "బార్" 
  3.        style = " వెడల్పు : 60 %; " ></div> 
  4. </div>

చారల

చారల ప్రభావాన్ని సృష్టించడానికి గ్రేడియంట్‌ని ఉపయోగిస్తుంది.

  1. <div class = "పురోగతి పురోగతి-సమాచారం 
  2.      పురోగతి-చారల" >
  3.   <div తరగతి = "బార్" 
  4.        style = " వెడల్పు : 20 %; " ></div> 
  5. </div>

యానిమేటెడ్

చారల ఉదాహరణను తీసుకొని దానిని యానిమేట్ చేస్తుంది.

  1. <div class = "పురోగతి పురోగతి-ప్రమాదం 
  2.      ప్రోగ్రెస్-స్ట్రిప్డ్ యాక్టివ్" >
  3.   <div తరగతి = "బార్" 
  4.        style = " వెడల్పు : 40 %; " ></div> 
  5. </div>

ఎంపికలు మరియు బ్రౌజర్ మద్దతు

అదనపు రంగులు

ప్రోగ్రెస్ బార్‌లు ఒకే విధమైన స్టైలింగ్ కోసం బటన్‌లు మరియు హెచ్చరికల వలె ఒకే తరగతి పేర్లలో కొన్నింటిని ఉపయోగించుకుంటాయి.

  • .progress-info
  • .progress-success
  • .progress-danger

ప్రత్యామ్నాయంగా, మీరు తక్కువ ఫైల్‌లను అనుకూలీకరించవచ్చు మరియు మీ స్వంత రంగులు మరియు పరిమాణాలను రోల్ చేయవచ్చు.

ప్రవర్తన

ప్రోగ్రెస్ బార్‌లు CSS3 పరివర్తనలను ఉపయోగిస్తాయి, కాబట్టి మీరు జావాస్క్రిప్ట్ ద్వారా వెడల్పును డైనమిక్‌గా సర్దుబాటు చేస్తే, అది సజావుగా పరిమాణాన్ని మారుస్తుంది.

మీరు .activeతరగతిని ఉపయోగిస్తే, మీ .progress-stripedప్రోగ్రెస్ బార్‌లు ఎడమ నుండి కుడికి చారలను యానిమేట్ చేస్తాయి.

బ్రౌజర్ మద్దతు

ప్రోగ్రెస్ బార్‌లు వాటి అన్ని ప్రభావాలను సాధించడానికి CSS3 గ్రేడియంట్లు, పరివర్తనాలు మరియు యానిమేషన్‌లను ఉపయోగిస్తాయి. ఈ ఫీచర్‌లకు IE7-8 లేదా Firefox పాత వెర్షన్‌లలో మద్దతు లేదు.

Opera ఈ సమయంలో యానిమేషన్‌లకు మద్దతు ఇవ్వదు.

ఇతర బావులు, బ్యాడ్జ్‌లు మరియు క్లోజ్ ఐకాన్

బావులు

ఒక మూలకానికి ఇన్‌సెట్ ప్రభావాన్ని అందించడానికి బావిని సాధారణ ప్రభావంగా ఉపయోగించండి.

చూడు, నేను బావిలో ఉన్నాను! 
  1. <div class = "బాగా" > 
  2.   ...
  3. </div>

చిహ్నాన్ని మూసివేయండి

మోడల్‌లు మరియు హెచ్చరికల వంటి కంటెంట్‌ను తీసివేయడానికి సాధారణ క్లోజ్ చిహ్నాన్ని ఉపయోగించండి.

×

  1. <a class = "close" > × </a>