bootstrap表单部分，具体代码如下所示：

 

　　

 

　　<pclass="container">

 

　　<formaction="#"method="post">

 

　　<fieldset>

 

　　<legend>用户登陆</legend>

 

　　<pclass="form-group">

 

　　<label>用户名：</label>

 

　　<inputtype="text"class="form-control"name="name"placeholder="用户名">

 

　　</p>

 

　　<pclass="form-group">

 

　　<label>密码：</label>

 

　　<inputtype="password"class="form-control"name="pwd"placeholder="密码">

 

　　<!--form-control代表的是占满容器-->

 

　　</p>

 

　　<pclass="checkbox">

 

　　<label><inputtype="checkbox">记住密码</label>

 

　　</p>

 

　　<!--多选框必须这么写不然会造成选框与文本重叠的问题-->

 

　　<pclass="form-group">

 

　　<buttontype="submit"class="btnbtn-default">提交</button>

 

　　</p>

 

　　</fieldset>

 

　　</form>

 

　　</p>

 

　　inline表单与label隐藏

 

　　

 

　　<pclass="container">

 

　　<formaction="#"method="post"class="form-inline">

 

　　<!--form-inline让表单横向放置-->

 

　　<fieldset>

 

　　<legend>用户登陆</legend>

 

　　<pclass="form-group">

 

　　<labelclass="sr-only">用户名：</label>

 

　　<!--sr-only让label隐藏-->

 

　　<inputtype="text"class="form-control"name="name"placeholder="用户名">

 

　　</p>

 

　　<pclass="form-group">

 

　　<label>密码：</label>

 

　　<inputtype="password"class="form-control"name="pwd"placeholder="密码">

 

　　<!--form-control代表的是占满容器-->

 

　　</p>

 

　　<pclass="checkbox">

 

　　<label><inputtype="checkbox">记住密码</label>

 

　　</p>

 

　　<!--多选框必须这么写不然会造成选框与文本重叠的问题-->

 

　　<pclass="form-group">

 

　　<buttontype="submit"class="btnbtn-default">提交</button>

 

　　</p>

 

　　</fieldset>

 

　　</form>

 

　　</p>

 

　　把label和input放在同一行内的方法

 

　　

 

　　<pclass="container">

 

　　<formaction="#"method="post"class="form-horizontal">

 

　　<!--form-horizontal让表单初始化-->

 

　　<fieldset>

 

　　<legend>用户登陆</legend>

 

　　<pclass="form-group">

 

　　<labelclass="col-xs-3control-label">用户名：</label>

 

　　<!--借助栅格系统设置label的宽度-->

 

　　<pclass="col-xs-9">

 

　　<inputtype="text"class="form-control"name="name"placeholder="用户名">

 

　　</p>

 

　　<!--用p设置栅格并包裹input-->

 

　　</p>

 

　　</form>

 

　　</p>

 

　　<!--注意！把label和input放在同一行在768分辨率一下是有问题的在md和lg上正常-->

 

　　小图标的添加

 

　　

 

　　<pclass="container">

 

　　<formaction="#"method="post"class="form-horizontal">

 

　　<!--form-horizontal让表单初始化-->

 

　　<fieldset>

 

　　<legend>用户登陆</legend>

 

　　<pclass="form-grouphas-feedbackhas-success">

 

　　<!--在项目的p外包围class加has-feedback-->

 

　　<labelclass="col-xs-3control-label">用户名：</label>

 

　　<pclass="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-->

 

　　</p>

 

　　</p>

 

　　</form>

 

　　</p>

 

　　一堆按钮组件

 

　　<pclass="container">

 

　　<pclass="btn-toolbar">

 

　　<pclass="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>

 

　　</p>

 

　　</p>

 

　　</p>

 

　　不要强行去做一个按钮分离因为这是一组中间的按钮不是圆角的

 

　　搜索框

 

　　<pclass="col-md-4col-md-offset-2">

 

　　<pclass="input-groupinput-lg">

 

　　<pclass="input-group-addon">

 

　　<ahref=""><spanclass="glyphiconglyphicon-star"></span></a>

 

　　</p>

 

　　<inputtype="text"class="form-controlinput-xs">

 

　　</p>

 

　　</p>

 

　　</p>

 

　　总结：以上所述就是给大家介绍的Bootstarp基础教程之表单部分的全部内容，希望能对大家的学习有所帮助。

 

　　相关推荐：

 

　　Bootstrap是什么？Bootstrap的简单介绍






本文转载自中文网