బూస్ట్రాప్ 5 కంటైనర్

బూస్ట్రాప్ 5 కంటైనర్

మునుపటి చాప్టర్‌లో మీరు నేర్చుకున్నారు, Bootstrap కంటైనర్ ఎల్లప్పుడూ కంటైనర్ కంటైనర్లను అనుసంధానించడానికి అవసరం.

మేము కంటైనర్లో పరిణామాలు పూరిపెట్టి, మరియు రెండు కంటైనర్ క్లాస్లు లభిస్తాయి:

  • .container క్లాస్ ఒక ప్రతిస్పందకమైన, స్థిర వెడల్పు కంటైనర్ను సృష్టిస్తుంది
  • .container-fluid క్లాస్ ఒక పూర్తి వెడల్పు కంటైనర్ను సృష్టిస్తుంది, ఇది అన్ని ప్రక్కల తెర వెడల్పును కలిగి ఉంటుంది

స్థిర కంటైనర్

ఉపయోగించండి .container క్లాస్ ఒక ప్రతిస్పందకమైన, నిర్ధిష్ట వెడల్పు కంటైనర్ను సృష్టిస్తుంది.

చూపించండి, దాని వెడల్పు (max-width) వివిధ తెర పరిమాణాలలో మారుతుంది:

ఎక్స్ట్రా స్మాల్
<576px 		స్మాల్
≥576px 		మీడియం
≥768px 		లార్జ్
≥992px 		ఎక్స్ట్రా లార్జ్
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

దిగువ ఉదాహరణను తెరిచి, బ్రౌజర్ విండో పరిమాణాన్ని మార్చి, కంటైనర్ వెడల్పు వివిధ బ్రేక్‌పాయిన్స్‌లో మారడం చూడండి:

ఉదాహరణ

<div class="container">
  <h1>నా మొదటి Bootstrap పేజీ</h1>
  <p>ఇది కొన్ని వచనాలు.</p>
</div>

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

XXL బ్రేక్‌పాయిన్స్ (≥1400px) Bootstrap 5లో కొత్తగా జోడించబడింది, కానీ Bootstrap 4లో అతిపెద్ద బ్రేక్‌పాయిన్స్ అనేది Extra large (≥1200px) ఉంది.

పరిణామంగా కంటైనర్

ఉపయోగించండి .container-fluid క్లాస్ ఒక పూర్తి వెడల్పు కంటైనర్ను సృష్టిస్తుంది, ఇది ఎల్లప్పుడూ పూర్తి తెర వెడల్పును కలిగి ఉంటుంది (width ఎల్లప్పుడూ 100%）：

ఉదాహరణ

<div class="container-fluid">
  <h1>నా మొదటి Bootstrap పేజీ</h1>
  <p>ఇది కొన్ని వచనాలు.</p>
</div>

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

కంటైనర్ పూరిపెట్టడం

మూలంగా, కంటైనర్లు కుడివాయి పూరిపెట్టడం ఉంటాయి (కుడివాయి పెరిపెట్టడం), పైభాగం లేదా తల్లుపై పూరిపెట్టడం లేదు (పైభాగం పెరిపెట్టడం). అందువల్ల, మనం తరచుగా వాడుతాము spacing యంత్రాలుఅలాగే విద్యుత్తులు మరియు అదనపు పూరిపెట్టడం మరియు కినారాలు, వాటిని మంచి రూపంలో చూపించడానికి. ఉదాహరణకు,.pt-5 అర్థం ఉంది "ఒక పెద్దపైభాగం పూరిపెట్టడం：

ఉదాహరణ

<div class="container pt-5"></div>

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

కంటైనర్ బార్డర్స్ మరియు రంగులు

ఇతర టూల్స్, వాటిలో కంటైనర్ బార్డర్స్ మరియు రంగులు, కంటైనర్తో కలిసి ఉపయోగించబడతాయి:

ఉదాహరణ

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

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

మీరు తరువాతి చాప్టర్లలో రంగు మరియు కంటైనర్ టూల్స్ గురించి మరింత తెలుసుకోవచ్చు.

రెస్పాన్సివ్ కంటైనర్

మీరు కూడా ఉపయోగించవచ్చు .container-sm|md|lg|xl క్లాస్ నిర్ణయించడానికి స్పందించాలి.

కంటైనర్ యొక్క max-width వివిధ స్క్రీన్ పరిమాణాలు/వీక్షణ విండో పై మారుతుంది:

క్లాస్ ఎక్స్ట్రా స్మాల్
<576px		 స్మాల్
≥576px		 మీడియం
≥768px		 లార్జ్
≥992px		 ఎక్స్ట్రా లార్జ్
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

ఉదాహరణ

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

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