// <meta name="viewport" content="width=device-width, initial-scale=1.0"> 响应式必须 // <meta http-equiv="X-UA-Compatible" content="IE=edge"> 让网页尽可能仿真显示 // <!-- html5shiv.js和respond.js IE8支持HTML5元素和媒体查询 --> // 用来使IE9以下兼容html5 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> // 头文件的引入顺序，先bootstrap.css + jquery.js + proper.js + style.css + script.js // <link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap@4.0.0-beta.2/dist/css/bootstrap.css"> // <script type="text/javascript" src="https://unpkg.com/jquery@3.2.1/dist/jquery.js"></script> // <script type="text/javascript" src='https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js'></script> // <script type="text/javascript" src="https://unpkg.com/bootstrap@4.0.0-beta.2/dist/js/bootstrap.js"></script> // vh 百分比单位,100vh相当于铺满整个屏幕 // -webkit-font-smoothing: antialiased; 抗锯齿 // div.container 容器 里面可以放： // div.row 行 行对齐的方 // div.row.align-items-start(end|center) // div.row.justify-content 对齐方式 特殊（between)会在两边 // div.col 列 // 列对齐方式 div.rol.align-self-start // 若要占用多行，可以用div.col-n 默认一行有12个 // div.w-100 分行 // div.col-sm-12 当小于576宽度时，一列占12个，另外的自动移动到下一行 // col-lg-3 当大于992宽度时，一列占3个 // 使用时必须加viewport meta <567 xs >576 sm >768 md >992 lg >1200 etra large // 显示反馈信息 // <div class="alert alert-primary alert-dismissible fade show" role="alert"> // <h4>Alert</h4> // hello ~ <a href="#" class="alert-link">see more</a> // <button class="close " data-dismiss='alert'> // × // </button> // </div> // <button class="btn btn-danger close-alert"> // Close // </button> // 关闭标签事件 $('.close-alert').click(() => { $('.alert').alert('close'); }); $('.alert').on('close.bs.alert', () => { console.log('close alert'); }); $('.alert').on('closed.bs.alert', () => { console.log('closed alert'); }); // badge标签组件 // <span class="badge badge-secondary badge-pill">new</span> // breadcrumb导航路径组件 // <nav> // <ol class="breadcrumb"> // <li class="breadcrumb-item"><a href="#">首页</a></li> // <li class="breadcrumb-item"><a href="#">课程</a></li> // <li class="breadcrumb-item active">Bootstrap</li> // </ol> // </nav> // button 按钮组件 // <button href="#" class="btn btn-outline-danger btn-lg disabled"> // Button // </button> // 按钮群组 // <div class="btn-group-vertical btn-group-sm"> // // 垂直显示 // <div class="btn-group btn-group-sm"> // // 水平 // <button class="btn btn-secondary">1</button> // <button class="btn btn-secondary">2</button> // <button class="btn btn-secondary">3</button> // </div> // card组件 实现瀑布流 // <div class="component"> // <div class="card-columns"> // <div class="card"> // <!-- <img src="./3.jpg" class="card-img"> --> // <!-- <div class="card-header"> // <h4>card</h4> // </div> --> // <div class="card-body"> // <h4 class="card-title">title</h4> // <p class="card-text">decription...</p> // <p class="card-text">decription...</p> // <p class="card-text">decription...</p> // <a href="#" class="card-link">action</a> // <a href="#" class="card-link">action</a> // </div> // <!-- <div class="card-footer">footer</div> --> // </div> // <div class="card"> // <!-- <img src="./3.jpg" class="card-img"> --> // <!-- <div class="card-header"> // <h4>card</h4> // </div> --> // <div class="card-body"> // <h4 class="card-title">title</h4> // <p class="card-text">decription...</p> // <a href="#" class="card-link">action</a> // <a href="#" class="card-link">action</a> // </div> // <!-- <div class="card-footer">footer</div> --> // </div> // <div class="card"> // <!-- <img src="./3.jpg" class="card-img"> --> // <!-- <div class="card-header"> // <h4>card</h4> // </div> --> // <div class="card-body"> // <h4 class="card-title">title</h4> // <p class="card-text">decription...</p> // <a href="#" class="card-link">action</a> // <a href="#" class="card-link">action</a> // </div> // <!-- <div class="card-footer">footer</div> --> // </div> // <div class="card"> // <!-- <img src="./3.jpg" class="card-img"> --> // <!-- <div class="card-header"> // <h4>card</h4> // </div> --> // <div class="card-body"> // <h4 class="card-title">title</h4> // <p class="card-text">decription...</p> // <a href="#" class="card-link">action</a> // <a href="#" class="card-link">action</a> // </div> // <!-- <div class="card-footer">footer</div> --> // </div> // <div class="card"> // <!-- <img src="./3.jpg" class="card-img"> --> // <!-- <div class="card-header"> // <h4>card</h4> // </div> --> // <div class="card-body"> // <h4 class="card-title">title</h4> // <p class="card-text">decription...</p> // <a href="#" class="card-link">action</a> // <a href="#" class="card-link">action</a> // </div> // <!-- <div class="card-footer">footer</div> --> // </div> // <div class="card"> // <!-- <img src="./3.jpg" class="card-img"> --> // <!-- <div class="card-header"> // <h4>card</h4> // </div> --> // <div class="card-body"> // <h4 class="card-title">title</h4> // <p class="card-text">decription...</p> // <a href="#" class="card-link">action</a> // <a href="#" class="card-link">action</a> // </div> // <!-- <div class="card-footer">footer</div> --> // </div> // </div> // </div> // carousel 组件 实现轮播图 // <div class="carousel slide" data-ride='carousel'> // <div class="carousel-inner"> // <div class="carousel-item active"> // <img class="d-block w-100" src="./1.jpg"> // </div> // <div class="carousel-item"> // <img class="d-block w-100" src="./2.jpg"> // </div> // <div class="carousel-item"> // <img class="d-block w-100" src="./3.jpg"> // </div> // </div> // </div> // 轮播图 // <div class="carousel slide" id="carousel-demo"> // <ol class="carousel-indicators"> // <li data-target="#carousel-demo" data-slide-to="0" class="active"></li> // <li data-target="#carousel-demo" data-slide-to="1"></li> // <li data-target="#carousel-demo" data-slide-to="2"></li> // </ol> // <div class="carousel-inner"> // <div class="carousel-item active"> // <img class="d-block w-100" src="./1.jpg"> // </div> // <div class="carousel-item"> // <img class="d-block w-100" src="./2.jpg"> // </div> // <div class="carousel-item"> // <img class="d-block w-100" src="./3.jpg"> // </div> // </div> // <a href="#carousel-demo" class="carousel-control-prev" data-slide="prev"> // <span class="carousel-control-prev-icon"></span> // </a> // <a href="#carousel-demo" class="carousel-control-next" data-slide="next"> // <span class="carousel-control-next-icon"></span> // </a> // </div> // 完整轮播图 // <div class="carousel slide demo" id="carousel-demo" data-ride='carousel'> // <ol class="carousel-indicators"> // <li data-target="#carousel-demo" data-slide-to="0" class="active"></li> // <li data-target="#carousel-demo" data-slide-to="1"></li> // <li data-target="#carousel-demo" data-slide-to="2"></li> // </ol> // <div class="carousel-inner"> // <div class="carousel-item active"> // <img class="d-block w-100" src="./1.jpg"> // </div> // <div class="carousel-item"> // <img class="d-block w-100" src="./2.jpg"> // </div> // <div class="carousel-item"> // <img class="d-block w-100" src="./3.jpg"> // </div> // </div> // <a href="#carousel-demo" class="carousel-control-prev" data-slide="prev"> // <span class="carousel-control-prev-icon"></span> // </a> // <a href="#carousel-demo" class="carousel-control-next" data-slide="next"> // <span class="carousel-control-next-icon"></span> // </a> // </div> // 轮播图监听 // $('.carousel').on('slide.bs.carousel', (event) => { // console.log('slide :', ` // 方向 ： ${event.direction} // 从 : ${event.from} // 到 : ${event.to} // `); // }); // $('.carousel').on('slid.bs.carousel', (event) => { // console.log('slid', ` // 方向 ： ${event.direction} // 从 : ${event.from} // 到 : ${event.to} // `); // }); // collapse切换 // <a href="#collapse-demo" data-toggle='collapse' class="btn btn-primary">action link</a> // <button href="#collapse-demo" data-toggle='collapse' class="btn btn-primary">action button</button> // <div class="collapse" id="collapse-demo"> // <div class="card card-body"> // Hello ~ // </div> // </div> // 自动隐藏另外一个 去掉data-parent后可以让所有都打开 <div id="accordion"> <div class="card"> <div class="card-header"> <a href="#collapse-1" data-toggle='collapse' data-parent='#accordion'>title</a> </div> <div class="collapse show" id="collapse-1"> <div class="card-body">Hello ~ </div> </div> </div> <div class="card"> <div class="card-header"> <a href="#collapse-2" data-toggle='collapse' data-parent='#accordion'>title</a> </div> <div class="collapse" id="collapse-2"> <div class="card-body">Hello ~ </div> </div> </div> </div> // 下拉菜单 <div class="dropdown"> <button class="btn btn-outline-warning dropdown-toggle" data-toggle='dropdown'>Dropdown</button> <a href="#" class="btn btn-success dropdown-toggle" data-toggle='dropdown'>Dropdown</a> <div class="dropdown-menu"> <div class="dropdown-header">Web Language</div> <a href="#" class="dropdown-item">HTML</a> <a href="#" class="dropdown-item">CSS</a> <a href="#" class="dropdown-item">JavaScript</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">More</a> </div> </div> // 分离式下拉菜单 <div class="btn-group"> <a href="#" class="btn btn-success">Dropdown</a> <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle='dropdown'><span class="sr-only">Toggle Dropdown</span></button> <div class="dropdown-menu"> <div class="dropdown-header">Web Language</div> <a href="#" class="dropdown-item">HTML</a> <a href="#" class="dropdown-item">CSS</a> <a href="#" class="dropdown-item">JavaScript</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">More</a> </div> </div> // 上拉菜单 <div class="btn-group dropup" style="position: absolute;bottom: 30%;"> <a href="#" class="btn btn-success">Dropdown</a> <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle='dropdown' data-offset="10px"><span class="sr-only">Toggle Dropdown</span></button> <div class="dropdown-menu dropdown-menu-left"> <div class="dropdown-header">Web Language</div> <a href="#" class="dropdown-item">HTML</a> <a href="#" class="dropdown-item">CSS</a> <a href="#" class="dropdown-item">JavaScript</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">More</a> </div> </div> // 菜单事件 <div class="btn-group dropup" id="dropdown-demo" style="position: absolute;bottom: 30%;"> <a href="#" class="btn btn-success">Dropdown</a> <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle='dropdown' data-offset="10px"><span class="sr-only">Toggle Dropdown</span></button> <div class="dropdown-menu dropdown-menu-left"> <div class="dropdown-header">Web Language</div> <a href="#" class="dropdown-item">HTML</a> <a href="#" class="dropdown-item">CSS</a> <a href="#" class="dropdown-item">JavaScript</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">More</a> </div> </div> $('#dropdown-demo').on('show.bs.dropdown', function() { console.log('show'); }); $('#dropdown-demo').on('shown.bs.dropdown', function() { console.log('shown'); }); $('#dropdown-demo').on('hide.bs.dropdown', function() { console.log('hide'); }); $('#dropdown-demo').on('hidden.bs.dropdown', function() { console.log('hidden'); }); // 打屏幕 <div class="jumbotron"> <!-- display-1 到 4 逐渐变小 --> <h1 class="display-2">hello</h1> <!-- mb margin-bottom --> <p class="leader mb-4">Welcome to california</p> <a href="#" class="btn btn-primary btn-lg">Subscribe</a> </div> // 列表群组 <div class="list-group"> <a href="#" class="list-group-item list-group-item-action disabled">HTML</a> <a href="#" class="list-group-item list-group-item-action">CSS</a> <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> JavaScript <span class="badge badge-primary badge-pill">12</span> </a> </div> // 切换显示列表群组 <div class="row"> <div class="col-4"> <div class="list-group"> <a data-toggle='list' href="#html-content" class="list-group-item list-group-item-action active">HTML</a> <a data-toggle='list' href="#css-content" class="list-group-item list-group-item-action">CSS</a> <a data-toggle='list' href="#javascript-content" class="list-group-item list-group-item-action">JavaScript</a> </div> </div> <div class="col-8"> <div class="tab-content"> <div class="tab-pane fade show active" id="html-content">Hello HTML</div> <div class="tab-pane fade" id="css-content">Hello CSS</div> <div class="tab-pane fade" id="javascript-content">Hello javascript</div> </div> </div> </div> // js操作 list-group <div id="tab-demo" class="row"> <div class="col-4"> <div class="list-group"> <a href="#html-content" class="list-group-item list-group-item-action active">HTML</a> <a href="#css-content" class="list-group-item list-group-item-action">CSS</a> <a href="#javascript-content" class="list-group-item list-group-item-action">JavaScript</a> </div> </div> <div class="col-8"> <div class="tab-content"> <div class="tab-pane fade show active" id="html-content">Hello HTML</div> <div class="tab-pane fade" id="css-content">Hello CSS</div> <div class="tab-pane fade" id="javascript-content">Hello javascript</div> </div> </div> </div> $('#tab-demo .list-group a').click(function (event) { event.preventDefault(); $(this).tab('show'); }).on('show.bs.tab', function (event) { console.log('开始显示：' + event.target.getAttribute('href')); }).on('shown.bs.tab', function (event) { console.log('完全显示：' + event.target.getAttribute('href')); }).on('hide.bs.tab', function (event) { console.log('开始隐藏：' + event.target.getAttribute('href')); }).on('hidden.bs.tab', function (event) { console.log('完全隐藏：' + event.target.getAttribute('href')); }); // 对话框 data-backdrop='false' 取消背景变色 <div id="modal-demo" class="modal fade show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">modal</h5> <button class="close" data-dismiss='modal'>×</button> </div> <div class="modal-body"> <p>Hello ~ </p> </div> <div class="modal-footer"> <button class="btn btn-second">取消</button> <button class="btn btn-primary">确认</button> </div> </div> </div> </div> <button class="btn btn-danger" data-toggle='modal' data-target='#modal-demo'>删除</button> // 显示对话框 // $('#modal-demo').modal('show'); $('#modal-demo').on('show.bs.modal', function () { console.log('show'); }).on('shown.bs.modal', function () { console.log('shown'); }).on('hide.bs.modal', function () { console.log('hide'); }).on('hidden.bs.modal', function () { console.log('hidden'); }) // 导航栏 <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a href="#" class="active nav-link">HTML</a> </li> <li class="nav-item"> <a href="#" class="nav-link">CSS</a> </li> <li class="nav-item"> <a href="#" class="nav-link">JavaScript</a> </li> </ul> <nav class="navbar nav-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand">宁浩</a> <ul class="navbar-nav"> <li class="nav-items"> <a href="#" class="nav-link">学习</a> </li> <li class="nav-items"> <a href="#" class="nav-link">学习</a> </li> <li class="nav-items"> <a href="#" class="nav-link">学习</a> </li> </ul> </nav> // 切换显示导航栏内容 nav中加fixed-top可以一直在顶部显示 <nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand">宁浩</a> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content"> <span class="navbar-toggler-icon"></span> </button> <div id="navbar-content" class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">学习</a> </li> <li class="nav-item"> <a href="#" class="nav-link">学习</a> </li> <li class="nav-item"> <a href="#" class="nav-link">学习</a> </li> </ul> </div> </nav> // 分页器 <!-- pagination-sm调整大小 --> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a href="#" class="page-link">后退</a> </li> <li class="page-item active"> <a href="#" class="page-link">1</a> </li> <li class="page-item"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">前进</a> </li> </ul> // 提示信息 <!-- data-trigger点其他地方也可以隐藏 --> <!-- data-placement出现的位置 --> <button class="btn btn-primary" data-toggle='popover' title="一重山" data-content='lksajdflkjasdf' data-placement='bottom' data-trigger='focus'> Pop </button> $('[data-toggle=popover]').popover(); // 进度条 <div class="progress"> <!-- striped斜线 animated动 bg-danger变红--> <div class="bg-danger progress-bar progress-bar-striped progress-bar-animated" style="width:32%">32%</div> </div> // 滚动条 // data-spy='scroll' data-target='#nav-demo' body中加这一句 可以根据页面的位置切换导航栏显示 <div class="demo component" style="height: 300vh;"> <div class="row"> <div class="col-3"> <ul id="nav-demo" class="nav nav-pills flex-column position-fixed p-3 text-left bg-light"> <li class="nav-item"> <a href="#html" class="nav-link">HTML</a> </li> <li class="nav-item"> <a href="#css" class="nav-link">CSS</a> </li> <li class="nav-item"> <a href="#javascript" class="nav-link">JavaScript</a> </li> </ul> </div> <div class="col-9"> <h3 id="html">HTML</h3> <p>lsajdfljasdlfkj</p> <p>lsajdfljasdlfkj</p> <p>lsajdfljasdlfkj</p> <p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p> <h3 id="css">css</h3> <p>lsajdfljasdlfkj</p> <p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p> <p>lsajdfljasdlfkj</p> <p>lsajdfljasdlfkj</p> <h3 id="javascript">javascript</h3> <p>lsajdfljasdlfkj</p> <p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p><p>lsajdfljasdlfkj</p> <p>lsajdfljasdlfkj</p> <p>lsajdfljasdlfkj</p> </div> </div> </div> // tooltip 显示提示信息 <button class="btn btn-primary" data-toggle='tooltip' title="hello ~ " data-placement='bottom'> Tooltip </button> $('[data-toggle=tooltip]').tooltip(); // 表单 <label for="email">右键地址</label> <input class="form-control" type="text" placeholder="Email" id="email" /> <small class="for-text text-muted">请输入正确的邮件地址</small> // 文本框变化 <div class="input-group"> <span class="input-group-addon">@</span> <!-- readonly只读 --> <!-- form-control-plaintext纯文字 --> <input class="form-control" type="text" placeholder="请输入..."/> <span class="input-group-btn"> <button class="btn btn-primary">Go</button> </span> </div> // 复选框和单选按钮 <!-- form-check-inline在一行中显示 --> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> A </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> B </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> C </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="radio" name="demo" value="A" class="form-check-input"> A </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="radio" name="demo" value="B" class="form-check-input"> B </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="radio" name="demo" value="C" class="form-check-input"> C </label> </div> // 单选框和复选框（自定义样式） <label class="custom-control custom-checkbox"> <!-- custom-control-input让复选框完全透明 --> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">A</span> </label> <label class="custom-control custom-radio"> <input type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">A</span> </label> // 选择列表 <!-- multiple可以多选的 --> <select multiple id="demo-select" class="form-control"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> // 选择文件 <label class="custom-file"> <input type="file" class="custom-file-input"> <span class="custom-file-control"></span> </label> // :lang表示当前页面的语言 需要在根html标签中设置 .custom-file-control:lang(zh-Hans)::before { content: '选择'; } .custom-file-control:lang(zh-Hans)::after { content: '选择'; } // 表单布局 // 表单验证 <form id="form-demo" novalidate> <div class="form-group"> <input required type="text" class="form-control" placeholder="输入..."> <input required type="text" class="form-control" placeholder="输入..."> <div class="invalid-feedback">请在文本框里输入点东西</div> <button type="submit" class="btn btn-primary"> 提交 </button> </div> </form> $('#form-demo').submit(function (e) { const form = $(this); if(form[0].checkValidity() === false) { e.preventDefault(); e.stopPropagation(); } form.addClass('was-validated'); })