شبکه‌های Bootstrap 5: دستگاه‌های بزرگ

ایکسرا لارج ڈیوائس گرڈ مثال

ایکس اسمال سمال میڈیم لارج ایکسرا لارج XXL
کلاس پیشونامہ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
اسکرین چوڑائی <576px >=576px >=768px >=992px >=1200px >=1400px

پچھلے فصل میں، ہم نے ایک گرڈ مثال پیش کیا جس میں کوچک، درمیانہ اور بڑے ڈیوائسوں کے لئے کلاس شامل تھی۔ ہم نے دو دیوی (کالن) استعمال کئے اور کوچک ڈیوائس پر 25% / 75% تقسیم کردہ، درمیانہ ڈیوائس پر 50% / 50% تقسیم کردہ، بڑے ڈیوائس پر 33% / 66% تقسیم کردہ:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

لیکن xlarge ڈیوائس پر، 20% / 80% تقسیم کردہ ڈیزائن بہتر بن سکتا ہے

بڑے ڈیوائس کی تعریف اسکریین کی چوڑائی کا 1200 پیکسل اور اس سے زیادہاستعمال کریں گے

xlarge ڈیوائس کے لئے، ہم .col-xl-* کلاس:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

یہ مثال کوچک ڈیوائسوں پر 25% / 75% تقسیم کردہ، درمیانہ ڈیوائسوں پر 50% / 50% تقسیم کردہ، بڑے ڈیوائسوں پر 33% / 66% تقسیم کردہ اور xlarge اور xxlarge پر 20% / 80% تقسیم کردہ ڈیوائسوں کو موثر بنادیتا ہے۔ کوچک ڈیوائس پر، یہ خودکار طور پر پیچ کیاجائے گا (100%):

实例


  

    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      
世界自然基金会（WWF），成立于1961年4月29日，其标志是一只大熊猫 ...

    

    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      
1980年，WWF正式来到中国，受中国政府邀请来华开展大熊猫及其栖息地的保护工作 ...

亲自试一试

注意：请确保总和始终为 12。

仅使用 XLarge

在下面的例子中，我们仅指定 .col-xl-6 类（没有 .col-lg-*、.col-md-* 和/或 .col-sm-*）。这意味着 xlarge 和 xxlarge 设备将拆分 50%/50%。但是，对于大型、中型、小型和超小型设备，它将垂直堆叠（100% 宽度）：

实例


  

    

      
世界自然基金会（WWF），成立于1961年4月29日，其标志是一只大熊猫 ...

    

    

      
1980年，WWF正式来到中国，受中国政府邀请来华开展大熊猫及其栖息地的保护工作 ...

亲自试一试

自动布局列

在 Bootstrap 5 中，有一种简单的方法可以为所有设备创建等宽的列：只需从 .col-xl-* 中删除数字，并仅在 col 元素上使用 .col-xl 类。 Bootstrap 将识别有多少列，并且每列将获得相同的宽度。

如果屏幕尺寸小于 1200px，列将水平堆叠：




  
1 of 2

  
2 of 2






  
1 of 4

  
2 of 4

  
3 of 4

  
4 of 4

亲自试一试