ﺩﺭﺍﺩ ﺯﺎﯿﻧ ﯼﻭﺎﺣ ﮏﯾ ﻪﺑ Bootstrap ﻪﮐ ﺪﯿﺘﻓﺮﮔ ﺩﺎﯾ ﻞﺒﻗ ﻞﺼﻓ ﺯﺍ ﺎﻤﺷ
ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻞﺧﺍﺩ ﯼﺍﻮﺘﺤﻣ ﻥﺪﻧﺎﺒﺴﭼ ﯼﺍﺮﺑ ﻑﻭﺮﻇ
.ﺪﻨﮐﯽﻣ ﻪﺋﺍﺭﺍ ﻮﮕﺨﺳﺎﭘ ﺖﺑﺎﺛ ﺽﺮﻋ ﺎﺑ ﻪﻈﻔﺤﻣ ﮏﯾ
.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻮﮕﺨﺳﺎﭘ ﺖﺑﺎﺛ ﺽﺮﻋ ﺎﺑ ﻑﺮﻇ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ .
:ﺪﻨﮐﯽﻣ ﺮﯿﯿﻐﺗ ﻪﺤﻔﺻ ﻒﻠﺘﺨﻣ ﯼﺎﻫﻩﺯﺍﺪﻧﺍ ﺭﺩ (max-
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra Large ≥1200px |
XXL ≥1400px |
|
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
:ﺪﻨﮐ ﯽﻣ ﺮﯿﯿﻐﺗ ﻒﻠﺘﺨﻣ ﺖﺴﮑﺷ ﻁﺎﻘﻧ ﺭﺩ ﻑﺮﻇ ﺽﺮﻋ ﻪﮐ ﺪﯿﻨﯿﺒﺑ ﺎﺗ ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠ
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</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">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>
</body>
</html>
.(1200px≤) ﺖﺳﺍ ﮒﺭﺰﺑ ﺭﺎﯿﺴﺑ Bootstrap 4 ﺭﺩ ﺖﺴﮑﺷ ﻪﻄﻘﻧ ﻦﯾﺮﺘﮔﺭﺰﺑ ﻪﮐ ﯽﻟﺎﺣ ﺭﺩ ،ﺖﺳﺍ Bo
ﻑﺮﻇ:ﺖﺳﺍ 100% ﻪﺸﯿﻤﻫ ﺽﺮﻋ<"code class="w3-c
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</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">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>
<"code class="w3-codespan> ،ﻝﺎﺜﻣ ﻥﺍﻮﻨﻋ ﻪﺑ .ﺪﻨﺳﺮﺑ ﺮﻈﻧ ﻪﺑ ﺮﺘﻬﺑ ﯽﺘﺣ ﺎﺗ ﻢﯿﻨﮐﯽ
<div class="container pt-5"></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 pt-5">
<h1>My First Bootstrap Page</h1>
<p>This container has an extra top padding.</p>
<p>Try to remove the .pt-5 class to see the difference.</p>
</div>
</body>
</html>
:ﺪﻧﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻑﻭﺮﻇ ﺎﺑ ﻩﺍﺮﻤﻫ ﺐﻠﻏﺍ ﺰﯿﻧ ﺎﻫ ﮓﻧﺭ ﻭ ﺎﻫ ﻪﯿﺷﺎﺣ ﺪﻨﻧﺎﻣ ﺎﻫﺭﺍﺰﺑﺍ ﺮﯾﺎﺳ
<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>→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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 p-5 my-5 border">
<h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p>
</div>
<div class="container p-5 my-5 bg-dark text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a dark background color and a white text, and some extra padding and margins.</p>
</div>
<div class="container p-5 my-5 bg-primary text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>
</body>
</html>
.ﺖﻓﺮﮔ ﺪﯿﻫﺍﻮﺧ ﺩﺎﯾ ﻪﯿﺷﺎﺣ ﯼﺎﻫﺭﺍﺰﺑﺍ ﻭ ﺎﻫ ﮓﻧﺭ ﺩﺭﻮﻣ ﺭﺩ ﺮﺘﺸﯿﺑ ﯼﺪﻌﺑ ﻞﺼﻓ ﺭﺩ
.ﺪﺷﺎﺑ ﻮﮕﺨﺳﺎﭘ ﺪﯾﺎﺑ ﯽﻧﺎﻣﺯ ﻪﭼ ﻑﺮﻇ ﺪﯿﻨﮐ ﻦﯿﯿﻌﺗ ﺎﺗ ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ .container-sm|
ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﻩﺯﺍﺪﻧﺍ ﺭﺩ ﺮﻨﯿﺘﻧﺎﮐﻩﺎﮔﺭﺩ/ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﻒﻠﺘﺨﻣ ﯼﺎﻫﯽ
| Class |
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥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>→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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 pt-3">
<h1>Responsive Containers</h1>
<p>Resize the browser window to see the effect.</p>
</div>
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>
</body>
</html>