免費(fèi)AI編程助手
Bootstrap5 輸入框組
2023-07-11 16:13 更新
我們可以使用 .input-group 類來向表單輸入框中添加更多的樣式，如圖標(biāo)、文本或者按鈕。
.input-group-text 類來設(shè)置文本的樣式。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>輸入框組</h2>
<p>我們可以使用 .input-group 類來向表單輸入框中添加更多的樣式，如圖標(biāo)、文本或者按鈕。</p>
<p>.input-group-text 類來設(shè)置文本的樣式。</p>
<form>
<div class="input-group mb-3">
<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">@w3cschool.cn</span>
</div>
</form>
</div>
</body>
</html>輸入框大小
使用 .input-group-sm 類來設(shè)置小的輸入框， .input-group-lg 類設(shè)置大的輸入框：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>輸入框大小</h2>
<p>使用 .input-group-sm 類來設(shè)置小的輸入框， .input-group-lg 類設(shè)置大的輸入框：</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>多個輸入框和文本
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>多個輸入框和文本</h2>
<!-- 多個輸入框 -->
<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>
<!-- 多個文本信息 -->
<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>復(fù)選框與單選框
文本信息可以使用復(fù)選框與單選框替代：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h2>復(fù)選框與單選框</h2>
<!-- 多個輸入框 -->
<div class="input-group mb-3">
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="text" class="form-control" placeholder="W3Cschool">
</div>
<div class="input-group mb-3">
<div class="input-group-text">
<input type="radio">
</div>
<input type="text" class="form-control" placeholder="GOOGLE">
</div>
</div>
</body>
</html>輸入框添加按鈕組
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h3>輸入框按鈕組</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>設(shè)置下拉菜單
輸入框中添加下拉菜單不需要使用 .dropdown 類。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h3>設(shè)置下拉菜單</h3>
<div class="input-group mt-3 mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
選擇網(wǎng)站
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" rel="external nofollow" target="_blank" >GOOGLE</a></li>
<li><a class="dropdown-item" href="http://o2fo.com">W3Cschool</a></li>
<li><a class="dropdown-item" rel="external nofollow" target="_blank" >TAOBAO</a></li>
</ul>
<input type="text" class="form-control" placeholder="網(wǎng)站地址">
</div>
</div>
</body>
</html>輸入框組標(biāo)簽
在輸入框組通過在輸入框組外圍的 label 來設(shè)置標(biāo)簽，標(biāo)簽的 for 屬性需要與輸入框組的 id 對應(yīng)，點(diǎn)擊標(biāo)簽后可以聚焦輸入框：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
<h3>設(shè)置下拉菜單</h3>
<form>
<label for="demo">這里輸入您的郵箱:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<span class="input-group-text">@runoob.com</span>
</div>
</form>
</div>
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：