bootstrap 表单部分,具体代码如下所示:
<p class=container> <form action=# method=post> <fieldset> <legend>用户登陆</legend> <p class=form-group> <label>用户名:</label> <input type=text class=form-control name=name placeholder=用户名> </p> <p class=form-group> <label>密码:</label> <input type=password class=form-control name=pwd placeholder=密码> <!--form-control代表的是占满容器--> </p> <p class=checkbox> <label><input type=checkbox>记住密码</label> </p> <!--多选框必须这么写 不然会造成选框与文本重叠的问题--> <p class=form-group> <button type=submit class=btn btn-default>提交</button> </p> </fieldset> </form> </p>
inline表单与label隐藏
<p class=container> <form action=# method=post class=form-inline> <!--form-inline让表单横向放置--> <fieldset> <legend>用户登陆</legend> <p class=form-group> <label class=sr-only>用户名:</label> <!--sr-only让label隐藏--> <input type=text class=form-control name=name placeholder=用户名> </p> <p class=form-group> <label>密码:</label> <input type=password class=form-control name=pwd placeholder=密码> <!--form-control代表的是占满容器--> </p> <p class=checkbox> <label><input type=checkbox>记住密码</label> </p> <!--多选框必须这么写 不然会造成选框与文本重叠的问题--> <p class=form-group> <button type=submit class=btn btn-default>提交</button> </p> </fieldset> </form> </p>
把label和input放在同一行内的方法
<p class=container> <form action=# method=post class=form-horizontal> <!--form-horizontal让表单初始化--> <fieldset> <legend>用户登陆</legend> <p class=form-group> <label class=col-xs-3 control-label>用户名:</label> <!--借助栅格系统设置label的宽度--> <p class=col-xs-9> <input type=text class=form-control name=name placeholder=用户名> </p> <!--用p设置栅格并包裹input--> </p> </form> </p> <!--注意!把label和input放在同一行在768分辨率一下是有问题的 在md和lg上正常-->
小图标的添加
<p class=container> <form action=# method=post class=form-horizontal> <!--form-horizontal让表单初始化--> <fieldset> <legend>用户登陆</legend> <p class=form-group has-feedback has-success> <!--在项目的p外包围class加has-feedback--> <label class=col-xs-3 control-label>用户名:</label> <p class=col-xs-9> <input type=text class=form-control name=name placeholder=用户名> <span class=glyphicon glyphicon-ok form-control-feedback aria-hidden=true></span> <!--在input之下添加一个span 记得加form-c-f--> </p> </p> </form> </p>
一堆按钮组件
<p class=container> <p class=btn-toolbar> <p class=btn-group> <button class=btn btn-success><span class=glyphicon glyphicon-star></span></button> <button class=btn btn-info><span class=glyphicon glyphicon-star></span></button> <button class=btn btn-danger><span class=glyphicon glyphicon-star></span></button> <button class=btn btn-default><span class=glyphicon glyphicon-star></span></button> </p> </p> </p>
不要强行去做一个按钮分离 因为这是一组 中间的按钮不是圆角的
搜索框
<p class=col-md-4 col-md-offset-2> <p class=input-group input-lg> <p class=input-group-addon> <a href=><span class=glyphicon glyphicon-star></span></a> </p> <input type=text class=form-control input-xs> </p> </p> </p>
总结:以上所述就是给大家介绍的Bootstarp 基础教程之表单部分的全部内容,希望能对大家的学习有所帮助。
相关推荐:
Bootstrap表单布局有哪几种方式?Bootstrap表单布局的创建方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。