我正在参加[码上掘金挑战赛]详情请看:码上掘金挑战赛来了!
表单
<body>
<div class="container">
<div class="row">
<div class="col-md-12 ">
<form class="form-horizontal" method="post" action="#">
<!--表单区域-->
<fieldset>
<!--表单主题-->
<legend>用户注册</legend>
<!--每一个form-group都可以自定义布局-->
<div class="form-group">
<!--label表示文字提示标签,可以通过表单的组建的id提示-->
<label class="col-md-2 control-label" for="mid">用户名称</label>
<div class="col-md-4">
<input class="form-control" id="mid" type="text"/>
</div>
</div>
<div class="form-group">
<!--label表示文字提示标签,可以通过表单的组建的id提示-->
<label class="col-md-2 control-label" for="password">用户密码</label>
<div class="col-md-4">
<input class="form-control" id="password" type="password"/>
</div>
</div>
<div class="form-group">
<!--label表示文字提示标签,可以通过表单的组建的id提示-->
<label class="col-md-2 control-label" for="con">确认密码</label>
<div class="col-md-4">
<input class="form-control" id="con" type="password"/>
</div>
</div>
<div class="form-group">
<!--label表示文字提示标签,可以通过表单的组建的id提示-->
<label class="col-md-2 control-label" for="sex">性别</label>
<div class="col-md-5">
<div class="radio-inline">
<input type="radio" name="sex" id="sex-man" value="man" checked/>男
</div>
<div class="radio-inline">
<input type="radio" name="sex" id="sex-woman" value="woman"/>女
</div>
</div>
</div>
<div class="form-group">
<!--label表示文字提示标签,可以通过表单的组建的id提示-->
<label class="col-md-2 control-label" for="lock">个人爱好</label>
<div class="col-md-5">
<lable class="checkbox-inline">
<input id="lock" type="checkbox" value="lock" name="city"/>体育
</lable>
<lable class="checkbox-inline">
<input id="lock" type="checkbox" value="lock" name="city"/>音乐
</lable>
<lable class="checkbox-inline">
<input id="lock" type="checkbox" value="lock" name="city"/>读书
</lable>
</div>
</div>
<div class="form-group">
<!--label表示文字提示标签,可以通过表单的组建的id提示-->
<label class="col-md-2 control-label" for="city">所在城市</label>
<div class="col-md-4">
<select id="city" class="form-control">
<option value="sheng">陕西</option>
<option value="si">宝鸡</option>
<option value="si">西安</option>
<option value="si">咸阳</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="btn btn-primary" value="提交" type="submit"/>
<input class="btn btn-warning" value="重置" type="submit"/>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
结果
用的元素form。表单写在form下,form--form-group--label/input(标签)。
内联表单:为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
radio:显示的是垂直排列。
:可以改变html里乱码问题。
margin: 0 auto:外边距,居中;0:上下,auto:左右。
padding:内边距