用Bootstrap栅格系统表单

来源：互联网发布：qt 连接mysql 编辑：程序博客网时间：2024/05/19 13:57
<!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>
阅读全文
0 0