在前端开发中，我们经常需要响应式布局，根据不同设备的屏幕大小来调整布局。Bootstrap 提供了强大的断点系统，但如果我们不使用 Bootstrap，如何方便地使用断点系统呢？这时候，bs-breakpoints 就可以派上用场了。
bs-breakpoints 是一个基于 jQuery 的 npm 包，它提供了跟 Bootstrap 一样的断点系统，让你可以轻松地配置响应式布局。在本文中，我们将介绍如何使用 bs-breakpoints，并提供简单易懂的示例。
安装和引入
首先，我们需要安装 bs-breakpoints。打开终端，切换到项目目录下，执行以下命令即可：
npm install bs-breakpoints
安装完成后，在需要使用断点系统的文件中引入 bs-breakpoints：
import $ from 'jquery'; import 'bs-breakpoints';
由于 bs-breakpoints 是基于 jQuery 的，需要先引入 jQuery，再引入 bs-breakpoints。
配置断点
接下来是最重要的部分：配置断点。使用 bs-breakpoints，我们可以配置多个断点，每个断点有一个名称和一个最小宽度值。例如，我们配置了两个断点：sm 和 md，对应的最小宽度值分别为 576 和 768：
$.setBreakpoints({
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200
});这段代码表示，对于屏幕宽度小于 576px 的设备，使用 xs 样式；对于屏幕宽度大于等于 576px，小于 768px 的设备，使用 sm 样式，以此类推。
使用断点
配置完断点后，我们就可以在 CSS 中使用断点了。例如，我们定义了一个 .container 类，在不同断点下需要有不同的样式：
-- -------------------- ---- -------
---------- -
------ -----
-
-- - -- --- --
------ ----------- ------ -
---------- -
---------- ------
-
-
-- - -- --- --
------ ----------- ------ -
---------- -
---------- ------
-
-
-- - -- --- --
------ ----------- ------ -
---------- -
---------- ------
-
-
-- - -- --- --
------ ----------- ------- -
---------- -
---------- -------
-
-通过 @media 查询和断点名称，我们可以针对不同的断点设置不同的样式。
示例
下面是一个完整的示例，展示了如何使用 bs-breakpoints 实现响应式布局。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ----------
-------
---- -
------------ ---------- ------ ------------ -------- -------------
---------- -----
------------ ----
------- --
-------- --
-
------ -
----------------- -----
------ -----
-------- -----
-
---------- -
------ -----
-
---- -
------------ ------
------------- ------
-
---- -
------ -----
------------- -----
-------------- -----
-
------ -
------ ----
-
------- -
------ -----
-
-- - -- --- --
------ ----------- ------ -
---------- -
---------- ------
-
---- -
------ ----
-
-
-- - -- --- --
------ ----------- ------ -
---------- -
---------- ------
-
-
-- - -- --- --
------ ----------- ------ -
---------- -
---------- ------
-
---- -
------ ---------
-
-
-- - -- --- --
------ ----------- ------- -
---------- -
---------- -------
-
-
--------
-------
------
--------
---- ------------------
------------------ -------
------
---------
---- ------------------
---- ------------
---- ---------- ------ -------- ----------
----------
-------------
------
---- ---------- ------ -------- ----------
----------
-------------
------
---- ---------- ------ -------- ----------
----------
-------------
------
------
------
-------
------- ----------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------
------- --------------------------------------------------------------------
--------
------------ -
------------------
--- --
--- ----
--- ----
--- ----
--- ----
---
---
---------
-------在这个示例中，我们定义了一个行（.row）和三个列（.col），分别占用 12、6、6 个网格，分别对应的类名为 .col-12、.col-sm-6 和 .col-lg-4。在不同断点下，列的宽度会发生变化，以适应不同的设备。
总结
通过 bs-breakpoints，我们可以轻松地配置和使用断点系统，实现响应式布局。需要注意的是，如果没有使用 Bootstrap，需要单独引入 jQuery，并且在 CSS 中使用 @media 查询配置样式。如果你正在开发一个非 Bootstrap 的项目，不妨试试 bs-breakpoints，它一定能帮助你节省不少时间和精力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734a890c4f727758373e