在Weebly中添加Bootstrap
本教程介绍如何在 Weebly 中使用 Bootstrap。 Bootstrap 是一个免费的开源框架，用于使用 HTML、CSS 和 JavaScript 构建响应式布局。 通过其了解有关 Bootstrap 的更多信息 文档。
Bootstrap 框架的完整 CSS 和 JavaScript 可以从以下位置下载 getbootstrap.com 网站。
推荐：手工艺术家和工匠WooCommerce主题Zass主题
如何在 Weebly 中使用 Bootstrap
像使用 Weebly 一样使用整个 Bootstrap 资源是相当困难的。 它可能会扰乱现有的 Weebly 主题并导致网站崩溃。
可以在特定页面的页眉和页脚部分使用 CSS 和 JavaScript 链接，以便您可以轻松检查该页面而不是整个网站以进行故障排除。
JavaScript 将链接到页脚代码部分，CSS 将链接到 Weebly 页面或网站级别的页眉代码部分。
现在，使用 Bootstrap 需要一些 CSS 知识，并且很容易获得特定元素的样式并将其应用到您的网站上。 让我们以通知框为例。 Bootstrap 确实提供了很多样式来创建此类框，但您可能只需要复制以下类。
<style>
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 5px;
}
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}
.alert-warning {
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
}
.alert-danger {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}
</style>
将 CSS 代码粘贴到 Weebly 页面的标题部分或将其添加到主样式表中，以便在网站级别有效。 拖放“嵌入代码”元素并添加以下 HTML。
这是一个成功框，用于向您的用户显示任何成功消息！
这是一个信息框，用于向您的用户显示任何信息消息！
这是一个警告框，用于向您的用户显示任何警告消息！
这是一个危险框，用于向您的用户显示任何错误消息！
您的 Weebly 网站上的内容如下所示
这是一个成功框，用于向您的用户显示任何成功消息！
这是一个信息框，用于向您的用户显示任何信息消息！
这是一个警告框，用于向您的用户显示任何警告消息！
这是一个危险框，用于向您的用户显示任何错误消息！
