靡语IT: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

下载了预编辑的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-width100%540px720px960px1140px1320px

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

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

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

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

Class超级小屏幕<576px小屏幕>=576px中等屏幕>=768px大屏幕>=992px特大屏幕>=1200px超级大屏幕>=1400px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xx1100%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 时,两个列将会上下堆叠排版

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806003.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BFS广度优先搜索

import java.util.Arrays; import java.util.LinkedList; import java.util.Queue; import java.util.Scanner; // 1:无需package // 2: 类名必须Main, 不可修改public class Main {public static void main(String[] args) {Scanner scan new Scanner(System.in);//在此输入您…

业务逻辑漏洞(靶场) fiddler

目录 fiddler简介&#xff1a; 业务逻辑漏洞&#xff1a; fiddler下载 靶场&#xff1a; 实验一 ​编辑实验二&#xff08;ps 更改实验url会变&#xff0c;fiddler没抓到东西看看代理改没改&#xff09; 实验三 实验四 fiddler简介&#xff1a; 一款网络抓包工具&#…

内部类、泛型、常用API

内部类 内部类是类中的五大成分之一&#xff08;成员变量、方法、构造器、代码块、内部类&#xff09; 如果一个类定义在另一个类的内部&#xff0c;这个类就是内部类。 场景&#xff1a;当一个类的内部&#xff0c;包含了一个完整的事物&#xff0c;且这个事物没有必要单独设…

20240403-算法复习打卡day43||● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

1049. 最后一块石头的重量 II class Solution { public:int lastStoneWeightII(vector<int>& stones) {vector<int> dp(15001, 0);int sum 0;for (int i 0; i < stones.size(); i) sum stones[i];int target sum / 2;for (int i 0; i < stones.siz…

智慧城市中的物联网革命——青创智通

工业物联网解决方案-工业IOT-青创智通 得益于物联网 (IoT)的变革力量&#xff0c;智慧城市的概念正在迅速成为现实。物联网正在从根本上改变城市的运作方式&#xff0c;为城市居民带来更高的效率、可持续性和生活质量。在本文中&#xff0c;我们将探讨物联网在智慧城市中的作用…

49 样式迁移【李沐动手学深度学习v2课程笔记】

1. 样式迁移&#xff08;Style Transfer) 计算机视觉的应用之一&#xff0c;将样式图片中的样式&#xff08;比如油画风格等&#xff09;迁移到内容图片&#xff08;比如实拍的图片&#xff09;上&#xff0c;得到合成图片 可以理解成为一个滤镜&#xff0c;但相对于滤镜来讲…

SAP ABAP CDS-02 ABAP CDS语法

ABAP CDS中的CDS DDL和CDS DCL的语法包括一般SQL DDL和DCL的元素&#xff0c;还可以定义注释和CDS关联。其语法和语义基本符合CDS的一般概念。 ABAP CDS - 一般语法规则&#xff08;General Syntax Rules&#xff09; 在ABAP CDS中定义CDS对象的CDS DDL和CDS DCL的一般语法规…

基于SSM框架JAVA仓库管理系统源代码Mysql数据库(可当毕设,实训项目,设计大赛)

仓库管理系统实现的功能包括店铺管理&#xff0c;员工管理&#xff0c;部门管理&#xff0c;商品管理&#xff0c;权限管理&#xff0c;入库管理&#xff0c;出库管理&#xff0c;盘点管理&#xff0c;统计管理等功能。该项目采用了Mysql数据库&#xff0c;Java语言&#xff0c…

Hibernate多事务同时调用update(T t) ,字段被覆盖问题

前言 今天现网有个订单卡单了&#xff0c;经过排查发现没有任何异常日志&#xff0c;根据日志定位发现本应该更新的一个状态&#xff0c;也sql肯定执行了(使用了Hibernate的ORM框架)&#xff0c;但是数据库里面的状态没有更新。大概逻辑如下 String hql from orderInfo where…

大模型训练:如何解决GPU万卡互联挑战?

如何解决GPU万卡互联的挑战 近日&#xff0c;字节跳动携手北京大学研究团队发布重磅论文&#xff0c;揭示了一项革命性技术&#xff1a;将大型语言模型训练扩展至超10,000块GPU的生产系统。此系统不仅解决了万卡集群训练大模型时的效率和稳定性难题&#xff0c;更标志着人工智能…

用dbms_shared_pool.purge清除执行计划

1.Oracle 11g如何清除share pool中某条SQL的执行计划 以前在Oracle 10g数据库上,如果遇到绑定窥探导致执行计划慢的情况,想要清除某条SQL的执行计划,让它硬解析,找了很久都没有找到直接操作share pool的方法&#xff08;总不能alter system flush shared_pool&#xff09;,只能…

rocketmq和rabbitmq总是分不清?

1. 官方解答 摘自百度搜索&#xff1a; 2. 通俗易懂的回答

【Gem5】获取构建教程

gem5-tutorial-hpca-2023 1 介绍 1.1 Gem5是什么1.2 Gem5可以用来做什么1.3 获取并构建gem5 gem5-tutorial-hpca-2023 打开网址&#xff1a; github 创建教程代码空空间 “Code” -> “Codespaces” -> “Create Codespace on master” GitHub Codespaces 是一个由…

LeetCode 157. Read N Characters Given Read4

个人专栏 🤺 leetcode 🧗 Leetcode Prime 🏇 Golang20天教程 🚴‍♂️ Java问题收集园地 🌴 成长感悟 欢迎大家观看,不执着于追求顶峰,只享受探索过程 LeetCode 157. 读取给定的 N 个字符 Read4 一、题目描述 Given a file and assume that you can only read th…

配置Kubectl命令自动补全功能

网站&#xff1a; bash-completion补全工具官网&#xff1a;https://caliban.org/bash/ 安装: 在日常管理k8s集群的时候&#xff0c;时刻都会使用到Kubectl命令行工具&#xff0c;但是该命令还是挺复杂的&#xff0c;使用中也记不住那么多的api选项&#xff0c;所以这里介绍…

python如何判断点是否在旋转矩形内部矢量

1. 简介 在计算机图形学和计算几何中&#xff0c;经常会遇到判断一个点是否在一个旋转矩形内部的问题。本项目方案旨在使用Python提供一种高效准确的算法来解决这个问题。 2. 算法原理 方法一&#xff1a; 为了判断一个点是否在一个旋转矩形内部&#xff0c;我们可以将问题…

最坏情况为线性时间的第k大元素

在统计和数据分析中&#xff0c;我们经常会遇到求最大值、最小值、中位数、四分位数、Top K等类似需求&#xff0c;其实它们都属于顺序统计量&#xff0c;本文将对顺序统计量的定义和求解算法进行介绍&#xff0c;重点介绍如何在最差时间复杂度也是线性的情况下求解第k大元素。…

在Debian 12系统上安装Docker

Docker 在 Debian 12 上的安装 安装验证测试更多信息引言 在现代的开发环境中,容器技术发挥着至关重要的作用。Docker 提供了快速、可靠和易于使用的容器化解决方案,使开发人员和 DevOps 专业人士能够以轻松的方式将应用程序从一个环境部署到另一个环境。 Docker 的安装过程在…

实用运维工具(转载)

1、查看进程占用带宽情况-Nethogs Nethogs 是一个终端下的网络流量监控工具可以直观的显示每个进程占用的带宽。 下载&#xff1a;http://sourceforge.net/projects/nethogs/files/nethogs/0.8/nethogs-0.8.0.tar.gz/download [rootlocalhost ~]#yum -y install libpcap-deve…

C语言—每日选择题—Day68

第一题 1、运行以下C语言代码&#xff0c;输出的结果是&#xff08;&#xff09; #include <stdio.h> int main() {char *str[3] {"stra", "strb", "strc"};char *p str[0];int i 0;while(i < 3){printf("%s ",p);i;} retur…