Рекомендации по разработке приложений с Bootstrap

  1. Понимание Bootstrap
  2. 7 самых распространенных ошибок стиля
  3. 2. При изменении размера шрифта
  4. 3. При очистке поплавков или принуждении элементов к самоочищению своих детей
  5. 4. При убийстве .row классовые поля
  6. 5. При отстегивании или вставке неупорядоченных списков и других элементов
  7. 6. При определении размера кнопок
  8. 7. При перемещении и выравнивании предметов вправо или влево
  9. Не настраивайте основные файлы платформы напрямую
  10. Шаблоны, Темы и Плагины
  11. AngularJS
  12. ReactJS
  13. Джанго
  14. Джекил
  15. WordPress
  16. Материал Дизайн
  17. Заключение

Bootstrap - одна из лучших и наиболее часто используемых клиентских сред HTML / CSS / JS. Почти любой веб-разработчик, который сделал сайт или два, слышал об этой популярной структуре. Предлагая так много готовых компонентов и ресурсов, Bootstrap может значительно ускорить разработку вашего приложения.

Предлагая так много готовых компонентов и ресурсов, Bootstrap может значительно ускорить разработку вашего приложения

Лучшие практики для ускорения разработки приложений с помощью Bootstrap

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

Я лично работал с этой платформой в течение последних 4 лет на 90% моих проектов. В этой статье я хотел бы поделиться с вами несколькими советами, которые помогут вам ускорить разработку ваших приложений, не упуская при этом некоторые потрясающие возможности Bootstrap.

Понимание Bootstrap

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

Посвятите час чтению документации на сайте Bootstrap или узнайте больше из отличного поста в блоге Toptal, Что такое Bootstrap? Краткое руководство о том, что, почему и как. И, отличная статья Bootstrap 3 Советы и хитрости, которые вы, возможно, не знаете на scotch.io.

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

Окунитесь в структуру страницы и узнайте, как создаются макеты.

<div class = "container"> <div class = "row"> ... </ div> </ div>

… Измените размер окна вашего браузера или используйте Chrome Viewport Resizer, чтобы узнать больше об утилитах медиазапроса.

/ * Очень маленькие устройства (телефоны, менее 768 пикселей) * / / * Нет медиазапроса, так как это по умолчанию в Bootstrap * / / * Небольшие устройства (планшеты, 768 пикселей и выше) * / @media (min-width: @screen -sm-min) {...} / * Средние устройства (рабочие столы, 992px и выше) * / @media (min-width: @ screen-md-min) {...} / * Большие устройства (большие рабочие столы, 1200px и выше) * / @media (min-width: @ screen-lg-min) {...} @media (max-width: @ screen-xs-max) {...} @media (min-width : @ screen-sm-min) и (max-width: @ screen-sm-max) {...} @media (min-width: @ screen-md-min) и (max-width: @ screen-md -max) {...} @media (min-width: @ screen-lg-min) {...}

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

<div class = "row"> <div class = "col-sm-7 col-md-9 col-xs-6"> Левый столбец </ div> <div class = "col-sm-5 col-md- 3 col-xs-6 "> Правая колонка </ div> </ div>

Взгляните на W3Schools, где вы найдете полная ссылка на Bootstrap всех классов CSS, компонентов и плагинов JavaScript - все с примерами «Попробуйте сами»:

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

Узнав больше о компонентах Bootstrap, вы сможете избежать вздутия таблиц стилей.

Это особенно важно при работе в команде из нескольких разработчиков. Убедитесь, что вы в конечном итоге не пишете тонны дублированного кода, создавая слишком много стилей для одного и того же случая каждый раз, снова и снова при переводе новых дизайнов в код. Сохранение разработки пользовательского интерфейса согласованным и хорошо документированным с помощью руководств по стилю пользовательского интерфейса может также добавить пару узлов к продуктивной командной работе. Кроме того, вы обнаружите, что при добавлении новых функций или страниц в ваше приложение вы будете двигаться вперед с меньшим разочарованием. Я принимал участие в более чем дюжине крупных проектов, и для сравнения я видел несколько случаев, когда фреймворк буквально взламывался, и каждый раз, когда добавлялся новый код CSS, он нарушал пользовательский интерфейс на других страницах. Было бы довольно утомительно проходить весь сайт и исправлять ошибки такого типа. Не только это, подумайте о стоимости и всех деньгах, потраченных на дополнительное время разработчика и помощь в обеспечении качества.

7 самых распространенных ошибок стиля

1. При центрировании текста или div

Если вам нужно центрировать div и / или контент, вы можете использовать один из следующих классов:

Использовать текст-центр

<p class = "text-center"> Я в центре текста </ p>

... или центральный блок

<div class = "center-block"> Я в центре текста </ div>

не .центр или <центр>

2. При изменении размера шрифта

Если вам нужны меньшие или большие шрифты, вы можете использовать один из этих классов:

<p class = "lead"> Я больше текста абзаца. </ p> <p class = "small"> Я меньше текста абзаца. </ p>

Если вам нужны заголовки большего или меньшего размера, не забывайте о .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Используйте это так:

<h1 class = "h2"> Меньший заголовок с .h2 </ h1> <h3 class = "h1"> Большой заголовок с .h1 </ h3> <h4 class = "small"> Меньший заголовок с .small </ h4 >

3. При очистке поплавков или принуждении элементов к самоочищению своих детей

Нет необходимости создавать классы, такие как .clear, вы всегда можете использовать вместо него .clearfix Bootstrap.

<div class = "clearfix"> ... </ div>

4. При убийстве .row классовые поля

Просто используйте .clearfix вместо определения ваших собственных стилей (или, что еще хуже, с использованием встроенных стилей):

<div class = "clearfix"> ... </ div>

5. При отстегивании или вставке неупорядоченных списков и других элементов

Удалите стиль списка по умолчанию и оставьте поле на элементах списка. Это относится только к непосредственным дочерним элементам списка. В случае, если вам нужно применить то же самое для вложенных списков, вам также необходимо добавить имя класса в них.

<ul class = "list-unstyled"> <li> ... </ li> </ ul> <ul class = "list-inline"> <li> ... </ li> </ ul>

Точно так же для флажков или переключателей у нас есть .checkbox-inline и .radio-inline .

И вы всегда можете добавить .form-inline к вашим формам (который не обязательно должен быть <form> ) для элементов управления с выравниванием по левому краю и блоком inline-block.

6. При определении размера кнопок

Необычные кнопки больше или меньше? Добавьте .btn-lg , .btn-sm или .btn-xs для дополнительных размеров.

7. При перемещении и выравнивании предметов вправо или влево

Плавающий элемент влево или вправо с классом. Важно, чтобы избежать проблем со спецификой. Классы также можно использовать как миксины с любым препроцессором CSS.

Используйте .pull-right , .pull-left , .text-right , .text-left вместо .right , .left , .left-float , .right-float .

<div class = "pull-left"> ... </ div> <div class = "pull-right"> ... </ div>

Простое выравнивание текста по компонентам с помощью классов выравнивания текста.

<p class = "text-left"> Выровненный по левому краю текст. </ p> <p class = "text-right"> Выровненный по правому краю текст. </ p>

Не настраивайте основные файлы платформы напрямую

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

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

Однако, если вы начинаете или работаете над большим сайтом с несколькими или более разработчиками - лучше держать вещи разделенными и хорошо организованными. Переместите файлы фреймворка за пределы основной пользовательской папки CSS и сохраните ее в неизменяемой папке без версии и удалите неиспользуемый CSS с помощью плагинов Grunt или Gulp grunt-uncss или gulp-uncss. Другая альтернатива, чтобы держать это отдельно, состоит в том, чтобы обслужить это через CDN. Отдельный и не тронутый код фреймворка дает вам лучший и более быстрый вариант при обновлении до последней версии. Это также помогает минимизировать ряд проблем, связанных с масштабируемостью и стилем, или замедляется при внесении дополнений с быстрыми непрерывными изменениями пользовательского интерфейса.

Используйте инструменты скаффолдинга, такие как Yeoman или Slush, и менеджеры пакетов, такие как Bower, Python's pip, Node's NPM или Ruby Gems, поскольку они делают гораздо больше, чем просто добавляют файлы к пути вашего приложения. Я действительно ценю силу Бауэра - он определенно может сделать немного больше, чем просто скачать файл или два. Использование менеджера пакетов - хорошая идея, поскольку, скорее всего, сложность вашего проекта будет расти, а количество сторонних плагинов и способы их обслуживания станут безумными и отнимающими много времени. Bower поможет вам отслеживать каждый плагин и его зависимости, включая все, что связано с Bootstrap.

Популярность Bootstrap сопровождается множеством полезных ресурсов: статьи, учебные пособия, сторонние плагины и расширения, шаблоны, конструкторы тем и так далее. Поэтому, ищите ли вы вдохновение или фрагменты кода, у вас будет все необходимое для ускорения вашего прогресса.

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

Ниже вы найдете список полезных ресурсов для начала:

Шаблоны, Темы и Плагины

Официальные темы от создателей Bootstrap: themes.getbootstrap.com ,

Торговые площадки с премиальными темами и шаблонами Bootstrap: wrapbootstrap.com , themeforest.net , creativemarket.com/themes/bootstrap ,

Бесплатные темы и шаблоны начальной загрузки: startbootstrap.com , www.bootstrapzero.com , shapebootstrap.net/free-templates ,

«The Big Badass List» - список из 319 полезных ресурсов Bootstrap: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI написанный на чистом AngularJS командой AngularUI.

ReactJS

Реагировать-Bootstrap библиотека многократно используемых компонентов интерфейса Вы получите внешний вид Twitter Bootstrap, но с гораздо более чистым кодом, через фреймворк React.js в Facebook.

Джанго

Интеграция Bootstrap 3 с Django: https://github.com/dyve/django-bootstrap3

Джекил

Джекил-Bootstrap является полноценной платформой для блогов на основе Jekyll.

WordPress

WordPress стартовая тема Sage с современным внешним интерфейсом разработки. Основано на HTML5 Boilerplate, gulp, Bower и Bootstrap.

Материал Дизайн

Материал Дизайн для Bootstrap это тема для Bootstrap 3, которая позволяет использовать новый Google Material Design в вашей любимой интерфейсной среде.

Заключение

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

Это экономит вам много часов / дней работы при разработке и написании потрясающего пользовательского интерфейса. Каждый компонент и плагин тщательно документированы с живыми примерами и блоками кода для более легкого использования и настройки. Настоятельно рекомендуется многими Разработчики и очень популярен как для прототипирования, так и для производства. Это очень хороший инструмент для создания мобильных адаптивных сайтов. Bootstrap дает вам отличную отправную точку для многих типов проектов, возможность передать его в дизайнер и скажите «сделай так, чтобы это выглядело причудливо!», чтобы им не пришлось взламывать код. Что наиболее важно, это позволяет вам сначала разработать структуру, а затем обратиться к шрифтам, цветам и причудливым стилям. Потратьте время на изучение того, что он может сделать, и продумайте, как его использовать наилучшим образом, чтобы вы могли быстрее добраться туда, куда хотите.