• 我耀学IT—day01-Bootstrap介绍


    1.1 Bootstrap 简介:什么是 Bootstrap?

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而avaScript负责页面元素的响应,Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简洁灵活,使得 Web 开发更加快捷。Bootstrap5 目前是 Bootstrap 的最新版本,利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app。浏览器兼容性: Bootstrap5 兼容所有主流浏览器 (Chrome、 Firefox、Edge、Safari和 Opera) 。如果您需要支持 IE11 及以下版本,请使用 Bootstrap4或 Bootstrap3。

    1.2 Bootstrap安装

    1.2.1 官网下载 Bootstrap5 资源库

    下载下来的文件是压缩包,解压之后可以看到文件的结构。下载的文件包括: 编译并压缩过的 CSS 集成包 编译并压缩过的JavaScript 插件 下载并解压后,将看到文件夹中包含如下文件:

    bootstrap/
    ├── css/
    │   ├── bootstrap-grid.css
    │   ├── bootstrap-grid.css.map
    │   ├── bootstrap-grid.min.css
    │   ├── bootstrap-grid.min.css.map
    │   ├── bootstrap-grid.rtl.css
    │   ├── bootstrap-grid.rtl.css.map
    │   ├── bootstrap-grid.rtl.min.css
    │   ├── bootstrap-grid.rtl.min.css.map
    │   ├── bootstrap-reboot.css
    │   ├── bootstrap-reboot.css.map
    │   ├── bootstrap-reboot.min.css
    │   ├── bootstrap-reboot.min.css.map
    │   ├── bootstrap-reboot.rtl.css
    │   ├── bootstrap-reboot.rtl.css.map
    │   ├── bootstrap-reboot.rtl.min.css
    │   ├── bootstrap-reboot.rtl.min.css.map
    │   ├── bootstrap-utilities.css
    │   ├── bootstrap-utilities.css.map
    │   ├── bootstrap-utilities.min.css
    │   ├── bootstrap-utilities.min.css.map
    │   ├── bootstrap-utilities.rtl.css
    │   ├── bootstrap-utilities.rtl.css.map
    │   ├── bootstrap-utilities.rtl.min.css
    │   ├── bootstrap-utilities.rtl.min.css.map
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap.min.css.map
    │   ├── bootstrap.rtl.css
    │   ├── bootstrap.rtl.css.map
    │   ├── bootstrap.rtl.min.css
    │   └── bootstrap.rtl.min.css.map
    └── js/
        ├── bootstrap.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.esm.js
        ├── bootstrap.esm.js.map
        ├── bootstrap.esm.min.js
        ├── bootstrap.esm.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map

    [我耀学IT]  Patience is key in life

    下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹,只要把html与Bootstrap文件夹放在一起,然后用相对路径引用bootstrap.bundle.min.js和 bootstrap.min.css 文件即可 1、下载已编译版is和css文件,解压缩后将目录改名称为bootstrap5,放在你的网站目录。 2、在网页 之间,添加 Bootstrap 自带的大部分组件都需要依赖Javascript 才能起作用。将