如何将这个以DOMs为特征的HTML/Javascript代码转换为使用引导组件？

因此，我需要帮助转换HTML代码以使用引导组件

关于节目

我正在制作一个有26幅图片的程序，每幅图片都类似于字母表中的不同字母。每张图片都是一个按钮，当按下按钮时，与每张图片对应的指定字母将添加到图片下方的文本中。这是为游戏《塞尔达的传说：野性的呼吸》而设计的，因为游戏的特点是字形可以转换成真正的英语字母，并用来形成真正的英语句子

我想做什么

我试图通过合并引导组件使我的程序美观。到目前为止，我在代码中使用了textarea标记，因为它允许用户修改他们创建的文本。当用户按下按钮时，该按钮的对应字母将添加到文本区域内的文本中。我不知道有什么替代品可以替代textarea标记来处理我的案例，我检查了引导文档，但没有结果

代码

var字母； 函数选择{ document.getElementById'Translation'。innerHTML=document.getElementById'Translation'。innerHTML+选项； } 没有按钮{ 边界：无； 填充：0； 背景：无； }

---

文本区域完全不是必需的，您也可以轻松地使用div。请看一下选择所有按钮并将它们存储在一个数组中。在该数组中，可以向其添加事件侦听器，事件处理程序可以向单个字符串添加相应的字母。 例如，假设它位于事件处理程序中：

theString += theLetter;
//now update the innerHTML of the <div> with a function call

---

引导实际上与您的问题没有多大关系。Bootstrap为您提供了一个一致的CSS/javascript UI用户界面框架，就是这样。由于您已经退出循环一段时间了，我还建议您考虑一下图像的CSS spring技术。我们来看看引导程序使用的jQuery库和不引人注目的javascript技术。这个问题可能也很有趣：@JacobSnarr如果您愿意，请删除您的问题，但不要像上次编辑时那样覆盖内容。我没有能力删除它。