您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记
bootstrap学习笔记-bootstrap表单美化与图片美化
发布时间：2018-05-19 12:18:42编辑：雪饮阅读（）
日元表单输入框美化代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!--bootstrap中表单用上form-inline后可使得表单元素以内联方式布局-->
<form class='form-inline'>
<!--
bootstrap中表单元素用form-group的class的div囊括后，可使得每组表单元素键值对和其它各组表单元素键值对之间的布局看起来比较自然美观
-->
<div class='form-group'>
<!--
bootstrap中表单元素使用form-control的class后会使得表单输入框具有聚焦失焦的美化效果
-->
<label>请输入</label><input type="email" class='form-control'>
</div>
<div class='form-group'>
<label>密码</label><input type="passwd" class='form-control'>
</div>
<!--
bootstrap中表单元素使用input-group和input-group-addon结合可以美化像是日元这样的输入框
-->
<div class="input-group">
<div class="input-group-addon">￥</div>
<input type="text" class="form-control" placeholder="请输入价格">
<div class="input-group-addon">.00</div>
</div>
</form>
</body>
</html>
效果：
表单元素按行排列的美化：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!--
bootstrap中表单上使用：
form-horizontal、form-group、col-sm-数字、control-label
进行组合可以让表单元素从上向下每组独立占一行(尺寸非常小时候会换行)进行布局，并且每组中键与值的左右间距控制的很美观
"col-sm-数字"这里的数字表示每组中键或值所占的宽度比例，而control-label会结合
form-horizontal将设置好比例后的键与值进行间距排版美化，control-label会继承其父容器的css样式
-->
<form class='form-horizontal'>
<div class='form-group'>
<label class="col-sm-1 control-label">用户名</label>
<div class='col-sm-2'>
<input type="email" class='form-control'>
</div>
</div>
<div class='form-group'>
<label class="col-sm-1 control-label">密码</label>
<div class='col-sm-3'>
<input type="email" class='form-control'>
</div>
</div>
</form>
</body>
</html>
效果：
复选框美化：
<form>
<!--用checkbox的class的div将checkbox元素囊括后，checkbox默认的箭头会变成手型-->
<div class='checkbox'>
<!--添加label标签的作用是点击复选框对应的文本也同样可以使得复选框勾选上
-->
<label><input type="checkbox">音乐</label>
<label><input type="checkbox">体育</label>
</div>
</form>
下拉框美化：
<form>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
输入框美化（校验状态及嵌入图标，图标是字体形式的）
<form>
<!--
has-success使得该组表单元素状态校验位成功状态
has-feedback是为了给input表单嵌入小图标进行定位的，span标签中的
form-control-feedback则是响应has-feedback的，意思就是说该组中的span生成的小图标必须嵌入该组的input中而不是该组以外的其它地方
control-label继承父级容器has-success样式的状态校验
glyphicon是图标
glyphicon-ok是图标类型的一种，这里这个指的是成功状态
-->
<div class="form-group has-success has-feedback">
<label class="control-label">电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
图片美化：
<!--图片圆角-->
<!--
<img src="img/7.jpg" class="img-rounded"/>
-->
<!--图片椭圆或正圆，根据你图片尺寸而定-->
<!--
<img src="img/7.jpg" class="img-circle"/>
-->
<!--类似win7的透明边框-->
<img src="img/7.jpg" class="img-thumbnail"/>
关键字词：bootstrap,表单,图片