1、打开WebStorm开发工具，新建test.html文件，并将bootstrap4文件放到同级目录
2、引入bootstrap4样式文件，添加一个div，修改test.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div id="div1" class="bg-danger text-white">hello</div>
</body>
</html>
3、查看效果如下图
4、在head标签内添加一个关板脂script标签，代码内容如下：
<!DOCTYPE html>
<html lang="en"番糟>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
冷科 document.getElementById('div1').className='bg-light'
}
</script>
</head>
<body>
<div id="div1" class="bg-danger text-white">hello</div>
</body>
</html>
5、查看效果如下图，这样其实是将原来的class全部清空，再新赋值的class，也就是上一步的bg-light
6、如果仅仅是添加新的class，修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
document.getElementById('div1').className += ' p-5'
}
</script>
</head>
<body>
<div id="div1" class="bg-danger text-white">hello</div>
</body>
</html>
注意这种写法必须在class名前加空格，也可以写成
document.getElementById('div1').classList.add('p-5')
7、查看效果如下图
