Первое, с чего начинается изучению любого фреймворка или библиотеки в веб-разработке - это вопрос его подключения к текущей веб-странице, на которой он должен использоваться.
Этот этап является обязательным, чтобы приступить к работе.
В этом видео мы рассмотрим самый простой и удобный способ, как вы можете подключить библиотеку Bulma к вашей веб-странице. Мы с вами будем использовать так называемые CDN сервера.
CDN - это просто удаленные сервера, которые постоянно включены и на которых располагаются файлы нашей библиотеки, в данном случае библиотеки Bulma, и которые мы просто подключаем к нашей веб-странице.
Самое главное удобство этого способа в том, что подключение библиотеки происходит очень быстро и удобно. Но, у этого способа есть ряд недостатков, о которых мы позже поговорим.
Чтобы подключить фреймворк Bulma с помощью CDN, сначала нужно узнать ссылку, по которой веб-страница будет получать доступ к этой библиотеке.
Для этого мы можем открыть любую поисковую систему (например, Google) и набрать ключевую фразу "CDN bulma" и первое, что мы получим в выдаче - это тот сайт, на котором находятся ссылки на эту библиотеку.
Вот этот сайт:
https://cdnjs.com/libraries/bulma
Если необходимо, чтобы библиотека максимально быстро загружалась, нам понадобиться ссылка с окончанием min.css.
В этом файле удалены все пробелы, переносы строк, ненужные символы и.т.д. Этот файл максимально сжат для того, чтобы он занимал меньше всего места и как можно быстрее загружался.
Если вы хотите просматривать исходный код и скорость загрузки страницы пока не имеет особого значения, вы можете воспользоваться полной версией библиотеки (ссылка, которая оканчивается на bulma.css).
И для того, чтобы подключить эту библиотеку к веб-странице, нам понадобиться всего-лишь один элемент, который будет располагаться внутри раздела <head> html документа.
Сделать это можно с помощью элемента link.
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Пробный документ</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css"> </head> <body> </body> </html>
Первым признаком того, что стили Bulma подключились, будет являться то, что измениться шрифт текста на веб-странице.
Чтобы окончательно убедиться, что все подключилось и работает можно создать какой-нибудь элемент:
<a class="button">Кнопка</a>
Способ подключения стилей CSS с помощью CDN-серверов удобный, но самый главный недостаток использования такого способа заключается в том, что вы зависите от этого удаленного сервера. Если там произошел какой-то сбой, то все стили на вашей веб-странице "полетят".
Использование CDN ссылки создает дополнительную нагрузку при загрузке веб-страницы. Браузеру приходится обращаться не только к вашему серверу, но также ему приходиться обращаться к удаленному серверу. Это лишние запросы, дополнительное время загрузки веб-страницы. В итоге, скорость загрузки веб-страницы падает.
Третий значительный недостаток использования CDN в том, что мы не можем пользоваться препроцессорами SASS. Библиотека Bulma интегрирована с этим, вы можете работа с переменными, гибко настраивать внешний вид Bulma. Этих возможностей у вас не будет при использовании CDN.
Но, для цели того, чтобы просто познакомиться с этой библиотекой, посмотреть, какие у нее есть возможности, что она умеет делать, этот вариант вполне подходит.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти