本文概述
作为Web开发人员, 你有时可能会查看许多网站的源代码, 以了解如何构建标记, CSS和javascript代码。你可能会发现太有趣的DOM元素片段, 而且看起来很酷, 并且你可能想在一个项目中复制该功能, 而不必下载整个Framework仅使用例如按钮的样式, 因为这简直太荒谬了。
如果你确实需要该按钮, 则需要检查代码, 复制标记并阅读使用哪些类。但是, 这非常曲折, 你将花费太多时间。
如果有一种方法可以自动为你执行该任务怎么办？好吧, 我为你介绍了SnappySnippet一个很棒的扩展, 可以为你完成这项艰巨的任务。
SnappySnippet是一个DevTools扩展, 允许你从选定的DOM子树(最后检查的元素)中提取CSS和HTML。然后, 只需单击一下, 就可以将选定的代码发送到CodePen, jsFiddle或JS Bin。
要求
- Google Chrome浏览器。
- SnappySnippet扩展。
如何使用SnappySnippet
在浏览器中安装SnappySnippet扩展之后, 使用它就很容易了。
检查你在文档中发现有趣的元素, 在这种情况下, 我们将检查一个简单的boostrap按钮。
然后, 浏览控制台选项卡, 然后转到SnappySnippet选项卡。
最后, 单击”从检查的元素创建代码段”按钮。
标记将显示在HTML文本区域中, 而使元素看起来如何所需的CSS所需代码将显示在左侧区域的CSS文本区域中。
你可以查看代码段的预览, 将代码(通过按钮以POST形式)发送到其他在线沙箱, 并查看代码段的外观。如果你对结果不满意, 可以尝试在”设置”按钮中自定义SnappySnippet的配置设置, 以在代码段中包含祖先元素, 并包括前缀, 混合类等其他内容。
下图显示了所需的代码, 以显示一个简单的主类引导按钮, 在jsBin中显示。
玩得开心
