当前位置： 首页 > news >正文

怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】

news 2026/6/3 20:47:30

阅读本篇博文前，建议大家先看看下面这篇博文：
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(源映射)文件实现】

阅读本篇博文前&#xff0c;建议大家先看看下面这篇博文&#xff1a; https://blog.csdn.net/wenhao_ir/article/details/132089650 Bootstrap经编译(压缩)后的源码百度网盘下载地址&#xff1a; https://pan.baidu.com/s/14BM9gpC3K-LKxhyLGh4J9Q?pwdm02m Bootstrap未经编译…...

编程日记 2023/8/8 1:15:48

【排序算法】python之冒泡，选择，插入，快速，归并

参考资料&#xff1a; 《Python实现5大排序算法》《六大排序算法&#xff1a;插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序》 --代码似乎是C语言 ———————— 本文介绍5种常见的排序算法和基于Python实现&#xff1a; 冒泡排序&#xff08;Bubble Sort&am…...

编程日记 2023/8/8 1:14:47

UML—用例图的那些事

目录 背景: 1.用例图的发展史 过程: 1.用例图中的元素和关系 2.应用中的例子 总结&#xff1a; 背景: 1.用例图的发展史 用例图是一种常用的软件工程工具&#xff0c;用于描述系统的功能需求和用户与系统的交互。它在软件开发过程中起到了重要的作用&#xff0c;并且经历了…...

编程日记 2023/8/8 1:13:46

迷宫出口问题求解（DFS）

题面 一天Extense在森林里探险的时候不小心走入了一个迷宫&#xff0c;迷宫可以看成是由 nn 的格点组成&#xff0c;每个格点只有 22 种状态&#xff0c; 00 和 11&#xff0c;前者表示可以通行后者表示不能通行。 同时当Extense处在某个格点时&#xff0c;他只能移动到东南西北…...

编程日记 2023/8/8 1:12:44

基础算法模板

数据结构 单链表的插入删除 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)/…...

编程日记 2023/8/8 1:11:43

react Ref 的基本使用

类组件中使用ref 在类组件中&#xff0c;你可以使用createRef来创建一个ref&#xff0c;并将它附加到DOM元素或类组件实例上。使用ref允许你在类组件中访问和操作特定的DOM元素或类组件实例。 下面是在类组件中使用ref的步骤&#xff1a; 引入React和createRef&#xff1a; …...

编程日记 2023/8/8 1:10:42

宝塔面板点击SSL闪退打不开怎么解决？

宝塔Linux面板点击SSL证书闪退如何解决&#xff1f;旧版本的宝塔Linux面板确实存在这种情况&#xff0c;如何解决&#xff1f;升级你的宝塔Linux面板即可。新手站长分享宝塔面板SSL闪退的解决方法&#xff1a; 宝塔面板点击SSL证书闪退解决方法 问题&#xff1a;宝塔Linux面板…...

编程日记 2023/8/8 1:09:38

如何将安卓 Gradle 模块打包发布到本地 Maven 仓库

文章目录 具体流程 笔者的运行环境&#xff1a; Android Studio Flamingo | 2022.2.1 Android SDK 33 Gradle 8.0.1 JDK 17 Android 的 Gradle 项目与一般的 Gradle 项目是不同的&#xff0c;因此对将 Gradle 模块打包发布到本地 Maven 仓库来说&#xff0c;对普通 Gradle …...

编程日记 2023/8/8 1:08:37

【Docker】Docker比虚拟机快的原因、ubuntu容器、镜像的分层概念和私有库的详细讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…...

编程日记 2023/8/8 1:07:36

java.lang.IllegalArgumentException: Invalid character found in methodname

postman请求异常&#xff1a;java.lang.IllegalArgumentException: Invalid character found in method name. HTTP method names must be tokens...

编程日记 2023/8/8 1:06:35

【PCB专题】Allegro高速电路Xnet网络等长约束——SDIO信号为例

高速PCB板布线过程中，经常遇到等长设置问题，例如DDR的一组数据线和地址线等。但是由于数据线和地址线中间有一个电阻（或排阻），这种情况下设置等长就要引入Xnet的概念，通过设置Xnet的等长来确保数据线和地址线的等长。 由无源、分立器件（电阻、电容、电感）连接起来的几段…...

编程日记 2023/8/8 1:05:33

leetcode每日一练-第278题-第一个错误的版本

一、思路 二分查找——因为它可以快速地将版本范围缩小一半&#xff0c;从而更快地找到第一个坏版本。 二、解题方法 维护一个左边界 left 和一个右边界 right&#xff0c;在每一步循环中&#xff0c;我们计算中间版本 mid&#xff0c;然后检查它是否是坏版本。如果是坏版本…...

编程日记 2023/8/8 1:04:32

最小生成树笔记（Prim算法Kruskal算法）

1.最小生成树 最小生成树&#xff08;Minimum Spanning Tree&#xff0c;简称MST&#xff09;是指&#xff1a;在一个连通无向图中&#xff0c;找到一个包含所有顶点的树&#xff0c;且该树的所有边的权重之和最小。 换句话说&#xff0c;最小生成树是原图中的一个子图&#…...

编程日记 2023/8/8 1:03:31

4、数据清洗

4、数据清洗 前面我们处理的数据实际上都是已经被处理好的规整数据&#xff0c;但是在大数据整个生产过程中&#xff0c;需要先对数据进行数据清洗&#xff0c;将杂乱无章的数据整理为符合后面处理要求的规整数据。 数据去重 1.删除重复数据groupby().count()&#xff1a;可以…...

编程日记 2023/8/8 1:02:29

Python-OpenCV 图像的基础操作

图像的基础操作 获取图像的像素值并修改获取图像的属性信息图像的ROI区域图像通道的拆分及合并图像扩边填充图像上的算术运算图像的加法图像的混合图像的位运算 获取图像的像素值并修改 首先读入一副图像&#xff1a; import numpy as np import cv2# 1.获取并修改像素值 # 读…...

编程日记 2023/8/8 1:01:28

test111

step3&#xff1a;多线程task 首先&#xff0c;实现两个UserService和AsyncUserService两个服务接口&#xff1a; package com.example.demospringboot.service;public interface UserService {void checkUserStatus(); }package com.example.demospringboot.service.impl;im…...

编程日记 2023/8/8 1:00:26

17. Spring 事务

目录 1. 事务定义 2. MySQL 中的事务使用 3. 没有事务时的插入 4. Spring 编程式事务 5. Spring 声明式事务 5.1 Transactional 作用范围 5.2 Transactional 参数说明 5.3 Transactional 工作原理 1. 事务定义 将⼀组操作封装成一个执行单元&#xff08;封装到一起…...

编程日记 2023/8/8 0:59:23

【C# 基础精讲】运算符和表达式

在C#编程中&#xff0c;运算符和表达式是构建复杂逻辑的关键元素。运算符用于执行各种数学、逻辑和其他操作&#xff0c;而表达式则由运算符、变量、常量和函数组成&#xff0c;用于生成计算结果。本文将详细介绍C#中常见的运算符和表达式的概念&#xff0c;以及它们在程序中的…...

编程日记 2023/8/8 0:58:22

【搜索】DFS连通性模型

算法提高课笔记 目录 迷宫题意思路代码 红与黑题意思路代码 DFS 的搜索分为两大部分&#xff1a; 内部搜索&#xff1a;一个图中从一个点搜到另一个点外部搜索&#xff1a;从一张图&#xff08;状态&#xff09;搜到另一张图&#xff08;状态&#xff09; 在第一个部分里是图…...

编程日记 2023/8/8 0:57:21

项目优化后续 ，手撸一个精简版VUE项目框架！

之前说过项目之前用的vben框架&#xff0c;在优化完性能后打包效果由原来的纯代码96M变成了56M&#xff0c;后续来啦&#xff0c;通过更换框架&#xff0c;代码压缩到了36M撒花~ 现在就来详细说说是怎么手撸一个框架的&#xff01; 方案&#xff1a; 搭建一套 vite vue3 a…...

编程日记 2023/8/8 0:56:20

Obsidian PDF++：如何在Obsidian中实现PDF与笔记的无缝双向链接？

Obsidian PDF&#xff1a;如何在Obsidian中实现PDF与笔记的无缝双向链接&#xff1f; 【免费下载链接】obsidian-pdf-plus PDF: the most Obsidian-native PDF annotation & viewing tool ever. Comes with optional Vim keybindings. 项目地址: https://gitcode.com/gh_…...

编程新知 2026/5/26 3:13:58

本地柴油发电机组排行2023年最新榜单

柴油发电机是通过燃烧柴油驱动发动机&#xff0c;进而发电的设备&#xff0c;广泛应用于电力中断或无电网地区。1. 柴油发电机的核心工作原理是什么&#xff1f;柴油发电机是一种将化学能转化为电能的设备&#xff0c;其核心是柴油发动机与交流发电机的组合。当柴油在发动机内燃…...

编程新知 2026/5/26 3:05:52

AI大模型应用开发全攻略：从入门到精通，掌握LLM、RAG、Agent核心技能！“

本文全面介绍了AI大模型应用开发的核心技术和实践。从大模型API交互基础&#xff0c;到关键参数Messages和Tools的作用&#xff0c;深入解析了RAG、ReAct、Agent等应用范式。文章还探讨了Fine-tuning微调和Prompt提示词工程的重要性&#xff0c;强调工程实践与业务需求相结合。…...

编程新知 2026/5/26 2:55:48

全球无障碍宣传日：iOS 26 辅助功能大升级，这些实用小功能你用过吗？

辅助功能发展与升级很多人对辅助功能的印象还停留在 "小白点"&#xff0c;但随着 iPhone 进入全面屏时代&#xff0c;它逐渐变得陌生。实际上&#xff0c;Apple 每年都会为其增添功能&#xff0c;方便身体有障人士使用 iPhone。而且&#xff0c;这些功能不仅惠及有障…...

编程新知 2026/5/25 21:07:31

Unity塔防底层架构：ScriptableObject驱动的数据契约设计

1. 这不是“又一个塔防模板”&#xff0c;而是塔防开发的底层操作系统我第一次在Asset Store点开Tower Defense Toolkit 4&#xff08;TDTK-4&#xff09;的预览图时&#xff0c;下意识划走了——界面太“干净”了&#xff0c;没有炫酷的粒子特效演示&#xff0c;没有满屏飞舞的…...

编程新知 2026/5/25 19:11:47

零基础怎么学Agent？这个工程师考试内容拆给你看

站在 AI Agent&#xff08;智能体&#xff09;爆发的十字路口&#xff0c;很多既没有深厚算法背景、也没有丰富写代码经验的“小白”常常感到迷茫&#xff1a;动辄谈及的大模型交互、复杂的业务编排&#xff0c;零基础真的能学会吗&#xff1f; 事实上&#xff0c;智能体开发早…...

编程新知 2026/5/25 19:09:14

Java网络编程基础分享

在学习 Java 的过程中&#xff0c;网络编程是非常重要的一环。无论是后端开发、分布式系统、即时通讯、文件传输&#xff0c;还是游戏服务、物联网设备&#xff0c;都离不开网络通信一、计算机网络基础1.1 什么是计算机网络把不同地理位置、具有独立功能的计算机&#xff0c;通…...

编程新知 2026/5/25 17:34:28

GEP协议深度解读：AI智能体自我进化的基因工程

OpenAI 官宣全面支持MCP协议，标志着AI应用架构的"连接标准"已定。如果说MCP是AI时代的USB-C，解决了模型与工具的连接问题，那么GEP（Genome Evolution Protocol，基因组进化协议）则正在解决另一个更本质的问题——智能体的自我进化与生命周期管理。 作为下一代AI基…...

编程新知 2026/5/25 17:30:24

YOLOv8道路交通信号标志识别检测系统（项目源码+YOLO数据集+模型权重+UI界面+python+深度学习+环境配置）

摘要 道路交通信号标志的自动检测是智能驾驶与交通管理系统中的核心环节。本文基于YOLOv8目标检测算法&#xff0c;构建了一个涵盖21类常见交通信号标志的检测系统&#xff0c;包括禁令标志、指示标志、警告标志及信号灯等。模型在包含1376张训练图像、488张验证图像和229张测…...

编程新知 2026/5/25 16:46:25

纯硬件实现I2C协议：从逻辑门到传感器通信的深度实践

1. 项目概述&#xff1a;用纯硬件“解剖”I2C总线很多朋友在玩传感器&#xff0c;尤其是温湿度传感器时&#xff0c;都绕不开I2C这个通信协议。市面上绝大多数的教程和方案&#xff0c;都会告诉你&#xff1a;找个单片机&#xff08;比如Arduino、STM32&#xff09;&#xff0c…...

编程新知 2026/5/25 16:37:14