TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Начало работы с Bootstrap

56

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

Пользователи и разработчики могут начать работу с веб-сайтом с помощью трех инструментов:

  • Самостоятельные системы управления контентом с открытым исходным кодом, такие как WordPress.org, Drupal и Joomla.
  • Бесплатные хостинговые платформы, такие как WordPress.com, Weebly и Wix.
  • Независимые фреймворки пользовательского интерфейса (UI), такие как Bootstrap и Google Material Design.

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

Начало работы с Bootstrap

Изучить Bootstrap

Что такое Bootstrap?

Bootstrap – одна из популярных фреймворков пользовательского интерфейса, доступных на данный момент. Это интерфейсный фреймворк, созданный с помощью HTML, CSS и JavaScript без участия серверных скриптов, таких как PHP. Первоначально он был разработан Twitter под названием «Twitter Blueprint» для улучшения согласованной видимости на различных устройствах и инструментах. Позже он был переименован в Bootstrap и выпущен как проект с открытым исходным кодом в августе 2011 года.

Bootstrap – один из популярных проектов, доступных на GitHub, с более чем 100 тысячами звезд. Самая последняя информация о выпусках и обновлениях Bootstrap доступна на официальном сайте getbootstrap.com. Популярность Bootstrap со временем возрастает благодаря подходу, ориентированному на мобильные устройства, и легкому преобразованию тем Bootstrap в популярные темы управления контентом, такие как WordPress. Существуют также популярные конструкторы сайтов Bootstrap, такие как Mobirise, чтобы запустить ваш сайт без навыков программирования.

Версии Bootstrap

В таблице ниже показано обновление версии Bootstrap, это на момент написания этой статьи V4 alpha 6.

Версия Дата Значительные перемены
Версия 1 19 августа 2011 г. Открытый исходный код
Версия 2 31 января 2012 г. Основное обновление с сеткой из 12 столбцов и глификонами.
Версия 3 19 августа 2013 г. Плоский дизайн и мобильный подход.
Версия 4 19 августа 2015 г. Значительное обновление классов CSS, использование Sass и удаление глификонов, удаление tether.js и добавление popper.js.
Версия 5 05 мая 2021 Без jQuery, значков Bootstrap, нового логотипа и поддержки RTL.

Общее использование

На данный момент стабильной версией является Bootstrap 5.01, и вам необходимо перейти на последнюю версию, если вы используете более ранние версии 3 или 4. Поэтому, если вы разрабатываете сайт, который будет скоро опубликован, в идеале вам следует использовать стабильную версию 5.01. Конечные пользователи могут напрямую загрузить предварительно скомпилированные файлы CSS / JS и использовать их на своем сайте. Загрузите версию 3.4.1 здесь, V4.6 здесь и V5.01 здесь. Если вы разрабатываете проекты для клиентов или для себя, вы можете загрузить полный исходный код с файлами Sass с GitHub.

Примечание. Установка Bootstrap на ПК с Windows или macOS – сложная задача, поскольку она имеет множество зависимостей. Короче говоря, на вашем компьютере должны быть установлены Node.js и NPM вместе с Grunt для компиляции. Кроме того, вы можете использовать Harp.js для создания статических файлов сайта с использованием частичных файлов или включений.

Лицензия

Файлы Bootstrap распространяются по лицензии MIT с одним требованием, поскольку информация об авторских правах должна сохраняться во всех исходных файлах Bootstrap.

Сохраняйте лицензию и уведомление об авторских правах в файлах CSS и JavaScript Bootstrap, когда вы используете их в своих работах.

Вы можете просмотреть всю лицензию на GitHub.

Запуск вашего сайта

У вас есть два способа начать создавать свой сайт с помощью Bootstrap. Первый – это загрузка и размещение файлов CSS и JS на вашем хостинг-сервере, а второй – использование ссылок CDN. Мы рекомендуем создать начальный шаблон, а затем начать использовать все компоненты Bootstrap внутри начального шаблона. Вы можете получить более подробную информацию в разделе начальных шаблонов Bootstrap 5.

Ниже приведены ссылки CDN для использования на вашем сайте:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Убедитесь, что вы последовательно используете Popper, а затем файл Bootstrap JS, в противном случае вы можете использовать один связанный файл сценария, который включает сценарий Popper. Точно так же добавьте любые пользовательские таблицы стилей CSS после CSS Bootstrap, чтобы они не имели приоритета над определениями фреймворка. Bootstrap 5 использует border-box для свойства box-sizing, что может повлиять на макеты. Вы можете изменить это на content-box, если это необходимо только для определенных элементов, объявив встроенный CSS.


Изучите Bootstrap 5 (индекс )


Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее