ИТ Блог. Создание сайтов с применением Bootstrap
В 2019 году нам так повезло, что у нас есть огромное количество языков программирования и каркасов, таких как React, Vue, Angular и многие другие. Как ни крути, но никогда не было более захватывающего времени для веб-разработчика. В Wibble мы гордимся нашей преданной разработкой для WordPress и нашей командой, которая накопила многолетний опыт разработки, предоставляя нашим клиентам легкий доступ. В этой серии из трех частей я расскажу о том, как стать веб-разработчиком в 2020 году.
Если бы вы были чем-то похожим на нас в начале вашего пути веб-разработки, когда вы начали заниматься созданием сайтов в Астане, вы, возможно, подумали, что такое CSS и как должны изучить все возможные варианты, которые есть в его библиотеке. Мы довольно быстро освоили основы HTML; Даже довольно хорошо разбирались в PHP, но CSS всегда был запоздалой мыслью. Честно говоря, как правило, ответ всегда таков, чтобы учиться, нужно время и много практики.
Это не будет каким-то монологом о том, что такое Bootstrap и его основы. Вместо этого мы бы предпочли поговорить о вопросе, который многие разработчики задают в 2020 году. Является ли Bootstrap актуальным? Мы бы соврали, если бы сказали, что мы находимся выше Bootstrap здесь, на Wibble, как и каждый наш веб-сайт. Сотни тем WordPress используют Bootstrap, почему наши должны отличаться? Исследования W3Techs показывают, что 19,6% веб-сайтов, работающих сегодня, используют Bootstrap. 19,6% могут показаться очень немногими, но, по данным Mill for Business, по состоянию на январь этого года в мире насчитывалось 1 518 207 412 веб-сайтов. Теперь 19,6% все еще кажется небольшим количеством?
Мы сосредотачивались больше на эффектах Bootstrap со скоростью сайта. Способ кодирования Bootstrap вызывает слишком много раздувания? Что касается размера файла, то так же просто, если не проще, связать Bootstrap через ссылку CDN, а не с физическим файлом в каталоге вашего сайта, но с каждым сокращением есть последующий минус и в данном случае это латентность. Для пользователя, получающего доступ к вашему сайту с высокой задержкой, это может привести к сценариям загрузки сайта без его библиотеки CSS, что станет худшим кошмаром для каждого веб-разработчика. Сайт без стиля! Мы бы предпочли использовать физическую библиотеку в этом случае, но какой размер файла и размер он на самом деле создает? Решили провести этот тест для себя.
Для начала мы хотели создать простую статическую страницу с заголовком и адаптивной настройкой карты 1 x 3. Для тех, кто достаточно разбирается в Bootstrap, вы будете знать, что у них есть предустановленный класс карт, так что это не может быть легче сделать. Bootstrap использует flex и используя структурированную разметку строк и столбцов HTML, вы можете настроить отзывчивость карт. Кажется, супер легко, верно? Это потому, что вы берете это на себя с практикой.
Но что, если бы был способ еще больше уменьшить объем HTML-кода, необходимого для настройки гибкого макета. При разработке масштабных проектов уменьшение объема необходимого кода не только экономит размер файла, но и экономит разработчику при написании кода значительное время. К счастью, в CSS есть ответ, Grid! Зачем использовать HTML-структуру строк и столбцов, которая требуется Bootstrap, если вы можете сделать все это самостоятельно с помощью одной строки кода. С помощью сетки вы можете просто указать, что ваши столбцы реагируют на все в одной строке, а не возиться с медиа-запросами.
.card {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
Приведенный выше фрагмент кода действует так же, как структура col в Bootstrap, без указания точек разрыва. Он просто заполняет столько содержимого, сколько может, в длину строк, прежде чем начать новую строку.
Используя сетку, мы скопировали тот же макет страницы, который создал, используя Boostrap, с половиной кода. Это, в свою очередь, резко уменьшает размер файла и общий размер проекта.
Размер файла примерно в 23 раза меньше без использования Bootstrap. Это только создание простого одностраничного примера, теперь представьте разницу в размерах проекта с многостраничным веб-сайтом!
Как показано в наших тестах, структура кодирования Bootstrap вместе с основными файлами может в некоторых случаях превышать размер файла в 23 раза. С точки зрения веб-разработчика это может привести к длительному времени загрузки сайта. В этом примере мы использовали CSS-grid в качестве альтернативы, но ярлыки редко возникают без последствий, и в этом случае это поддержка браузера. Вы и многие другие, вероятно, используете такие браузеры, как Chrome, Firefox и т. д., Но по-прежнему существует большая база пользователей, которые все еще пользуются Интернетом с помощью IE (Internet Explorer). К сожалению, следствием этого ярлыка является отсутствие поддержки IE, и, поскольку Microsoft отходит от IE, поддержка может не появиться в ближайшее время.
Ну так что ты делаешь? Если вы читаете это как начинающий веб-разработчик, который ищет ключ к разгадке тайны CSS – Bootstrap – отличная отправная точка. Замечательно помочь вам быстро и профессионально создавать профессионально выглядящие веб-сайты с минимальными знаниями CSS, но не ставьте Bootstrap на пьедестал как на конечную цель. Мы показали увеличение размера файла, которое это может вызвать, и, если честно, ваша единственная половина веб-разработчик без базовых знаний CSS. Используйте Bootstrap, чтобы расширить свои знания о свойствах CSS.
<div class="container">
<div class="row">
<div class="col-sm">
Одна колонка
</div>
</div>
</div>
Наша альтернатива; Мы предоставляем поддержку для всех браузеров, включая IE11. Мы используем Bootstrap Grid на всех наших сайтах. Он использует контейнер Bootstraps, укладку рядов и столбцов без дополнительного багажа. Это позволяет нам создавать профессиональные веб-сайты, поддерживающие все браузеры без увеличения размера файла. У вас может быть совершенно другой взгляд на эту тему, и мы хорошо осведомлены о более современных CSS-фреймворках, таких как Materialise, но, на наш взгляд, ДА! Bootstrap по-прежнему актуален.
(1 оценок, среднее: 5,00 из 5)
Загрузка...
