ﺎﻫ ﻪﻤﮐﺩ :5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

فهرست مطالب

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

ﻪﻤﮐﺩ ﯼﺎﻫ ﮏﺒﺳ

Bootstrap 5 ﺪﻫﺩ ﯽﻣ ﻪﺋﺍﺭﺍ ﺍﺭ ﺎﻫ ﻪﻤﮐﺩ ﺯﺍ ﯽﻔﻠﺘﺨﻣ ﯼﺎﻫ ﮏﺒﺳ:

ﻝﺎﺜﻣ

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-dark">Dark</button>
<button 
  type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

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

<!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 mt-3">
  <h2>Button Styles</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-link">Link</button>      
</div>

</body>
</html>

:<input>

ﻝﺎﺜﻣ

<a href="#" class="btn btn-success">LinkButton</a>
<button type="button" class="btn btn-success">Button</button>
<input type="button" class="btn btn-success" value="Input Button">
<input type="submit" class="btn btn-success" value="Submit Button">
<input type="reset" class="btn btn-success" value="Reset Button">

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

<!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 mt-3">
  <h2>Button Elements</h2>
  <a href="#" class="btn btn-success">Link Button</a>
  <button type="button" class="btn btn-success">Button</button>
  <input type="button" class="btn btn-success" value="Input Button">
  <input type="submit" class="btn btn-success" value="Submit Button">
  <input type="reset" class="btn btn-success" value="Reset Button">
</div>

</body>
</html>

ﯽﮔﮋﯾﻭ ﺭﺩ # ﮏﯾ ﺍﺮﭼ href ؟ﻢﯿﻫﺩ ﯽﻣ ﺭﺍﺮﻗ ﺪﻧﻮﯿﭘ

ﻪﮐ ﯽﯾﺎﺠﻧﺁ ﺯ

ﻪﻤﮐﺩ ﯽﻠﮐ ﺡﺮﻃ

.ﺪﻫﺩ ﯽﻣ ﻪﺋﺍﺭﺍ ﺍﺭ ﯼﺍ ﻪﯿﺷﺎﺣ/ﯽﻠﮐ ﺡﺮﻃ ﻪﻤﮐﺩ ﺖﺸﻫ ﻦﯿﻨﭽﻤﻫ 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

:ﺪﯿﻨﯿﺒﺑ ﯽﻓﺎﺿﺍ ﺭﻭﺎﻨﺷ ﺖﮑﻓﺍ ﮏﯾ ﺎﺗ ﺪﯿﻫﺩ ﺖﮐﺮﺣ ﺎﻫﻥﺁ ﯼﻭﺭ ﺍﺭ ﺱﻭﺎﻣ

ﻝﺎﺜﻣ

<button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

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

<!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 mt-3">
  <h2>Button Outline</h2>
  <button type="button" class="btn btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-success">Success</button>
  <button type="button" class="btn btn-outline-info">Info</button>
  <button type="button" class="btn btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-outline-dark">Dark</button>
  <button type="button" class="btn btn-outline-light text-dark">Light</button>
</div>

</body>
</html>

ﺎﻫ ﻪﻤﮐﺩ ﻩﺯﺍﺪﻧﺍ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮏﭼﻮﮐ ﯼﺎﻫﻪﻤﮐﺩ ﯼﺍﺮﺑ .btn-sm

ﻝﺎﺜﻣ

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

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

<!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 mt-3">
  <h2>Button Sizes</h2>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-md">Default</button>    
  <button type="button" class="btn btn-primary btn-sm">Small</button>
</div>

</body>
</html>

ﮎﻮﻠﺑ ﺢﻄﺳ ﯼﺎﻫ ﻪﻤﮐﺩ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺪﻟﺍﻭ ﺮﺼﻨﻋ ﺭﺩ "code class="w3-codespan">.d-grid "helper> ﺱ

ﻝﺎﺜﻣ

<div class="d-grid">
	  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</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 mt-3">
  <h2>Block Level Buttons</h2>
  <p>To create a block level button that spans the entire width of the parent element, use the .d-grid "helper" class on the parent element:</p>
  <div class="d-grid">
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  </div>
</div>

</body>
</html>

:ﺪﯿﻨﮐ ﻝﺮﺘﻨﮐ .gap-* ﺱﻼﮐ ﺎﺑ ﺍﺭ ﺎﻬﻧﺁ ﻦﯿﺑ ﯼﺎﻀﻓ ﺪﯿ

ﻝﺎﺜﻣ

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</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 mt-3">
  <h2>Block Level Buttons</h2>
  <p>If you have many block-level buttons, you can control the space between them with the .gap-* class:</p>
  <div class="d-grid gap-3">
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  </div>
</div>

</body>
</html>

ﻝﺎﻌﻓﺮﯿﻏ/ﻝﺎﻌﻓ ﯼﺎﻫ ﻪﻤﮐﺩ

:ﺩﺮﮐ ﻢﯿﻈﻨﺗ (ﮏﯿﻠﮐ ﻞﺑﺎﻗﺮﯿﻏ) ﻝﺎﻌﻓﺮﯿﻏ ﺎﯾ (ﺪﺳﺭ ﯽﻣ ﺮﻈﻧ ﻪﺑ ﻩﺪﺷ ﻩﺩﺮﺸﻓ) ﻝﺎﻌﻓ ﺖﻟﺎﺣ ﯼﻭﺭ ﻥ

.ﺪﺳﺮﺑ ﺮﻈﻧ ﻪﺑ ﻝﺎﻌﻓﺮﯿﻏ ﯼﺮﺼﺑ ﺮﻈﻧ ﺯﺍ ﺎﺗ ﺪﻨﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ .di

ﻝﺎﺜﻣ

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

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

<!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 mt-3">
  <h2>Button States</h2>
  <button type="button" class="btn btn-primary">Primary Button</button>
  <button type="button" class="btn btn-primary active">Active Primary</button>
  <button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
  <a href="#" class="btn btn-primary disabled">Disabled Link</a>
</div>

</body>
</html>

ﺮﻨﯿﭙﺳﺍ ﯼﺎﻫ ﻪﻤﮐﺩ

:ﺖﺧﻮﻣﺁ ﺪﯿﻫﺍﻮﺧ ﻥﺁ ﺩﺭﻮﻣ ﺭﺩ ﯼﺮﺘﺸﯿﺑ ﺕﺎﻋﻼﻃﺍ ﺎﻣ BS5 Spinners ﺵﺯﻮﻣﺁ ﺭﺩ ﻪﮐ ،ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ

ﻝﺎﺜﻣ

   <button class="btn btn-primary">
  <span class="spinner-border 
    spinner-border-sm"></span>
</button>
<button class="btn 
    btn-primary">
  <span class="spinner-border 
    spinner-border-sm"></span>
  Loading..
</button>
<button 
    class="btn btn-primary" disabled>
  <span class="spinner-border 
    spinner-border-sm"></span>
  Loading..
</button>
    
<button class="btn btn-primary" disabled>
  <span 
    class="spinner-grow spinner-grow-sm"></span>
  Loading..
    </button>

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <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 mt-3">
  <h2>Spinner Buttons</h2>
  <p>Add spinners to buttons:</p>
                                        
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>

  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>
</div>

</body>
</html>