前言
Bootstrap 是一款流行的前端框架，能够帮助开发者简化网页开发过程。其中的栅格系统特别实用，但是有时候在开发中难以准确地判断当前屏幕的尺寸，这就导致了在不同设备上展示的效果会有所差别，因此我们需要一个工具来帮助我们更好地了解网页在不同设备上的展示情况。而 bootstrap-size-display 就是一款便捷的 npm 包，可以帮助我们实现这一目的。
bootstrap-size-display 简介
bootstrap-size-display 是一种基于 Bootstrap 栅格系统的尺寸展示工具，可以在网页上显示当前屏幕宽度和高度的值，以及屏幕所处在哪个栅格系统中。在开发过程中，可以使用该工具帮助我们洞察页面的不同尺寸下的展示情况，从而更好的对页面进行调整。
安装
在使用 bootstrap-size-display 之前，需要先安装 npm 包，在终端中输入以下命令：
npm i bootstrap-size-display
或者可以使用以下命令：
yarn add bootstrap-size-display
使用
bootstrap-size-display 的使用非常简单。在需要使用的页面中引入 bootstrap-size-display 的 JavaScript 和 CSS 文件即可，代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------------- ------------
----- ----------------------------------------------------------------------- ---------------- ----------------
------- -------------------------------------------------------------------------------
-------
------
-------
-------在引入完成后，就可以在页面上看到一个位置摆放在左上角的工具栏，用来显示页面尺寸信息。
当调整网页大小时，bootstrap-size-display 会自动更新尺寸和栅格信息。
高级用法
要达到更好的效果，我们可以通过参数配置来自定义 bootstrap-size-display。
显示栅格信息
默认情况下，bootstrap-size-display 并不会显示网页所在的栅格系统信息，因此我们需要在引入 bootstrap-size-display 后进行参数配置，才能使其展示对应的栅格信息。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------------- ------------
----- ----------------------------------------------------------------------- ---------------- ----------------
------- --------------------------------------------------------------------- ----------------------------------
-------
------
-------
-------在上面的代码中，通过在引入 JavaScript 文件的时候加上 data-display-grid="true" 属性，就能够使 bootstrap-size-display 显示当前网页所在的栅格系统信息。
更改显示位置
bootstrap-size-display 默认的显示位置位于左上角，但是我们可以通过自定义参数来更改其显示位置。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------------- ------------
----- ----------------------------------------------------------------------- ---------------- ----------------
------- ---------------------------------------------------------------------
----------------- ----
------------------ -----
---------
-------
------
-------
-------我们可以使用 data-display-top 和 data-display-left 来设置 bootstrap-size-display 的位置，数值代表距离网页左上角的上下和左右距离，单位是像素。在上面给出的例子中，bootstrap-size-display 会被放置在网页左上角距离顶部和左侧分别 20 像素的位置。
结论
使用 bootstrap-size-display 可以帮助前端开发者更好的掌握页面尺寸和栅格信息，从而能够在开发过程中更加准确、高效地进行调整。因此，应用 bootstrap-size-display 工具是前端开发过程中必不可少的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005754781e8991b448ea4ea