Bootstrap CSS——表单（一）

最新推荐文章于 2022-08-04 17:05:06 发布

Tarkzeng

最新推荐文章于 2022-08-04 17:05:06 发布

阅读量641

点赞数

分类专栏： Bootstrap 文章标签： bootstrap css 表单

本文链接：https://blog.csdn.net/u011350527/article/details/48912427

版权

Bootstrap 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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>

Tarkzeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap CSS——表单（一）

http://v3.bootcss.com/css/#forms 仅仅是自己学习用来记录<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>表单 Form</title> <link rel="stylesheet" href=
复制链接

扫一扫