1、打开Webstrom开发工具，新建test.html网页
3、引入bootstrap文件，配置Meta自适应屏幕，test.html代码如下：<!DOCTYPE html><html lang=" zh-cmn-Hans"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css"> <title>Title</title></head><body> <div>hello</div> <script src="bootstrap4.0dist/js/bootstrap.min.js"></script></body></html>
5、设置背景色，背景色其实是以bg开头，修改代码如下：<!DOCTYPE html><html lang=" zh-cmn-Hans"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="bootstrap4.0dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <title>Title</title> </head> <body> <div class="bg-danger text-dark" >你好</div> <button class="bg-danger">h</button> <script src="bootstrap4.0dist/js/bootstrap.min.js"></script> </body> </html>
7、使用前景色，也就是文字颜色，以text开头，修改代码如下：<!DOCTYPE html><html lang="稆糨孝汶; zh-cmn-Hans"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="bootstrap4.0dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <title>Title</title> </head> <body> <div class="bg-danger text-white" >你好</div> <button class="bg-danger text-white">h</button> <script src="bootstrap4.0dist/js/bootstrap.min.js"></script> </body> </html>
