Source

పట్టికలు

బూట్‌స్ట్రాప్‌తో పట్టికల (జావాస్క్రిప్ట్ ప్లగిన్‌లలో వాటి ప్రబలమైన వినియోగాన్ని బట్టి) ఎంపిక-ఇన్ స్టైలింగ్ కోసం డాక్యుమెంటేషన్ మరియు ఉదాహరణలు.

ఉదాహరణలు

క్యాలెండర్‌లు మరియు తేదీ పికర్‌ల వంటి థర్డ్-పార్టీ విడ్జెట్‌లలో టేబుల్‌ల విస్తృత వినియోగం కారణంగా, మేము మా టేబుల్‌లను ఎంపిక చేసుకునేలా డిజైన్ చేసాము . బేస్ క్లాస్‌ని .tableదేనికైనా జోడించి <table>, ఆపై కస్టమ్ స్టైల్స్ లేదా మా వివిధ చేర్చబడిన మాడిఫైయర్ క్లాస్‌లతో విస్తరించండి.

అత్యంత ప్రాథమిక పట్టిక మార్కప్‌ని ఉపయోగించి, .tableబూట్‌స్ట్రాప్‌లో-ఆధారిత పట్టికలు ఎలా కనిపిస్తాయో ఇక్కడ ఉంది. అన్ని టేబుల్ స్టైల్‌లు బూట్‌స్ట్రాప్ 4లో వారసత్వంగా పొందబడతాయి , అంటే ఏదైనా సమూహ పట్టికలు పేరెంట్ మాదిరిగానే స్టైల్ చేయబడతాయి.

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ	పక్షి	@ట్విట్టర్

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

మీరు ముదురు నేపథ్యాలపై తేలికపాటి వచనంతో రంగులను కూడా విలోమం చేయవచ్చు .table-dark.

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ	పక్షి	@ట్విట్టర్

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

టేబుల్ హెడ్ ఎంపికలు

పట్టికలు మరియు ముదురు పట్టికల మాదిరిగానే, మాడిఫైయర్ తరగతులను ఉపయోగించండి .thead-lightలేదా లు లేత లేదా ముదురు బూడిద రంగులో కనిపించేలా .thead-darkచేయండి .<thead>

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ	పక్షి	@ట్విట్టర్

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ	పక్షి	@ట్విట్టర్

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

చారల వరుసలు

.table-stripedలోపల ఏదైనా టేబుల్ అడ్డు వరుసకు జీబ్రా-స్ట్రిపింగ్‌ని జోడించడానికి ఉపయోగించండి <tbody>.

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ	పక్షి	@ట్విట్టర్

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ	పక్షి	@ట్విట్టర్

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

సరిహద్దు పట్టిక

.table-borderedపట్టిక మరియు సెల్‌లకు అన్ని వైపులా సరిహద్దుల కోసం జోడించండి .

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ ది బర్డ్		@ట్విట్టర్

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ ది బర్డ్		@ట్విట్టర్

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

హోవర్ చేయదగిన వరుసలు

.table-hoverఒక లోపల పట్టిక అడ్డు వరుసలలో హోవర్ స్థితిని ప్రారంభించడానికి జోడించండి <tbody>.

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ ది బర్డ్		@ట్విట్టర్

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ ది బర్డ్		@ట్విట్టర్

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

చిన్న టేబుల్

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

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ ది బర్డ్		@ట్విట్టర్

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ ది బర్డ్		@ట్విట్టర్

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

సందర్భోచిత తరగతులు

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

తరగతి	శీర్షిక	శీర్షిక
చురుకుగా	సెల్	సెల్
డిఫాల్ట్	సెల్	సెల్
ప్రాథమిక	సెల్	సెల్
సెకండరీ	సెల్	సెల్
విజయం	సెల్	సెల్
ప్రమాదం	సెల్	సెల్
హెచ్చరిక	సెల్	సెల్
సమాచారం	సెల్	సెల్
కాంతి	సెల్	సెల్
చీకటి	సెల్	సెల్

<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

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

#	శీర్షిక	శీర్షిక
1	సెల్	సెల్
2	సెల్	సెల్
3	సెల్	సెల్
4	సెల్	సెల్
5	సెల్	సెల్
6	సెల్	సెల్
7	సెల్	సెల్
8	సెల్	సెల్
9	సెల్	సెల్

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

సహాయక సాంకేతికతలకు అర్థాన్ని తెలియజేయడం

అర్థాన్ని జోడించడానికి రంగును ఉపయోగించడం అనేది దృశ్యమాన సూచనను మాత్రమే అందిస్తుంది, ఇది స్క్రీన్ రీడర్‌ల వంటి సహాయక సాంకేతికతల వినియోగదారులకు తెలియజేయబడదు. రంగు ద్వారా సూచించబడిన సమాచారం కంటెంట్‌లోనే స్పష్టంగా ఉందని (ఉదా. కనిపించే వచనం) లేదా .sr-onlyక్లాస్‌తో దాచిన అదనపు వచనం వంటి ప్రత్యామ్నాయ మార్గాల ద్వారా చేర్చబడిందని నిర్ధారించుకోండి.

576px, 768px, 992px మరియు 1120px వరకు ప్రతి బ్రేక్‌పాయింట్ .tableవద్ద .table-responsive{-sm|-md|-lg|-xl}పట్టికను అడ్డంగా స్క్రోల్ చేసేలా చేయడం ద్వారా ప్రతిస్పందించే పట్టికలను సృష్టించండి .max-width

బ్రౌజర్‌లు ప్రస్తుతం శ్రేణి సందర్భ ప్రశ్నలకు మద్దతు ఇవ్వనందున, మేము ఈ పోలికలకు అధిక ఖచ్చితత్వంతో విలువలను ఉపయోగించడం ద్వారా పాక్షిక వెడల్పులతో (ఉదాహరణకు, అధిక-dpi పరికరాలలో కొన్ని పరిస్థితులలో సంభవించవచ్చు) పరిమితులు min-మరియు max-ప్రిఫిక్స్‌లు మరియు వీక్షణపోర్ట్‌ల చుట్టూ పని చేస్తాము. .

శీర్షికలు

ఒక <caption>టేబుల్ కోసం హెడ్డింగ్ లాగా పనిచేస్తుంది. స్క్రీన్ రీడర్‌లు ఉన్న వినియోగదారులకు పట్టికను కనుగొని, దాని గురించి అర్థం చేసుకోవడానికి మరియు వారు దానిని చదవాలనుకుంటున్నారా అని నిర్ణయించుకోవడానికి ఇది సహాయపడుతుంది.

వినియోగదారుల జాబితా
#	ప్రధమ	చివరిది	హ్యాండిల్
1	మార్క్	ఒట్టో	@mdo
2	జాకబ్	థోర్న్టన్	@కొవ్వు
3	లారీ	పక్షి	@ట్విట్టర్

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ప్రతిస్పందించే పట్టికలు

ప్రతిస్పందించే పట్టికలు పట్టికలను సులభంగా అడ్డంగా స్క్రోల్ చేయడానికి అనుమతిస్తాయి. .tableతో చుట్టడం ద్వారా అన్ని వ్యూపోర్ట్‌లలో ఏదైనా పట్టికను ప్రతిస్పందించేలా చేయండి .table-responsive. లేదా, ఉపయోగించడం ద్వారా ప్రతిస్పందించే పట్టికను కలిగి ఉండే గరిష్ట బ్రేక్‌పాయింట్‌ను ఎంచుకోండి.table-responsive{-sm|-md|-lg|-xl} .

వర్టికల్ క్లిప్పింగ్/ట్రంకేషన్

ప్రతిస్పందించే పట్టికలు ఉపయోగించబడతాయి overflow-y: hidden, ఇది పట్టిక దిగువన లేదా ఎగువ అంచులను దాటి ఏదైనా కంటెంట్‌ను క్లిప్ చేస్తుంది. ప్రత్యేకించి, ఇది డ్రాప్‌డౌన్ మెనులను మరియు ఇతర మూడవ పక్ష విడ్జెట్‌లను క్లిప్ చేయగలదు.

ఎల్లప్పుడూ ప్రతిస్పందించే

ప్రతి బ్రేక్‌పాయింట్‌లో, .table-responsiveఅడ్డంగా స్క్రోలింగ్ పట్టికల కోసం ఉపయోగించండి.

#	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక
1	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్
2	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్
3	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్	సెల్

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

బ్రేక్ పాయింట్ నిర్దిష్ట

.table-responsive{-sm|-md|-lg|-xl}నిర్దిష్ట బ్రేక్‌పాయింట్ వరకు ప్రతిస్పందించే పట్టికలను సృష్టించడానికి అవసరమైన విధంగా ఉపయోగించండి . ఆ బ్రేక్ పాయింట్ నుండి మరియు పైకి, పట్టిక సాధారణంగా ప్రవర్తిస్తుంది మరియు అడ్డంగా స్క్రోల్ చేయదు.

#	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక
1	సెల్	సెల్	సెల్	సెల్	సెల్
2	సెల్	సెల్	సెల్	సెల్	సెల్
3	సెల్	సెల్	సెల్	సెల్	సెల్

#	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక
1	సెల్	సెల్	సెల్	సెల్	సెల్
2	సెల్	సెల్	సెల్	సెల్	సెల్
3	సెల్	సెల్	సెల్	సెల్	సెల్

#	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక
1	సెల్	సెల్	సెల్	సెల్	సెల్
2	సెల్	సెల్	సెల్	సెల్	సెల్
3	సెల్	సెల్	సెల్	సెల్	సెల్

#	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక	శీర్షిక
1	సెల్	సెల్	సెల్	సెల్	సెల్
2	సెల్	సెల్	సెల్	సెల్	సెల్
3	సెల్	సెల్	సెల్	సెల్	సెల్

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>