کورس تیبل

بوت اسٹرپ 5 تعلیم

بوت اسٹرپ 5 فرم

بوت اسٹرپ 5 گرید

Bootstrap 5 دیگر

اختیاری کورس

کورس سفارش:

کدوو3 سی کام ڈکٹ

بوت اسٹرپ 5 گرید: چھوٹی اہمیت والی ڈیوائس

چھوٹی آلات کا گرید مثال

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

ماحولیت: آپ کو ایک دو کولومنوں والی سادہ لائاوت کو چاہیئے. چھوٹی آلات کے لئے، آپ کو 25% / 75% کا تقسیم کرنا چاہیئے،

چھوٹی آلات کو اس کی اسکرین کی چوڑائی کے مطابق بنایا جاتا ہے،576 پیکسل سے 767 پیکسل تک.

چھوٹی آلات کے لئے، آپ کو استعمال کرنا چاہیئے، .col-sm-* کلاس.

آپنے دو کولومنوں میں درج کی گئی کلاس کو اضافہ کریں گے:

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

ایک مثال کو چھوٹی (اور وسطی، بڑی، بہت بڑی اور بہت بڑی) آلات پر 25% / 75% کا تقسیم پیدا کرے گا. چھوٹی آلات پر، یہ خودکار طور پر پچھا دیا جائے گا (100%):

مثال


  
    <div class="col-sm-3 bg-primary">
      世界自然基金会（WWF），成立于1961年4月29日，其标志是一只大熊猫 ...
    
    <div class="col-sm-9 bg-dark">
      1980年，WWF正式来到中国，受中国政府邀请来华开展大熊猫及其栖息地的保护工作 ...

亲自试一试

توجہ:جس سے مجموعی تعداد 12 تک یا اس سے کم ہو (تمام 12 درج کی گئی کولومن کو استعمال نہ کریں):

33.3% / 66.6% کا تقسیم کے لئے آپ کو استعمال کرنا چاہیئے، .col-sm-4 اور .col-sm-850% / 50% کا تقسیم کے لئے آپ کو استعمال کرنا چاہیئے، .col-sm-6 اور .col-sm-6):

مثال

<!-- 33.3/66.6% split: -->

  
    
      世界自然基金会（WWF），成立于1961年4月29日，其标志是一只大熊猫 ...
    
    
      1980年，WWF正式来到中国，受中国政府邀请来华开展大熊猫及其栖息地的保护工作 ...
    
  



  
    
      世界自然基金会（WWF），成立于1961年4月29日，其标志是一只大熊猫 ...
    
    
      1980年，WWF正式来到中国，受中国政府邀请来华开展大熊猫及其栖息地的保护工作 ...

亲自试一试

自动布局列

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

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



  1 of 2
  2 of 2



  1 of 4
  2 of 4
  3 of 4
  4 of 4

亲自试一试

کورس تیبل

بوت اسٹرپ 5 تعلیم

بوت اسٹرپ 5 فرم