Computer >> Máy Tính >  >> Lập trình >> HTML

Sử dụng các nhóm đầu vào Bootstrap


Bằng cách thêm nội dung thêm vào và nối thêm vào trường đầu vào, bạn có thể thêm các phần tử phổ biến vào đầu vào của người dùng. Ví dụ:bạn có thể thêm biểu tượng đô la, @ cho tên người dùng Twitter hoặc bất kỳ thứ gì khác có thể phổ biến cho giao diện ứng dụng của bạn.

Ví dụ

Bạn có thể thử chạy đoạn mã sau để tạo Nhóm đầu vào Bootstrap

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