Bootstrap概述和使用

最新推荐文章于 2024-09-13 22:54:37 发布

一只tobey

最新推荐文章于 2024-09-13 22:54:37 发布

阅读量341

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/zz2230633069/article/details/113495787

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

概念：

来自Twitter，是目前很受欢迎的前端框架。BootStrap是基于HTML、CSS、Javascript的，它简洁灵活，使得web开发更加快捷。官方网站使用.
（框架是一个半成品软件，开发人员可以在框架基础上，再进行开发、简化编码。)

好处：

1.定义了很多的css样式和js插件，开发人员可以直接使用这些样式和插件得到丰富的页面效果。

2.响应式布局。同一套页面可以兼容不同分辨率的设备，可以自动适应调整布局大小。

（Bootstrap框架）使用的步骤：

1.下载资源：选择用于生产环境的BootStrap。离线文档：https://cloud.189.cn/t/UVNJfuqmeu6r（访问码：yfj7）

2.引用资源。在项目中，将这三个文件夹复制。

3.创建HTML页面，引入必要的资源文件。（资源文件的文件名有带min和不带min的区别，在于压缩）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    
    <!-- 引入资源：Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入资源：jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
    <!-- 引入资源：加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

<h1>你好，世界！</h1>

</body>
</html>