靡语IT:Bootstrap 简介

时间：2024-04-13 10:21:08

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

下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹，只要把html与Bootstrap文件夹放在一起，然后用相对路径引用bootstrap.bundle.min.js和 bootstrap.min.css 文件即可 1、下载已编译版is和css文件，解压缩后将目录改名称为bootstrap5，放在你的网站目录。 2、在网页<head> </head>之间，添加<link href="/static/bootstrap5/css/bootstrap,min,css”> 3、在网页</body>之前，添加<script src="/static/bootstrap5/is/bootstrap,bundle,min,is" x</script> Bootstrap 自带的大部分组件都需要依赖Javascript 才能起作用。将<script>标签粘贴到页面底部，并且是在</body>标签之前，就能起作用了。 注意: 要确保bootstrap.min.css和bootstrap.bundle.min.js确实在这个路径.

1.2.2 Bootstrap5的html模板

<!DOCTYPE htm1>
<htm1>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width， initial-scale=1">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <!-- Bootstrap 的 CSS 文件 -->
        <link href="./css /bootstrap ,min.css" rel="stylesheet">
        <title></title>
    </head>
    <body>
    <!-- 包含 Popper 的 Bootstrap 集成包 -->
    <script src="./js/bootstrap .bundle.min.js"></script></body></htm1>
    </body>
</html>

响应式布局相关的 标签 Bootstrap 采用的是 移动设备优先 (mobile first) 的开发策略，因此，我们首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的染和触缩放，请务必在 ·标签中 添加让 viewport(视口)支持响应式布局的标签

<meta name="viewport" content="width=device-width， initia-scale=1">

1.2.3 Bootstrap 5 CDN

<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet href="https://cdn staticfile,ora/twitter-bootstrap/5,1.1/css /bootstrap ,min,css">
<!-- 最新的 Bootstrap5 核心 Javascript 文件 -->
<script src="https://cdn,staticfile,org/twitter-bootstrap/5,1.1/js/bootstrap ,bundle,min, js"></script>

1.2.4 Bootstrap5 容器

容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容 Bootstrap 需要一个容器元素来包裹网站的内容

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

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

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

固定宽度

.container 类用于创建固定宽度的响应式页面 注意: 宽度(max-width) 会根据屏幕宽度同比例放大或缩小。

超级小屏幕<576px 小屏幕>=2576px 中等屏幕>=2768px 大屏幕>=2992px 特大屏幕>=21200px 超级大屏幕>=21400px
max-width 100% 540px 720px 960px 1140px 1320px

100% 宽度 .container-fluid 类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度(width 始终为 100%):二者之间的共同点为，两者都可以将高度设置成auto，即自动模式。最大的不同就是宽度的设定上。

container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段个阶段变化的。 container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。

响应式容器 可以使用 .container-sm|mdllglxl类来创建响应式容器。

容器的 max-width 属性值会根据屏幕的大小来改变。

Class 超级小屏幕<576px 小屏幕>=576px 中等屏幕>=768px 大屏幕>=992px 特大屏幕>=1200px 超级大屏幕>=1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xx1 100% 100% 100% 100% 100% 1320px

[我耀学IT]  Patience is key in life

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-]g">.container-1g</div>
<div class="container-x">.container-x1</div>
<div class="container-xx1">.container-xx1</div>

1.3 Bootstrap5 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口(viewport) 尺寸的增加，系统会自动分为最多 12列。我们也可以根据自己的需要，定义列数。 Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。 请确保每一行中列的总和等于或小于 12。 Bootstrap 5 网格系统有以下 6 个类:

  • .col- 针对所有设备。

  • .col-sm- 平板 屏幕宽度等于或大于 576px。

  • .col-md- 桌面显示器- 屏幕宽度等于或大于 768px。

  • .col-lg- 大桌面显示器- 屏幕宽度等于或大于 992px。

  • .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。

  • .col-xxl- 超大桌面显示器 屏幕宽度等于或大于 1400px。

1.3.1 网格系统规则

Bootstrap5 网格系统规则:

  • 网格每一行需要放在设置了 ,container (固定宽度)或 ontainer-fluid(全宽度)类的容器中，这样就可以自动设置一些外边距与内边距。

  • 使用行来创建水平的列组。

  • 内容需要放置在列中，并且只有列可以是行的直接子节点

  • 预定义的类如 .row 和.colsm-4 可用于快速制作网格布局

1.3.2 Bootstrap 5 网格的基本结构

等宽响应式列
<!-- 创建最多 12 列的响应式行 -->
<div class="container">
    <div cTass="row">
        <div class="co]-md-1">1</div>
        <div class="co1-md-1">2</div>
        <div class="co1-md-1">3</div>
        <div class="co1-md-1">4</div>
        <div class="co1-md-1">5</div>
        <div class="co1-md-1">6</div>
        <div class="co1-md-1">7</div>
        <div class="co1-md-1">8</div>
        <div class="co1-md-1">9</div>
        <div class="co1-md-1">10</div>
        <div class="co1-md-1">11</div>
        <div class="co1-md-1">12</div>
    </div>
</div>

要进行栅格系统操作，首先就要创建栅格系统的容器。 “container”和“row”共同组成栅格容器，“row"代表的就是一行。

创建栅格容器后，设置名为col-md-的div，当尾数为1时，表示每个div的宽度占1/12，所以每行最多可以放置12个子div.

如果超过12个，则会在下一行显示。

继续增加下面的代码，将一行显示为3列

<div class="row">
    <div class="co1-md-4">1</div>
    <div class="co1-md-4">2</div>
    <div cass="co1-md-4">3</div>
</div>

这里的class为col-md-4.表示占整个宽度的4/12，即每个div占1/3宽度。这里的colmd是适应中等屏幕的，即屏幕宽度小于768px 时，四个列将会上下堆叠排版。

不等宽响应式列
<div class="row">
    <div class="co1-sm-4">1-4</div>
    <div class="co]-sm-8">5-12</div>
</div>

在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版

相关文章