bootstrap --- 表單

在這里插入圖片描述

// HTML >>> 第一種樣式
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body style="padding:5px;"><form role="form"><div class="form-group"><label for="Email1">郵箱地址</label><input type="email" class="form-control" id="Email1" placeholder="Enter email"><!-- 添加 form-control 類用于將表單設置為 100% 寬度, 并添加樣式上的美化 --></div><div class="form-group"><label for="Password1">密碼</label><input type="password" class="form-control" id="Password1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">文件上傳 </label><input type="file" id="exampleInputFile"><p class="help-block"> ...... </p></div><div class="checkbox"><label><input type="checkbox">請勾選</label></div><button type="submit" class="btn btn-default">提交</button>
</form></body>
</html>

參考《CSS高效開發實戰》 P160

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/251492.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251492.shtml
英文地址，請注明出處：http://en.pswp.cn/news/251492.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！