Bootstrap介绍
2022-03-19 本文已影响0人
马佳乐
- Bootstrap是基于HTML、CSS、JavaScript的前端框架
- Bootstrap用于响应式前端布局，移动设备优先的Web项目开发
- Bootstrap官网：https://v4.bootcss.com/
Bootstrap下载
可从官网下载压缩包，解压后有两个目录：css和js
css目录结构：
js目录结构：
- 带min字样的是编辑后的压缩版，可以用于生产部署环境;不带min的可以用于开发调试环境
- 带map字样的是CSS地图查询文件，方便查询精确的样式位置
- js目录中没有jQuery库文件,需要我们自行下载安装
Bootstrap结构
- 基本结构:Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。
- Bootstrap自带以下特性:全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的网格系统。
- 组件:Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
- JavaScript插件: Bootstrap包含了十几个自定义的jQuery插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
- 定制:可以定制 Bootstrap 的组件、LESS变量和jQuery插件来得到自己的版本。
入门框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--引入Bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title></title>
</head>
<body>
<h1>Bootstrap开启</h1>
<!--引入JavaScript和jQuery-->
<!--jQuery第一个，然后Bootstrap （集成了 Popper.js和Bootstrap.js）-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
