బోట్స్ట్రాప్ 5 టేబుల్
- ముందు పేజీ BS5 రంగులు
- తరువాత పేజీ BS5 చిత్రం
ప్రాథమిక టేబుల్
ఒక ప్రాథమిక బ్రౌన్స్ప్రింగ్ టేబుల్ లో కొంచంచో అంతరాయం ఉంటుంది మరియు హోరిజంటల్ సెపరేషన్ ఉంటుంది.
.table టేబుల్కు ప్రాథమిక స్టైల్స్ జోడించిన కేస్:
ఉదాహరణ
పట్టికల వరుసలు
.table-striped టేబుల్లో పారిశ్రామిక పట్టికలను జోడించండి:
ఉదాహరణ
బార్డర్స్ ఉన్న టేబుల్
.table-bordered టేబుల్ మరియు క్లాస్లపై అన్ని బార్డర్స్ బార్డర్స్ జోడించండి:
ఉదాహరణ
హోవర్ ప్రభావం ఉన్న వరుసలు
.table-hover టేబుల్ వరుసలపై హోవర్ ప్రభావాన్ని జోడించండి (కాలిన్ బేక్గ్రౌండ్ రంగు):
ఉదాహరణ
బ్లాక్/గంభీరమైన టేబుల్
.table-dark టేబుల్కు బ్లాక్ బేక్గ్రౌండ్ కేస్ జోడించండి:
ఉదాహరణ
గంభీరమైన పట్టికల బార్డర్స్
జోడించండి .table-dark మరియు .table-striped గంభీరమైన పట్టికలను సృష్టించడానికి వచ్చేది:
ఉదాహరణ
హోవర్ ప్రభావం ఉన్న గంభీరమైన టేబుల్
.table-hover టేబుల్ వరుసలపై హోవర్ ప్రభావాన్ని జోడించండి (కాలిన్ బేక్గ్రౌండ్ రంగు):
ఉదాహరణ
బార్డర్స్ లేని టేబుల్
.table-borderless టేబుల్ నుండి బార్డర్స్ తొలగించండి:
ఉదాహరణ
上下文类
上下文类可用于为整个表格 (<table>) లేదా పట్టిక వరుస (<tr>) లేదా పట్టిక కలంబు (<td>) రంగు.
ఉదాహరణ
లభించే కంటెక్స్ట్ క్లాస్లు:
| క్లాస్ | వివరణ |
|---|---|
.table-primary |
నీలి: ముఖ్యమైన చర్యలను సూచిస్తుంది. |
.table-success |
హరితం: విజయం లేదా సకారాత్మక చర్యలను సూచిస్తుంది. |
.table-danger |
ఎరుపు: రోగ్యం లేదా పోటీపడుతున్న చర్యలను సూచిస్తుంది. |
.table-info |
పసుపు నీలి: మధ్యమ సమాచారం లేదా చర్యలను సూచిస్తుంది. |
.table-warning |
అరటి రంగు: శ్రద్ధ పెట్టవలసిన అపాయాన్ని సూచిస్తుంది. |
.table-active |
గ్రే: పట్టిక వరుస లేదా పట్టిక కలంబులకు హోవర్ కలర్ అనువర్తిస్తుంది. |
.table-secondary |
గ్రే: చాలా ముఖ్యమైన చర్యలను సూచిస్తుంది. |
.table-light |
తెలుపు గ్రే పట్టిక లేదా పట్టిక వరుస బ్యాక్గ్రౌండ్. |
.table-dark |
కాలిన్ గ్రే పట్టిక లేదా పట్టిక వరుస బ్యాక్గ్రౌండ్. |
శీర్షిక రంగు
మీరు పట్టిక శీర్షికకు మాత్రమే బ్యాక్గ్రౌండ్ కలర్ జోడించవచ్చు ఏదైనా కంటెక్స్ట్ క్లాస్ ఉపయోగించవచ్చు:
ఉదాహరణ
చిన్న పట్టిక
.table-sm క్లాస్ కలంబుల పూర్తిని కలిగించడం ద్వారా పట్టికను చిన్నది చేస్తుంది:
ఉదాహరణ
ప్రతిస్పందక పట్టిక
.table-responsive అవసరమైనప్పుడు పట్టికకు స్క్రాల్ బార్ జోడించే క్లాస్ ఉపయోగించండి (ఇది హోరిజంటల్ వైరుస్ట్ గా ఎక్కువగా ఉంటే):
ఉదాహరణ
<div class="table-responsive">
<table class="table">
...
</table>
</div>
మీరు పట్టిక ఎప్పుడు స్క్రాల్ బార్ పొందాలి నిర్ణయించవచ్చు, ఇది స్క్రీన్ వెడిథ్ మీద ఆధారపడి ఉంటుంది:
| క్లాస్ | స్క్రీన్ వెడిథ్ |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
.table-responsive-xxl |
< 1400px |
ఉదాహరణ
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
- ముందు పేజీ BS5 రంగులు
- తరువాత పేజీ BS5 చిత్రం
