boot表单对勾错误样式,固定定位,登录表单

最新推荐文章于 2025-05-21 10:38:00 发布

qq_26495107

最新推荐文章于 2025-05-21 10:38:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_26495107/article/details/71107224

bootstrap表单专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Bootstrap框架实现表单验证样式的具体方法，包括正确填写时显示的对勾图标及错误时显示的差号图标。此外还提供了一个登录表单的例子，展示了如何组织表单元素以达到美观且易用的效果。

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

bootstrap表单对勾,差样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap表单样式信息</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <script type="text/javascript"src="./js/bootstrap.min.js"></script>
    <script type="text/javascript"src="jquery.min.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
    <div style="background:#F92672;width:300px;" class="container">
        <form role="form">
            <div class="form-group has-success has-feedback">
                <label>用户名</label>
                <input type="text" palceholder="用户名"class="form-control">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-error has-feedback">
                <label>密码</label>
                <input type="text" palceholder="密码" class="form-control">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
            </div>
        </form>
    </div>
</body>
</html>

固定定位
navbar-fixed-top //固定定位到 顶部
navbar-fixed-bottom //固定定位 底部

登录表单
<form class="form-horizontal" role="form" action="">
      <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名字</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="firstname" placeholder="请输入账号">
        </div>
      </div>
      <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">姓</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="lastname" placeholder="请输入密码">
        </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-success btn-block">登录</button>
        </div>
      </div>
    </form>