Bootstrap组件_输入框组
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap组件_输入框组
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輸入框組</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control" placeholder="email"></div></div></body>
</html>
尺寸為 .input-group 添加相應的尺寸類，其內部包含的元素將自動調整自身的尺寸。不需要為輸入框組中的每個
元素重復地添加控制尺寸的類。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輸入框組</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><div class="input-group input-group-lg"><span class="input-group-addon" id="sizing-addon1">@</span><input type="text" class="form-control" placeholder="Username"
aria-describedby="sizing-addon1"></div><div class="input-group"><span class="input-group-addon" id="sizing-addon2">@</span><input type="text" class="form-control" placeholder="Username"
aria-describedby="sizing-addon2"></div><div class="input-group input-group-sm"><span class="input-group-addon" id="sizing-addon3">@</span><input type="text" class="form-control" placeholder="Username"
aria-describedby="sizing-addon3"></div></div></body>
</html>
作為額外元素的多選框和單選框可以將多選框或單選框作為額外元素添加到輸入框組中。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輸入框組</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><div class="row"><div class="col-lg-6"><div class="input-group"><span class="input-group-addon"><input type="checkbox" aria-label="true"></span><input type="text" class="form-control"></div></div><div class="col-lg-6"><div class="input-group"><span class="input-group-addon"><input type="radio"></span><input type="text" class="form-control"></div></div></div></div></body>
</html>
作為額外元素的按鈕為輸入框組添加按鈕需要額外添加一層嵌套，不是 .input-group-addon，而是添加 .input-group-btn 來包裹按鈕元素。由于不同瀏覽器的默認樣式無法被統一的重新賦值，所以才需要這樣做。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輸入框組</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><div class="row"><div class="col-md-6"><div class="input-group"><input type="text" class="form-control" placeholder="請輸入要查找的內容"><span class="input-group-btn"><button type="button" class="btn btn-default">go!</button></span></div></div><div class="col-md-6"></div></div></div></body>
</html>
作為額外元素的分裂式按鈕下拉菜單<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輸入框組</title><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="col-md-6"><div class="input-group"><div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown" aria-haspopup="true">Action<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">1</a></li><li><a href="#">2</a></li></ul></div><input type="text" class="form-control"></div></div></div></body>
</html>
?
總結
以上是生活随笔為你收集整理的Bootstrap组件_输入框组的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap组件_按钮组
- 下一篇： Bootstrap组件_导航