Bootstrap 入门

码字小萌新♡

已于 2024-12-09 21:19:47 修改

阅读量4k

点赞数 12

分类专栏：前端文章标签： bootstrap 前端 javascript

于 2023-05-08 17:53:24 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51712954/article/details/130551218

版权

一、Bootstrap 简介

🔰框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。
🔰前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。
🔰Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。

二、安装及使用

① 我们可以通过从官网 getbootstrap.com 下载 Bootstrap 4：
在这里插入图片描述
② 在项目中创建一个名为 bootstrap 的文件夹
后面用于放 bootstrap 相关文件。

③ 下载完成后进行拷贝
拷贝 dist 文件夹中的 css 和 js，粘贴到我们刚刚创建好的 bootstrap 文件夹中。

④ 创建一个 jquery.js 文件
把它放到我们的项目文件夹 js 下。

⑤ 官网查找 jquery 代码
官网地址：http://jquery.com/

点击 download：
在这里插入图片描述
选择第二行点击打开：
我们可以看到代码行：

⑥ 复制以上所有代码

并粘贴到前面我们已经创建好的 jquery.js 文件内。

⑦ 外链引入文件

bootstrap.min.css 正常引入，但是 bootstrap.min.js 文件是依赖于 jquery 的，所以 jquery.js 必须在 bootstrap.min.js 之前引入。

<!-- Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="./js/jquery.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="./bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="./bootstrap/js/bootstrap.min.js"></script>

注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。

三、布局容器

(二) 移动设备优先

🔰为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

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

width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。

(二) 容器类

🔰Bootstrap 4 需要一个容器元素来包裹网站的内容。

🔰我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器，两侧有留白。

<div class="container" style="background: pink;">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>这是一些文本。</p>
</div>

在这里插入图片描述

.container-fluid 类用于 100% 宽度，占据全部视口的容器。

<div class="container-fluid" style="background: yellow;">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p>
</div>

在这里插入图片描述

四、网格系统

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

(一) 网格类

🔰Bootstrap 4 网格系统有以下 5 个类:

.col- 针对所有设备
.col-xs- 超小屏（手机）
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

(二) 列组合

🔰在行（.row）中可以添加列（.column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，如果大于12则自动换到下一行，xs 超小屏、sm 小屏、md 中屏、lg 大屏，一般 md 用的最多。具体内容应当放置在列容器之内：

<div class="container">
	<div class="row">
		<div class="col-md-4" style="background-color: black;">4</div>
		<div class="col-md-8" style="background-color: red;">8</div>
	</div>
</div>