将课堂源码复制到你的作业中， 对多个类样式进行测试看效果，掌握样式的规律
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>默认垂直表单</title> </head> <body> <div> <div> <div class="col-md-6 col-md-offset-3"> <h3>新用户注册</h3> <form> <div> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="Email"> </div> <div> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="Password"> </div> <div> <label for="file">文件上传:</label> <input type="file" id="file" name="file"> <p>文件必须是jpg/png/gif图片格式</p> </div> <div> <label for="level">学历:</label> <select name="level" id="level"> <option value="0">高中</option> <option value="1">本科</option> <option value="2">博士</option> </select> </div> <div> <label for="comment">留言:</label> <textarea name="comment" id="comment" rows="3"></textarea> </div> <label>选择课程:</label> <div> <label> <input type="checkbox" name="course[]" value="front"> 前端 </label> </div> <div> <label> <input type="checkbox" name="course[]" value="server" checked> 后端 </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" name="course[]" value="full-stack" disabled> 全栈 </label> </div> <label>选择课程:</label> <div> <label> <input type="checkbox" name="course[]" value="front"> 前端 </label> </div> <div> <label> <input type="checkbox" name="course[]" value="server" checked> 后端 </label> </div> <div class="checkbox-inline disabled"> <label> <input type="checkbox" name="course[]" value="full-stack" disabled> 全栈 </label> </div> <label>选择性别:</label> <div> <label> <input type="radio" name="gender" checked>男 </label> </div> <div> <label> <input type="radio" name="gender">女 </label> </div> <div> <label> <input type="radio" name="gender" disabled>待定 </label> </div> <label>选择性别:</label> <div> <label> <input type="radio" name="gender" checked>男 </label> </div> <div> <label> <input type="radio" name="gender">女 </label> </div> <div> <label> <input type="radio" name="gender" disabled>待定 </label> </div> <div> <label> <input type="checkbox" name="name" aria-label="用户名"> </label> </div> <div> <label> <input type="radio" name="name" aria-label="是否同意?"> </label> </div> <br> <button type="button" class="btn btn-primary">提交</button> </form> </div> </div> </div> </body> </html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
