bootstrap表单、表单元素，警告栏，模态框学习 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
    
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>

    <!-- 徽章 -->
     <span class="badge badge-danger">徽章</span>
     <span class="badge badge-info">徽章</span>
     <span class="badge badge-success">徽章</span>

     <!-- 形状：胶囊 -->
     <span class="badge badge-primary badge-pill">徽章</span>

     <button class="btn btn-success">
        死亡次数<span class="badge badge-danger">10</span>
     </button>

</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
    
</head>
<body style="margin-bottom: 200px;">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>



     <!-- 表单 -->



     <form>
        <div>账户：</div>
        <input type="text" />
        <div>密码：</div>
        <input type="password" />
     </form> 
     
      <form onsubmit="return falss;">
        <p>
            商品标题：
            <input type="text" id="title" name="title" />
        </p>

        <p>
            商品价格：
            <input type="number" id="price" name="price" />
        </p>

        <p>
            商品类型：
            <select name="type" id="type" style="width:530px; height: 47px;">
                <option value="">请选择</option>
                <option value="1">果酒</option>
                <option value="2">果汁</option>
                <option value="3">水果</option>
                <option value="4">蔬菜</option>
                <option value="5">预制菜</option>
                <option value="6">外买</option>
                <option value="7">乳制品</option>
                <option value="8">书籍</option>
            </select>
        </p>
        <button>按钮</button>
        <div style="color: brown; margin-top: 20px">我是小可爱</div>
     </form>  






  
    <!-- 表单元素 -->

     <!-- form-inline内敛 -->
     <form class=" form-inline">
        <div class="form-group">
        <label for="account">账户：</label>
        <input type="text" class="form-control" id="account"/>
        </div>
        
        <div  class="form-group">
        <label>密码：</label>
        <input type="password" class="form-control" />
        </div>
        <button class="bth bth-success">注册</button>
      </form>

      
    <form>
        <div class="form-group">
        <label for="account">账户：</label>
        <input type="text" class="form-control" id="account"/>
        </div>
        
        <div  class="form-group">
        <label>密码：</label>
        <input type="password" class="form-control" />
        </div>

        <!-- 当使用Bootstrap框架时，你可以利用Bootstrap提供的CSS样式和组件来美化你的表单输入字段 -->
        <!-- input txt文本， passwor密码， date日期， time时间, week,number数字, color颜色, email电子邮箱, url（URL), tel电话号码, search搜索-->
        <!-- 请记住，虽然Bootstrap可以帮助你样式化输入字段，但某些输入类型（如week）可能需要额外的JavaScript库或自定义解决方案来实现所需的功能。 -->


        <div  class="form-group">
            <label>文本：</label>
            <input type="txt" class="form-control" />
        </div>

        <div  class="form-group">
            <label>日期：</label>
            <input type="date" class="form-control" />
        </div>

        <div  class="form-group">
            <label>时间：</label>
            <input type="time" class="form-control" />
        </div>

        <div  class="form-group">
            <abel>数字：</abel>
            <input type="number" class="form-control" />
        </div>

        <div  class="form-group">
            <label>颜色：</label>
            <input type="color" class="form-control" />
        </div>

        <div  class="form-group">
            <label>电子邮箱：</label>
            <input type="email" class="form-control" />
        </div>

        <div  class="form-group">
            <label>URL:</label>
            <input type="url" class="form-control" />
        </div>

        <div  class="form-group">
            <label>电话号码：</label>
            <input type="tel" class="form-control" />
        </div>

        <div  class="form-group">
            <label>搜索：</label>
            <input type="search" class="form-control" />
        </div>

        <div  class="form-group">
            <label>周选器：</label>
            <input type="week" class="form-control" />
        </div>

         <!-- <textarea 文本富文本，想做可以有html代码，表情那种富文本，必须用插件> -->
        <div  class="form-group">
            <label>富文本：</label>
            <textarea  class="form-control" style="height: 200px;" >
                喜欢阳光照在桌面上，橙味咖啡与椰汁
                楼下小兔子特别胆小
                冰镇西瓜
                冰美式
                冰镇啤酒
                
            </textarea>
        </div>
         
        <div class="form-group">
            <label>小兰</label>  
            <input type="checkbox" class="form-control" />
        </div>

        <div class="form-group">
            <label class="form-check-label">
             <input type="checkbox" class="form-control" />新一
            </label>  
        </div>

        <div class="form-group">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>新一
            </label>  
        </div>


        <div class="form-group">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>html
            </label>  
        </div>
        <div class="form-group">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>css
            </label>  
        </div>
        <div class="form-group">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>php
            </label>  
        </div>
       


        <div class="form-check">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>html
            </label>  
        </div>
        <div class="form-check">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>css
            </label>  
        </div>
        <div class="form-check">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>php
            </label>  
        </div>



        <div class="form-check form-check-inline">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>html
            </label>  
        </div>
        <div class="form-check form-check-inline">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>css
            </label>  
        </div>
        <div class="form-check form-check-inline">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/>php
            </label>  
        </div>
        <div style="float: right;">小哥哥</div>
         <!-- 取消漂浮float: left，right; -->
         <div class="clearfix"></div>



         <!-- 单选radio -->
        <div class="radio radio-inline">
            <label> <input name="新一" type="radio"/>男</label>  
        </div>
        <div class="radio radio-inline">
            <label > <input name="新一" type="radio"/>女 </label>  
        </div>
        <div class="radio  radio-inline">
            <label > <input type="radio" disabled/>保密</label>  
        </div>
        

        <div class="radio form-check-inline">
            <label> <input name="新一" type="radio"/>男</label>  
        </div>
        <div class="radio form-check-inline">
            <label > <input name="新一" type="radio"/>女 </label>  
        </div>
        <div class="radio form-check-inline">
            <label > <input type="radio" disabled/>保密</label>  
        </div>
        <div class="clearfix"></div>


        <!-- 下拉框select -->
         <!-- multiple展开 -->
        <div class="form-group">
           <labe>蛋糕</labe>
           <select multiple class="form-control">
              <option value="1">草莓蛋糕</option> 
              <option value="2">柠檬蛋糕</option>
              <option value="3">巧克力蛋糕</option>
           </select>
        </div>

        
        
        <div class="clearfix"></div>
         <button class="bth bth-success">注册</button>

        
     
    </form>

 
 
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
      
<style>
    .老大{
        color: brown;
    }
</style>



</head>
<body style="margin-bottom: 200px;" class="老大">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>

<!-- 表单，尺寸 -->
 <!-- 
 大尺寸form-control-lg
 正常
 小尺寸 form-control-sm
 -->

 <!-- form-control-plaintext去掉边框 -->
 <div class="container">
  
    <form>
        <div class="form-group">
           <label for="account">账户：</label>
           <input 
           type="text" 
           class="form-control form-control-lgform-control-lg " 
           id="account"/>
          
          
        </div>
        
        <div  class="form-group">
           <label>密码：</label>
           <input 
           type="password"
           class="form-control" />
        </div>
     <!-- readonly只读 -->
        <div  class="form-group">
            <label>介绍：</label>
            <input 
            type="password"
            class="form-control form-control-sm " readonly/>
        </div>
    
        <!-- form-group一行展示 -->
        <div class="form-group">
            <input type="text" class="form-control">
            <input type="text" class="form-control">
            <input type="text" class="form-control">
           
        </div>

        <!-- 标题 -->

        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-txet">省市区</span>
            </div>
            <input type="text" class="form-control">
            <input type="text" class="form-control">
            <input type="text" class="form-control">
           
        </div>

        <!-- <select框，一行多个> -->
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-txet">省市区</span>
            </div>
            <select class="form-control">
              <option>北京</option>
              <option>安徽</option>
              <option>河南</option>
              <option>江苏</option>
            </select>

            <select class="form-control">
              <option>请选择</option>
            
            </select>

            <select class="form-control">
              <option>请选择</option>
         
            </select>
           
        </div>
        <!-- 放到后面 -->
        <div class="input-group">
            <input type="number" class="form-control" placeholder="请输入金额">
            <div class="input-group-prepend">
                <span class="input-group-txet">RMB</span>
            </div>
           
        </div>

       <!-- 上传 -->
       <div class="input-group">
        <!-- layui框架，它的上传图片的样式比较多 -->
        <label >上传</label>
          <input type="file" class="form-control-file" placeholder="请输入金额"> 
       </div>



       <!-- 网格 设置成为一行 -->
       <div class="form-group row">
        <lable class="col-2 col-form-label">手机号</lable>
        <div class="col-10">
            <input type="text" class="form-control" >
        </div>
       


       
    </div>

    






        <button class="bth bth-success">注册</button>
      </form>
 </div>
 
</body>
</html>

　　

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Navbar Example</title>  
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
</head>  
<body>  
  
<nav class="navbar navbar-expand-lg navbar-light bg-light">  
    <a class="navbar-brand" href="#">Logo</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">  
        <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarNav">  
        <ul class="navbar-nav">  
            <li class="nav-item"><a class="nav-link" href="#">首页</a></li>  
            <li class="nav-item"><a class="nav-link" href="#">产品</a></li>  
            <li class="nav-item"><a class="nav-link" href="#">登录</a></li>  
            <li class="nav-item active"><a class="nav-link" href="#">注册</a></li>  
        </ul>  
    </div>  
</nav>  
  
<div class="container mt-5">  
    <h2 class="text-center">注册</h2>  
    <form onclick="return false; ">  
        <div class="form-group">  
            <label for="account">账号:</label>  
            <input type="text" class="form-control" id="account" />  
        </div>  
        <div class="form-group">  
            <label for="password">密码:</label>  
            <input type="password" class="form-control" id="password" />  
        </div>  
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">省市区</span>
            </div>
            <select class="form-control">
              <option>北京</option>
              <option>安徽</option>
              <option>河南</option>
              <option>江苏</option>
            </select>

            <select class="form-control">
              <option>请选择</option>
            
            </select>

            <select class="form-control">
              <option>请选择</option>
         
            </select>
           
        </div> 
        <div class="form-group form-check">  
            <label class="form-check-label">  
                <input type="checkbox" class="form-check-input" value="1" />  
                同意注册协议  
            </label>  
        </div>  
        <button type="submit" class="btn btn-success btn-block" id="reg">注册</button>  
    </form>  
  
    <div class="mt-4 row">  
        <div class="col-6">  
            <button type="button" class="btn btn-danger">忘记密码</button>  
        </div>  
        <div class="col-6 text-right">  
            <!-- 假设这里有一个用于其他操作的按钮 -->  
            <button type="button" class="btn btn-primary">其他操作</button>  
        </div>  
    </div>  
     <!-- 警告框 -->
  <!-- 我们要增加关闭按钮，需要增加一个class alert-dismissible  -->
   <!-- <div class="alert alert-danger m-5 alert-dismissible">
     <strong>警告：</strong>密码位数不对
   </div> -->


    <!-- 关闭功能data-都是js可以接受的参数  -->
   <!-- <div class="alert alert-danger m-5 ">
     <button class="close" data-dismiss="alert">×</button>
     <strong>警告：</strong>密码位数不对
   </div>   -->
  <!-- 动画fade show  -->

   <div class="alert alert-danger m-5 fade show">
     <button class="close" data-dismiss="alert">×</button>
     <strong>警告：</strong>密码位数不对
   </div>

  <!-- <div class="alert alert-success m-5 fade show">
    <button class="close" data-dismiss="alert">×</button>
    <h2 class="alert-heading">恭喜您！</h2>
    <p>
        您注册成功了，可以点击跳转 <a href="http://www.php.cn" target="_blank">php中文网</a>
    </p>
    <div>希望您能学习知识</div>
  </div> -->
  <div id="msg"></div>
</div>   


  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
  
</body>  
<script>
    $("#reg").click(function(){
        let html ="" ;
        html +=' <div class="alert alert-success m-5 fade show">';
        html +='<button class="close" data-dismiss="alert">×</button>';
        html +='<h2 class="alert-heading">恭喜您！</h2>' ;
        html +='<p>';
        html +='您注册成功了，可以点击跳转 <a href="http://www.php.cn" target="_blank">php中文网</a>';
        html +='</p>';
        html +=' <div>希望您能学习知识</div>'
        html +='</div>';
       $("#msg").html(html);

    setTimeout(function(){
        // 关闭警告框
        console.log(111);
        $("#alert").alert('close');
    },2000)
    })
</script>
</html>

　　

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Navbar Example</title>  
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
</head>  
<body>  
  
<nav class="navbar navbar-expand-lg navbar-light bg-light">  
    <a class="navbar-brand" href="#">Logo</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">  
        <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarNav">  
        <ul class="navbar-nav">  
            <li class="nav-item"><a class="nav-link" href="#">首页</a></li>  
            <li class="nav-item"><a class="nav-link" href="#">产品</a></li>  
            <li class="nav-item"><a class="nav-link" href="#">登录</a></li>  
            <li class="nav-item active"><a class="nav-link" href="#">注册</a></li>  
        </ul>  
    </div>  
</nav>  
  
<div class="container mt-5">  
    <h2 class="text-center">注册</h2>  
    <form>  
        <div class="form-group">  
            <label for="account">账号:</label>  
            <input type="text" class="form-control" id="account" />  
        </div>  
        <div class="form-group">  
            <label for="password">密码:</label>  
            <input type="password" class="form-control" id="password" />  
        </div>  
        <div class="form-group">  
            <label for="province">省市区:</label>  
            <div class="form-group input-group">  
                <select class="form-control" id="province">  
                    <option value="">请选择</option>  
                    <option value="1">北京</option>  
                    <option value="2">安徽</option>  
                    <option value="3">河南</option>  
                    <option value="4">江苏</option>  
                    <option value="5">湖北</option>  
                    <option value="6">湖南</option>  
                </select>  
            </div>  
        </div>  

        <div class="form-group">
            <label class="form-check-label">

             <input type="checkbox" class="form-control-input"/> 同意注册协议 
            </label>  
             <!-- 用data-把参数传给js -->
             <a href="javascript:" data-toggle="modal" data-target="#mo">查看协议</a>
        </div>
        <!-- <div class="form-group form-check">  
            <label class="form-check-label">  
                <input type="checkbox" class="form-check-input" value="1" />  
                同意注册协议  
            </label>  
        </div>   -->
        <button type="submit" class="btn btn-success btn-block">注册</button>  
    </form>  
  
    <div class="mt-4 row">  
        <div class="col-6">  
            <button type="button" class="btn btn-danger">忘记密码</button>  
        </div>  
        <div class="col-6 text-right">  
            <!-- 假设这里有一个用于其他操作的按钮 -->  
            <button type="button" class="btn btn-primary">其他操作</button>  
        </div>  
    </div>  
     <!-- 模态框 -->
        <!-- 覆盖着父页面上的子窗口 -->
        <!-- 好看，点击其他的位置 可以让模态框消失 -->
        <!-- data-target="#mo"对应模态框的id -->

        <!-- 模态框在哪里创建都可以 -->
        <!-- modal 基本的样式 -->

           <div class="modal fade" id="mo">
                <!-- modal-dialog响应式样式 -->

                <!-- 这里可以添加个样式，只滚动模态框，网页不滚动 modal-dialog-scrollable -->
                <!-- modal-xl超大尺寸 -->
                <!-- lg大尺寸 -->
                <!-- sm小尺寸 -->

                <!-- 上下居中 modal-dialog-centered-->

                <div class="modal-dialog  modal-dialog-scrollable modal-xl modal-dialog-centered">
                   <div class="modal-content">
                       <div class="modal-header"> 
                          <h2 class="modal-title">今天阳光真好</h2>
                          <button class="close" data-dismiss="modal">×</button>
                       </div>
                       <div class="modal-body">
                        <!-- 这里可以写更多的代码，比如说网格 -->
                         <p>一闪一闪亮晶晶</p>
                         <p>种一颗柠檬树好乘凉</p>
                         <p>树成精了</p>
                         <p>啊！！！</p>
                         <p>树吃人了</p>
                         <p>捕猎名单</p>
                         
                         <table class="table table-striped table-bordered table-hover table-responsive">
                            <thead class="thead-light">
                                <th>编号</th>
                                <th>姓名</th>
                                <th>邮箱</th>
                                <th>电话</th>
                                <th>省份</th>
                                <th>城市</th>
                                <th>年龄</th>
                                <th>编号</th>
                                <th>姓名</th>
                                <th>邮箱</th>
                                <th>电话</th>
                                <th>省份</th>
                                <th>城市</th>
                                <th>年龄</th>
                            </thead>
                            <tbody>
                                <tr class="table-success"> 
                                    <th>1</th>
                                    <th>小明</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                                    <th>1</th>
                                    <th>小明</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                        
                                </tr>
                        
                                <tr>
                                    <th>2</th>
                                    <th>小红</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                                    <th>2</th>
                                    <th>小红</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                        
                                </tr>
                        
                                <tr class="table-primary">
                                    <th>3</th>
                                    <th>小绿</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                                    <th>3</th>
                                    <th>小绿</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                        
                                </tr>
                        
                                <tr>
                                    <th>4</th>
                                    <th>小美</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                                    <th>4</th>
                                    <th>小美</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                        
                                </tr>
                        
                                <tr class="table-warning">
                                    <th>5</th>
                                    <th>小卡</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                                    <th>5</th>
                                    <th>小卡</th>
                                    <th>123456qq.coom</th>
                                    <th>123456</th>
                                    <th>安徽</th>
                                    <th>合肥</th>
                                    <th>8</th>
                        
                                </tr>
                            </tbody>
                          </table>
                       </div>
                       <div class="modal-footer">
                         <button class="bth bth-primary">知道了</button>
                       </div>
                   </div>
               </div>
           </div>
        <!-- <div>
           <script>
               alert(111);
           </script>
        </div> -->
</div>  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
  
</body>  
</html>

　　

posted @ 2024-06-29 23:52  豹纹守宫  阅读(30)  评论(0)    收藏  举报