bootstrap系列之五表单样式

来源：互联网发布：一个矩阵怎么计算编辑：程序博客网时间：2024/06/18 07:01

效果一

<body><div class="container"><form action="#" method="post"><fieldset><legend>用户登陆</legend><div class="form-group"><label>用户名:</label><input type="text" class="form-control" name="name" placeholder="输入用户名" /></div><div class=" form-group"><label>密码：</label><input type="password" class="form-control" name="pwd" /></div><div class="checkbox"><label><input type="checkbox" />记住密码</label></div><button type="submit" class="btn btn-default">登陆</button></fieldset></form></div></body>

效果二

<body><div class="container"><form action="#" method="post" class="form-inline"><fieldset><legend>用户登陆</legend><div class="form-group"><label class="sr-only">用户名:</label><input type="text" class="form-control" name="name" placeholder="输入用户名" /></div><div class=" form-group"><label class="sr-only">密码：</label><input type="password" class="form-control" name="pwd" /></div><div class="checkbox"><label><input type="checkbox" />记住密码</label></div><button type="submit" class="btn btn-default">登陆</button></fieldset></form></div></body>

效果三

<body><div class="container"><form class="form-horizontal" role="from"><div class="form-group"><label class=" col-sm-2 control-label">用户名:</label><div class="col-sm-8">  <input type="text" class="form-control"/></div></div><div class="form-group"><label class="control-label col-sm-2">密码:</label><div class="col-sm-8"><input type="password"  class="form-control"/></div></div></form></div></body>

效果四

<body><div class="container"><form><fieldset>   <div class="radio">   <label><input type="radio" name="sex" value="M" />男</label>      </div>   <div class="checkbox">    <label><input type="checkbox" />中国</label>   </div> <div class="checkbox">    <label><input type="checkbox" checked/>中国</label>      </div> <div class="checkbox">    <label><input type="checkbox" />中国</label>      </div>   <div class="checkbox"><label class="checkbox-inline">  <input type="checkbox" > 1</label><label class="checkbox-inline">  <input type="checkbox"> 2</label><label class="checkbox-inline">  <input type="checkbox" > 3</label>      </div><div class=" form-group has-success"><label class="control-label">用户名 ：</label><input type="tel" placeholder="输入电话号" class="form-control" autofocus/></div><div class="form-group has-success">  <label class="control-label" for="inputSuccess1">Input with success</label>  <input type="text" class="form-control" id="inputSuccess1"></div><div class="form-group has-warning">  <label class="control-label" for="inputWarning1">Input with warning</label>  <input type="text" class="form-control" id="inputWarning1"></div></fieldset></form></div></body>

效果五

<body><div class="container"><form action="#" method="post"><div class="form-group has-feedback"><label>用户名:</label><input type="text" class="form-control" name="name" placeholder="输入用户名" /><span class="glyphicon glyphicon-eye-open form-control-feedback" aria-hidden="true"></span></div><div><input class="form-control input-lg" type="text" placeholder=".input-lg"><input class="form-control" type="text" placeholder="Default input"><input class="form-control input-sm" type="text" placeholder=".input-sm"><select class="form-control input-lg">...</select><select class="form-control">...</select><select class="form-control input-sm">...</select></div><span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span><div class="form-group"> <div class="row"> <div class="col-sm-3">  <input type="tel" class="form-control" /> </div> <div class="col-sm-6">  <input type="tel" class="form-control" /> </div> </div></div></form></div></body>

阅读全文

0 0