Как использовать Bootstrap в Weebly?

Bootstrap – это бесплатная среда с открытым исходным кодом для создания адаптивных макетов с использованием HTML, CSS и JavaScript. Первоначально он был разработан для Twitter, а затем выпущен как проект с открытым исходным кодом на GitHub. Хотя разработать полный макет с помощью Bootstrap несложно, использовать фреймворк с Weebly непросто, поскольку у Weebly есть собственный набор фреймворка для создания макетов страниц. В этой статье мы подробно обсудим, как использовать фреймворк Bootstrap на Weebly, а также как легко использовать элементы Bootstrap в Weebly.

Ресурсы Bootstrap

Полную версию CSS и JavaScript для Bootstrap можно загрузить с getbootstrap.com сайт. Из загруженных файлов вы можете использовать файлы Bootstrap CSS и JavaScript на сайте Weebly:

  • Обычная версия с расширениями bootstrap.css / bootstrap.js
  • Минифицированная версия с bootstrap.min.css / bootstrap.min / js

Мы рекомендуем использовать обычные версии css / js для всех целей тестирования и уменьшенные версии .min.css / .min.js на действующем сайте. Вы также можете просто использовать ссылки CDN с MaxCDN, и эти ссылки доступны на том же сайте getbootstrap.com.

Как использовать это на Weebly?

Что ж, сложно использовать все ресурсы Bootstrap, так как это находится на сайте Weebly, что нарушит существующую тему и приведет к поломке сайта. Что вы можете сделать, так это использовать ссылки CSS и JavaScript в разделе верхнего и нижнего колонтитула определенной страницы, чтобы вам было легче проверять страницу, а не весь сайт для устранения неполадок.

Мы используем ресурсы Bootstrap с нашего собственного сервера для игры с CSS / JavaScript, и ссылки на файлы должны использоваться, как показано ниже:

https://webnots.com/resources/bootstrap.min.css
https://webnots.com/resources/bootstrap.min.js

JavaScript должен быть связан в разделе кода нижнего колонтитула, а CSS должен быть связан с разделом кода заголовка страницы Weebly или на уровне сайта.

Связывание файлов начальной загрузки в Weebly

Связывание файлов начальной загрузки в Weebly

Поскольку Weebly по умолчанию использует скрипт jQuery, связывать его отдельно нет необходимости. В случае, если ожидаемая функция не работает, добавьте приведенную ниже ссылку jQuery в раздел нижнего колонтитула:

Использование элементов Bootstrap

Использование 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-код, чтобы создать элегантные окна уведомлений.

<div class="alert alert-success">This is a success box to display any success message to your users!!!
</div>
<div class="alert alert-info">This is a information box to display any information message to your users!!!
</div>
<div class="alert alert-warning">This is a warning box to display any warning message to your users!!!
</div>
<div class="alert alert-danger">This is a danger box to display any error message to your users!!!
</div>

На вашем сайте Weebly это будет выглядеть следующим образом:

Это поле успеха для отображения любого сообщения об успехе для ваших пользователей !!!

Это информационное окно для отображения любого информационного сообщения вашим пользователям !!!

Это окно с предупреждением для отображения любых предупреждений для ваших пользователей !!!

Это опасное окно для отображения любых сообщений об ошибках для ваших пользователей !!!

Вы можете добавить сообщения об успехе, опасности, информационные или предупреждающие сообщения в любом месте вашего сайта Weebly, просто добавив соответствующие коды CSS / HTML. Это всего лишь один пример, и Bootstrap имеет множество элементов пользовательского интерфейса, которые можно независимо использовать на Weebly или любой другой платформе, если на то пошло.

Использование Bootstrap с иконками Font Awesome

В нашей предыдущей статье мы объяснили, как использовать значки с отличным шрифтом на сайте Weebly, и, приложив немного больше усилий, вы можете легко использовать элементы Bootstrap со значками с потрясающим шрифтом. Опять же, использование всего фреймворка вызовет конфликты с вашей темой Weebly, поэтому вы можете загрузить отличные иконки шрифтов на свой собственный сайт Weebly и использовать их с элементами Bootstrap.

Ниже приведен пример того, как элемент кнопки Bootstrap можно использовать со значком font awesome:

Ознакомьтесь с объявлением !!!

Bootstrap по умолчанию использует глификоны, которые также можно использовать для добавления значков в элементы Bootstrap.

Заключение

Возможности безграничны, и вам может потребоваться время на анализ CSS-файла Bootstrap, чтобы овладеть основами. В Интернете есть множество учебных пособий и примеров, которые вы можете просмотреть через пару дней и сразу перейти к работе, чтобы выделить свой сайт Weebly из толпы с помощью элементов Bootstrap.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *