石家庄网站推广软件,石家庄建设局官方网站,免费稳定网站空间,百度大数据分析工具阅读本篇博文前#xff0c;建议大家先看看下面这篇博文#xff1a; https://blog.csdn.net/wenhao_ir/article/details/132089650
Bootstrap经编译(压缩)后的源码百度网盘下载地址#xff1a; https://pan.baidu.com/s/14BM9gpC3K-LKxhyLGh4J9Q?pwdm02m
Bootstrap未经编译…阅读本篇博文前建议大家先看看下面这篇博文 https://blog.csdn.net/wenhao_ir/article/details/132089650
Bootstrap经编译(压缩)后的源码百度网盘下载地址 https://pan.baidu.com/s/14BM9gpC3K-LKxhyLGh4J9Q?pwdm02m
Bootstrap未经编译(压缩)后的源码百度网盘下载地址 https://pan.baidu.com/s/19U-13-sgPDHCI0FozreFdQ?pwdb9m1
我们在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?pwdppsi
文件 css-map-test.html 的内容如下
!DOCTYPE html
html
headlink relstylesheet hrefbootstrap.min.css
/head
bodydiv classcontainerp我要测试Source Map(源映射)文件的效果。/p/div
/body
/htmlchorm浏览器中打开文件 css-map-test.html ,然后通过F12或右键→“审查元素”进入开发模式。 通过Elements的Styles可以查看对应的元素的源码及位于未编译前的源码中的位置如下图所示 右边上边截图中右边的源码文件即可跳转到具体的源码
我们进入到Sources选项下打开bootstrap.css文件搜索“.container”即可找到选择器 .container 的定义 如果要理解上面截图中scss文件夹的含义那么你把bootstrap的完整代码下载下来就知道了如下图所示
