11-快速认识JavaScript 插件
快速认识JavaScript 插件
插件概述
插件分类
Bootstrap插件分为交互性组件（如模态框、警告框等）和导航性组件（如下拉菜单、标签页等）
安装插件
Bootstrap插件可以通过引入Bootstrap库来使用。通常在HTML文件的头部引入Bootstrap的CSS和JS文件。
调用插件
插件的调用可以通过数据属性（如data-bs-toggle）或JavaScript API来实现。
事件
每个Bootstrap插件都有相应的事件，可以使用这些事件来处理用户交互。
按钮
切换状态
使用Bootstrap的按钮组可以实现切换按钮的状态（如启用/禁用）
<!– 切换按钮状态 –>
<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
单击切换
</button>
按钮式复选框和单选框
可以将按钮用作复选框或单选框，允许用户选择一个或多个选项。
按钮式复选框1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">复选框</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off">复选框1
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">复选框2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">复选框3
</label>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
按钮式复选框2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">复选框</h3>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off">复选框1
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">复选框2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">复选框3
</label>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
按钮式单选框1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">单选框</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked autocomplete="off">单选框1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off">单选框2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off">单选框3
</label>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
按钮式单选框2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">单选框</h3>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked autocomplete="off">单选框1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off">单选框2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off">单选框3
</label>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
警告框
关闭警告框
警告框是用于向用户显示重要信息的组件。可以通过按钮或代码关闭警告框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<div class="alert alert-warning fade show">
<strong>警告信息！</strong>程序中出现一个语法问题。
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
添加用户行为
可以为警告框添加自定义事件处理，如在关闭时执行某些操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<div class="alert alert-warning fade show">
<strong>警告信息！</strong>程序中出现一个语法问题。
<button type="button" class="close">
<span>×</span>
</button>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.alert').click(function () {
$('.alert').alert('close')
})
})
</script>
</body>
</html>
监听警告框示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<div class="alert alert-warning fade show">
<strong>警告信息！</strong>程序中出现一个语法问题。
<button type="button" class="close">
<span>×</span>
</button>
</div>
<!–模态框–>
<div class="modal" id="Model-test">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">提示</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">你确定要关闭警告框吗？</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">是</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">否</button>
</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.close').click(function () {
$(this).alert('close')
});
$('.alert').on('close.bs.alert',function (e) {
$('#Model-test').modal();
})
})
</script>
</body>
</html>
下拉菜单
调用下拉菜单
下拉菜单允许用户从一组选项中选择一个。它可以通过数据属性或JavaScript API进行初始化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">下拉菜单</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">菜单项一</a>
<a href="#" class="dropdown-item">菜单项二</a>
<a href="#" class="dropdown-item">菜单项三</a>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
JavaScript调用下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button">下拉菜单</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">菜单项一</a>
<a href="#" class="dropdown-item">菜单项二</a>
<a href="#" class="dropdown-item">菜单项三</a>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.btn').dropdown();
})
</script>
</body>
</html>
添加用户行为
可以为下拉菜单添加事件监听器，以处理用户的选择或其他交互行为。
data属性配置参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-offset="50,30" type="button">下拉菜单</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">菜单项一</a>
<a href="#" class="dropdown-item">菜单项二</a>
<a href="#" class="dropdown-item">菜单项三</a>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
另一种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<div class="dropdown" id="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">下拉菜单</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">菜单项一</a>
<a href="#" class="dropdown-item">菜单项二</a>
<a href="#" class="dropdown-item">菜单项三</a>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#dropdown').on('show.bs.dropdown',function () {
$(this).children('[data-toggle="dropdown"]').html('开始显示下拉菜单')
});
$('#dropdown').on('shown.bs.dropdown',function () {
$(this).children('[data-toggle="dropdown"]').html('下拉菜单显示完成')
});
$('#dropdown').on('hide.bs.dropdown',function () {
$(this).children('[data-toggle="dropdown"]').html('开始隐藏下拉菜单')
});
$('#dropdown').on('hidden.bs.dropdown',function () {
$(this).children('[data-toggle="dropdown"]').html('下拉菜单隐藏完成')
})
})
</script>
</body>
</html>
模态框
定义模态框
模态框是一个覆盖在页面上的对话框，用于显示重要信息或接受用户输入。
<!– 模态框 –>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
这里是模态框的内容。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
模态框布局和样式
模态框的布局和样式可以根据需求进行调整，如控制宽度、高度、背景透明度等。
模态框垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">模态框垂直居中</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">打开模态框</button>
<div class="modal fade" id="Modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">模态框标题</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">模态框正文</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
设置模态框大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">设置模态框大小</h3>
<!–大尺寸模态框–>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">大尺寸模态框</button>
<div class="modal example-modal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">大尺寸模态框</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">模态框正文</div>
</div>
</div>
</div>
<!–小尺寸模态框–>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".example-modal-sm">小尺寸模态框</button>
<div class="modal example-modal-sm">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">小尺寸模态框</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">模态框正文</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
模态框网格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">模态框网格</h3>
<!–大尺寸模态框–>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">打开模态框</button>
<div class="modal" id="Modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-Title">模态框网格</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-4 bg-success text-white">.col-md-4</div>
<div class="col-md-4 ml-auto bg-success text-white">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-4 ml-md-auto bg-danger text-white">.col-md-4 .ml-md-auto</div>
<div class="col-md-4 ml-md-auto bg-danger text-white">.col-md-4 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto bg-warning">.col-auto .mr-auto</div>
<div class="col-auto bg-warning">.col-auto</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
弹窗和工具提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">弹窗和工具提示</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">打开模态框</button>
<div class="modal" id="Modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-header" id="modalTitle">模态框标题</h5>
<button class="close" type="button" data-dismiss>×</button>
</div>
<div class="modal-body">
<div class="modal-body">
<h5>弹窗</h5>
<p>单击这个<a href="#" role="button" class="btn btn-secondary popover-test" title="弹窗标题"
data-content="弹窗的主题内容">button</a>触发一个弹窗。</p>
<hr>
<h5>工具提示</h5>
<p>鼠标指针悬浮 <a href="#" class="tooltip-test" title="链接一">链接一</a>和 <a href="#" class="tooltip-test"
title="链接二">链接二</a>触发工具提示。</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
// 找到对应的属性类别，添加弹窗和工具箱提示
$('.popover-test').popover();
$('.tooltip-test').tooltip();
})
</script>
</body>
</html>
调用模态框
可以通过按钮或JavaScript调用模态框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<button type="button" class="btn btn-primary">打开模态框</button>
<div class="modal" id="Modal-test">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-header" id="modalTitle">模态框标题</h5>
<button class="close" type="button" data-dismiss>×</button>
</div>
<div class="modal-body">
<div class="modal-body">
<h5>弹窗</h5>
<p>单击这个<a href="#" role="button" class="btn btn-secondary popover-test" title="弹窗标题"
data-content="弹窗的主题内容">button</a>触发一个弹窗。</p>
<hr>
<h5>工具提示</h5>
<p>鼠标指针悬浮 <a href="#" class="tooltip-test" title="链接一">链接一</a>和 <a href="#" class="tooltip-test"
title="链接二">链接二</a>触发工具提示。</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.btn').click(function () {
$('#Modal-test').modal();
})
})
</script>
</body>
</html>
添加用户行为
为模态框添加事件处理程序，以控制模态框的打开、关闭和交互行为。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<button type="button" class="btn btn-primary" data-target="#Modal-test" data-toggle="modal" data-backdrop="false" data-keyboard="false">打开模态框</button>
<div class="modal" id="Modal-test">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">模态框标题</h5>
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body">模态框正文</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#Modal-test').on('shown.bs.modal',function () {
alert('模态框显示完成')
});
$('#Modal-test').on('hidden.bs.modal',function () {
alert('模态框隐藏完成')
})
})
</script>
</body>
</html>
标签页
定义标签页
标签页是一个分隔内容的组件，用户可以点击不同的标签来切换显示的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#image1" class="nav-link active" data-toggle="tab">图片1</a>
</li>
<li class="nav-item">
<a href="#image2" class="nav-link" data-toggle="tab">图片2</a>
</li>
<li class="nav-item">
<a href="#image3" class="nav-link" data-toggle="tab">图片3</a>
</li>
<li class="dropdown nav-item">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">更多内容</a>
<ul class="dropdown-menu">
<li class="nav-item">
<a href="#image4" class="nav-link" data-toggle="tab">图片4</a>
</li>
<li class="nav-item">
<a href="#image5" class="nav-link" data-toggle="tab">图片5</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="image1">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749924880&di=19fd00107dc5c64270ef73dfd76b4ec8&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1395559124%2C844098142%26fm%3D214%26gp%3D0.jpg" class="img-fluid" alt="">
</div>
<div class="tab-pane fade" id="image2">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749924370&di=1da7874065e4d65389ccd0ff1a713640&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Ff%2F06%2Fa8fb69593e.jpg" class="img-fluid" alt="">
</div>
<div class="tab-pane fade" id="image3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749924370&di=8281d924f58a1427d0c2a2f0d7c3fa2e&imgtype=0&src=http%3A%2F%2Fimage.namedq.com%2Fuploads%2F20180910%2F14%2F1536559984-tVZOCYoUAs.jpg" class="img-fluid" alt="">
</div>
<div class="tab-pane fade" id="image4">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749924370&di=d0aafa1bf9b2173ebf22306121eb42a0&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201705%2F08%2F20170508080655_NfQWE.jpeg" class="img-fluid" alt="">
</div>
<div class="tab-pane fade" id="image5">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749992877&di=0a4b48f7019defdfd40ef1f651d5cae8&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D2899500456%2C1238079701%26fm%3D214%26gp%3D0.jpg" class="img-fluid" alt="">
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
添加用户行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#image1" class="nav-link active" data-toggle="tab">图片1</a>
</li>
<li class="nav-item">
<a href="#image2" class="nav-link" data-toggle="tab">图片2</a>
</li>
<li class="nav-item">
<a href="#image3" class="nav-link" data-toggle="tab">图片3</a>
</li>
<li class="dropdown nav-item">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">更多内容</a>
<ul class="dropdown-menu">
<li class="nav-item">
<a href="#image4" class="nav-link" data-toggle="tab">图片4</a>
</li>
<li class="nav-item">
<a href="#image5" class="nav-link" data-toggle="tab">图片5</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="image1">图片1</div>
<div class="tab-pane fade show" id="image2">图片2</div>
<div class="tab-pane fade show" id="image3">图片3</div>
<div class="tab-pane fade show" id="image4">图片4</div>
<div class="tab-pane fade show" id="image5">图片5</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#myTab a').on('click',function (e) {
e.preventDefault();
$(this).tab('show');
});
$('#myTab a').on('show.bs.tab',function (e) {
alert('旧的选项卡；' + e.relatedTarget);
alert('将被激活的选项卡：' + e.target);
})
})
</script>
</body>
</html>
案例实训1—仿淘宝抢红包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.del{
border: 2px solid white!important;
padding: 3px 8px 5px !important;
border-radius: 50%;
display: inline-block;
right: 2px;
top: 2px;
background: #F72943!important;
}
.redWars{
border: 1px solid white!important;
padding: 15px 26px !important;
border-radius: 50%;
font-size: 40px;
color: #F72943;
background: yellow;
display: inline-block;
position: absolute;
left: 105px;
top: 260px;
}
</style>
</head>
<body class="container">
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered" role="document" style="width: 300px;">
<div class="modal-content">
<div class="modal-header">
<button class="close del" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592753747124&di=742a4c7e7baba2dddd61ed368ff19881&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F74%2F81%2F035bd561660d4a9.jpg%2521r650%2Ffw%2F800" class="img-fluid rounded" alt="">
<a href="#" class="btn redWars">抢</a>
</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#myModal').modal('show');
})
</script>
</body>
</html>
案例实训2—仿京东商品推荐区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>快速认识JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.custom .active{
border-radius: 0!important;
background: #ff5774!important;
}
.color1{
color: #FF4466;
}
.color2{
color: #ff9797;
}
.value{
font-size: 0.8rem;
}
</style>
</head>
<body class="container">
<h3>热销精品<small class="ml-2 text-muted">HOT</small></h3>
<ul class="nav nav-pills d-flex custom">
<li class="nav-item border flex-fill text-center">
<a href="#image1" class="nav-link active" data-toggle="tab">裤装</a>
</li>
<li class="nav-item border flex-fill text-center">
<a href="#image2" class="nav-link" data-toggle="tab">上衣</a>
</li>
<li class="nav-item border flex-fill text-center">
<a href="#image3" class="nav-link" data-toggle="tab">裙子</a>
</li>
<li class="nav-item border flex-fill text-center">
<a href="#image4" class="nav-link" data-toggle="tab">衬衫</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="image1">
<div class="row no-gutters">
<div class="col-3 p-3 border">
<img src="http://img11.360buyimg.com/n7/jfs/t1/100426/23/398/359161/5dabfd4dE281cad64/fdb059a7fd24e21d.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/96711/33/6971/107464/5df797fcE6bafe5ad/b164384642dac605.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/125902/22/4541/232758/5eddf729E83f05163/90d8baaa3cfc1938.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/143314/40/1074/267496/5eec846eEb9b6bce5/20d91f1c58737441.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img12.360buyimg.com/n7/jfs/t1/130673/1/2572/166108/5eec1c9fE122ff56f/ee7678ab000ec2fa.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img13.360buyimg.com/n7/jfs/t1/135489/34/2650/181821/5eed6589E9893eab0/ceb95fc3b99abe2d.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img12.360buyimg.com/n7/jfs/t1/33878/31/8726/151487/5cc7118dE74968f9e/932be243397081cd.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img14.360buyimg.com/n7/jfs/t1/101336/38/6885/169735/5df7a30dEff8aad5f/44b12c05f5f43bfe.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="image2">
<div class="row no-gutters">
<div class="col-3 p-3 border">
<img src="http://img11.360buyimg.com/n7/jfs/t1/100426/23/398/359161/5dabfd4dE281cad64/fdb059a7fd24e21d.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/96711/33/6971/107464/5df797fcE6bafe5ad/b164384642dac605.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/125902/22/4541/232758/5eddf729E83f05163/90d8baaa3cfc1938.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/143314/40/1074/267496/5eec846eEb9b6bce5/20d91f1c58737441.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img12.360buyimg.com/n7/jfs/t1/130673/1/2572/166108/5eec1c9fE122ff56f/ee7678ab000ec2fa.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img13.360buyimg.com/n7/jfs/t1/135489/34/2650/181821/5eed6589E9893eab0/ceb95fc3b99abe2d.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img12.360buyimg.com/n7/jfs/t1/33878/31/8726/151487/5cc7118dE74968f9e/932be243397081cd.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img14.360buyimg.com/n7/jfs/t1/101336/38/6885/169735/5df7a30dEff8aad5f/44b12c05f5f43bfe.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="image3">
<div class="row no-gutters">
<div class="col-3 p-3 border">
<img src="http://img11.360buyimg.com/n7/jfs/t1/100426/23/398/359161/5dabfd4dE281cad64/fdb059a7fd24e21d.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/96711/33/6971/107464/5df797fcE6bafe5ad/b164384642dac605.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/125902/22/4541/232758/5eddf729E83f05163/90d8baaa3cfc1938.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/143314/40/1074/267496/5eec846eEb9b6bce5/20d91f1c58737441.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img12.360buyimg.com/n7/jfs/t1/130673/1/2572/166108/5eec1c9fE122ff56f/ee7678ab000ec2fa.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img13.360buyimg.com/n7/jfs/t1/135489/34/2650/181821/5eed6589E9893eab0/ceb95fc3b99abe2d.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img12.360buyimg.com/n7/jfs/t1/33878/31/8726/151487/5cc7118dE74968f9e/932be243397081cd.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img14.360buyimg.com/n7/jfs/t1/101336/38/6885/169735/5df7a30dEff8aad5f/44b12c05f5f43bfe.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="image4">
<div class="row no-gutters">
<div class="col-3 p-3 border">
<img src="http://img11.360buyimg.com/n7/jfs/t1/100426/23/398/359161/5dabfd4dE281cad64/fdb059a7fd24e21d.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/96711/33/6971/107464/5df797fcE6bafe5ad/b164384642dac605.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/125902/22/4541/232758/5eddf729E83f05163/90d8baaa3cfc1938.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img11.360buyimg.com/n7/jfs/t1/143314/40/1074/267496/5eec846eEb9b6bce5/20d91f1c58737441.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img12.360buyimg.com/n7/jfs/t1/130673/1/2572/166108/5eec1c9fE122ff56f/ee7678ab000ec2fa.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img13.360buyimg.com/n7/jfs/t1/135489/34/2650/181821/5eed6589E9893eab0/ceb95fc3b99abe2d.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img12.360buyimg.com/n7/jfs/t1/33878/31/8726/151487/5cc7118dE74968f9e/932be243397081cd.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
<div class="col-3 p-3 border">
<img src="//img14.360buyimg.com/n7/jfs/t1/101336/38/6885/169735/5df7a30dEff8aad5f/44b12c05f5f43bfe.jpg" alt="" class="img-fluid">
<p class="my-2 value text-center">夏季新款韩版修身时尚淑女装</p>
<div class="row text-center">
<div class="col-6 border-right value color1">￥89</div>
<div class="col-6 value"><a href="#" class="text-dark"><i class="fa fa-weixin mr-1 color2"></i>208评价</a></div>
</div>
</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
