Bootstrap 5: Input Groups

فهرست مطالب

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

ﯼﺩﻭﺭﻭ ﯼﺎﻫ ﻩﻭﺮﮔ

.ﺖﺳﺍ "ﺎﻤﻨﻫﺍﺭ ﻦﺘﻣ" ﻥﺍﻮﻨﻋ ﻪﺑ ﯼﺩﻭﺭﻭ ﺪﻠﯿﻓ ﺖﺸﭘ ﺎﯾ ﻮﻠﺟ ﺭﺩ ﯼﺍ ﻪﻤﮐﺩ ﺎﯾ ﻦﺘﻣ ،ﺩﺎﻤﻧ ﮏﯾ ﻥﺩ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ .input-group-text ﺱﻼﮐ ﺯﺍ ،ﻩﺪﺷ ﺺ

@
@example.com

ﻝﺎﺜﻣ

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Your Email">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

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

<!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>Input Group</h2>
  <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text".</p>
  <p>Use the .input-group-text class to style the specified help text.</p>
  
  <form action="/action_page.php">
    <div class="input-group mb-3">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="Username" name="usrname">
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Your Email" name="email">
      <span class="input-group-text">@example.com</span>
    </div>
    
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

ﯼﺩﻭﺭﻭ ﻩﻭﺮﮔ ﻩﺯﺍﺪﻧﺍ

:ﯼﺩﻭﺭﻭ ﯼﺎﻫ ﻩﻭﺮﮔ .ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮒﺭﺰﺑ ﯼﺎﻫ ﻩﻭﺮﮔ ﯼﺍﺮﺑ .in

Small
Default
Large

ﻝﺎﺜﻣ

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Small</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Default</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Large</span>
  <input type="text" class="form-control">
</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>Input Group Size</h2>
  <p>Use the .input-group-sm class for small input groups and .input-group-lg for large inputs groups:</p>
  
  <div class="input-group input-group-sm mb-3">
    <span class="input-group-text">Small</span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group mb-3">
    <span class="input-group-text">Default</span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group input-group-lg mb-3">
    <span class="input-group-text">Large</span>
    <input type="text" class="form-control">
  </div>
</div>

</body>
</html>

ﺩﺪﻌﺘﻣ ﯼﺎﻫ ﮏﻤﮐ ﻭ ﺎﻫ ﯼﺩﻭﺭﻭ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﻪﻧﻭﺰﻓﺍ ﺎﯾ ﯼﺩﻭﺭﻭ ﻦﯾﺪﻨﭼ

Person
One Two Three

ﻝﺎﺜﻣ

<!-- Multiple inputs -->
<div class="input-group mb-3">
  <span class="input-group-text">Person</span>
  <input type="text" class="form-control" placeholder="First Name">
  <input type="text" class="form-control" placeholder="Last Name">
</div>
<!-- Multiple addons / help text -->
<div class="input-group mb-3">
  <span class="input-group-text">One</span>
  <span class="input-group-text">Two</span>
  <span class="input-group-text">Three</span>
  <input type="text" class="form-control">
</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>Multiple Inputs and Helpers</h2>
  <p>Add multiple inputs or addons:</p>
  
  <!-- Multiple inputs -->
  <div class="input-group mb-3">
    <span class="input-group-text">Person</span>
    <input type="text" class="form-control" placeholder="First Name">
    <input type="text" class="form-control" placeholder="Last Name">
  </div>

  <!-- Multiple addons / help text -->
  <div class="input-group mb-3">
    <span class="input-group-text">One</span>
    <span class="input-group-text">Two</span>
    <span class="input-group-text">Three</span>
    <input type="text" class="form-control">
  </div>
</div>

</body>
</html>

ﻮﯾﺩﺍﺭ ﻭ ﺲﮐﺎﺑ ﮏﭼ ﺎﺑ ﯼﺩﻭﺭﻭ ﻩﻭﺮﮔ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﯽﯾﻮﯾﺩﺍﺭ ﯼﺎﻫ ﻪﻤﮐﺩ ﺎﯾ ﺎﻫ ﺲﮐﺎﺑ ﮏﭼ ﺯﺍ ﻦﺘﻣ ﯼﺎﺟ ﻪﺑ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ

ﻝﺎﺜﻣ

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</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">
  <h3>Input Group with Checkboxes and Radios</h3>
  <p>You can also use checkboxes or radio buttons instead of text:</p>
  
  <!-- Multiple inputs -->
  <div class="input-group mb-3">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
    <input type="text" class="form-control" placeholder="Some text">
  </div>

  <div class="input-group mb-3">
    <div class="input-group-text">
      <input type="radio">
    </div>
    <input type="text" class="form-control" placeholder="Some text">
  </div>
</div>

</body>
</html>

ﯼﺩﻭﺭﻭ ﻩﻭﺮﮔ ﯼﺎﻫ ﻪﻤﮐﺩ

ﻝﺎﺜﻣ

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Basic Button</button>
  <input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Cancel</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">
  <h3>Input Group Buttons</h3>
  
  <div class="input-group mb-3 mt-3">
    <button class="btn btn-outline-primary" type="button">Basic Button</button>
    <input type="text" class="form-control" placeholder="Some text">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <button class="btn btn-success" type="submit">Go</button> 
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Something clever..">
    <button class="btn btn-primary" type="button">OK</button> 
    <button class="btn btn-danger" type="button">Cancel</button> 
  </div>
</div>

</body>
</html>

ﯽﯾﻮﺸﮐ ﻪﻤﮐﺩ ﺎﺑ ﯼﺩﻭﺭﻭ ﻩﻭﺮﮔ

.ﺪﯾﺭﺍﺪﻧ . ﯽﯾﻮﺸﮐ ﯼﺪﻨﺑ ﻪﺘﺴﺑ ﻪﺑ ﯼﺯﺎﯿﻧ ﻻًﻮﻤﻌﻣ ﻪﮐ ﺭﻮﻄﻧﺎﻤﻫ ﻪﮐ ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﺟﻮﺗ .ﺪﯿﻨﮐ

ﻝﺎﺜﻣ

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Username">
</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">
  <h3>Input Groups with Dropdown Button</h3>
  <p>Add a dropdown button in the input group. Note that you don't need the .dropdown wrapper, as you normally would.</p>
    
  <div class="input-group mt-3 mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>

</body>
</html>