-
搞一个初始用例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BootStrap</title> <style> #result { display: none; } </style> </head> <body> <h2 class="title">注册</h2> <form action="" id="myForm"> <div> <label>姓名</label> <input type="text" name="name"> </div> <div> <label>密码</label> <input type="text" name="password"> </div> <div> <label>电话</label> <input type="text" name="cellphone"> </div> <div> <label>地址</label> <input type="text" name="address"> </div> <div id="result"> </div> <div class="operate"> <input type="submit"> </div> </form> <script> var form = document.querySelector('#myForm'); var result = document.querySelector('#result'); form.addEventListener('submit', function(e) { if (!document.querySelector('[name=password]').value) { result.style.display = 'block'; // 块级显示 result.innerHTML = "密码为空"; e.preventDefault(); // 阻止表单的提交。 } else { result.style.display = 'none'; } }) </script> </body> </html> -
使用bootstrap
head中添加bootstrap的引用
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-
添加class类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>BootStrap</title> <style> #result { display: none; } .title { margin-top: 50px; margin-bottom: 50px; } .operate input { margin: 0 auto; } </style> </head> <body> <h2 class="title col-6 offset-3">注册</h2> <form action="" id="myForm" class="col-6 offset-3"> <div class="form-group row"> <label class="col-2 col-form-label">姓名</label> <div class="col-10"> <input class="form-control" type="text" name="name"> </div> </div> <div class="form-group row"> <label class="col-2 col-form-label">密码</label> <div class="col-10"> <input class="form-control" type="text" name="password"> </div> </div> <div class="form-group row"> <label class="col-2 col-form-label">电话</label> <div class="col-10"> <input class="form-control" type="text" name="cellphone"> </div> </div> <div class="form-group row"> <label class="col-2 col-form-label">地址</label> <div class="col-10"> <input class="form-control" type="text" name="address"> </div> </div> <div class="alert alert-danger" id="result"> </div> <div class="operate form-group row"> <input class="btn btn-primary" type="submit"> </div> </form> <script> var form = document.querySelector('#myForm'); var result = document.querySelector('#result'); form.addEventListener('submit', function(e) { if (!document.querySelector('[name=password]').value) { result.style.display = 'block'; // 块级显示 result.innerHTML = "密码为空"; e.preventDefault(); // 阻止表单的提交。 } else { result.style.display = 'none'; } }) </script> </body> </html> -
关于响应式布局，可以直接使用
Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px Max container width None (auto) 540px 720px 960px 1140px Class prefix .col-.col-sm-.col-md-.col-lg-.col-xl-# of columns 12 Gutter width 30px (15px on each side of a column) Nestable Yes Column ordering Yes
-