Нужен ли bootstrap как инструмент для верстки?
Простой 4 комментария
Есть ли вообще смысл в Bootstrap если есть flexbox и CSS Grid?
Типичный вопрос новичка.
Профессиональный рост верстальщика:
1 стадия: бери бутстрап и делай.
2 стадия: бутстрап гавно, есть же флексы!
3 стадия: у меня есть бутстрап и есть флексы. Круто.
Насколько вообще Bootstrap востребован в промышленности)?
Востребован. Вам даже тестовое на нем попросили сделать.
Но у каждой конторы свои требования, и нужно уметь к ним адаптироваться.
1. Есть, обычно в таких конторах на нём все и делают, чтобы потом не сильно запариваться с поддержкой и делать быстрее.
2. Переопределять не нужно, БЭМ и Bootstrap могут жить вместе. Такие вопросы уже задавались, можно поискать. Например: https://github.com/bem-site/bem-forum-content-ru/i.
Есть недостатки у Bootstrap, как и у любого инструмента. На работе чаще всего не приходится выбирать с чем конкретно работать, если уже есть сложившиеся принципы работы. Нужно уметь адаптироваться и вникать в новое, и в «простыни документации».
Итог. Лучше изучите Бутстрап. Сэкономите массу времени и получите сразу всё в одном флаконе.
Вышел Bootstrap 5: оцениваем 7 главных нововведений
Пройдя через несколько альфа- и бета-версий, наконец-то появился Bootstrap 5, на что у разработчиков ушло несколько месяцев. Новая версия претерпела серьезные изменения, включая отказ от поддержки Internet Explorer (IE) и зависимости jQuery. От IE было решено отказаться, потому что браузер занимает всего 3% рынка и его доля продолжает снижаться.
Что такое Bootstrap? Это самый популярный в мире CSS-фреймворк с открытым исходным кодом, который разработан командой Twitter. В v5 внесено сразу несколько критически важных изменений, давайте посмотрим, что там и как.
1. Отказ от jQuery
Больше Bootstrap не поддерживает библиотеку jQuery. Вместо этого команда разработчиков улучшила поддержку библиотеки JavaScript.
В целом, зависимость от jQuery не была в Bootstrap чем-то плохим. Наоборот, появление jQuery радикально изменило способ использования JavaScript. Это упростило написание задач на JavaScript, которые в противном случае требовали бы много строк кода.
Несмотря на эти преимущества, команда решила завершить поддержку. Причина: снижение размера исходных файлов и уменьшение времени загрузки страницы, что делает Bootstrap более перспективным инструментом.
Исходный файл уменьшился на 85 КБ, что очень важно, ведь Google считает фактор времени загрузки страницы для мобильных и веб-сайтов критическим.
При необходимости jQuery все равно можно использовать. Все плагины JavaScript при этом остаются доступными.
2. Настраиваемые свойства CSS
От Internet Explorer отказались, а значит, теперь разработчики могут использовать настраиваемые свойства CSS, как хотят и когда хотят. Проблема IE была в том, что он не поддерживает кастомные CSS.
Всего доступно два типа переменных: корневые и компонентные. Что касается первого класса, то доступ к ним можно получить везде, где загружен Bootstrap CSS. Эти переменные находятся в файле root.scss и являются частью скомпилированных файлов dist. Что касается второго класса, то эти переменные локальны в отдельных компонентах. Они помогают избежать случайного наследования стилей в таких компонентах, как вложенные таблицы.
3. Улучшенная система сеток (Grid)
Поскольку при переходе с 3 на 4 версию возникли некоторые проблемы, v5 сохраняет большую часть системы сеток, а не обновляет ее полностью. Вот некоторые изменения:
4. Улучшенная документация
Разработчики добавили больше информации о фреймворке, в особенности о его настройке. У пятой версии улучшенный внешний вид и усовершенствованная настройка. Вероятно, по сайту, где используется Bootstrap 5, не так легко будет определить, что он применяет эту технологию.
Разработчики добавили больше гибкости в настройку тем, чтобы сайты не были похожими друг на друга. Тему четвертой версии доработали, добавили контент и фрагменты кода для разработки поверх Sass (популярный препроцессор CSS). Пример стартового npm-проекта можно найти на Github.
Расширена и цветовая палитра, пользоваться которой теперь проще. Проделана дополнительная работа по улучшению цветового контраста.
5. Управление формой
Разработчики улучшили элементы управления формой, input groups и прочие компоненты.
В предыдущей версии настраиваемые элементы управления формой использовались в качестве дополнения к дефолтным инструментам браузера. В v5 это отдельная группа элементов управления, включая переключатели, флажки и т.п. Сделано это для того, чтобы придать им одинаковый вид и поведение в разных браузерах.
У новых элементов нет более ненужной разметки, разработчики воспользовались стандартными и логическими функциями.
6. Добавление API-утилит
Здесь разработчики Bootstrap не оригинальны, библиотеки утилит ранее добавили, например, создатели CSS-библиотеки Tailwind CSS.
Для улучшения организации процесса работы некоторые утилиты из версии 4 переместили в раздел Helpers.
7. Новая библиотека иконок
Еще одно приятное нововведение — добавление открытой библиотеки иконок, в которой содержится более 1300 элементов. Поскольку библиотека открыта, пользователи могут модифицировать иконки по своему вкусу.
Поскольку это изображения SVG, их можно быстро масштабировать и модифицировать, а также стилизовать с помощью CSS.
Установить иконки можно при помощи npm:
$ npm i bootstrap-icons
Кое-что еще
Кроме указанных нововведений, команда представила еще несколько:
Bootstrap или свое решение
В сообществе Хекслета иногда возникают жаркие споры на тему использования таких решений, как Bootstrap.
Для справки. Bootstrap — это фреймворк для построения UI, который содержит сетку, множество готовых компонентов и утилит (кстати, не все о них знают, утилиты стали мощным инструментом, начиная с 4 версии).
Эти споры крутятся вокруг трех утверждений:
Bootstrap подходит только для админок
Хекслет и все его сайд-проекты: code-basics.ru, codebattle.hexlet.io, guides.hexlet.io реализованы с помощью Bootstrap. Причем, в основном, это стандартный бутстрап, иногда расширенный с помощью его встроенных механизмов (theming).
Почему мы это делаем?
Процесс разработки, который включает в себя этап дизайна, а следом и верстки, значительно медленнее, чем процесс, в котором интерфейсы создаются из готовых блоков без привлечения дополнительных людей. Думаю, не ошибусь, если скажу, что скорость отличается в разы. По моей оценке, задача на пол дня может выливаться в неделю работы.
Это особенно важно, учитывая, что для современных it-бизнесов наиболее критичная метрика — time to market, то есть скорость, с которой изменения доставляются до пользователей. Быстрые и частые релизы позволяют не тратить время на ненужные вещи и делать только то, что пользователям нужно по-настоящему.
С плюсами понятно, а что насчет минусов? Ведь сайт выглядит не “круто”.
Как показывает практика, влияние дизайна на успешность продукта нередко переоценивается. Более того, на Хекслете происходит ровно наоборот. Сейчас дизайн более стандартный для Bootstrap, чем был в начале 2018 года (у нас была попытка сделать что-то совсем своё), и мы получаем много положительных отзывов:
Но еще большему числу людей это вообще не важно:
Перебрал и попроходил множество курсов, детально или пробно. Hexlet наиболее интересен и продуктивен для меня, поскольку дает обучение не языку, а программированию, даже не программированию, а образу компьютерного мышления. Это более значимо и важно как база для дальнейшего движения, по моему мнению.
Наличие контента и его качества решают
Иногда действительно возникают ситуации, где нам не хватает возможностей Bootstrap. И почти всегда мы переосмысливаем первоначальную задачу так, чтобы она начала укладываться в эти рамки. И только в редких случаях пишем свои стили. Подчеркну еще раз, потому что это ключевая вещь. Мы смотрим, что есть (или будет) в Bootstrap и строим свои интерфейсы, отталкиваясь от него, а не наоборот.
Bootstrap мешает, если нужно кастомизировать
Так действительно было до версии Bootstrap 4, в которой большая часть системы конфигурируется через SASS. И дело не только в наличии сотен переменных для всего подряд, но и в настоящем расширении поведения за счет механизма миксинов. Подробнее тут https://getbootstrap.com/docs/4.3/getting-started/theming/.
Проще и быстрее написать свое
Проще ли написать свое? Конечно! Если у вас стоит задача прямо здесь и сейчас заверстать какой-то кусок, который решает конкретную задачу, то намного проще накидать пару-тройку своих классов и радостно перейти к следующей задаче.
Но у любого решения есть своя цена. В первом приближении все выглядит хорошо, но что если глянуть глубже и дальше?
Проекты редко делаются одним человеком, да еще и frontend-разработчиком. В команде всегда есть хотя бы один-два бекенд-разработчика. Они вполне могут верстать, но вряд ли это любят и обладают экспертными знаниями в верстке.
Как только в проекте появляется своя верстка, то все, кто не принимают участие в ее создании, будут вынуждены ждать тех, кто ее пишет. То есть замедляется time to market. Чем больше верстка заточена под конкретные ситуации, тем меньше возможностей для маневра.
С другой стороны, если верстальщик пытается создать некую систему, которую можно гибко применять, то он так или иначе будет делать свой Bootstrap, только сделает это значительно хуже. Вот неполный список причин, почему это так:
Да, изучение Bootstrap занимает определенное время, к нему надо привыкнуть, разобраться со множеством его утилит и компонентов. Но эти знания не останутся изолированными в том куске кода, над которым прямо сейчас идет работа. Они начнут работать в каждой следующей задаче.
Итого
Начать с React и Bootstrap за 2 дня. День №1
Сразу скажу, что сайт будет быстрее работать, если заменить Bootstrap на чистый CSS и JS. Эта статья про то, как быстро начать разрабатывать красивые web-приложения, а оптимизация это уже отдельный вопрос, выходящий за пределы этой статьи.
Для начала надо хотя бы немного разбираться в HTML, CSS, JavaScript, XML, DOM, ООП и уметь работать в терминале (командной строке).
В этой статье сделаю выжимку минимально необходимого для работы и сделаем такой таймер:
Установка
Для начала нам нужен менеджер пакетов. Я выбрал npm, а он есть в Node.js
Так что первым делом устанавливаете Node.js на свою операционную систему с официального сайта: nodejs.org/en/download. С установкой вы сможете разобраться, так что процесс установки описывать не буду. Отмечу лишь, что под Ubuntu устанавливается просто:
Через терминал проверяем, что Node.js и npm успешно установились:
Если при выводе возникнут ошибки – значит что-то прошло не так и надо разбираться, и возможно переустанавливать их. Если же выведется v c цифрами и точками – то всё хорошо.
Установим Create-react-app, чтобы потом можно было быстро создавать каркасы приложений:
Далее создаём каркас приложения на React. Назовём наше приложение new-app. Если хотите создать приложение папке отличной от пользовательской папки – то сначала через терминал перейдите в неё с помощью команды cd. Итак, в терминале достаточно ввести 3 команды:
Создаём приложение new-app. Переходим в папку new-app. Запускаем приложение. После этих строк должен запуститься браузер с приложением React по адресу http://localhost:3000
Терминал должен остаться открытым, без него не будет открываться страница приложения. Если вдруг закрыли – не беда. Достаточно с помощью команды cd перейти в папку приложения и запустить его командой npm start
Теперь установим Bootstrap
Так же советуют установить к нему зависимости jquery и popper.js, но они нужны только для JS-части Bootstrap. Попробовал без них — CSS-часть Bootstrap нормально работает, так что следующие строки в терминале не обязательны:
Далее надо внести изменения в файлы приложения, для этого переходим в папку new-app, где находится приложение в файл src/index.js добавляем строку, она должна быть первой:
Если будете использовать jQuery, popper.js или JS-часть Bootstrap (модальные окна, анимации и т.д), то потребуется под первой строкой добавить ещё 3 строки:
Теперь осталось запустить проект:
И снова откроется браузер по адресу http://localhost:3000 уже с приложением, облагороженным с помощью Bootstrap:
Так же для отладки React можно установить расширение «React Developer Tools» для браузера. Актуальные ссылки на расширение для Chrome и Firefox и другие варианты использования указаны в официальном репозитории github.com/facebook/react-devtools
Установка и первоначальная настройка на этом завершена.
JSX, компоненты и свойства
Давайте посмотрим, что нам сгенерировал create-react-app — исходные файлы лежат в каталоге src. Во-первых, посмотрим файл index.js – там несколько строчек импорта. По строчкам понятно, что они делают, так что не буду комментировать.
Самая важная строка в этом файле:
В ней рисуется страница приложения. В исходном HTML-файле находится элемент
выводится компонент App, который рисуется функцией render класса ReactDOM. При этом компонент рисуется в форме, похожей на XML, которая и называется JSX (о котором позже).
Теперь перейдём в файл App.js, где находится реализация класса App, который наследуется от класса React.Component.
JSX очень похож на HTML, при этом есть вставки JS-кода в фигурных скобках <>. И обязательно должен быть один корневой элемент, в данном случае
Чтобы лучше разобраться – сотрём весь код метода render(), и напишем простейший компонент:
А теперь вернёмся в файл index.js и исправим
После сохранения файлов – в браузере обновится страница. А теперь будем разбираться.
Концептуально, компоненты подобны JavaScript-функциям. Они принимают произвольные данные (называемые props) и возвращают React-элементы, описывающие что должно появиться на экране. Компоненты позволяют разделить UI на независимые, переиспользуемые части и работать с каждой из них отдельно.
Когда React видит, что элемент представляет собой пользовательский компонент, он передает все JSX-атрибуты в этот компонент единым объектом. Такой объект называется props.
В примере параметр name передаётся в компонент как атрибут тега со значением «Мир». Далее в методе render() класса App в качестве результата функции внутри JSX, который фактически является HTML-шаблоном – в фигурных скобках <> указывается this – текущий класс, props – пользовательский объект, name – название параметра объекта.
Конструктор, жизненный цикл и изменение состояния
Помимо параметров, хранящихся в props можно хранить состояние объекта в state.
Сделаем таймер. Для таймера не нужны параметры, поэтому уберём параметры в index.js:
А теперь в файле App.js заменим весь текст между import и export:
После вставки и сохранения этого кода на странице появится и автоматически запустится таймер.
Давайте разбирать этот код. До класса объявили константу, благодаря которой можно регулировать частоту обновления таймера.
Далее внутри класса идёт обязательный конструктор класса, в который передаётся props. Далее стандартная обработка конструктора родительского класса super(props) и определение состояния value через this – текущий объект. Это единственное место, где можно напрямую установить состояние. В остальных местах доступно только чтение, либо установка состояния специальным методом setState(), который используется в следующем методе increment() для увеличения состояния value на единицу.
В приложениях с множеством компонентов очень важно высвобождать ресурсы, занятые компонентами, когда они уничтожаются. Нам необходимо устанавливать таймер каждый раз, когда DOM отрисовывается в первый раз. В React это называется «монтированием/монтажом». Также нам нужно очищать этот таймер, каждый раз когда DOM, созданный компонентом, удаляется. В React это называется «демонтированием/демонтажём».
Для этого и используются методы componentDidMount() и componentWillUnmount(). В документации эти методы носят название «lifecycle hooks». Мы же будем для простоты называть их методами жизненного цикла. Метод componentDidMount() срабатывает после того, как компонент был отрисован в DOM. Это хорошее место, чтобы установить таймер. Очищать таймер будем в методе componentWillUnmount() жизненного цикла.
Обратите внимание, как мы в componentDidMount() сохраняем ID таймера прямо в this используя стрелочную функцию. В то время как this.props самостоятельно устанавливаются React-ом и this.state имеет определенное значение, вы свободно можете добавить дополнительные поля в класс вручную, если вам необходимо хранить что-нибудь, что не используется для визуального вывода. Если вы не используете что-то в render(), оно не должно находиться в состоянии state.
Далее на время выполнения render() в локальной константе value фиксируется значение состояния value. И далее с помощью математической функции floor(), которая округляет число в меньшую сторону, деления(/) и получение остатка от деления(%) получаем части таймера, которые далее выводим в одну строку после слова Таймер. Можно посмотреть результаты нашей работы.
Оформление с помощью Bootstrap
Не удобно, что таймер работает сразу при обновлении страницы. Хотелось бы, чтобы он запускался и останавливался при нажатии на соответствующие кнопки. А ещё хотелось бы, чтобы он был в центре и крупный.
Начнём с оформления. Для этого в файл App.css добавим следующие строки:
Благодаря встроенному в Bootstrap адаптивно-резиновому контейнеру container-fluid, который помогает создать полностью гибкий макет страницы или некоторого блока. Данный контейнер имеет 100% ширину. Сделаем контейнер flex, с направлением выстраивания элементов по вертикали – чтобы он занял всё пространство и его можно было выровнять по центру.
Теперь доработаем метод render() в App.js, чтобы применить стили Bootstrap и добавить пару кнопок. Для этого заменим возвращаемое методом значение на следующее:
В первой строке к корневому
добавили 2 класса Bootstrap: container-fluid(о котором писал выше) и align-items-center – который как раз и выравнивает элементы контейнера по центру.
с классом display-1 – этот класс как раз для показа крупного текста.
Далее на цифры добавил новый тег — который обычно используется для подсветки клавиш, которые нужно нажать. В данном случае он отлично подходит для контраста показываемых цифр.
В последней цифре, показывающей части секунды добавлено условное выражение, позволяющее для однозначных цифр (
Создание вашего стартапа: использование Bootstrap, Ajax и jQuery
Это руководство является частью серии « Создай свой стартап с помощью PHP» на Envato Tuts +. В этой серии я проведу вас через запуск стартапа от концепции до реальности, используя мое приложение Meeting Planner в качестве примера из реальной жизни. На каждом этапе я буду публиковать код Планировщика собраний в качестве примеров с открытым исходным кодом, из которых вы можете извлечь уроки. Я также буду решать вопросы, связанные с бизнесом по мере их возникновения.
Использование Bootstrap, Ajax и jQuery
Благодаря нашей серии стартапов Meeting Planner и Simple Planner прошли невероятно долгий путь. Недавно я пытался настроить подробные области, чтобы сделать использование сервиса для планирования встреч еще более легким.
Затем я хотел улучшить одну болевую точку, с которой столкнулся при использовании сервиса. Честно говоря, отправление приглашений занимало много времени, предлагая несколько вариантов дат и времени. Каждый раз, когда я отправлял приглашение на собрание для своего собственного стартапа, мне приходилось вручную создавать две или три опции даты / времени — и это было довольно неприятно.
В сегодняшнем эпизоде я расскажу вам, как я упростил планирование встречи с несколькими связанными датами и временем за один шаг. В частности, я опишу, как я использовал Bootstrap, Ajax и jQuery для решения проблемы выбора даты и времени.
Bootstrap упростил разработку этой функции для настольных компьютеров, планшетов и мобильных устройств, а Ajax и jQuery сделали ее быстрой и интерактивной.
Разработка решения
С течением времени, используя Планировщик совещаний, я регулярно хотел создать серию дат и времен подряд, например, следующие три дня в 8:30 или следующие три недели в среду в 19:00. Это просто облегчает график с людьми, когда у вас есть несколько вариантов, когда вы собираетесь встретиться.
Поскольку я углубился в более глубокую доработку пользовательского интерфейса, у меня наконец-то появилось время сосредоточиться на этой проблеме. Прежде чем написать какой-либо код, я решил сделать набросок выше того, что хотел.
Я решил создать повторяющееся количество, например следующие три или пять, и единицу повторения, например часы, дни или недели.
Другими словами, допустим, я приглашаю помощника редактора-дроида Тома Макфарлина на кофе и хочу предложить любое из следующих трех утра, затем я выбираю два и несколько дней, чтобы повторить после моего выбранного дня.
Сохраняя это простым
Я не хотел, чтобы люди всегда сталкивались со сложной формой, просто чтобы запланировать встречу, поэтому я отделил функцию повторения даты и времени ссылкой на дополнительные параметры, показанную ниже. Если дотронуться или щелкнуть эту ссылку, откроется форма, показанная ниже:
Начинаем писать код
Чтобы разработать форму для работы как с настольными, так и с мобильными устройствами, я использовал Bootstrap. По сути, я создал несколько строк для формы с различной шириной столбцов, которые сворачиваются на мобильном устройстве. Давайте посмотрим.