本节课我们来开始学习 Bootstrap，第一节课重点了解它的作用，下载安装以及测试。
一．简单介绍
- Bootstrap 是一款 CSS/HTML 的框架库，目前最新版本是 V4.5;
- 它集成了各种常用的前端（HTML、CSS 和 JavaScript）组件库；
- 用于响应式前端布局，移动设备优先的 Web 项目开发；
- 所以，在学习 Bootstrap 之前需要有 HTML5 的学习基础；
二．下载和目录
从官网上下载了压缩包：bootstrap-4.5.0-dist.zip；
解压后，有两个目录：css 和 js，以下是它的目录结构；
- 在上面的目录结构中，带 min 字样的是编译后的压缩版，可以用于生产部署环境，不带 min 的可以用于开发调试环境；带 map 字样的是 CSS 地图查询文件，方便查询精确的样式位置。
js 目录中没有 jquery 和 popper 库文件，需要我们自行下载安装；
三．安装和测试
- 创建一个 Bootstrap 文件夹目录，这里将存放以后课程中所有代码和实例；
- 创建子目录 01，并创建.html 代码，生成 HTML5 基本格式；
开发工具可以是 Sublime Text、Nodepad Plus、HBuilder 或者 WebStorm等；
代码结构
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>我的第一个Bootstrap代码</title> <!-- 引入Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <h1>Bootstrap,你好！</h1> <button type="button" class="btn btn-primary">开始学习吧</button> <button type="button" class="btn btn-success">开始学习吧</button> <!-- 引入jQuery文件 --> <script src="js/jquery-3.5.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>运行结果
- 注意：
1.属性注解：
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
2.js文件顺序：
保证先引入 jQuery 的文件，后引入 Bootstrap 的文件。
网友评论