bootstrap入门【表单样式】

最新推荐文章于 2023-10-12 09:59:34 发布

小章鱼哥

最新推荐文章于 2023-10-12 09:59:34 发布

阅读量593

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u014787301/article/details/43987137

javascript 专栏收录该内容

107 篇文章

订阅专栏

本文介绍了如何使用Bootstrap创建和定制表单，包括插入外部样式表`bootstrap.min.css`，创建内联表单和水平排列的表单。通过示例展示了`form-group`、`form-control`、`form-inline`、`form-horizontal`等类的应用，以及解决水平排列时label显示不全的栅格系统修复方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link href="bootstrap.min.css" rel="stylesheet">   插入bootstrap外部样式表

<div class="form-group">
    <label>用户名</label>
    <input type="email" class="form-control" placeholder="email">
</div>          表单必须要有label标签，不需要可以选择隐藏 如：<label class="sr-only">密码</label>

class="form-inline"   设置内联
class="form-horizontal"   设置水平排列
水平排列的时候会出现左端的label标签只能显示一半的bug，这时引入栅格系统在label标签和input标签外的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>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <p>内联表单</p>
    <form role="form" class="form-inline">
        <div class="form-group">
            <label>用户名</label>
            <input type="email" class="form-control" placeholder="email">
        </div>
        <div class="form-group">
            <label class="sr-only">密码</label>
            <input type="password" class="form-control" placeholder="password">
        </div>
        <div class="form-group">
            <label>选择文件</label>
            <input type="file" >
            <p class="help-block">选择你需要的文件</p>
        </div>
    </form>
    <p>水平排列的表单</p>
    <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="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-10 col-sm-offset-2">
                <button type="submit" class="btn btn-default">登录</button>
            </div>

        </div>
    </form>
</body>
</html>