怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】
阅读本篇博文前，建议大家先看看下面这篇博文：
https://blog.csdn.net/wenhao_ir/article/details/132089650
Bootstrap经编译(压缩)后的源码百度网盘下载地址：
https://pan.baidu.com/s/14BM9gpC3K-LKxhyLGh4J9Q?pwd=m02m
Bootstrap未经编译(压缩)后的源码百度网盘下载地址：
https://pan.baidu.com/s/19U-13-sgPDHCI0FozreFdQ?pwd=b9m1
我们在web项目中，用Bootstrap开发前端内容时，通常都是引用编译版的文件，如下图这些文件：
但这些css文件中的源码，是经过编译压缩处理的，如果直接打开，基本上人是无法阅读的，用四川话来说，那真是“一饼粘”， 不忍直视，如下图所示：
那怎么办呢？此时我们可以通过官方配套的map文件去进行编译前的反映射，从而获得易于阅读的源代码，如下图所示：
那么怎么通过Source Map(源映射)文件去看易于阅读的源码文件呢？
很简单，只需要把css文件和对应的css.map文件放于同一文件下，然后浏览器打开相应的HTML文件，进入开发者模式，即可查看易于阅读的源码文件。
示例如下：
在目录"E:\HTML_3"下放入下面三个文件：
css-map-test.html
bootstrap.min.css
bootstrap.min.css.map
这三个文件的百度网盘下载链接如下：
https://pan.baidu.com/s/1ydZiOKESZydtDXuNiNN0Hg?pwd=ppsi
文件 css-map-test.html 的内容如下：
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><p>我要测试Source Map(源映射)文件的效果。</p></div>
</body>
</html>
chorm浏览器中打开文件 css-map-test.html ,然后通过F12或右键→“审查元素”进入开发模式。
通过Elements的Styles可以查看对应的元素的源码及位于未编译前的源码中的位置，如下图所示：
右边上边截图中右边的源码文件，即可跳转到具体的源码：
我们进入到Sources选项下，打开bootstrap.css文件，搜索“.container”，即可找到选择器 .container 的定义：
如果要理解上面截图中scss文件夹的含义，那么你把bootstrap的完整代码下载下来就知道了，如下图所示：
相关文章：
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】
阅读本篇博文前，建议大家先看看下面这篇博文： https://blog.csdn.net/wenhao_ir/article/details/132089650 Bootstrap经编译(压缩)后的源码百度网盘下载地址： https://pan.baidu.com/s/14BM9gpC3K-LKxhyLGh4J9Q?pwdm02m Bootstrap未经编译…...
【排序算法】python之冒泡，选择，插入，快速，归并
参考资料： 《Python实现5大排序算法》《六大排序算法：插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序》 --代码似乎是C语言 ———————— 本文介绍5种常见的排序算法和基于Python实现： 冒泡排序（Bubble Sort&am…...
UML—用例图的那些事
目录 背景: 1.用例图的发展史 过程: 1.用例图中的元素和关系 2.应用中的例子 总结： 背景: 1.用例图的发展史 用例图是一种常用的软件工程工具，用于描述系统的功能需求和用户与系统的交互。它在软件开发过程中起到了重要的作用，并且经历了…...
迷宫出口问题求解（DFS）
题面 一天Extense在森林里探险的时候不小心走入了一个迷宫，迷宫可以看成是由 nn 的格点组成，每个格点只有 22 种状态， 00 和 11，前者表示可以通行后者表示不能通行。 同时当Extense处在某个格点时，他只能移动到东南西北…...
基础算法模板
数据结构 单链表的插入删除 const int N=1e6+10; int head,e[N],ne[N],idx; //head 存储头节点的下标 //idx 存储当前已经用到的那个点 void init() {head=-1;idx=0; } void add_to_head(int x)//插入头节点操作 {e[idx]=x;ne[idx]=head;head=idx;idx++; } void add(int k)/…...
react Ref 的基本使用
类组件中使用ref 在类组件中，你可以使用createRef来创建一个ref，并将它附加到DOM元素或类组件实例上。使用ref允许你在类组件中访问和操作特定的DOM元素或类组件实例。 下面是在类组件中使用ref的步骤： 引入React和createRef： …...
宝塔面板点击SSL闪退打不开怎么解决？
宝塔Linux面板点击SSL证书闪退如何解决？旧版本的宝塔Linux面板确实存在这种情况，如何解决？升级你的宝塔Linux面板即可。新手站长分享宝塔面板SSL闪退的解决方法： 宝塔面板点击SSL证书闪退解决方法 问题：宝塔Linux面板…...
如何将安卓 Gradle 模块打包发布到本地 Maven 仓库
文章目录 具体流程 笔者的运行环境： Android Studio Flamingo | 2022.2.1 Android SDK 33 Gradle 8.0.1 JDK 17 Android 的 Gradle 项目与一般的 Gradle 项目是不同的，因此对将 Gradle 模块打包发布到本地 Maven 仓库来说，对普通 Gradle …...
【Docker】Docker比虚拟机快的原因、ubuntu容器、镜像的分层概念和私有库的详细讲解
🚀欢迎来到本文🚀 🍉个人简介：陈童学哦，目前学习C/C、算法、Python、Java等方向，一个正在慢慢前行的普通人。 🏀系列专栏：陈童学的日记 💡其他专栏：CSTL&…...
java.lang.IllegalArgumentException: Invalid character found in methodname
postman请求异常：java.lang.IllegalArgumentException: Invalid character found in method name. HTTP method names must be tokens...
【PCB专题】Allegro高速电路Xnet网络等长约束——SDIO信号为例
高速PCB板布线过程中，经常遇到等长设置问题，例如DDR的一组数据线和地址线等。但是由于数据线和地址线中间有一个电阻（或排阻），这种情况下设置等长就要引入Xnet的概念，通过设置Xnet的等长来确保数据线和地址线的等长。 由无源、分立器件（电阻、电容、电感）连接起来的几段…...
leetcode每日一练-第278题-第一个错误的版本
一、思路 二分查找——因为它可以快速地将版本范围缩小一半，从而更快地找到第一个坏版本。 二、解题方法 维护一个左边界 left 和一个右边界 right，在每一步循环中，我们计算中间版本 mid，然后检查它是否是坏版本。如果是坏版本…...
最小生成树笔记（Prim算法Kruskal算法）
1.最小生成树 最小生成树（Minimum Spanning Tree，简称MST）是指：在一个连通无向图中，找到一个包含所有顶点的树，且该树的所有边的权重之和最小。 换句话说，最小生成树是原图中的一个子图&#…...
4、数据清洗
4、数据清洗 前面我们处理的数据实际上都是已经被处理好的规整数据，但是在大数据整个生产过程中，需要先对数据进行数据清洗，将杂乱无章的数据整理为符合后面处理要求的规整数据。 数据去重 1.删除重复数据groupby().count()：可以…...
Python-OpenCV 图像的基础操作
图像的基础操作 获取图像的像素值并修改获取图像的属性信息图像的ROI区域图像通道的拆分及合并图像扩边填充图像上的算术运算图像的加法图像的混合图像的位运算 获取图像的像素值并修改 首先读入一副图像： import numpy as np import cv2# 1.获取并修改像素值 # 读…...
test111
step3：多线程task 首先，实现两个UserService和AsyncUserService两个服务接口： package com.example.demospringboot.service;public interface UserService {void checkUserStatus(); }package com.example.demospringboot.service.impl;im…...
17. Spring 事务
目录 1. 事务定义 2. MySQL 中的事务使用 3. 没有事务时的插入 4. Spring 编程式事务 5. Spring 声明式事务 5.1 Transactional 作用范围 5.2 Transactional 参数说明 5.3 Transactional 工作原理 1. 事务定义 将⼀组操作封装成一个执行单元（封装到一起…...
【C# 基础精讲】运算符和表达式
在C#编程中，运算符和表达式是构建复杂逻辑的关键元素。运算符用于执行各种数学、逻辑和其他操作，而表达式则由运算符、变量、常量和函数组成，用于生成计算结果。本文将详细介绍C#中常见的运算符和表达式的概念，以及它们在程序中的…...
【搜索】DFS连通性模型
算法提高课笔记 目录 迷宫题意思路代码 红与黑题意思路代码 DFS 的搜索分为两大部分： 内部搜索：一个图中从一个点搜到另一个点外部搜索：从一张图（状态）搜到另一张图（状态） 在第一个部分里是图…...
项目优化后续 ，手撸一个精简版VUE项目框架！
之前说过项目之前用的vben框架，在优化完性能后打包效果由原来的纯代码96M变成了56M，后续来啦，通过更换框架，代码压缩到了36M撒花~ 现在就来详细说说是怎么手撸一个框架的！ 方案： 搭建一套 vite vue3 a…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
C#学习第29天：表达式树（Expression Trees）
目录 什么是表达式树？ 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持： 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...
k8s从入门到放弃之HPA控制器
k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率（或其他自定义指标）来调整这些对象的规模，从而帮助应用程序在负…...
【java面试】微服务篇
【java面试】微服务篇 一、总体框架二、Springcloud（一）Springcloud五大组件（二）服务注册和发现1、Eureka2、Nacos （三）负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...
2.2.2 ASPICE的需求分析
ASPICE的需求分析是汽车软件开发过程中至关重要的一环，它涉及到对需求进行详细分析、验证和确认，以确保软件产品能够满足客户和用户的需求。在ASPICE中，需求分析的关键步骤包括： 需求细化：将从需求收集阶段获得的高层需…...
Linux入门(十五)安装java安装tomcat安装dotnet安装mysql
安装java yum install java-17-openjdk-devel查找安装地址 update-alternatives --config java设置环境变量 vi /etc/profile #在文档后面追加 JAVA_HOME"通过查找安装地址命令显示的路径" #注意一定要加$PATH不然路径就只剩下新加的路径了，系统很多命…...
Centos 7 服务器部署多网站
一、准备工作 安装 Apache bash sudo yum install httpd -y sudo systemctl start httpd sudo systemctl enable httpd创建网站目录 假设部署 2 个网站，目录结构如下： bash sudo mkdir -p /var/www/site1/html sudo mkdir -p /var/www/site2/html添加测试…...
LeetCode - 148. 排序链表
目录 题目 思路 基本情况检查 复杂度分析 执行示例 读者可能出的错误 正确的写法 题目 148. 排序链表 - 力扣（LeetCode） 思路 链表归并排序采用"分治"的策略，主要分为三个步骤： 分割：将链表从中间…...