bootstrap学习笔记-CSS-表单布局

原创
2013/06/15 20:46
阅读数 644
<!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>
展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部