BootStrap框架

最新推荐文章于 2023-08-15 23:12:23 发布

豁达吃早餐的LLL.

最新推荐文章于 2023-08-15 23:12:23 发布

阅读量135

点赞数 3

分类专栏：框架文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/qq_57804294/article/details/130083489

版权

框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BootStrap是由Twitter开发的前端UI框架，提供CSS样式和JavaScript，便于快速构建网页。开发者可以通过引入CSS文件并调用框架中的类来实现交互效果。Bootstrap3是最稳定版本，其源码基于Sass编写，适合生产环境使用。在项目中，通常使用压缩后的bootstrap.min.css以提高加载速度。

摘要由CSDN通过智能技术生成

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>