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

భాగాలు

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

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

బటన్ సమూహాలు

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

ఉత్తమ అభ్యాసాలు

బటన్ సమూహాలు మరియు టూల్‌బార్‌లను ఉపయోగించడం కోసం మేము క్రింది మార్గదర్శకాలను సిఫార్సు చేస్తున్నాము:

  • ఒకే బటన్ సమూహంలో ఎల్లప్పుడూ ఒకే మూలకాన్ని ఉపయోగించండి <a>లేదా <button>.
  • ఒకే బటన్ సమూహంలో విభిన్న రంగుల బటన్‌లను కలపవద్దు.
  • టెక్స్ట్‌కు అదనంగా లేదా బదులుగా చిహ్నాలను ఉపయోగించండి, అయితే తగిన చోట ఆల్ట్ మరియు టైటిల్ టెక్స్ట్‌ను చేర్చాలని నిర్ధారించుకోండి.

డ్రాప్‌డౌన్‌లతో సంబంధిత బటన్ సమూహాలు (క్రింద చూడండి) విడివిడిగా పిలవబడాలి మరియు ఉద్దేశించిన ప్రవర్తనను సూచించడానికి ఎల్లప్పుడూ డ్రాప్‌డౌన్ క్యారెట్‌ను చేర్చాలి.

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

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

  1. <div class = "btn-group" > 
  2.   <button class = "btn" > 1 </button> 
  3.   <button class = "btn" > 2 </button> 
  4.   <button class = "btn" > 3 </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>

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

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

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

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

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

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

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

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

డ్రాప్‌డౌన్ మెనుని 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>

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

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

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

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

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


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

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

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

పరిమాణాలు

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

  1. <div class = "btn-group" > 
  2.   ...
  3.   <ul class = "dropdown-menu pull-right" > 
  4.     <!-- డ్రాప్‌డౌన్ మెను లింక్‌లు -->
  5.   </ul>
  6. </div>

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

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

  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>

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

యొక్క తక్షణ పేరెంట్‌కి ఒకే తరగతిని జోడించడం ద్వారా డ్రాప్‌డౌన్ మెనులను దిగువ నుండి పైకి టోగుల్ చేయవచ్చు .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>

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

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

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

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>

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

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

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

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

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

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

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

  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">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>

బ్యాడ్జ్‌ల సూచికలు మరియు చదవని గణనలు

గురించి

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

అందుబాటులో ఉన్న తరగతులు

పేరు ఉదాహరణ మార్కప్
డిఫాల్ట్ 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>

కంటెంట్‌ని విభజించడానికి టైపోగ్రాఫిక్ భాగాలు పేజీ హెడర్ మరియు హీరో యూనిట్

హీరో యూనిట్

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

మార్కప్

మీ కంటెంట్‌ని divఇలా వ్రాప్ చేయండి:

  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> ఉదాహరణ పేజీ హెడర్ </h1>
  3. </div>

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

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

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

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

కొంచెం అదనపు మార్కప్‌తో, థంబ్‌నెయిల్‌లలోకి హెడ్డింగ్‌లు, పేరాగ్రాఫ్‌లు లేదా బటన్‌ల వంటి ఎలాంటి 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.   <button class = "close" data-dismiss = "alert" > × </button>  
  3.   <strong> హెచ్చరిక! </strong> మీరే ఉత్తమంగా తనిఖీ చేయండి, మీరు చాలా బాగా కనిపించడం లేదు.
  4. </div>

హెడ్ ​​అప్! iOS పరికరాలకు href="#"హెచ్చరికల తొలగింపు అవసరం. యాంకర్ క్లోజ్ ఐకాన్‌ల కోసం దీన్ని మరియు డేటా లక్షణాన్ని చేర్చాలని నిర్ధారించుకోండి. ప్రత్యామ్నాయంగా, మీరు <button>మా డాక్స్ కోసం మేము ఎంచుకున్న డేటా లక్షణంతో ఒక మూలకాన్ని ఉపయోగించవచ్చు. ఉపయోగిస్తున్నప్పుడు <button>, మీరు తప్పనిసరిగా చేర్చాలి type="button"లేదా మీ ఫారమ్‌లు సమర్పించకపోవచ్చు.

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

హెచ్చరిక!

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

  1. <div class = "alert alert-block" > 
  2.   <a class = "close" data-dismiss = "alert" href = "#" > × </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>

చారల

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

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

యానిమేటెడ్

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

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

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

అదనపు రంగులు

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

చారల బార్లు

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

ప్రవర్తన

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

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

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

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

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

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

బావులు

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

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

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

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

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

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

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