Bootstrap 5: Grid Basic

فهرست مطالب

    نمایش فهرست مطالب

5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﻪﮑﺒﺷ ﻢﺘﺴﯿﺳ

.ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺩﻮﺟﻭ ﻪﺤﻔﺻ ﺮﺳﺍﺮﺳ ﺭﺩ ﻥﻮﺘﺳ 12 ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﻭ ﺖﺳﺍ ﻩﺪﺷ ﻪﺘﺧﺎﺳ flexbox

:ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﯼﺮﺗ ﻊﯿﺳﻭ ﯼﺎﻫ ﻥﻮﺘﺳ ﺎﺗ ﺪﯿﻨﮐ ﯼﺪﻨﺑ ﻩﻭﺮﮔ ﻢﻫ ﺎﺑ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ،ﺪﯿ

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 ﻥﺁ ﻉﻮﻤﺠﻣ ﻪﮐ ﺪﯾﻮﺷ ﻦﺌﻤﻄﻣ

ﻪﮑﺒﺷ ﯼﺎﻫ ﺱﻼﮐ

:ﺖﺳﺍ ﺱﻼﮐ ﺶﺷ ﯼﺍﺭﺍﺩ Bootstrap 5 ﻪﮑﺒﺷ ﻢﺘﺴﯿﺳ

  • .col- (ﻞﺴﮑﯿﭘ 576 ﺯﺍ ﺮﺘﻤﮐ ﻪﺤﻔﺻ ﺽﺮﻋ - ﮏﭼﻮﮐ ﺭﺎﯿﺴ

  • .col-sm- (ﻩﺎﮕﺘﺳﺩﻞﺴﮑﯿﭘ 576 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮﺑ

  • .col-md- (ﻞﺴﮑﯿﭘ 768 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮﺑﺍﺮﺑ ﻪﺤﻔﺻ ﺽﺮ

  • .col-lg- (ﻞﺴﮑﯿﭘ 992 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮﺑﺍﺮﺑ ﻪﺤﻔﺻ ﺽﺮ

  • .col-xl- (ﻩﺎﮕﺘﺳﺩﻞﺴﮑﯿﭘ 1200 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮ

  • .col-xxl- (ﻩﺎﮕﺘﺳﺩﯼﺎﻫ xxlarge - ﻞﺴﮑﯿﭘ 140

.ﺩﺮﮐ ﺐﯿﮐﺮﺗ ﺮﺗﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻭ ﺮﺗﺎﯾﻮﭘ ﯼﺪﻨﺑ ﺡﺮﻃ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﻻﺎﺑ ﯼﺎﻫ ﺱﻼﮐ

ﻪﺘﮑﻧ: ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﻥﺁ ﯼﺍﺮﺑ ﺍﺭ ﯽﻧﺎﺴﮑﯾ ﯼﺎﻫ ﺽﺮﻋ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﺮﮔﺍ ﻦﯾﺍﺮ

5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﻪﮑﺒﺷ ﮏﯾ ﯽﻠﺻﺍ ﺭﺎﺘﺧﺎﺳ

:ﺖﺳﺍ Bootstrap 5 ﻪﮑﺒﺷ ﮏﯾ ﺮﯾﺯ ﺭﺎﺘﺧﺎﺳ

  <!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

:ﻒﯾﺩﺭ ﮏﯾ ﺩﺎﺠﯾﺍ :ﻝﻭﺍ ﻝﺎﺜﻣ

<div class="row">

.ﺩﻮﺷ ﻊﻤﺟ 12 ﻒﯾﺩﺭ ﺮﻫ ﯼﺍﺮﺑ ﺪﯾﺎﺑ ﻪﮐ ﺖﺳﺍ ﺩﺪﻋ ﮏﯾ ﻩﺪﻨﻫﺩ ﻥﺎﺸﻧ ﻡﻭﺩ ﻩﺭﺎﺘﺳ ﻪﮐ ﯽﻟﺎﺣ ﺭﺩ ،x

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫ ﻥﻮﺘﺳ ﻥﺩﺮﮐ ﻮﮕﺨﺳﺎﭘ ﯼﺍﺮﺑ .col-sm|md|lg

.ﻢﯾﺍﻩﺩﺮﮐ ﯼﺭﻭﺁﺩﺮﮔ ﺍﺭ Bootstrap 5 ﻪﯿﻟﻭﺍ ﻪﮑﺒﺷ ﯼﺎﻫﯼﺪﻨﺑﺡﺮﻃ ﺯﺍ ﯽﯾﺎﻫu2

ﯼﻭﺎﺴﻣ ﻥﻮﺘﺳ ﻪﺳ

.col
.col
.col

ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﻪﻤﻫ ﺭﺩ ﺍﺭ ﯼﻭﺎﺴﻣ ﺽﺮﻋ ﺎﺑ ﻥﻮﺘﺳ ﻪﺳ ﺩﺎﺠﯾﺍ ﻩﻮﺤﻧ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Three equal width columns</h1>
  <p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>

</body>
</html>

ﻮﮕﺨﺳﺎﭘ ﯼﺎﻫ ﻥﻮﺘﺳ

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

ﺪﻧﻮﺷﯽﻣ ﮒﺭﺰﺑ ﺱﺎﯿﻘﻣ ﻪﺑ ﻭ ﺪﻧﻮﺷﯽﻣ ﻉﻭﺮﺷ ﺎﻫﺖﻠﺒﺗ ﺯﺍ ﻪﮐ ﺪﻫﺩﯽﻣ ﻥﺎﺸﻧ

ﻝﺎﺜﻣ

<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>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

ﺮﺑﺍﺮﺑﺎﻧ ﻮﮕﺨﺳﺎﭘ ﻥﻮﺘﺳ ﻭﺩ

.col-sm-4
.col-sm-8

ﺩﺮﮐ ﻉﻭﺮﺷ ﻥﺁ ﺯﺍ ﺍﺭ ﻒﻠﺘﺨﻣ ﺽﺮﻋ ﺎﺑ ﻥﻮﺘﺳ ﻭﺩ ﻥﺍﻮﺗﯽﻣ ﻪﻧﻮﮕﭼ ﻪﮐ ﺪﻫﺩﯽﻣ ﻥﺎﺸﻧ ﺮﯾ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Two Unequal Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

ﻪﺘﮑﻧ: ﻪﮑﺒﺷ ﻢﺘﺴﯿﺳ ﻩﺭﺎﺑﺭﺩ ﺮﺘﺸﯿﺑ ﺵﺯﻮﻣﺁ ﻦﯾﺍ ﺭﺩ ﺍًﺪﻌﺑﺖﺧﻮﻣﺁ ﺪﯿﻫ