Bootstrap CSS——表单（一）

来源：互联网发布：java下载64位编辑：程序博客网时间：2024/05/22 15:37
http://v3.bootcss.com/css/#forms
仅仅是自己学习用来记录
<!--表单  Form  内联表单，水平排列的表单--><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>表单 Form</title>    <link rel="stylesheet" href="bootstrap.min.css"></head><body>    <form role="form">        <!--输入框、用户名、密码之类-->        <div class="form-group">            <label>Email</label>            <input type="email" class="form-control" placeholder="Enter email">        </div>        <div class="form-group">            <label>密码</label>            <input type="password" class="form-control" placeholder="Enter password">        </div>        <!--选择框-->        <div class="form-group">            <label>选择文件</label>            <input type="file">            <p class="help-block">选择你需要的文件</p>        </div>        <!--单选、复选-->    </form>    <hr>    <form role="form" class="form-inline">        <!--内联表单，全都在一行 宽度是自适应的auto-->        <div class="form-group">            <label>用户名</label>            <input type="email" class="form-control" placeholder="Enter email">        </div>        <div class="form-group">            <label>密码</label>            <input type="password" class="form-control" placeholder="Enter password">        </div>        <div class="form-group">            <!--label添加sr-only就会隐藏-->            <label class="sr-only">选择文件</label>            <input type="file">            <p class="help-block">选择你需要的文件</p>        </div>    </form>    <hr>    <form class="form-horizontal" role="form">        <!--水平排列对齐的表单，使用对齐的表单就得使用“栅格”-->        <div class="form-group">            <label class="col-sm-2 control-label">Email</label>            <div class="col-sm-10">                <input type="email" class="form-control" placeholder="Enter Email">            </div>        </div>        <div class="form-group">            <label class="col-sm-2 control-label">Password</label>            <div class="col-sm-10">                <input type="password" class="form-control" placeholder="password">            </div>        </div>        <!--添加“记住密码”按钮-->        <div class="form-group">            <div class="col-sm-offset-2 col-sm-10">                <div class="checkbox">                    <label>                        <input type="checkbox">记住密码                    </label>                </div>            </div>        </div>        <!--添加“登录”按钮-->        <div class="form-group">            <div class="col-sm-offset-2 col-sm-10">                <button type="submit" class="btn btn-default">登录</button>            </div>        </div>    </form></body></html>
0 0