在Weebly中添加Bootstrap

本教程介绍如何在 Weebly 中使用 Bootstrap。 Bootstrap 是一个免费的开源框架，用于使用 HTML、CSS 和 JavaScript 构建响应式布局。通过其了解有关 Bootstrap 的更多信息文档。

Bootstrap 框架的完整 CSS 和 JavaScript 可以从以下位置下载 getbootstrap.com 网站。

如何在 Weebly 中使用 Bootstrap

像使用 Weebly 一样使用整个 Bootstrap 资源是相当困难的。它可能会扰乱现有的 Weebly 主题并导致网站崩溃。

可以在特定页面的页眉和页脚部分使用 CSS 和 JavaScript 链接，以便您可以轻松检查该页面而不是整个网站以进行故障排除。

JavaScript 将链接到页脚代码部分，CSS 将链接到 Weebly 页面或网站级别的页眉代码部分。

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 网站上的内容如下所示

这是一个成功框，用于向您的用户显示任何成功消息！

这是一个信息框，用于向您的用户显示任何信息消息！

这是一个警告框，用于向您的用户显示任何警告消息！

这是一个危险框，用于向您的用户显示任何错误消息！

在Weebly中添加Bootstrap