<!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>
