การใช้งาน Bootstrap Input Groups

ด้วยการเพิ่มเนื้อหา prepended และ appended ให้กับ input field คุณสามารถเพิ่มองค์ประกอบทั่วไปให้กับ input ของผู้ใช้ เช่น สัญลักษณ์ดอลลาร์, @ สำหรับ Twitter username หรือสิ่งอื่นที่พบบ่อยใน interface ของแอปพลิเคชัน

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อสร้าง Bootstrap Input Group:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Input Group</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div style="padding: 100px 100px 10px;">
      <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" placeholder="twitterhandle">
        </div>
        <br>
        <div class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
          <span class="input-group-addon">$</span>
          <input type="text" class="form-control">
          <span class="input-group-addon">.00</span>
        </div>
      </form>
    </div>
  </body>
</html>