Bootstrap全局css样式_表单
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap全局css样式_表单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form action=""> <div class="form-group"><label for="em">用戶名</label><input type="email" class="form-control" placeholder="Email" id="em"></div><div class="form-group"><label for="">密碼</label><input type="password" class="form-control"></div><div class="form-group"><label for="">File input</label><input type="file"><p>請選擇您需要的文件</p></div><div class="box"><label for=""><input type="checkbox">女</label></div><button type="submit" class="btn btn-default">提交</button></form></div></body>
</html>
內聯表單
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form class="form-inline"> <div class="form-group"><label class="sr-only">username</label><div class="input-group"><div class="input-group-addon">$</div><input type="email" class="form-control" placeholder="金額"><div class="input-group-addon">.00</div></div></div><div class="form-group"><label class="sr-only">password</label><input type="password" class="form-control" placeholder="password"></div></form></div></body> </html>水平排列的表單
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><div class="form-group"><label class="col-md-2 control-label">Email</label><div class="col-md-10"><input type="email" class="form-control"></div></div></form></div></body> </html> 文本域 支持多行文本的表單控件。可根據需要改變 rows 屬性。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><textarea class="form-control" rows="3"></textarea></form></div></body> </html>下拉列表（select）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form action=""><select class="form-control"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select><select multiple class="form-control"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></form></div></body> </html>焦點狀態
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><label class="sr-only">hello</label><input class="form-control" focus></form></div></body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><label class="sr-only">hello</label><input class="form-control" disabled></form></div></body> </html>禁用狀態
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><fieldset disabled><div class="form-group"><label class="sr-only">hello</label><input class="form-control"></div><div class="form-group"><label class="sr-only">hello</label><input class="form-control"></div><div class="form-group"><label class="sr-only">hello</label><input class="form-control"></div><button type="reset" class="btn btn-default">重置</button><a href="#">aaaa</a></fieldset></form></div></body> </html>只讀狀態
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><a href="#">aaaa</a><div class="form-group"><label class="sr-only">hello</label><input class="form-control" type="text" placeholder="zhidu" readonly></div></form></div></body> </html>校驗狀態
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><div class="form-group has-success"><label class="control-label">hello</label><input type="text" class="form-control"></div></form></div></body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><div class="form-group has-error"><label class="control-label">hello</label><input type="text" class="form-control"></div></form></div></body> </html>添加額外的圖標
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><div class="form-group has-success has-feedback"><label class="control-label">hello</label><input type="text" class="form-control" placeholder="hello" aria-describedby="inputsuccessstatus" aria-hidden="true"><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span></div></form></div></body> </html>控件尺寸
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> </head> <body><div class="container"><form class="form-horizontal"><input class="form-control input-lg" type="text" placeholder="大"><input type="text" class="form-control" placeholder="默認"><input type="text" class="form-control input-sm" placeholder="小"></form></div></body> </html>?
總結
以上是生活随笔為你收集整理的Bootstrap全局css样式_表单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap全局css样式_表格
- 下一篇： Bootstrap全局css样式_按钮