బూట్స్ట్రాప్ 5 యూటిలిటీ టిప్స్

యూటిలిటీ / హెల్పర్ క్లాస్

Bootstrap 5 లో అనేక యూటిలిటీ/హెల్పర్ క్లాస్లు ఉన్నాయి, అవి కోడ్స్ వాడకుండా ఎలిమెంట్ల శైలిని త్వరగా సెట్ చేయగలవు.

బార్డర్

బార్డర్ క్లాస్ ఉపయోగించి ఎలిమెంట్లకు బార్డర్ జోడించినా తొలగించినా చేయండి:

ఉదాహరణ

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

స్వయంగా ప్రయత్నించండి

బార్డర్ వెడల్పు

ఉపయోగం .border-1 కి .border-5 బార్డర్ వెడల్పు మార్చడానికి ఉపయోగించండి:

ఉదాహరణ

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

స్వయంగా ప్రయత్నించండి

బార్డర్ రంగు

ఏ సందర్భంలోనైనా బార్డర్ రంగు క్లాస్ ఉపయోగించి బార్డర్ కు రంగు జోడించండి:

ఉదాహరణ

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

స్వయంగా ప్రయత్నించండి

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

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

ఉదాహరణ

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

స్వయంగా ప్రయత్నించండి

ఫ్లోట్ మరియు ఫ్లోట్ నివారించే కెలస్ట్రాన్స్ట్రుంట్స్

ఉపయోగం .float-end కుడివైపు ఫ్లోట్ చేసే కెలస్ట్రాన్స్ట్రుంట్స్ లేదా ఉపయోగించండి .float-start ఎడమవైపు ఫ్లోట్ చేయండి మరియు ఉపయోగించండి .clearfix ఫ్లోట్ నివారించే కెలస్ట్రాన్స్ట్రుంట్స్ కేంద్రం లో స్థానించండి:

ఉదాహరణ

<div class="clearfix">
  <span class="float-start">ఎడమవైపు ఫ్లోట్</span>
  <span class="float-end">కుడివైపు ఫ్లోట్</span>
</div>

స్వయంగా ప్రయత్నించండి

రెస్పాన్సివ్ ఫ్లోట్

స్క్రీన్ వెడల్పును బట్టి ఎడమవైపు లేదా కుడివైపు ఫ్లోట్ చేసే కెలస్ట్రాన్స్ట్రుంట్స్ ఉపయోగించండి (.float-*-left|right) లో * అనేది ఉంది:

  • sm (<= 576px)
  • md (>= 768px)
  • lg (>= 992px)
  • xl (>= 1200px)
  • xxl (>= 1400px)

ఉదాహరణ

<div class="float-sm-end">చిన్న స్క్రీన్ లేదా మరింత విస్తరించిన స్క్రీన్ పైన కుడివైపు ఫ్లోట్ చేయండి</div><br>
<div class="float-md-end">మధ్యతరహా స్క్రీన్ లేదా మరింత విస్తరించిన స్క్రీన్ పైన కుడివైపు ఫ్లోట్ చేయండి</div><br>
<div class="float-lg-end">భారీ స్క్రీన్ లేదా మరింత విస్తరించిన స్క్రీన్ పైన కుడివైపు ఫ్లోట్ చేయండి</div><br>
<div class="float-xl-end">అధిక భారీ స్క్రీన్ లేదా మరింత విస్తరించిన స్క్రీన్ పైన కుడివైపు ఫ్లోట్ చేయండి</div><br>
<div class="float-xxl-end">ప్రత్యేక భారీ స్క్రీన్ లేదా మరింత విస్తరించిన స్క్రీన్ పైన కుడివైపు ఫ్లోట్ చేయండి</div><br>
<div class="float-none">ఫ్లోట్ చేయకూడని</div>

స్వయంగా ప్రయత్నించండి

కేంద్రంలో స్థానించండి

ఉపయోగం .mx-auto కేంద్ర స్థానించబడిన కెలస్ట్రాన్స్ట్రుంట్స్ (మార్జిన్-లెఫ్ట్ మరియు మార్జిన్-రైట్: ఆటో జోడించండి):

ఉదాహరణ

居中

స్వయంగా ప్రయత్నించండి

<div class="mx-auto bg-warning" style="width:150px">మధ్యలో ఉంచండి</div>

వెడల్పువెడల్పు కోసం w-* వర్గాలను వినియోగించండి (、.w-25、.w-50、.w-75、.w-100、.mw-auto.mw-100

ఉదాహరణ

వెడల్పు నిర్ణయించడానికి సిఫార్సు సిద్ధాంతం సిద్ధం చేయండి:
<div class="w-25 bg-warning">వెడల్పు 25%</div>
<div class="w-50 bg-warning">వెడల్పు 50%</div>
<div class="w-75 bg-warning">వెడల్పు 75%</div>
<div class="w-100 bg-warning">వెడల్పు 100%</div>
<div class="w-auto bg-warning">స్వయంచాలక వెడల్పు</div>

స్వయంగా ప్రయత్నించండి

<div class="mw-100 bg-warning">గరిష్ట వెడల్పు 100%</div>

ఎత్తుఎత్తు కోసం h-* వర్గాలను వినియోగించండి (、.h-25、.h-50、.h-75、.h-100、.mh-auto.mh-100

ఉదాహరణ

పరిమితి నిర్ణయించడానికి సిఫార్సు సిద్ధాంతం సిద్ధం చేయండి:
  <div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">పొడవు 25%</div>
  <div class="h-50 bg-warning">పొడవు 50%</div>
  <div class="h-75 bg-warning">పొడవు 75%</div>
  <div class="h-100 bg-warning">పొడవు 100%</div>
  <div class="h-auto bg-warning">స్వయంచాలక పొడవు</div>
</div>

స్వయంగా ప్రయత్నించండి

<div class="mh-100 bg-warning" style="height:500px">గరిష్ట పొడవు 100%</div>

అంతరాలు

  • xs Bootstrap 5 విస్తృత ప్రతిస్పందక మార్జిన్ మరియు ప్యాడింగ్ ప్రయోగిక వర్గాలను కలిగి ఉంది. వాటిని అన్ని బ్రేక్‌పాయింట్లకు వినియోగించవచ్చు:
  • sm (<= 576px)
  • md (>= 768px)
  • lg (>= 992px)
  • xl (>= 1200px)
  • xxl (>= 1400px)

ఈ వర్గాల వినియోగ ఫార్మాట్:{పరిశీలన స్వరూపం}{ప్రక్కల}-{పరిమాణం} ఉపయోగిస్తారు xsమరియు {పరిశీలన స్వరూపం}{ప్రక్కల}-{breakpoint}-{పరిమాణం} ఉపయోగిస్తారు sm、md、lg、xl మరియు xxl。

పరిశీలన స్వరూపం ఈ ఒకటి లేదా మరొకటి ఉంది:

  • m సెట్ చేయండి మార్జిన్
  • p సెట్ చేయండి పాడింగ్

ప్రక్కల ఈ ఒకటి లేదా మరొకటి ఉంది:

  • t సెట్ చేయండి మార్జిన్ టాప్ లేదా పాడింగ్ టాప్
  • b సెట్ చేయండి మార్జిన్ బోటమ్ లేదా పాడింగ్ బోటమ్
  • s సెట్ చేయండి మార్జిన్ లెఫ్ట్ లేదా పాడింగ్ లెఫ్ట్
  • e సెట్ చేయండి మార్జిన్ రైట్ లేదా పాడింగ్ రైట్
  • x సమాంతరంగా సెట్ చేయండి పాడింగ్ లెఫ్ట్ మరియు పాడింగ్ రైట్ లేదా మార్జిన్ లెఫ్ట్ మరియు మార్జిన్ రైట్
  • y సమాంతరంగా సెట్ చేయండి పాడింగ్ టాప్ మరియు పాడింగ్ బోటమ్ లేదా మార్జిన్ టాప్ మరియు మార్జిన్ బోటమ్
  • blank - మూలకం యొక్క అన్ని నాలుగు ప్రక్కలపై మార్జిన్ సెట్ చేయండి మార్జిన్ లేదా పాడింగ్

పరిమాణం ఈ ఒకటి లేదా మరొకటి ఉంది:

  • 0 అనేది మార్జిన్ లేదా పాడింగ్ సెట్ చేయండి 0
  • 1 అనేది మార్జిన్ లేదా పాడింగ్ సెట్ చేయండి .25rem
  • 2 అనేది మార్జిన్ లేదా పాడింగ్ సెట్ చేయండి .5rem
  • 3 అనేది మార్జిన్ లేదా పాడింగ్ సెట్ చేయండి 1rem
  • 4 అనేది మార్జిన్ లేదా పాడింగ్ సెట్ చేయండి 1.5rem
  • 5 అనేది మార్జిన్ లేదా పాడింగ్ సెట్ చేయండి 3rem
  • auto అనేది మార్జిన్ auto సెట్ చేయండి

ఉదాహరణ

<div class="pt-4 bg-warning">నేను పై లోపలి మార్జిన్ (1.5rem) మాత్రమే కలిగినది</div>
<div class="p-5 bg-success">నేను అన్ని ప్రక్కలపై లోపలి మార్జిన్ (3rem) కలిగినది</div>
<div class="m-5 pb-5 bg-info">నేను అన్ని ప్రక్కలపై బాహ్య మార్జిన్ (3rem) మరియు క్రింద లోపలి మార్జిన్ (3rem) కలిగినది</div>

స్వయంగా ప్రయత్నించండి

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

.m-# / m-*-# అన్ని ప్రక్కల బాహ్య మార్జిన్ ప్రయోగించండి
.mt-# / mt-*-# పై బాహ్య మార్జిన్ ప్రయోగించండి
.mb-# / mb-*-# క్రింద బాహ్య మార్జిన్ ప్రయోగించండి
.ms-# / ms-*-# ఎడమ బాహ్య మార్జిన్ ప్రయోగించండి
.me-# / me-*-# కుడి బాహ్య మార్జిన్ ప్రయోగించండి
.mx-# / mx-*-# ఎడమ మరియు కుడి లోపలి మార్జిన్ ప్రయోగించండి
.my-# / my-*-# పై మరియు క్రింద బాహ్య మార్జిన్ ప్రయోగించండి
.p-# / p-*-# అన్ని ప్రక్కల లోపలి మార్జిన్ (పాడింగ్) ప్రయోగించండి
.pt-# / pt-*-# పై లోపలి మార్జిన్ ప్రయోగించండి
.pb-# / pb-*-# క్రింద లోపలి మార్జిన్ ప్రయోగించండి
.ps-# / ps-*-# ఎడమ లోపలి మార్జిన్ ప్రయోగించండి
.pe-# / pe-*-# కుడి లోపలి మార్జిన్ ప్రయోగించండి
.py-# / py-*-# పై మరియు క్రింద లోపలి మార్జిన్ ప్రయోగించండి
.px-# / px-*-# ఎడమ మరియు కుడి లోపలి మార్జిన్ ప్రయోగించండి

మా CSS యూనిట్స్ రిఫరెన్స్ మాన్యువల్ rem మరియు వివిధ పరిమాణ ఇకానాలపై మరింత వివరాలను చదవండి.

షేడ్వు

అడుగు నియంత్రణ shadow- క్లాస్ వాల్యూస్ అనేది మూలకానికి షేడ్వు జోడిస్తుంది:

ఉదాహరణ

<div class="shadow-none p-4 mb-4 bg-light">ప్రక్కారం చేయబడలేదు</div>

小型阴影

<div class="shadow-sm p-4 mb-4 bg-white">చిన్న షేడ్వు</div>
<div class="shadow p-4 mb-4 bg-white">డిఫాల్ట్ షేడ్వు</div>

స్వయంగా ప్రయత్నించండి

<div class="shadow-lg p-4 mb-4 bg-white">పెద్ద షేడ్వు</div>

అడుగు నియంత్రణ ఉపయోగించండి align-

ఉదాహరణ

క్లాసులు ఉపాంగముల అనుసంధానను మార్చడానికి ఉపయోగించండి (కేవలం inline, inline-block, inline-table మరియు పట్టిక కొలిబాట్లుకు ఉపయోగించబడతాయి):
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>

స్వయంగా ప్రయత్నించండి

<span class="align-text-bottom">text-bottom</span>

అస్పెక్ట్ రేషియో

జోడించండి మరియు పేర్వర్తి వెడల్పును బదులుగా సృష్టించండి. .ratio క్లాసులు మీరు ఎంచుకున్న అస్పెక్ట్ రేషియోను సంబంధించినది .aspect-ratio-* పేర్వర్తి ఉపాంగములకు జోడించి, లోపల ఇమ్బెడ్డ్ ప్రదర్శించండి (వీడియో లేదా iframe):

ఉదాహరణ

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

స్వయంగా ప్రయత్నించండి

పరిశీలనాత్మకం

ఉపయోగం .visible లేదా .invisible క్లాసులు క్రమంగా ఉపాంగముల పరిశీలనను నియంత్రిస్తాయి:

పరిశీలన:ఈ క్లాసులు CSS display విలువను మార్చడానికి లేదు. వాటిలో కేవలం జోడించబడుతుంది visibility:visible లేదా visibility:hidden。

ఉదాహరణ

<div class="visible">నేను కనిపించబడతాను。</div>
<div class="invisible">నేను అద్దంబరా కాదు。</div>

స్వయంగా ప్రయత్నించండి

క్లోజర్ ఐకాన్

ఉపయోగం .btn-close క్లాసులు క్లోజర్ ఐకాన్ శైలిని సెట్ చేయవచ్చు. అవి అపాయాల బాక్సులు మరియు మోడల్స్ కు సాధారణంగా ఉపయోగించబడతాయి.

ఉదాహరణ

<button type="button" class="btn-close"></button>

స్వయంగా ప్రయత్నించండి

స్క్రీన్ రీడర్

ఉపయోగం .visually-hidden క్లాసులు అన్ని పరికరాలపై అంతర్భాగాలను దాచి ఉంచవచ్చు, స్క్రీన్ రీడర్స్ మాత్రమే తప్ప మరియు ఉపయోగించబడవచ్చు:

ఉదాహరణ

<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>

స్వయంగా ప్రయత్నించండి

కలర్

కలర్ అనే సెక్షన్ లో పేర్కొన్నట్లు ఉంది, క్లాసులు యొక్క పూర్తి జాబితా ఇక్కడ పేర్కొనబడింది:

టెక్స్ట్ కలర్ కొరకు ఉన్న క్లాసులు ఇవి ఉన్నాయి:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（డిఫాల్ట్ బాడీ కలర్ / సాధారణంగా కాలర్ ఉంటుంది కాకూడదు）
  • .text-light

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

కంటెక్స్ట్ టెక్స్ట్ క్లాసులు లింకులకు కూడా ఉపయోగించబడవచ్చు:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

మీరు .text-black-50 లేదా .text-white-50 క్లాసులను ఉపయోగించి కాలర్లను కలర్లను కలిసి ఉపయోగించవచ్చు మరియు 50% అనుభవంతో వెండి లేదా కాలర్లను కలిసి ఉపయోగించవచ్చు:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

బ్యాక్గ్రౌండ్ కలర్

బ్యాక్గ్రౌండ్ కలర్ కొరకు ఉన్న క్లాసులు ఇవి ఉన్నాయి:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

దానికి కారణంగా బ్యాక్గ్రౌండ్ కలర్ లను సెట్ చేయబడదు, కొన్ని సందర్భాల్లో మీరు వాటిని కలిసి ఉపయోగించవలసి ఉంటుంది. .text-* క్లాసులను కలిసి ఉపయోగించండి.

ఉదాహరణ

స్వయంగా ప్రయత్నించండి