Bootstarp 基础教程之表单部分实例代码
参考：BootStrap中的表单大全
bootstrap表单部分，具体代码如下所示：
<divclass="container"> <formaction="#"method="post"> <fieldset> <legend>用户登陆</legend> <divclass="form-group"> <label>用户名：</label> <inputtype="text"class="form-control"name="name"placeholder="用户名"> </div> <divclass="form-group"> <label>密码：</label> <inputtype="password"class="form-control"name="pwd"placeholder="密码"> <!--form-control代表的是占满容器--> </div> <divclass="checkbox"> <label><inputtype="checkbox">记住密码</label> </div> <!--多选框必须这么写不然会造成选框与文本重叠的问题--> <divclass="form-group"> <buttontype="submit"class="btnbtn-default">提交</button> </div> </fieldset> </form> </div>
inline表单与label隐藏
<divclass="container"> <formaction="#"method="post"class="form-inline"> <!--form-inline让表单横向放置--> <fieldset> <legend>用户登陆</legend> <divclass="form-group"> <labelclass="sr-only">用户名：</label> <!--sr-only让label隐藏--> <inputtype="text"class="form-control"name="name"placeholder="用户名"> </div> <divclass="form-group"> <label>密码：</label> <inputtype="password"class="form-control"name="pwd"placeholder="密码"> <!--form-control代表的是占满容器--> </div> <divclass="checkbox"> <label><inputtype="checkbox">记住密码</label> </div> <!--多选框必须这么写不然会造成选框与文本重叠的问题--> <divclass="form-group"> <buttontype="submit"class="btnbtn-default">提交</button> </div> </fieldset> </form> </div>
把label和input放在同一行内的方法
<divclass="container"> <formaction="#"method="post"class="form-horizontal"> <!--form-horizontal让表单初始化--> <fieldset> <legend>用户登陆</legend> <divclass="form-group"> <labelclass="col-xs-3control-label">用户名：</label> <!--借助栅格系统设置label的宽度--> <divclass="col-xs-9"> <inputtype="text"class="form-control"name="name"placeholder="用户名"> </div> <!--用div设置栅格并包裹input--> </div> </form> </div> <!--注意！把label和input放在同一行在768分辨率一下是有问题的在md和lg上正常-->
小图标的添加
<divclass="container"> <formaction="#"method="post"class="form-horizontal"> <!--form-horizontal让表单初始化--> <fieldset> <legend>用户登陆</legend> <divclass="form-grouphas-feedbackhas-success"> <!--在项目的div外包围class加has-feedback--> <labelclass="col-xs-3control-label">用户名：</label> <divclass="col-xs-9"> <inputtype="text"class="form-control"name="name"placeholder="用户名"> <spanclass="glyphiconglyphicon-okform-control-feedback"aria-hidden="true"></span> <!--在input之下添加一个span记得加form-c-f--> </div> </div> </form> </div>
一堆按钮组件
<divclass="container"> <divclass="btn-toolbar"> <divclass="btn-group"> <buttonclass="btnbtn-success"><spanclass="glyphiconglyphicon-star"></span></button> <buttonclass="btnbtn-info"><spanclass="glyphiconglyphicon-star"></span></button> <buttonclass="btnbtn-danger"><spanclass="glyphiconglyphicon-star"></span></button> <buttonclass="btnbtn-default"><spanclass="glyphiconglyphicon-star"></span></button> </div> </div> </div>
不要强行去做一个按钮分离因为这是一组中间的按钮不是圆角的
搜索框
<divclass="col-md-4col-md-offset-2"> <divclass="input-groupinput-lg"> <divclass="input-group-addon"> <ahref=""><spanclass="glyphiconglyphicon-star"></span></a> </div> <inputtype="text"class="form-controlinput-xs"> </div> </div> </div>
以上所述是小编给大家介绍的Bootstarp基础教程之表单部分，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！