介绍
alexa-bootstrap 是一个基于 bootstrap4 的库，专为 Alexa技能设计者创建优秀UI而设计。它是一个 npm 包，可以通过 npm 安装。在本文中，我们将介绍如何通过 alexa-bootstrap 创建一个精美的 Alexa 技能UI。
安装
要使用alexa-bootstrap，我们需要使用 npm 进行安装。在命令行中，运行以下命令进行安装：
npm install alexa-bootstrap --save
引入
引入 alexa-bootstrap 代码有两种方式：
HTML
<!-- CSS --> <link rel="stylesheet" href="node_modules/alexa-bootstrap/dist/css/alexa-bootstrap.css"> <!-- JavaScript --> <script src="node_modules/alexa-bootstrap/dist/js/alexa-bootstrap.js"></script>
JavaScript
import 'alexa-bootstrap/dist/css/alexa-bootstrap.css'; import 'alexa-bootstrap/dist/js/alexa-bootstrap.js';
开始使用
基本结构
首先，我们需要一个最基本的 HTML 结构：
-- -------------------- ---- -------
---- --------------------
---- ------------------
---- ------------
---- ------------------
--------- -----------
------
------
------
------文本
对于文本，我们可以使用以下类：
| 类名 | 描述 |
|---|---|
| .alexa-header-text | 技能标题文本 |
| .alexa-body-text | 技能正文文本 |
示例：
-- -------------------- ---- -------
---- --------------------
---- ------------------
---- ------------
---- ------------------
--- -----------------------------------
-- --------------------------------
------
------
------
------图片
对于图片，我们可以使用以下类：
| 类名 | 描述 |
|---|---|
| .alexa-header-image | 技能标题图 |
| .alexa-body-image | 技能正文图 |
示例：
-- -------------------- ---- -------
---- --------------------
---- ------------------
---- ------------
---- -----------------
---- -------------------------- ---------------------- -------
------
---- -----------------
---- ------------------------ -------------------- -------
------
------
------
------按钮
对于按钮，我们可以使用以下类：
| 类名 | 描述 |
|---|---|
| .alexa-button | 普通按钮 |
| .alexa-primary-button | 主要按钮 |
| .alexa-secondary-button | 次要按钮 |
| .alexa-success-button | 成功按钮 |
| .alexa-info-button | 信息按钮 |
| .alexa-warning-button | 警告按钮 |
| .alexa-danger-button | 危险按钮 |
| .alexa-link-button | 链接按钮 |
| .alexa-pill-button | 圆角按钮 |
| .alexa-outline-button | 带边框的按钮 |
示例：
-- -------------------- ---- -------
---- --------------------
---- ------------------
---- ------------
---- ------------------
------- ----------------------------------
------- ------------------------------------------
------- --------------------------------------------
------- ------------------------------------------
------- ---------------------------------------
------- ------------------------------------------
------- -----------------------------------------
------- ---------------------------------------
------- ---------------------------------------
------- --------------------------------------------
------
------
------
------结论
在本文中，我们介绍了如何使用 alexa-bootstrap 来创建一个精美的 Alexa 技能UI，包括文本，图片和按钮的使用。我们希望这篇文章对你有所帮助，并能够使你的 Alexa 技能UI更加出色。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e26af