Plugin Icon

Bootstrap grid viewer Chrome 插件, crx 扩展下载

Plugin Screenshot
Plugin Screenshot
Plugin Screenshot
Plugin Screenshot
                    

Detects Bootstrap Grid elements on a page and displays visual overlay for them

While working with a bootstrap grid, it can be hard to understand how much space content is actually taking, or whether it’s aligned with other elements properly. This extension removes those unknowns. By visualization of grid elements, it builds up your intuition in laying out the content, helps with identifying sizing and alignment problems at glance, and ultimately improves the overall development time. It’s simple to use. Just one click and you’re provided with a list of Bootstrap grid elements present on the page. By clicking on any of those, you get a visual overlay over that element. By another click it’s possible to extend the overlay to viewport height and use it as a generic ruler. Overlay itself is not just commonly placed. It aligns with the grid element precisely, which means it works with more complex nested grids as well. Furthermore, overlay gutter sizes are a true reflection of the underlying grid element. Any change of gutters initiated by use of Bootstrap classes will be reflected in an overlay. Features: - provides visual feedback on grid elements ( container & row ) - helps with troubleshooting issues like an alignment or sizing - saves development time - works with nested grids - reflects gutter changes performed via default Bootstrap classes Note: Extension works with default Bootstrap Grid only. Use of customized Bootstrap grid classes / elements will break compatibility.

分类 💻开发者工具
插件标识 lfhfmkeojcgnpgpnmknfkdbafbijinga
平台 Chrome
评分
★★★★★ 5
评分人数 2
插件主页 https://chromewebstore.google.com/detail/bootstrap-grid-viewer/lfhfmkeojcgnpgpnmknfkdbafbijinga
大小 34.09KiB
官网下载次数 1000
下载地址

CRX扩展文件安装方法

第1步: 打开Chrome浏览器的扩展程序

第2步: 在地址栏输入: chrome://extensions/

第3步: 开启右上角的【开发者模式】

第4步: 重启Chrome浏览器 (重要操作)

第5步: 重新打开扩展程序管理界面

第6步: 将下载的crx文件直接拖入页面完成安装

注意:请确保使用最新版本的Chrome浏览器

同类插件推荐