用Bootstrap栅格系统表单

xiaoxiao2021-02-28  104

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 页面标题</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body style="padding: 50px;background-color: #ccc;"> <div class="container" style="padding:50px;background-color:#fff;"> <form class="form-horizontal"><!-- 表单中的栅格系统不用row 而是用form-horizontal:水平排列的表单 加到form元素中 --> <div class="form-group"> <!-- form-group代表分组的意思 把label与input分成一组 --> <label class="col-md-2 control-label" for="username">用户名:</label> <!--control-label控制label与input之间的距离 for的作用是将username与input中的username绑定在一起,你正在点击用户名的时候,input输入框获得焦点 --> <div class="col-md-4"><!-- 加div进行设置input的栅格 --> <input type="text" id="username" class="form-control" placeholder="请输入用户名" maxlength="30"> <!-- form-control 控制input输入框的显示 --> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="password">密码:</label> <div class="col-md-4"> <input type="password" id="password" class="form-control" placeholder="请输入密码"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">上次图片:</label> <div class="col-md-10"> <input type="file"> </div> <p class="help-block">上传图片类型:xxxxx</p> <!-- help-block 帮助信息以块的方式显示 与file之间的距离发生变化 --> </div> <div class="form-group"> <label class="col-md-2 control-label">兴趣爱好:</label> <div class="col-md-10"> <!-- class="checkbox"把一组的复选框放在一起 --> <label class="checkbox-inline"><input type="checkbox" value="画画">画画</label><!--checkbox-inline分组显示 --> <label class="checkbox-inline"><input type="checkbox" value="玩游戏">玩游戏</label> <label class="checkbox-inline"><input type="checkbox" value="听歌">听歌</label> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">学历:</label> <div class="col-md-10"> <!-- class="radio" checkbox把一组的复选框放在一起 --> <label class="radio-inline"><input type="radio" value="画画">本科</label><!--checkbox-inline分组显示 --> <label class="radio-inline"><input type="radio" value="玩游戏">研究生</label> <label class="radio-inline"><input type="radio" value="听歌">博士</label> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="resume">个人简历:</label> <div class="col-md-4"> <textarea rows="5" class="form-control" id="resume" placeholder="请输入您的信息"></textarea> </div> </div> <div class="form-group"> <div class="col-md-2 col-md-offset-2 "> <button class=" btn btn-success btn-block">提交表单</button> </div> <div class="col-md-2 col-md-offset-1 "> <button class=" btn btn-success btn-block" >取消</button> </div> </div> <!--<div class="col-md-offset-2 col-md-2">--> <!--<button class=" btn btn-success ">提交表单</button>--> <!--</div>--> </form> </div> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-54783.html

最新回复(0)