資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 Bootstrap 4 將兩個輸入框並排放置？
Bootstrap 是一款流行的前端框架，包含預先設定樣式的元件，允許開發人員直接在應用程式中使用它們。“4” 是 Bootstrap 的版本號。
Bootstrap 還包含預先設定樣式的輸入元件。此外，它還有不同型別的輸入元件，例如輸入組、單個輸入等。
在建立表單時，如果需要在表單中新增數十個輸入，可以將一些輸入欄位並排放置，例如，可以將名字和姓氏並排放置。
在本教程中，我們將使用 Bootstrap 將兩個輸入框並排放置。
語法
使用者可以按照以下語法使用 Bootstrap 4 將兩個輸入框並排放置。
<div class="input-group"> <input type="text" class="form-control"> <input type="text" class="form-control"> </div>
在以上語法中，我們使用帶有 div 元素的“input-group”類將所有輸入元素並排放置，這些元素位於 div 元素內部。
示例 1
在下面的示例中，我們在 HTML 程式碼的“head”部分添加了 Bootstrap 的 CDN。
我們在 HTML 中添加了一個包含“input-group”類名的 div 元素。在 div 元素中，我們定義了另一個包含類名“input-group-prepend”的 div 元素，併為兩個輸入元素添加了組合標籤。
接下來，我們在 div 元素內部添加了兩個輸入元素。在輸出中，使用者可以看到這兩個組合元素。
<html>
<head>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<h3> Using the <i> bootstrap 4 </i> to place input elements next to each other </h3><br>
<div class = "input-group" style = "width: 80%">
<div class = "input-group-prepend">
<span class = "input-group-text" id=""> Username and password </span>
</div>
<input type = "text" class = "form-control">
<input type = "text" class = "form-control">
</div>
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"> </script>
</body>
</html>
示例 2
在此示例中，我們演示瞭如何更改組合輸入欄位的尺寸。我們可以使用 style 屬性來更改輸入元素的寬度。此外，我們還使用父 div 元素的“input-group-lg”和“input-group-lg”類名來更改 Bootstrap 輸入的高度。
在輸出中，我們可以看到不同尺寸的輸入元素。
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<h3> Using the <i> bootstrap 4 </i> to place input elements next to each other </h3><br>
<div class = "input-group input-group-lg" style = "width: 80%">
<div class = "input-group-prepend">
<span class = "input-group-text" id = "">Username and password</span>
</div>
<input type = "text" class = "form-control">
<input type = "text" class = "form-control">
</div> <br>
<div class = "input-group input-group-sm" style = "width: 80%">
<div class = "input-group-prepend">
<span class = "input-group-text" id = "">Email and password</span>
</div>
<input type = "text" class = "form-control">
<input type = "text" class = "form-control">
</div>
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"> </script>
</body>
</html>
在本教程中，我們學習瞭如何使用 Bootstrap 的輸入元件。我們可以使用帶有 div 元素的“input-group”類來組合輸入元素，並將它們放在 div 元素內部。
此外，我們在第二個示例中學習瞭如何更改組合輸入元素的大小。
635 次瀏覽
