ﺪﯿﻨﮐ ﻉﻭﺮﺷ :5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

فهرست مطالب

؟ﺖﺴﯿﭼ ﭖﺮﺘﺳﺍ ﺕﻮﺑ

ﺖﺳﺍ ﺏﻭ ﺮﺗ ﻥﺎﺳﺁ ﻭ ﺮﺘﻌﯾﺮﺳ ﻪﻌﺳﻮﺗ ﯼﺍﺮﺑ ﻥﺎﮕﯾﺍﺭ ﺪﻧﺍ ﺖﻧﺍﺮﻓ ﮎﺭﻭ ﻢﯾﺮﻓ ﮏﯾ ﭖﺮﺘﺳﺍ ﺕﻮﺑ
.ﺖﺳﺍ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﯼﺭﺎﯿﺘﺧﺍ ﯼﺎﻫﻪﻧﻭﺰﻓﺍ ﻦﯿﻨﭽﻤﻫ ﻭ ﺮﮕﯾﺩ ﯼﺭﺎﯿﺴﺑ ﻭ ﺮﯾﻮﺼﺗ ﯼﺎﻫ
ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﻮﯿﺴﻧﺎﭙﺴﯾﺭ ﯼﺎﻫ ﺡﺮﻃ ﯽﺘﺣﺍﺭ ﻪﺑ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻥﺎﮑﻣﺍ ﻦﯾﺍ ﺎﻤﺷ ﻪﺑ ﻦﯿﻨﭽﻤﻫ ﭖﺮﺘ

؟ﺖﺴﯿﭼ ﺍﺮﮕﺸﻨﮐﺍﻭ ﺏﻭ ﯽﺣﺍﺮﻃ

5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﻝﺎﺜﻣ

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 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 p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﯼﺎﻫ ﻪﺨﺴﻧ

ﺖﺳﺍ ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﻪﺨﺴﻧ ﻦﯾﺮﺗﺪﯾﺪﺟ (2021 ﻝﺎﺳ ﺭﺩ ﻩﺪﺷ ﺮﺸﺘﻨﻣ) 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﯽﻠﺻﺍ ﯼﺎﻫﺮﮔﺭﻭﺮﻣ ﯼﺎﻫ ﻪﺨﺴﻧ ﻦﯾﺮﺗﺭﺍﺪﯾﺎﭘ ﻭ ﻦﯾﺮﺗﺪﯾﺪﺟ ﺯﺍ 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

ﺖﺳﺍ ﻦﯾﺍ ﺭﺩ Bootstrap 3 & 4 ﻭ Bootstrap 5 ﻦﯿﺑ ﯽﻠﺻﺍ ﺕﻭﺎﻔﺗ

ﻪﺟﻮﺗ: Bootstrap 3 ﻭ Bootstrap 4 ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﺩﺎﻨﺳﺍ ﺕﺍﺮﯿﯿﻐﺗ ﻭ ﻢ

؟ﻢﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﺯﺍ ﺍﺮﭼ

:ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﯼﺎﯾﺍﺰﻣ

ﻥﺎﺳﺁ ﻩﺩﺎﻔﺘﺳﺍ: ﻪﯿﻟﻭﺍ ﺶﻧﺍﺩ ﺎﺑ ﯽﺴﮐ ﺮﻫ HTML ﻭ CSS ﯽﻣﺯﺍ ﻩﺩﺎﻔﺘ
ﯽﮔﮋﯾﻭﺶﻨﮐﺍﻭ ﯼﺎﻫﺍﺮﮔ: CSS ﺦﺳﺎﭘﯼﻮﮔ Bootstrap ﻦﻔﻠﺗ
ﻞﯾﺎﺑﻮﻣ ﻝﻭﺍ ﺩﺮﮑﯾﻭﺭ: ﮏﺒﺳ ،ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﺭﺩﺪﻨﺘﺴﻫ ﯽﻠﺻﺍ ﺏﻮﭼﺭﺎﭼ ﺯﺍ
ﺮﮔﺭﻭﺮﻣ ﺎﺑ ﯼﺭﺎﮔﺯﺎﺳ: Bootstrap 5 ﻥﺭﺪﻣ ﯼﺎﻫﺮﮔﺭﻭﺮﻣ ﻪﻤﻫ ﺎﺑ (Chrome،

؟ﻢﯿﻨﮐ ﻪﯿﻬﺗ ﺎﺠﮐ ﺯﺍ ﺍﺭ 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

.ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﺩﻮﺧ ﺖﯾﺎﺳ ﺏﻭ ﺭﺩ Bootstrap 5 ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻉﻭﺮﺷ ﯼﺍﺮﺑ ﻩﺍﺭ ﻭﺩ

:ﯽﻧﺍﻮﺗ ﯽﻣ ﻮﺗ

CDN ﺯﺍ Bootstrap 5 ﻞﻣﺎﺷ
Bootstrap 5 ﺯﺍ ﺍﺭ getbootstrap.com ﺪﯿﻨﮐ ﺩﻮﻠﻧﺍﺩ

CDN 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ (ﺍﻮﺘﺤﻣ ﻞﯾﻮﺤﺗ ﻪﮑﺒﺷ) CDN ﺯﺍ ﺍﺭ ﻥﺁ ﺪﯿﻧﺍﻮﺗﯽﻣ ،ﺪﯿﻨﮐ ﯽﻧﺎﺑﺰﯿﻣ ﻭ ﺩﻮﻠﻧ

jsDelivr ﺯﺍ CDN ﯼﺍﺮﺑ CSS ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﻭ Bootstrap ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺖﯾﺰﻣ ﮏﯾ Bootstrap 5 CDN:

Bootstrap 5 ﺩﻮﻠﻧﺍﺩ

ﺪﯾﻭﺮﺑ ﺱﺭﺩﺁ ﻦﯾﺍ ﻪﺑ ،ﺪﯿﻨﮐ ﯽﻧﺎﺑﺰﯿﻣ ﻭ ﺩﻮﻠﻧﺍﺩ ﺍﺭ Bootstrap 5 ﻥﺎﺗﺩﻮﺧ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﺮﮔﺍ

ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﺎﺑ ﺍﺭ ﺩﻮﺧ ﺏﻭ ﻪﺤﻔﺻ ﻦﯿﻟﻭﺍ

1. doctype HTML5ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﺭ

ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ CSS ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻭ HTML ﺮﺻﺎﻨﻋ ﺯﺍ 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﻥﺁ ﯼﺍﺪﺘﺑﺍ ﺭﺩ ﺍﺭ doctype HTML5 ﻪﺸﯿﻤﻫ

<!DOCTYPE html>
<html lang="en">
  <head>
   <title>Bootstrap 5 Example</title>
    <meta charset="utf-8"> 
  </head>
</html>

2. ﻞﯾﺎﺑﻮﻣ ﻝﻭﺍ 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑﺖﺳﺍ

Bootstrap 5 ﺪﻨﺘﺴﻫ ﻝﻭﺍ ﻞﯾﺎﺑﻮﻣ ﯼﺎﻫ ﮏﺒﺳ .ﺪﺷﺎﺑ ﻮﮕﺨﺳﺎﭘ ﻩﺍﺮﻤﻫ ﻦﻔﻠﺗ ﯼﺎﻫ ﻩﺎﮕﺘﺳﺩ ﻪﺑ ﻪﮐ

ﻞﺧﺍﺩ ﺭﺩ ﺍﺭ ﺮﯾﺯ ﮓﺗ ،ﯽﺴﻤﻟ ﯽﯾﺎﻤﻨﮔﺭﺰﺑ ﻭ ﺐﺳ

<meta name="viewport" content="width=device-width, initial-scale=1">

.ﺪﻨﮐ ﯼﻭﺮﯿﭘ ﻪﺤﻔﺻ ﺽﺮﻋ ﺯﺍ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﯼﺭﻮﻃ ﺍﺭ ﻪﺤﻔﺻ ﺽﺮﻋ

.ﺩﺮﯿﮔﯽﻣ ﺮﺑ ﺭﺩ ﺍﺭ ﺪﯾﺩ ﻩﺎﮔﺭﺩ ﺽﺮﻋ ﻞﮐ ﻪﮐ ﺪﻨﮐﯽﻣ ﻪﺋﺍﺭﺍ ﺍﺭ ﻞﻣﺎﮐ ﺽﺮ



  
    
      .container
    
  
  
    
      .container-fluid
    
  

                                                      5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﻪﯾﺎﭘ ﻪﺤﻔﺻ ﻭﺩ
:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ (ﻮﮕﺨﺳﺎﭘ ﺖﺑﺎﺛ ﺽﺮﻋ ﺎﺑ ﻑﺮﻇ ﮏﯾ ﺎﺑ) Bootstrap 5 ﯽﻠﺻﺍ ﻪﺤﻔﺻ ﮏﯾ ﺪﮐ ﺮﯾﺯ
                                                                 ﺮﻨﯿﺘﻧﺎﮐ ﻪﻧﻮﻤﻧ
<!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.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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>
</div>
</body>
</html>
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>
  :ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ (ﻞﻣﺎﮐ ﺽﺮﻋ ﺎﺑ ﻑﺮﻇ ﮏﯾ ﺎﺑ) 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﯽﻠﺻﺍ ﻪﺤﻔﺻ ﮏﯾ ﺪﮐ ﺮﯾﺯ ﻝﺎﺜﻣ
                                                                ﻑﺮﻇ ﻊﯾﺎﻣ ﻪﻧﻮﻤﻧ
<!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.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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>
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>

  
    
      ← صفحه قبلی
    
    
      صفحه بعد →