<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表单和图片</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:50px;">
<!--form 表单
from-group 表单群组
form-control 表单基本样式
from-inline 内联表单样式 让所有表单样式居于一行
input-group input群组
input-group-addon表单合并
-->
<form class="form-inline" >
<div class="form-group">
<label>电子邮箱</label>
<input type="email" class="form-control" placeholder="请输入您的电子邮箱"/>
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="请输入您的密码"/>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入价格" />
<div class="input-group-addon">.00</div>
<div class="input-group-addon">$</div>
</div>
</form>
<!--表单水平排列
form-horizontal
col-sm-2 格栅系统
-->
<form class="form-horizontal" >
<div class="form-group">
<label class="col-sm-2 control-label">电子邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮箱"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="请输入您的密码"/>
</div>
</div>
<!--
checkbox 选择样式
disabled 禁用
checkbox-inline 内联一行
-->
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox"/>体育
</label>
</div>
<div class="checkbox disabled">
<label class="checkbox-inline">
<input type="checkbox"/>数学
</label>
</div>
<label class="checkbox-inline">
<input type="checkbox"/>体育
</label>
<label class="checkbox-inline">
<input type="checkbox"/>数学
</label>
</form>
<!--
form-control
-->
<select class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<!--
校验状态
has-error 错误状态
has-success 成功状态
has-warning 警告状态
-->
<form>
<div class="form-group has-success" >
<label class="control-label">表单</label>
<input type="email" class="form-control" placeholder="请输入电子邮箱"/>
</div>
</form>
<!--
校验状态
glyphicon-ok 成功图标
glyphicon-warning-sign 警告图标
glyphicon-remove 错误图标
-->
<form>
<div class="form-group has-success has-feedback" >
<label class="control-label">表单</label>
<input type="email" class="form-control" placeholder="请输入电子邮箱"/>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
<!--控制大小 input-lg input-sm-->
<input type="text" class="form-control input-lg" />
<input type="text" class="form-control input-sm" />
<!--
图片
img-rounded 圆角矩形
img-circle 圆
img-thumbnail 缩略图
img-responsive 响应式
-->
<img src="img/1.png" alt="图片" class="img-rounded" />
<img src="img/1.png" alt="图片" class="img-circle" />
<img src="img/1.png" alt="图片" class="img-thumbnail img-responsive" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
浙公网安备 33010602011771号