ﺎﻫ ﻩﻭﺮﮔ ﺖﺴﯿﻟ :5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

فهرست مطالب

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

ﻪﯾﺎﭘ ﺖﺳﺮﻬﻓ ﯼﺎﻫ ﻩﻭﺮﮔ

:ﺖﺳﺍ ﺖﺴﯿﻟ ﺩﺭﺍﻮﻣ ﺎﺑ ﺐﺗﺮﻣﺎﻧ ﺖﺴﯿﻟ ﮏﯾ ﺖﺴﯿﻟ ﻩﻭﺮﮔ ﻦﯾﺮﺗ ﯽﯾﺍﺪﺘﺑﺍ

  • First item
  • Second item
  • Third item

ﻭ ،ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ .list-group ﺱﻼﮐ ﺎﺑ

ﻝﺎﺜﻣ

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

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

<!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>Basic List Group</h2>
  <ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>

</body>
</html>

ﻝﺎﻌﻓ ﺖﻟﺎﺣ

  • Active item
  • Second item
  • Third item

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﯽﻠﻌﻓ ﺩﺭﻮﻣ ﻥﺩﺮﮐ ﻪﺘﺴﺟﺮﺑ ﯼﺍﺮﺑ .active

ﻝﺎﺜﻣ

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

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

<!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>Active Item in a List Group</h2>
  <ul class="list-group">
    <li class="list-group-item active">Active item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>

</body>
</html>

ﻂﺒﺗﺮﻣ ﺩﺭﺍﻮﻣ ﺎﺑ ﻩﻭﺮﮔ ﺖﺴﯿﻟ

First item Second item Third item

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﺭ .list-group-item-action ﺱﻼﮐ ،ﯼ

ﻝﺎﺜﻣ

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</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>List Group With Linked Items</h2>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">First item</a>
    <a href="#" class="list-group-item list-group-item-action">Second item</a>
    <a href="#" class="list-group-item list-group-item-action">Third item</a>
  </div>
</div>

</body>
</html>

ﻝﺎﻌﻓﺮﯿﻏ ﺩﺭﻮﻣ

:ﺪﻨﮐ ﯽﻣ ﻑﺬﺣ ﺍﺭ ﺭﻭﺎﻨﺷ ﺮﺛﺍ ،ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫﺪﻧﻮﯿﭘ ﺭﺩ ﻪﮐ ﯽﻣﺎﮕﻨﻫ ﻭ .ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ

Disabled item Disabled item Third item

ﻝﺎﺜﻣ

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</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>List Group With a Disabled Item</h2>
  <p>The disabled class adds a lighter text color to the disabled item. And if used on links, it will remove the default hover effect.</p>
  <div class="list-group">
    <a href="#" class="list-group-item disabled">Disabled item</a>
    <a href="#" class="list-group-item disabled">Disabled item</a>
    <a href="#" class="list-group-item">Third item</a>
  </div>
</div>

</body>
</html>

ﺎﻫﺯﺮﻣ ﻑﺬﺣ/ﺵﻼﻓ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺮﮔ ﯼﺎﻫ ﻪﺷﻮﮔ ﻭ ﺎﻫ ﻪﯿﺷﺎﺣ ﺯﺍ ﯽﺧﺮﺑ ﻑﺬﺣ ﯼﺍﺮﺑ

  • First item
  • Second item
  • Third item
  • Fourth item

ﻝﺎﺜﻣ

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

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

<!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>Flush / Remove Borders</h2>
  <p>Use the .list-group-flush class to remove some borders and rounded corners:</p>
</div>
  
<div class="container mt-3">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
  </ul>
</div>

</body>
</html>

ﻩﺪﺷ ﯼﺭﺍﺬﮔ ﻩﺭﺎﻤﺷ ﺖﺳﺮﻬﻓ ﯼﺎﻫ ﻩﻭﺮﮔ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻬﻧﺁ ﯼﻮﻠﺟ ﺭﺩ ﺩﺍﺪﻋﺍ ﺎﺑ ﺖﺴﯿﻟ ﺩﺭﺍﻮﻣ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ

  • First item
  • Second item
  • Third item

ﻝﺎﺜﻣ

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ol>

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

<!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>Numbered List Group</h2>
  <p>Use the .list-group-numbered class to create list items with numbers in front of them:</p>
</div>
  
<div class="container mt-3">
  <ol class="list-group list-group-numbered">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ol>
</div>

</body>
</html>

ﯽﻘﻓﺍ ﺖﺴﯿﻟ ﯼﺎﻫ ﻩﻭﺮﮔ

:.list-group ﻪﺑ ﺍﺭ

  • First item
  • Second item
  • Third item
  • Fourth item

ﻝﺎﺜﻣ

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

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

<!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>Horizontal List Groups</h2>
  <p>The .list-group-horizontal class displays the list items horizontally instead of vertically:</p>
  <ul class="list-group list-group-horizontal">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
  </ul>
</div>

</body>
</html>

ﯽﻨﺘﻣ ﯼﺎﻫ ﺱﻼﮐ

:ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺖﺴﯿﻟ ﺩﺭﺍﻮﻣ ﻪﺑ ﮓﻧﺭ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﯽﻨﺘﻣ ﯼﺎﻫ ﺱﻼﮐ ﺯﺍ

  • Success item
  • Secondary item
  • Info item
  • Warning item
  • Danger item
  • Primary item
  • Dark item
  • Light item

:ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ ﺖﺳﺮﻬﻓ ﯼﺎﻫ ﻢﺘﯾﺁ ﯼﺰﯿﻣﺁ ﮓﻧﺭ ﯼﺎﻫ ﺱﻼﮐ

.list-group-item-success
list-group-item-secondary
list-group-item-info
list-group-item-warning
.list-group-item-danger
.list-group-item-primary
list-group-item-dark
list-group-item-light

ﻝﺎﺜﻣ

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

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

<!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>List Group With Contextual Classes</h2>
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Success item</li>
    <li class="list-group-item list-group-item-secondary">Secondary item</li>
    <li class="list-group-item list-group-item-info">Info item</li>
    <li class="list-group-item list-group-item-warning">Warning item</li>
    <li class="list-group-item list-group-item-danger">Danger item</li>
    <li class="list-group-item list-group-item-primary">Primary item</li>
    <li class="list-group-item list-group-item-dark">Dark item</li>
    <li class="list-group-item list-group-item-light">Light item</li>
  </ul>
</div>

</body>
</html>

ﺪﯿﻫﺩ ﺪﻧﻮﯿﭘ ﯽﻨﺘﻣ ﯼﺎﻫ ﺱﻼﮐ ﺎﺑ ﺍﺭ ﺩﺭﺍﻮﻣ

Action item Success item Secondary item Info item Warning item Danger item Primary item Dark item Light item

ﻝﺎﺜﻣ

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</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>Linked Items With Contextual Classes</h2>
  <p>Move the mouse over the linked items to see the hover effect:</p>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Action item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
  </div>
</div>

</body>
</html>

ﻥﺎﺸﻧ ﺎﺑ ﻩﻭﺮﮔ ﺖﺴﯿﻟ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺖﺳﺮﻬﻓ ﻩﻭﺮﮔ ﺭﺩ ﺍﺭ ﺎﻫﻥﺎﺸﻧ ﺎﺗ ﺪﯿﻨﮐ ﺐﯿﮐﺮﺗ utility/helper ﯼﺎﻫ

  • Inbox 12
  • Ads 50
  • Junk 99

ﻝﺎﺜﻣ

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

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

<!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>List Group With Badges</h2>
  <p>Combine .badge classes with utility/helper classes to add badges inside the list group:</p>
  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Inbox
      <span class="badge bg-primary rounded-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Ads
      <span class="badge bg-primary rounded-pill">50</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Junk
      <span class="badge bg-primary rounded-pill">99</span>
    </li>
  </ul>
</div>

</body>
</html>

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024