Bootstrap 5 గ్రిడ్

Bootstrap 5 గ్రిడ్ సిస్టమ్

Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。

如果您不想单独使用所有 12 列，那么可以将这些列组合在一起，以创建更宽的列：

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

网格系统响应迅速，列会根据屏幕大小自动重新排列。

请确保总和等于或小于 12（如果不需要使用所有 12 个可用列）。

网格类

Bootstrap 5 网格系统有六个类：

  • .col- (超小型设备 - 屏幕宽度小于 576px)
  • .col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
  • .col-md- (中型设备 - 屏幕宽度等于或大于 768 像素)
  • .col-lg- (大型设备 - 屏幕宽度等于或大于 992 像素)
  • .col-xl- (xlarge 设备 - 屏幕宽度等于或大于 1200px)
  • .col-xxl- (xxlarge 设备 - 屏幕宽度等于或大于 1400px)

您可以组合上述类，以创建更动态和灵活的布局。

సూచన:每个类都是按比例放大的，所以如果你想为 sm మరియు md అదే వెడల్పం నిర్ణయించడానికి మీరు మాత్రమే నిర్దేశించవలెను sm。

Bootstrap 5 గ్రిడ్ యొక్క ప్రాథమిక నిర్మాణం

ఇక్కడ Bootstrap 5 గ్రిడ్ యొక్క ప్రాథమిక నిర్మాణం ఉంది:


<div class="row">
  

  

</div>
<div class="row">
  

  

  

</div>

<div class="row">
  

  

  

</div>

第一个例子：创建一行（<div class="row">）。然后，添加所需数量的列（带有合适的 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表数字，每行加起来应为 12。

రెండవ ఉదాహరణ: ప్రతి కలమ్స్కు సంఖ్యను జోడించకుండా col ఒక సంఖ్యను జోడించడం బదులు, బ్రౌజ్స్ప్రింగ్ అనేకటి సంస్థాపించడం ద్వారా సమాన వెడల్పం కలమ్స్ సృష్టించడానికి బ్రౌజ్స్ప్రింగ్ నిర్వహిస్తుంది: రెండు "col" ఎలమెంట్ = ప్రతి col అనేకటి 50% వెడల్పం, మరియు మూడు cols అనేకటి ప్రతి col అనేకటి 33.33% వెడల్పం. నాలుగు కలమ్స్ అనేకటి అనేకటి 25% వెడల్పం మరియు ఇలా కొనసాగుతుంది. మీరు కూడా ఉపయోగించవచ్చు .col-sm|md|lg|xl|xxl కలమ్స్ రెస్పాన్సివ్ చేయండి.

ఇక్కడ మేము బేసిక్ బ్రౌజ్స్ప్రింగ్ 5 గ్రిడ్ లేఆఉట్ ఉదాహరణలను కూడించాము.

మూడు భాగాలు కలమ్స్

ఇది అన్ని పరికరాలు మరియు స్క్రీన్ వెడల్పాలపై మూడు సమాన వెడల్పం కలమ్స్ సృష్టించడాన్ని చూపిస్తుంది:

ఉదాహరణ

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

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

రెస్పాన్సివ్ కలమ్స్

ప్యాడ్ కంప్యూటర్ నుండి ప్రారంభించి నాలుగు సమాన వెడల్పం కలమ్స్ సృష్టించి అధిక వెడల్ప డెస్క్టాప్కు విస్తరించడాన్ని చూపిస్తుంది:వెడల్పం 576px కంటే తక్కువగా ఉన్న మొబైల్ లేదా స్క్రీన్లో కలమ్స్ స్వయంచాలకంగా పైకి కలిస్తాయి:

ఉదాహరణ

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

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

అసమానమైన రెస్పాన్సివ్ కలమ్స్

ఇది ప్యాడ్ కంప్యూటర్లో రెండు వేర్వేరు వెడల్పాలు పొంది అధిక వెడల్ప డెస్క్టాప్కు విస్తరించడాన్ని చూపిస్తుంది:

ఉదాహరణ

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

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

సూచన:ఈ శిక్షణలో తరువాత మీరు గురించి నేర్చుకుంటారు గ్రిడ్ సిస్టమ్ మరింత విషయాలు.