Cách sử dụng Bootstrap Input Groups

Input Groups cho phép thêm nội dung phía trước (prepend) hoặc phía sau (append) ô nhập liệu, ví dụ: ký hiệu $, @ cho username Twitter, v.v.

Ví dụ

<!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>

Ba ví dụ: @ trước input, .00 sau input, và $ trước + .00 sau input.