1.初步了解
别人已经写好的CSS样式,我们可以直接引用
-
下载
Link-BootStrap -
解压,并放入到当前项目中
-
引用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 第一种方式引用: 开发版本 --><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"><!-- 第二种方式引用:生产版本;相比开发版文件更小,其他都一样 --><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"></head>
<body><input type="button" value="原始按钮"><input type="button" value="bootstrap-1" class="btn btn-primary"><input type="button" value="bootstrap-2" class="btn btn-success"><input type="button" value="bootstrap-3" class="btn btn-danger"><input type="button" value="bootstrap-4" class="btn btn-danger btn-xs">
</body>
</html>
效果如下
2. 小试牛刀
构建一个导航界面
进入bootstrap文档
将代码拷贝到html文件中,并对部分代码进行定制化修改,如下图所示
效果如下