bootstrap学习笔记-CSS-表单

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>布局学习</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body class="container">
<h1 class="page-header">表单<small>简单示例</small></h1>
<label for="username">用户名</label><input id="username" type="text" placeholder="输入用户名" class="span10">
<p class="help-block">帮助文字内容</p>
<!--
placeholder提示内容
span10占用三个边界
-->
<div class="input-prepend">
<span class="add-on">&yen;</span><input type="text"><!--不要有空格 在一行内-->
</div>
<br>
<label>后缀</label>
<div class="input-append">
<input type="text"><span class="add-on">.00</span><!--不要有空格 在一行内-->
</div>

<label>按钮</label>
<div class="input-append">
<input type="text"><button type="button" class="btn" >搜索</button>
</div>
</body>
</html>

你可能感兴趣的:(html,css,bootstrap,布局)