<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!-- 内联表单 在一行显示 在表单的上面来搜索内容 -->
<!-- <form action="#" class="form-inline">
<div class="form-group">
商品名称：
<input type="text" class="form-control">
</div>
<div class="form-group">
商品价格：
<input type="text" class="form-control">
</div>
<input type="submit" class="form-control" value="查找">
</form> -->
<!-- 横向表单 -->
<div class="container">
<form action="#" class="form-horizontal">
<div class="form-group row-mc">
<div class="row">
<div class="col-md-2 text-right" style="margin-top:16px">商品名称：</div>
<div class="col-md-10">
<!-- input-lg 大号输入框 -->
<input type="text" class="form-control mc input-lg">
</div>
</div>
</div>
<div class="form-group ">
商品价格：
<!-- input-md 中等输入框 -->
<input type="text" class="form-control input-md">
</div>
<div class="form-group ">
商品类型：
<!-- input-sm 小号输入框 -->
<input type="text" class="form-control input-sm">
</div>
<input type="submit" class="form-control" value="查找">
</form>
</div>
<script src="./js/jquery-1.12.4.js"></script>
<script>
/* has-error has-success*/
$('.mc').blur(function () {
if ($('.mc').text().trim() == '') {
$('.row-mc').addClass('has-warning')
}
})
</script>
