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">
<p class="help-block">请输入用户名</p>
<label for="password">密码:</label>
<input id="password" type="text">
<p class="help-block">请输入密码</p>
<button type="submit" class="btn-primary btn">登录</button>
<h1 class="page-header">表单的排序<small>简单示例</small></h1>
<form class="form-horizontal">
  <fieldset>
  <legend>登录</legend>
  <div class="control-group">
    <label class="control-label" for="username">用户名:</label>
    <div class="controls">
      <input id="username" type="text">
      <p class="help-block">请输入用户名</p>
    </div>
    <label class="control-label" for="password">密码:</label>
    <div class="controls">
      <input id="password" type="text">
      <p class="help-block">请输入密码</p>
    </div>
  </div>
  </fieldset>
  <div class="form-actions">
    <button type="submit" class="btn-primary btn">登录</button>
  </div>
</form>
</body>
</html>

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