- 表单
- 基本格式
//实现基本的表单样式 outline:none 点击的时候没有虚线
<form action="#">
<div class="form-group">
<label for="email">电子邮箱</label>
<input class="form-control" id="email" type="email" placeholder="请输入你的邮箱">
</div>
<div class="form-group">
<label for="password">密码</label>
<input class="form-control" id="password" type="password" placeholder="请输入你的密码">
</div>
</form>
注:只有正确设置了输入框的type类型,才能被赋予正确的样式。支持的输入框控件包括:
text、password、datetime、datetime-local、date、month、time、week、number、
email、url、search、tel和color。
- 内联表单
//让表单左对齐浮动,并表现为inline-block内联块结构
<form action="#" class="form-inline">
注:当小于768px,会恢复独占样式
- 表单合组
//前后增加片段
<div class="form-group">
<label for="password">应收金额:</label>
<div class="input-group">
<div class="input-group-addon">¥</div>
<input class="form-control" id="price" type="text" placeholder="请输入金额">
<div class="input-group-addon">.00</div>
</div>
- 水平排列
//让表单内的元素保持水平排列
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">电子邮箱</label>
<div class="col-sm-4">
<input class="form-control " id="email" type="email" placeholder="请输入你的邮箱">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input class="form-control" id="password" type="password" placeholder="请输入你的密码">
</div>
</div>
</form>
注:这里用到了col-sm栅格系统,后面章节会重点讲解,而control-label表示和父元素样式同步。
- 复选框和单选框
//设置复选框,在一行
<div class="checkbox">
<label for="like1">
<input id="like1" type="checkbox">体育
</label>
</div>
<div class="checkbox">
<label for="like2">
<input id="like2" type="checkbox">音乐
</label>
</div>
<div class="checkbox">
<label ><input type="checkbox" class="">美术
</label>
</div>
//设置禁用的复选框
<div class="checkbox disabled">
<label for="like1">
<input id="like1" type="checkbox" disabled="disabled">体育
</label>
</div>
//设置内联一行显示的复选框
<label class="checkbox-inline" ><input type="checkbox" class="">天文
</label>
<label class="checkbox-inline" ><input type="checkbox" class="">地理
</label>
//设置单选框
<label class="radio-inline" ><input type="radio" class="">男
</label>
<label class="radio-inline disabled" ><input type="radio" class="" disabled>女
</label>
<div class="radio disabled"><label for=""><input type="radio" disabled="disabled">测试</label></div>
- 下拉列表
//设置下拉列表
<select name="" id="" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
- 校验状态
//设置为错误状态
<div class="form-group has-error"></div>
例:
<div class="form-group has-success">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input class="form-control" id="password" type="password" placeholder="请输入你的密码">
</div>
</div>
注:还有其他状态如下
//label标签同步相应状态 如果想要把label和input的(css,颜色一样)需要添加control-label
<label for="" class="control-label">Input with success</label>
- 添加额外的图标
//文本框右侧内置文本图标
<div class="form-group has-feedback">
<label for="">电子邮件 </label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
控制尺寸
//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">
- 图片
图片形状
//三种形状
(1.图片四角为圆形)
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592894&di=63650eefcd4c95e8eb5725c1aa1a586d&imgtype=0&src=http%3A%2F%2Fpic15.photophoto.cn%2F20100402%2F0036036889148227_b.jpg" alt="美女1" class="img-rounded">
(2.图片为椭圆形)
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592894&di=17c39b97f7d6ae82c1940468cc478a79&imgtype=0&src=http%3A%2F%2Fpic25.photophoto.cn%2F20121220%2F0036036800277861_b.jpg" alt="美女2" class="img-circle">
(3.图片有边框)
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592893&di=78879c09be5c36c3c9b28f543077be05&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F36%2F76%2F09k58PICnqS_1024.jpg" alt="美女3" class="img-thumbnail">
//响应式图片(图片可以随着窗口变大变小)
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592893&di=78879c09be5c36c3c9b28f543077be05&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F36%2F76%2F09k58PICnqS_1024.jpg" alt="美女4" class="img-responsive">
- 全部代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单和图片</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body style="margin: 50px"> <!-- <form action="#" class="form-inline"> //让所有表单放到一行上,内联表单 --> <form class="form-horizontal"> <div class="form-group"> <label for="email" class="col-sm-2 control-label">电子邮箱</label> <div class="col-sm-4"> <input class="form-control " id="email" type="email" placeholder="请输入你的邮箱"> </div> </div> <div class="form-group has-success"> <label for="password" class="col-sm-2 control-label">密码</label> <div class="col-sm-4"> <input class="form-control" id="password" type="password" placeholder="请输入你的密码"> </div> </div> <div class="checkbox disabled"> <label for="like1"> <input id="like1" type="checkbox" disabled="disabled">体育 </label> </div> <div class="checkbox"> <label for="like2"> <input id="like2" type="checkbox">音乐 </label> </div> <div class="checkbox"> <label ><input type="checkbox" class="">美术 </label> </div> <label class="checkbox-inline" ><input type="checkbox" class="">天文 </label> <label class="checkbox-inline" ><input type="checkbox" class="">地理 </label> <label class="radio-inline" ><input type="radio" class="">男 </label> <label class="radio-inline disabled" ><input type="radio" class="" disabled>女 </label> <div class="radio disabled"><label for=""><input type="radio" disabled="disabled">测试</label></div> <select name="" id="" class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <div class="form-group has-error">hello</div> <label for="" class="control-label">Input with success</label> <div class="form-group has-feedback"> <label for="">电子邮件 </label> <input type="email" class="form-control"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <input type="password" class="form-control input-lg"> <input type="password" class="form-control"> <input type="password" class="form-control input-sm"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592894&di=63650eefcd4c95e8eb5725c1aa1a586d&imgtype=0&src=http%3A%2F%2Fpic15.photophoto.cn%2F20100402%2F0036036889148227_b.jpg" alt="美女1" class="img-rounded"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592894&di=17c39b97f7d6ae82c1940468cc478a79&imgtype=0&src=http%3A%2F%2Fpic25.photophoto.cn%2F20121220%2F0036036800277861_b.jpg" alt="美女2" class="img-circle"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592893&di=78879c09be5c36c3c9b28f543077be05&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F36%2F76%2F09k58PICnqS_1024.jpg" alt="美女3" class="img-thumbnail"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592893&di=78879c09be5c36c3c9b28f543077be05&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F36%2F76%2F09k58PICnqS_1024.jpg" alt="美女4" class="img-responsive"> </form> <!-- <form > <div class="form-group"> <label for="email">电子邮箱</label> <input class="form-control" id="email" type="email" placeholder="请输入你的邮箱"> </div> <div class="form-group"> <label for="password">密码</label> <input class="form-control" id="password" type="password" placeholder="请输入你的密码"> </div> <div class="form-group"> <label for="password">应收金额:</label> <div class="input-group"> <div class="input-group-addon">¥</div> <input class="form-control" id="price" type="text" placeholder="请输入金额"> <div class="input-group-addon">.00</div> </div> </div> </form> --> <script src="js/bootstrap.js"></script> <script src="js/jquery.min.js"></script> </body> </html>