这篇文章将为大家详细讲解有关bootstrap中表单部分的示例，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
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>关于“bootstrap中表单部分的示例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
