Bootstrap Framework — лучшие практики | Кодементор

На момент написания этой статьи мы находились в Начальная загрузка v4.1.1 выпускать!
В своей дорожной карте v5 они планируют переписать все с PostCSS. Когда это произойдет, это руководство станет устаревшим. А пока наслаждайтесь!

Это руководство было обновлено, чтобы отразить последние изменения Начальная загрузка v4.1.3. Есть серьезные изменения, касающиеся scripts.

Введение

На данный момент, я думаю, что все слышали о Начальная загрузка рамки. В конце концов, это самый популярный интерфейсный CSS-фреймворк. У него есть несколько вариантов использования, и не все используют его должным образом.

Присоединяйтесь, и давайте посетим их официальный сайт и обсудим это вместе оттуда.

На официальном сайте мы видим две огромные кнопки, которые сразу вылезают из глаз.


Две огромные кнопки от официальных Начальная загрузка Веб-сайт

Начать

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

С самого начала мы ясно видим, что нам предлагают включить некоторые фрагменты CSS и JS. Нам также предоставляется возможность использовать HTML-шаблон для быстрого старта. Шаблон уже содержит фрагменты CSS и JS.

Для новичков начальный шаблон также может быть удобен, чтобы узнать, куда включать фрагменты кода CSS и JS.

Скачать

Здесь мы также можем увидеть несколько вариантов. Давайте рассмотрим их немедленно.

  • Возможность загрузки скомпилированных файлов CSS и JS

Если вы выберете этот вариант, у вас будут файлы локально. Затем вы можете решить, хотите ли вы использовать минифицированные или неминифицированные файлы, и включить выбор в свой проект. Этот вариант предназначен для прототипирования, и это хорошо, если вы считаете, что у вас не будет подключения к Интернету во время разработки.


  • Возможность загрузки исходных файлов CSS и JS

Этот вариант требует дополнительных инструментов… Если вы уже знакомы с некоторыми исполнителями задач или упаковщиками, скорее всего, у вас уже есть собственная конфигурация. Вы бы не хотели использовать их настройку инструментов, просто чтобы иметь возможность использовать исходные файлы. Вы также не хотите копировать/вставлять исходные файлы в свой проект…


  • Возможность включения файлов из CDN

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


  • Возможность вытащить его с помощью NPM

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


  • Есть варианты RubyGems, Composer и NuGet.

Я не знаком с RubyGems или NuGet. Хотя я считаю, что NuGet — это менеджер зависимостей для .NET framework? Если так, то это звучит как хороший вариант. Только, пожалуйста, не используйте Composer в качестве менеджера зависимостей для Bootstrap. Это просто странно… Composer — это менеджер зависимостей PHP, а Bootstrap — это не бэкенд-фреймворк, и он не имеет ничего общего с PHP. Вместо этого используйте NPM…


При всем сказанном я должен упомянуть, что Bootstrap предоставляет 3 файла из коробки, и его можно использовать для:

  1. Прототип или производство
  2. Сброс (их расширение Нормализация.css)
  3. Сетка

*Обратите внимание, вам не нужно включать весь Bootstrap Framework, просто чтобы иметь возможность использовать их сброс или сетку. Они идут отдельными файлами…

Лучшие практики

Теперь, когда я подготовил вас и объяснил каждый вариант, который предлагает Bootstrap, давайте углубимся. Я предполагаю, что вы знакомы с использованием SASS и уже используете какую-то настройку инструментов. Для этого нам также понадобится NPM…

Лично я использую Webpack и не буду писать здесь, как настроить вашу собственную конфигурацию, но я научу вас, как настроить вашу структуру для правильного использования Bootstrap CSS и JS. Какова цель этого руководства…

Нам нужно установить некоторые зависимости проекта…

npm init -y && npm i bootstrap jquery-slim popper.js

Обычно структура моего проекта выглядит так. Там больше, но я упростил это для этой цели.

.
├── src
│ ├── scripts
│ │ ├── app
│ │ │ └── .gitkeep
│ │ ├── vendor
│ │ │ ├── bootstrap.js
│ │ │ └── jquery.js
│ │ ├── app.js
│ │ └── vendor.js
│ ├── styles
│ │ ├── app
│ │ │ ├── _base.scss
│ │ │ └── _variables.scss
│ │ ├── vendor
│ │ │ └── bootstrap
│ │ │ ├── _core.scss
│ │ │ ├── _main.scss
│ │ │ └── _variables.scss
│ │ ├── app.scss
│ │ └── vendor.scss
│ └── index.html
├── package.json
└── webpack.config.js

Пришло время объяснить, почему именно так и чего можно достичь с помощью такой структуры…

Давайте сосредоточимся на каталоге стилей в начале, а после перейдем сразу к каталогу скриптов.


Стили

Внутри этого каталога у нас есть один каталог для приложение и еще один для продавец. У нас также есть два файла с именами, соответствующими этим каталогам.

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

В нашем app.scss файл, мы включаем ядро ​​​​Bootstrap и особенности нашего приложения… Таким образом, это будет выглядеть так:

[@import]( "Twitter profile for @import") 'vendor/bootstrap/core';

[@import]( "Twitter profile for @import") 'app/variables';
[@import]( "Twitter profile for @import") 'app/base';

Взгляните сейчас на стили/приложение каталог. У нас всего два файла, так что особо нечего сказать, но все же позвольте мне описать эти файлы…

  • Базовый файл — это место, где вы должны написать любой стиль. Может быть, чтобы продлить Нормализация.css перезагрузить.
  • Файл переменных — это место, где вы записываете свои переменные приложения.

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

[@import]( "Twitter profile for @import") 'vendor/bootstrap/main';

Взгляните сейчас на стили/поставщик/бутстрап каталог. Позвольте мне описать эти файлы внутри…

  • Core, импортирует наши файлы пользовательских переменных и три основных файла Bootstrap. Без этих файлов сам фреймворк вообще бы не работал.


Наш стили/поставщик/бутстрап/_core.scss файл

  • Основной файл импортирует наш пользовательский основной файл вверху, а затем остальные файлы Bootstrap SASS из node_modules каталог. В Webpack у нас есть этот знак тильды ~ что указывает на node_modules. Это выглядело бы примерно так…

Вам следует всегда комментировать (не удалить)строки компонентов, которые вы не используете в своем проекте.


Наш стили/поставщик/бутстрап/_main.scss файл

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

Как вы знаете, в Bootstrap есть !default флаг для каждой переменной. Таким образом, вместо той, которую определил Bootstrap, будет использоваться любая ранее определенная переменная.


Скрипты

Мы хотим сделать скрипты модульными, чтобы мы включали только те компоненты, которые нам нужны в нашем проекте. С Bootstrap это не так просто, как должно быть… У них есть документация для этого, но даже после прочтения у меня было столько проблем с реализацией.

ОБНОВЛЕНИЕ: ссылка на документацию предназначена для Bootstrap v4.0. На момент написания этой статьи мы использовали версию 4.1.1, а в версии 4.1.3 нам больше не требуется exports-loader для нашего сборщика. Наконец-то они написали свои компоненты JavaScript, немного лучше. Я обновлю руководство, чтобы отразить эти изменения, старый подход будет удален из руководства.

Я поделюсь с вами тем, как это сделать и сэкономлю вам много времени…

Мы начнем с скрипты /vendor.js так как этот файл просто импортирует файлы из нашего ./vendor/ каталог.


Наш скрипты /vendor.js файл

Мы присоединяем jQuery к объекту окна. Это необходимо, иначе Bootstrap не сможет скомпилироваться, потому что не знает, что такое jQuery. Нам это также нужно, если мы планируем использовать jQuery где-либо еще в нашем приложении.


Наш скрипты/поставщик/jquery.js файл

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


Наш скрипты/поставщик/bootstrap.js файл

Имейте в виду, что Утилита модуль требуется везде, кроме Кнопка а также Трещать составная часть.

Вывод

Что мы получаем от этого? В одном коротком предложении:
Вся мощь Bootstrap во всем нашем проекте.

Говоря о SASS… Мало того, что наш Bootstrap будет скомпилирован в отдельном продавец файл, но, извлекая основные функции Bootstrap, мы также получаем доступ к функциям, миксинам и переменным повсюду в нашем приложение.

Говоря о JS… Мы получили продавец в отдельный файл и все модульно. Мы можем получить необходимый минимум, исключив то, что не используем в проекте.

Взгляните на некоторые примеры!

Примеры SCSS


Мы можем использовать миксины Bootstrap во всем нашем приложении.


Мы можем использовать любое значение переменной Bootstrap по умолчанию и комбинировать его


JS-пример


Мы можем создавать экземпляры любых компонентов Bootstrap внутри нашего скрипты/app.js

Заключительные примечания

Так как может быть немного сложно понять все из контекста… Возможно, будет проще понять это лучше, изучив рабочий пример.

Взгляните на мой Конфигурация Webpack v4 на GitHub, где реализована вся эта логика.

Кроме того, я хотел бы упомянуть, что Bootstrap работает над некоторые из лучших практик себя, что они собрали за годы разработки и использования. На данный момент ничего не видно…

До скорого

Первоначально опубликовано на Medium

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

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

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