// 响应式必须// 让网页尽可能仿真显示// // 用来使IE9以下兼容html5 // 头文件的引入顺序，先bootstrap.css + jquery.js + proper.js + style.css + script.js// // // // // 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// 显示反馈信息////// // 关闭标签事件$('.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标签组件// new// breadcrumb导航路径组件// // button 按钮组件// // 按钮群组//Alert
// hello ~ see more// //// // 垂直显示//// // 水平// // // //// card组件 实现瀑布流////// carousel 组件 实现轮播图//// // // // // // //////// 轮播图// // 完整轮播图// // 轮播图监听// $('.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切换// action link// ////////////
//////
//////
//// 自动隐藏另外一个 去掉data-parent后可以让所有都打开 // 下拉菜单 // 分离式下拉菜单 // 上拉菜单 // 菜单事件 $('#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');});// 打屏幕 // 列表群组 // 切换显示列表群组// Hello ~////// js操作 list-groupHello HTMLHello CSSHello javascript$('#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' 取消背景变色Hello HTMLHello CSSHello javascript// 显示对话框// $('#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'); })// 导航栏 // 切换显示导航栏内容 nav中加fixed-top可以一直在顶部显示 // 分页器 // 提示信息 $('[data-toggle=popover]').popover();// 进度条// 滚动条// data-spy='scroll' data-target='#nav-demo' body中加这一句 可以根据页面的位置切换导航栏显示// tooltip 显示提示信息 $('[data-toggle=tooltip]').tooltip();// 表单 请输入正确的邮件地址// 文本框变化HTML
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
css
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
javascript
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
lsajdfljasdlfkj
@// 复选框和单选按钮// 单选框和复选框（自定义样式） // 选择列表 // 选择文件 // :lang表示当前页面的语言 需要在根html标签中设置.custom-file-control:lang(zh-Hans)::before { content: '选择';}.custom-file-control:lang(zh-Hans)::after { content: '选择';}// 表单布局// 表单验证 $('#form-demo').submit(function (e) { const form = $(this); if(form[0].checkValidity() === false) { e.preventDefault(); e.stopPropagation(); } form.addClass('was-validated');})