BootStrap框架是什么:
- BootStrap 框架是由 Twitter 公司开发维护的前端 UI 框架它提供了大量编写好的 CSS 样式,允许开发者结合一定的 HTML 结构,以及JavaScript ,快速编写功能完善的网页及常见的交互效果。
- 我们可以不用写代码,通过CSS调用,但框架中的所有样式不能满足我们项目的所有要求,如果框架中没有的或者不满足我们的要求的,自己再写CSS补充上就可以了。
- 使用框架提高开发效率。
- 中文官网:https://www.bootcss.com/
使用BootStrap框架的方法:
1.下载: https://www.bootcss.com/
打开网址:有Bootstrap2 Bootstrap3 和 Bootstrap4 这是不同的版本。但:Bootstrap3 是最稳定的
注:用于生产环境的Bootstrap 在写项目用,Bootstrap 源码在自己日常学习中用。Sass也是一个css的预处理器类似于less,Bootstrap中的框架都是基于Sass写的。
2.使用
(1).引入:BootStrap提供的CSS代码
<!-- 两个路径引入任何一个都可以,两个功能是一样的-->
<!-- bootstrap.css 是按照人的习惯写的 -->
<!-- bootstrap.min.css 用压缩工具压缩后的 -->
<!-- 在做项目时候,用min.css 因为压缩过后体积小,用户加载速度快 -->
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
(2).调用类:调用BootStrap 框架中提供的类的样式
<style>
div {
height: 100px;
background-color: skyblue;
}
</style>
<!-- 调用了框架中的container类 故该container类的样式将会在页面中显示 -->
<body>
<div class="container"></div>
</body>