如果你的网站需要一些漂亮的社交媒体按钮，那么你可以使用 npm 包 responsive-social-buttons。这个包提供了响应式的社交媒体按钮，可以在桌面和移动设备上工作。
安装
要安装 responsive-social-buttons，你可以使用 npm。在命令行中运行以下命令：
npm i responsive-social-buttons --save
使用
使用 responsive-social-buttons 很简单。你只需要在你的 HTML 文件中添加它所提供的标记和类，然后在你的 CSS 文件中添加一些自定义样式。
编写 HTML
首先，你需要在你的 HTML 文件中添加 responsive-social-buttons 所提供的 HTML 标记。你可以使用以下代码：
<div class="rsb-container"> <a class="rsb-facebook"></a> <a class="rsb-twitter"></a> <a class="rsb-linkedin"></a> <a class="rsb-pinterest"></a> <a class="rsb-google-plus"></a> </div>
这会在网页上显示一个容器和五个不同的社交媒体按钮。每个按钮都有一个类，可以在下一步中用 CSS 样式进行自定义。
编写 CSS
下一步是在你的 CSS 文件中为你刚刚添加的标记和类添加自定义样式。你可以使用以下代码：
-- -------------------- ---- ------- -- --------- -- -------------- - -------- ----- ---------------- ------- - -------------- - - ------- - ------ ------ ----- ------- ----- -------- ----- ------------ ------- ---------------- ------- -------------- ---- - ------------- - ----------------- -------- ----------------- ------------------------------ ---------------------------------- ---------- - -- ------------- ------------- ---------- ------------- - --- -------- ------------- ---- ----- ----- ----- --------------------------------------------------- ----------- --------------- - --------- ------------------------------ --------------- --------------------- --------------------------- - ----------- --------------------------------------------------------------------- - ------------ - ----------------- -------- ----------------- ------------------------------ ---------------------------------- ---------- - -- ------------- ------------- ---------- --------------------------------- -------- ---------- ---------------------------------- -------------------------------------------- ------- ---------- ----- - --------------- --------------------------------------------------- --------- ---- - --------- ----- ----- -------------------------------------------- ---- ----- ----- ----- -------------------------------------- ------------------------ ----- ----- ----- ----- ----------- ----------- ----------- --------- -------------------- ----- ----- ---- ----- ----- ----- ----- - ------------ ------------ ---------------------------------- ---------- ----------------------------- - ------------- - ----------------- -------- ----------------- ------------------------------ ---------------------------------- ---------- - -- ------------- ------------- -------- ------- - - ----- - ------------- ------ ----- -- ---- -------- - ---------- --------------------- ---- ----- - ---- ------ ------------------------------------------- - --------- ---------------------------------------------- --------------- ----- - -------- ---- ----- ----------------------- - -------------- - ----------------- -------- ----------------- ------------------------------ ---------------------------------- ---------- - -- ------------- ------------- ---------- ------- - - ----- - ---- ----- ----- ----- ----- ---------------------------------------------- ---------- -------------------------------------------------- ----------- ----- - --------- ----- ----- - ---------- ---------- --------- --------- ----- ----- ----- ---- - ----------- ----------- ------------------------------------- ------ ---------- ----- - --------- ----- ----- ------------------------------------------- ---------- ----------------------------------------------------------------- ------- ----------- ----------- ----- - ----- ----- ----- ----- - --------- ---------- ----------------------------- - ---------------- --------- ---------- ----------- --------- --------------------------- -------------------- ---------- ----- --------- --------- -------- ----- - ------------ ---------------- ----- ------ - ------ ------------------- - ---------------- - ----------------- -------- ----------------- ------------------------------ ---------------------------------- ---------- - -- ------------- ------------- -------- ----------------- --------- ----- - --- - -------- ----------- ------ ---- ---- -- ---------- - ---------- --------------- ---- - - ------- ---------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ----- ------ - ------ ----- - ----- ---- ---- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------ - - - ---------------- - ---- ----- ---- ---------- --------- ----------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------ - -------------- ------- - ---------- ----------- -
演示
在下面的代码片段中，你会看到响应式社交媒体按钮的演示。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------------------------
----- --------------- ---------------------------- -----------------
-------
-- --------- --
-------------- -
-------- -----
---------------- -------
-
-------------- - -
------- - ------
------ -----
------- -----
-------- -----
------------ -------
---------------- -------
-------------- ----
-
------------- -
----------------- --------
----------------- ------------------------------ ---------------------------------- ---------- - -- ------------- ------------- ---------- ------------- - --- -------- ------------- ---- ----- ----- ----- --------------------------------------------------- ----------- --------------- - --------- ------------------------------ --------------- --------------------- --------------------------- - ----------- ---------------------------------------------------------------------
-
------------ -
----------------- --------
----------------- ------------------------------ ---------------------------------- ---------- - -- ------------- ------------- ---------- --------------------------------- -------- ---------- ---------------------------------- -------------------------------------------- ------- ---------- ----- - --------------- --------------------------------------------------- --------- ---- - --------- ----- ----- -------------------------------------------- ---- ----- ----- ----- -------------------------------------- ------------------------ ----- ----- ----- ----- ----------- ----------- ----------- --------- -------------------- ----- ----- ---- ----- ----- ----- ----- - ------------ ------------ ---------------------------------- ---------- -----------------------------
-
------------- -
----------------- --------
----------------- ------------------------------ ---------------------------------- ---------- - -- ------------- ------------- -------- ------- - - ----- - ------------- ------ ----- -- ---- -------- - ---------- --------------------- ----
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------