Bootstrap 4基础学习01

1.Bootstrap 4

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

1.1使用 Bootstrap 4 CDN

1.移动设备优先设置--head标记中引入

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

2. 引入Bootstrap依赖的css和js文件

3. 设置容器元素【div/body..】

给指定的html元素设置 class="container" / class="container-fluid"

container---用于固定宽度并支持响应式布局的容器

container-fluid---用于 100% 宽度，占据全部视口（viewport）的容器

 移动端优先
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bootstrap4 核心CSS文件
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    jQuery文件 务必在bootstrap.min.js 之前引入
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    用于弹窗、提示、下拉菜单，包含了 popper.min.js
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    Bootstrap4 核心 JavaScript 文件
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。

1.2 从官网 getbootstrap.com 下载 Bootstrap 4依赖文件

1. 移动设备优先设置--head标记中引入

2. 引入Bootstrap依赖的css和js文件【提前准备jquery文件】

3. 设置容器元素【div/body..】

<!--移动端优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery文件 务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery/jquery-3.5.1.min.js"></script>
    <!-- 用于弹窗、提示、下拉菜单 -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap4 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>

2. Bootstrap4 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视（viewport）尺寸的增加，系统会自动分为最多 12 列

Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列