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

భాగాలు

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

హెడ్ ​​అప్! ఈ పత్రాలు v2.3.2 కోసం ఉన్నాయి, దీనికి అధికారికంగా మద్దతు లేదు. బూట్‌స్ట్రాప్ యొక్క తాజా సంస్కరణను చూడండి!

బటన్ సమూహాలు

ఉదాహరణలు

రెండు ప్రాథమిక ఎంపికలు, మరో రెండు నిర్దిష్ట వైవిధ్యాలతో పాటు.

ఒకే బటన్ సమూహం

.btnఇన్ తో బటన్ల శ్రేణిని చుట్టండి .btn-group.

  1. <div class = "btn-group" > 
  2.   <button class = "btn" > ఎడమ </button> 
  3.   <button class = "btn" > మిడిల్ </button> 
  4.   <button class = "btn" > కుడివైపు </button> 
  5. </div>

బహుళ బటన్ సమూహాలు

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

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

నిలువు బటన్ సమూహాలు

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

  1. <div class = "btn-group btn-group-vertical" > 
  2.   ...
  3. </div>

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

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

బటన్ సమూహాలలో డ్రాప్‌డౌన్‌లు

హెడ్ ​​అప్!సరైన రెండరింగ్ కోసం డ్రాప్‌డౌన్‌లతో .btn-groupఉన్న బటన్‌లు తప్పనిసరిగా వాటి స్వంత వాటితో చుట్టబడి ఉండాలి ..btn-toolbar

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

అవలోకనం మరియు ఉదాహరణలు

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

  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>

అన్ని బటన్ పరిమాణాలతో పని చేస్తుంది

బటన్ డ్రాప్‌డౌన్‌లు ఏ పరిమాణంలోనైనా పని చేస్తాయి: .btn-large, .btn-small, లేదా .btn-mini.

జావాస్క్రిప్ట్ అవసరం

బటన్ డ్రాప్‌డౌన్‌లు పని చేయడానికి బూట్‌స్ట్రాప్ డ్రాప్‌డౌన్ ప్లగ్ఇన్ అవసరం .

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

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

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

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

పరిమాణాలు

అదనపు బటన్ తరగతులు .btn-mini, .btn-smallలేదా .btn-largeసైజింగ్ కోసం ఉపయోగించుకోండి.

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

డ్రాప్అప్ మెనులు

యొక్క తక్షణ పేరెంట్‌కు ఒకే తరగతిని జోడించడం ద్వారా డ్రాప్‌డౌన్ మెనులను దిగువ నుండి పైకి టోగుల్ చేయవచ్చు .dropdown-menu. ఇది మెను యొక్క దిశను .caretతిప్పుతుంది మరియు పై నుండి క్రిందికి బదులుగా దిగువ నుండి పైకి కదలడానికి మెనుని రీపోజిషన్ చేస్తుంది.

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

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

ప్రామాణిక pagination

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

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

ఎంపికలు

వికలాంగ మరియు క్రియాశీల రాష్ట్రాలు

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

  1. <div class = "pagination" > 
  2.   <ul>
  3.     <li class = "డిసేబుల్" ><a href = "#" > « </a></li>  
  4.     <li class = "యాక్టివ్" ><a href = "#" > 1 </a></li>  
  5.     ...
  6.   </ul>
  7. </div>

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

  1. <div class = "pagination" > 
  2.   <ul>
  3.     <li class = "డిసేబుల్డ్" ><span> « </span></li> 
  4.     <li class = "యాక్టివ్" ><span> 1 </span></li> 
  5.     ...
  6.   </ul>
  7. </div>

పరిమాణాలు

పెద్ద లేదా చిన్న పేజీని రూపొందించాలనుకుంటున్నారా? .pagination-large, .pagination-small, లేదా .pagination-miniఅదనపు పరిమాణాల కోసం జోడించండి .

  1. <div class = "pagination pagination-large" > 
  2.   <ul>
  3.     ...
  4.   </ul>
  5. </div>
  6. <div class = "pagination" > 
  7.   <ul>
  8.     ...
  9.   </ul>
  10. </div>
  11. <div class = "pagination pagination-small" > 
  12.   <ul>
  13.     ...
  14.   </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" > 
  17.   <ul>
  18.     ...
  19.   </ul>
  20. </div>

అమరిక

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

  1. <div class = "pagination pagination-centered" > 
  2.   ...
  3. </div>
  1. <div class = "pagination pagination-right" > 
  2.   ...
  3. </div>

పేజర్

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

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

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

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

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

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

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

ఐచ్ఛిక వికలాంగ స్థితి

పేజర్ లింక్‌లు పేజినేషన్ .disabledనుండి సాధారణ యుటిలిటీ క్లాస్‌ను కూడా ఉపయోగిస్తాయి.

  1. <ul class = "పేజర్" > 
  2.   <li class = "మునుపటి డిసేబుల్" > 
  3.     <a href = "#" > ← పాతది </a> 
  4.   </li>
  5.   ...
  6. </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>
విలోమ <span class="label label-inverse">Inverse</span>

బ్యాడ్జ్‌లు

పేరు ఉదాహరణ మార్కప్
డిఫాల్ట్ 1 <span class="badge">1</span>
విజయం 2 <span class="badge badge-success">2</span>
హెచ్చరిక 4 <span class="badge badge-warning">4</span>
ముఖ్యమైనది 6 <span class="badge badge-important">6</span>
సమాచారం 8 <span class="badge badge-info">8</span>
విలోమ 10 <span class="badge badge-inverse">10</span>

సులభంగా ధ్వంసమయ్యే

సులభంగా అమలు చేయడం కోసం, :emptyకంటెంట్ లేనప్పుడు లేబుల్‌లు మరియు బ్యాడ్జ్‌లు కూలిపోతాయి (CSS ఎంపిక సాధనం ద్వారా).

టైపోగ్రాఫిక్ భాగాలు

హీరో యూనిట్

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

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

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

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

  1. <div class = "hero-unit" > 
  2.   <h1> శీర్షిక </h1>
  3.   <p> ట్యాగ్‌లైన్ </p>
  4.   <p>
  5.     <a class = "btn btn-primary btn-large" > 
  6.       ఇంకా నేర్చుకో
  7.     </a>
  8.   </p>
  9. </div>

పేజీ శీర్షిక

h1పేజీలోని కంటెంట్‌ని సముచితంగా ఖాళీ చేయడానికి మరియు సెగ్మెంట్ చేయడానికి ఒక సాధారణ షెల్ . ఇది h1యొక్క డిఫాల్ట్ small, మూలకం అలాగే చాలా ఇతర భాగాలను (అదనపు శైలులతో) ఉపయోగించుకోవచ్చు.

హెడర్ కోసం ఉదాహరణ పేజీ హెడర్ సబ్‌టెక్స్ట్

  1. <div class = "page-header" > 
  2.   <h1> ఉదాహరణ పేజీ హెడర్ <small> హెడర్ కోసం సబ్‌టెక్స్ట్ </small></h1>
  3. </div>

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

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

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

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

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

  • 300x200

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

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

    చర్య చర్య

  • 300x200

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

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

    చర్య చర్య

  • 300x200

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

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

    చర్య చర్య

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

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

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

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

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

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

మార్కప్

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

  1. <ul class = "థంబ్‌నెయిల్స్" > 
  2.   <li class = "span4" > 
  3.     <a href = "#" class = "thumbnail" >  
  4.       <img data-src = "holder.js/300x200" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

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

  1. <ul class = "థంబ్‌నెయిల్స్" > 
  2.   <li class = "span4" > 
  3.     <div class = "థంబ్‌నెయిల్" > 
  4.       <img data-src = "holder.js/300x200" alt = "" >  
  5.       <h3> థంబ్‌నెయిల్ లేబుల్ </h3>
  6.       <p> థంబ్‌నెయిల్ క్యాప్షన్... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

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

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

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

డిఫాల్ట్ హెచ్చరిక

.alertప్రాథమిక హెచ్చరిక హెచ్చరిక సందేశం కోసం ఏదైనా వచనాన్ని మరియు ఐచ్ఛిక తొలగింపు బటన్‌ను వ్రాప్ చేయండి.

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

బటన్లను తీసివేయండి

మొబైల్ సఫారి మరియు మొబైల్ ఒపెరా బ్రౌజర్‌లు, ట్యాగ్‌ని ఉపయోగిస్తున్నప్పుడు data-dismiss="alert"అట్రిబ్యూట్‌తో పాటు href="#"హెచ్చరికల తొలగింపు అవసరం.<a>

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

ప్రత్యామ్నాయంగా, మీరు <button>మా డాక్స్ కోసం మేము ఎంచుకున్న డేటా లక్షణంతో ఒక మూలకాన్ని ఉపయోగించవచ్చు. ఉపయోగిస్తున్నప్పుడు <button>, మీరు తప్పనిసరిగా చేర్చాలి type="button"లేదా మీ ఫారమ్‌లు సమర్పించకపోవచ్చు.

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

JavaScript ద్వారా హెచ్చరికలను తీసివేయండి

హెచ్చరికలను త్వరగా మరియు సులభంగా తొలగించడానికి హెచ్చరికల j క్వెరీ ప్లగ్ఇన్‌ని ఉపయోగించండి .

ఎంపికలు

పొడవైన సందేశాల కోసం, జోడించడం ద్వారా హెచ్చరిక రేపర్ ఎగువ మరియు దిగువన ప్యాడింగ్‌ను పెంచండి .alert-block.

హెచ్చరిక!

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

  1. <div class = "alert alert-block" > 
  2.   <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  3.   <h4> హెచ్చరిక! </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 class = "bar" style = " width : 60 %; " ></div>   
  3. </div>

చారల

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

  1. <div class = "ప్రోగ్రెస్ ప్రోగ్రెస్-స్ట్రిప్డ్" > 
  2.   <div class = "bar" style = " width : 20 %; " ></div>   
  3. </div>

యానిమేటెడ్

కుడి నుండి ఎడమకు చారలను యానిమేట్ .activeచేయడానికి కు జోడించండి . .progress-stripedIE యొక్క అన్ని వెర్షన్లలో అందుబాటులో లేదు.

  1. <div class = "ప్రోగ్రెస్ ప్రోగ్రెస్-స్ట్రిప్డ్ యాక్టివ్" > 
  2.   <div class = "bar" style = " width : 40 %; " ></div>   
  3. </div>

పేర్చబడినది

.progressవాటిని పేర్చడానికి బహుళ బార్‌లను ఒకే విధంగా ఉంచండి .

  1. <div class = "పురోగతి" > 
  2.   <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  3.   <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  4.   <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
  5. </div>

ఎంపికలు

అదనపు రంగులు

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

  1. <div class = "progress progress-info" > 
  2.   <div class = "bar" style = " width : 20 % " ></div>   
  3. </div>
  4. <div class = "పురోగతి పురోగతి-విజయం" > 
  5.   <div class = "bar" style = " width : 40 % " ></div>   
  6. </div>
  7. <div class = "పురోగతి పురోగతి-హెచ్చరిక" > 
  8.   <div class = "bar" style = " width : 60 % " ></div>   
  9. </div>
  10. <div class = "progress progress-danger" > 
  11.   <div class = "bar" style = " width : 80 % " ></div>   
  12. </div>

చారల బార్లు

ఘన రంగుల మాదిరిగానే, మేము విభిన్న చారల ప్రోగ్రెస్ బార్‌లను కలిగి ఉన్నాము.

  1. <div class = "progress progress-info progress-striped" > 
  2.   <div class = "bar" style = " width : 20 % " ></div>   
  3. </div>
  4. <div class = "ప్రోగ్రెస్ ప్రోగ్రెస్-సక్సెస్ ప్రోగ్రెస్-స్ట్రిప్డ్" > 
  5.   <div class = "bar" style = " width : 40 % " ></div>   
  6. </div>
  7. <div class = "పురోగతి పురోగతి-హెచ్చరిక పురోగతి-చారలు" > 
  8.   <div class = "bar" style = " width : 60 % " ></div>   
  9. </div>
  10. <div class = "పురోగతి పురోగతి-అపాయం పురోగతి-చారలు" > 
  11.   <div class = "bar" style = " width : 80 % " ></div>   
  12. </div>

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

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

ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 10 మరియు Opera 12 కంటే మునుపటి సంస్కరణలు యానిమేషన్‌లకు మద్దతు ఇవ్వవు.

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

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

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

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

64x64

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

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

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

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

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

క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. Fusce condimentum nunc ac nisi vulputate fringilla. ఫౌసిబస్‌లో డోనెక్ లాసినియా కంగూ ఫెలిస్. 
  1. <div class = "మీడియా" > 
  2.   <a class = "pull-left" href = "#" >  
  3.     <img class = "media-object" data-src = "holder.js/64x64" >  
  4.   </a>
  5.   <div class = "media-body" > 
  6.     <h4 class = "media-heading" > మీడియా శీర్షిక </h4> 
  7.     ...
  8.  
  9.     <!-- నెస్టెడ్ మీడియా ఆబ్జెక్ట్ -->
  10.     <div class = "మీడియా" > 
  11.       ...
  12.     </div>
  13.   </div>
  14. </div>

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

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

  • 64x64

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

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

    64x64

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

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

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

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

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

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

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

    క్రాస్ సిట్ అమెట్ నిబ్ లిబెరో, ఇన్ గ్రావిడ నుల్లా. నుల్లా వెల్ మెటస్ స్కెలెరిస్క్ అంటే సొల్లిసిటుడిన్ కమోడో. క్రాస్ పురస్ ఓడియో, వెస్టిబులం ఇన్ వల్పుటేట్ ఎట్, టెంపస్ వివెర్రా టర్పిస్. 
  1. <ul class = "media-list" > 
  2.   <li class = "మీడియా" > 
  3.     <a class = "pull-left" href = "#" >  
  4.       <img class = "media-object" data-src = "holder.js/64x64" >  
  5.     </a>
  6.     <div class = "media-body" > 
  7.       <h4 class = "media-heading" > మీడియా శీర్షిక </h4> 
  8.       ...
  9.  
  10.       <!-- నెస్టెడ్ మీడియా ఆబ్జెక్ట్ -->
  11.       <div class = "మీడియా" > 
  12.         ...
  13.      </div>
  14.     </div>
  15.   </li>
  16. </ul>

ఇతర తేలికపాటి యుటిలిటీ భాగాలు

బావులు

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

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

ఐచ్ఛిక తరగతులు

రెండు ఐచ్ఛిక మాడిఫైయర్ తరగతులతో ప్యాడింగ్ మరియు గుండ్రని మూలలను నియంత్రించండి.

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

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

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

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

href="#"మీరు యాంకర్‌ని ఉపయోగించాలనుకుంటే iOS పరికరాలకు క్లిక్ ఈవెంట్‌లు అవసరం .

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

సహాయక తరగతులు

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

.లాగు-ఎడమ

ఒక మూలకాన్ని ఎడమవైపుకి ఫ్లోట్ చేయండి

  1. తరగతి = "ఎడమవైపు లాగండి"
  1. . లాగండి - ఎడమ {
  2.   ఫ్లోట్ : ఎడమ ;
  3. }

.కుడి-కుడి

ఒక మూలకాన్ని కుడివైపుకి ఫ్లోట్ చేయండి

  1. తరగతి = "కుడివైపు లాగండి"
  1. . లాగండి - కుడి {
  2.   ఫ్లోట్ : కుడి ;
  3. }

.మ్యూట్ చేయబడింది

మూలకం యొక్క రంగును దీనికి మార్చండి#999

  1. తరగతి = "మ్యూట్ చేయబడింది"
  1. . మ్యూట్ చేయబడింది {
  2.   రంగు : #999; 
  3. }

.clearfix

floatఏదైనా మూలకంపై క్లియర్ చేయండి

  1. తరగతి = "క్లియర్‌ఫిక్స్"
  1. . క్లియర్ ఫిక్స్ {
  2.   * జూమ్ : 1 ; 
  3.   &: ముందు ,
  4.   &: { తర్వాత
  5.     ప్రదర్శన : పట్టిక ;
  6.     కంటెంట్ : "" ; 
  7.   }
  8.   &: { తర్వాత
  9.     స్పష్టమైన : రెండూ ;
  10.   }
  11. }