Рекомендации по разработке приложений с 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 дает вам отличную отправную точку для многих типов проектов, возможность передать его в дизайнер и скажите «сделай так, чтобы это выглядело причудливо!», чтобы им не пришлось взламывать код. Что наиболее важно, это позволяет вам сначала разработать структуру, а затем обратиться к шрифтам, цветам и причудливым стилям. Потратьте время на изучение того, что он может сделать, и продумайте, как его использовать наилучшим образом, чтобы вы могли быстрее добраться туда, куда хотите.

Похожие

Страница компании в WordPress - это хорошая идея!
... приведены 10 причин, по которым вы должны основывать веб-сайт компании на этой CMS! Причина 1: WordPress бесплатный WordPress - это продукт с открытым исходным кодом поэтому его использование не облагается лицензионными или абонентскими платами. Это большой
Sony Xperia E4
Sony Xperia E4g - это хороший Android-смартфон от Sonya, который предлагает хороший 4,7-дюймовый экран, очень хорошую производительность и поддержку скоростей 4G мобильного интернета для чуть более 1000 кун. Все это, и некоторые
Doogee BL7000
Китайский производитель смартфонов Doogee, кажется, в огне; Компания, которая на несколько порядков меньше, чем крупные бренды, такие как Lenovo, Huawei, Oppo и Xiaomi, выпускает новые модели, как будто завтра не наступит. Поставщик принял нишевый подход с сериями S (для безопасности), серией BL, Mix (без рамки), серией Shoot (для любителей фотографии) и некоторыми другими. После Doogee Mix
Совет по обучению: использование пользовательских шрифтов с Sencha Architect
... или Ext JS. Включение пользовательского шрифта из службы шрифтов Если вы этого не сделали, перетащите тему « По умолчанию» в свой проект (я использовал одно из начальных приложений Sencha Touch). Примените тему по умолчанию, чтобы создать собственное расширение темы. Выберите MyDefaultTheme и нажмите кнопку scss +, чтобы добавить новый фрагмент Sass.
Как улучшить положение магазина в Google или 5 эффективных способов получения ссылок
... и данных клиентов является одной из основных обязанностей владельцев интернет-магазинов, но из моих наблюдений выясняется, что это также одна из наиболее часто пропускаемых проблем (по крайней мере, в начале деятельности по электронной торговле)"> Забота о безопасности данных клиентов является одной из основных обязанностей владельцев интернет-магазинов, но из моих наблюдений выясняется, что это также одна из наиболее часто пропускаемых проблем (по крайней мере, в начале деятельности
... приглашает учителей из-за пределов Варшавы принять участие в тренинге «Азбука искусства или как читать соврем...
... приглашает учителей из-за пределов Варшавы принять участие в тренинге «Азбука искусства или как читать современное искусство». Вот уже несколько лет Zachęta Gallery в сотрудничестве с Варшавским центром инноваций и образования и социальных наук и обучения проводит семинары, которые очень популярны и ценятся для учителей истории искусства, искусства, культурных знаний и польского языка. «Миссия Общества поощрения изящных искусств - группы любителей искусства, которые поддерживают
Как активировать Microsoft Office 2013 или 2016 с помощью KMS Auto Lite
При использовании Microsoft Office необходимо выполнить активацию, чтобы все инструменты можно было использовать правильно.
6 лучших бесплатных приложений для редактирования видео для iPhone и iPad
Реклама Нет необходимости отправляться на Mac или ПК, чтобы создать собственный фильм, используя фотографии, музыку и видео. Поскольку аппаратное обеспечение iOS продолжает становиться все более мощным и приближаться к настоящему компьютеру, появляется множество приложений для редактирования видео, которые позволяют редактировать и создавать видео из разных медиа-файлов. Ниже мы выделяем шесть в основном бесплатных приложений для редактирования видео для вашего iPhone или
Как настроить Chatbot для успеха обслуживания клиентов
... или недели на работе. Более того, чат-боты представляют собой новый способ взаимодействия с клиентами в дополнение к телефонным звонкам или отправке электронной почты. В результате при использовании чат-ботов для обслуживания клиентов нет льготного периода или места для ошибки. Конечно, технология будет работать, но есть способы оптимизировать взаимодействие с клиентами, чтобы они соответствовали ожиданиям и, возможно, даже доставили несколько «вау» моментов. Как бы
PS2 Bios: как играть в игры для Playstation на ПК
... ий подарок тем, у кого мало средств, чтобы купить игровую приставку и играть в свои любимые игры. Если вы не хотите покупать такие дорогие игровые приставки, как PlayStation, то эмулятор поможет вам играть в игры для PlayStation на ПК . Это программное обеспечение, которое позволяет вам играть в игры PlayStation на ПК, не покупая приставки. Эмуляторы читают файлы PS2 BIOS игр PlayStation и используют ваши
Что подарить в подарок вместо цветов?
... приятных моментах намного дольше, чем их "недолговечные кузены из вазы". Однако сейчас цветы обычно являются лишь дополнением к «настоящему подарку». А если не цветы, то что? Альтернативы цветам, как правило, бывают разные. В зависимости от случая. На свадьбе было принято, что вместо цветов можно подарить бутылку вина. В день учителя вместо цветов - шоколадные конфеты.

Комментарии

Хотите специально создать видео для YouTube, Instagram или других социальных сетей?
Хотите специально создать видео для YouTube, Instagram или других социальных сетей? Взгляните на эти отличные приложения для редактирования видео в социальных сетях 7 лучших видеоредакторов для создания постов в социальных сетях 7 лучших видеоредакторов для создания
Конечно, в самом громком случае не возникает вопросов - возможно, это сразу заметят, но сколько из них будет профинансировано и не будет проверено со всех возможных сторон?
Конечно, в самом громком случае не возникает вопросов - возможно, это сразу заметят, но сколько из них будет профинансировано и не будет проверено со всех возможных сторон?
Вы не хотите пропустить больше новостей?
Вы не хотите пропустить больше новостей? Тогда следуйте за нами щебет или стать фанатом facebook , Конечно, вы можете дополнить наше приложение для iPhone и iPad push-уведомлениями здесь бесплатно Или вы хотите обсудить последние продукты с единомышленниками?
А если не цветы, то что?
А если не цветы, то что? Альтернативы цветам, как правило, бывают разные. В зависимости от случая. На свадьбе было принято, что вместо цветов можно подарить бутылку вина. В день учителя вместо цветов - шоколадные конфеты. Для дня матери или бабушки - также конфет или более личного подарка, для которого рассматривается книга - в общем, вам нужно только приложить усилия, чтобы сопоставить автора с получателем. А может, есть другой, более интересный выход? Мы охотно даем
Или действительно, почему нет?
Или действительно, почему нет? Я хотел бы услышать от вас в комментариях. Эта статья была рецензирована Тим Севериен а также Джулио Майнарди , Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
KB: обращают ли покупатели внимание на безопасность, обеспечиваемую сертификатом SSL, или они полагаются на другие факторы (положительное мнение о довольных клиентах, общие данные компании и т. Д.)?
KB: обращают ли покупатели внимание на безопасность, обеспечиваемую сертификатом SSL, или они полагаются на другие факторы (положительное мнение о довольных клиентах, общие данные компании и т. Д.)? А.Д .: Здесь лучшим примером является исследование, предоставленное правительством США ( ссылка ). Они показали, что для
Что мы можем сделать, если мы не знаем JavaScript?
Что мы можем сделать, если мы не знаем JavaScript? Давайте попробуем сделать некоторые математические действия. Консоль будет работать сложение, вычитание, умножение, деление и т. Д. Для этого просто используйте арифметические операторы (+, -, *, /).
Стоит ли выбирать WordPress?
Стоит ли выбирать WordPress? Причин, по которым вы должны основывать свой веб-сайт на WordPress, гораздо больше. Однако перечисленные нами, безусловно, самые важные. WordPress - это не только интуитивно понятное управление и приятный внешний вид веб-сайтов, но также безопасность и поддержка позиционирования веб-сайта, которые чрезвычайно важны для создания
Кто лучше защищает домашний компьютер от вымогателей, зараженных веб-сайтов и других угроз?
Кто лучше защищает домашний компьютер от вымогателей, зараженных веб-сайтов и других угроз? Примечание: лучшие антивирусные сканеры вы можете найти в нашем новом Антивирус Тест 2018 , В этом мы сравниваем 12 комплектов безопасности от Avira до Kaspersky. В последние годы вредоносная сцена стала «насильственной», так что, по крайней мере, она кажется пользователю
Почему бы не попробовать его благодаря 30-дневной гарантии возврата денег?
Почему бы не попробовать его благодаря 30-дневной гарантии возврата денег? ProtonVPN - это VPN из Швейцарии. Программное обеспечение простое в использовании и предоставляет все функции, необходимые для обеспечения безопасности ваших данных как дома, так и в общественных местах. Серверы расположены по всему миру, а поскольку ProtonVPN использует сеть серверов Secure Core, он обеспечивает фантастическую скорость потоковой передачи. Протон позволяет P2P для торрент на некоторых
Это путь в будущее, покупка нового настольного оборудования и инвестирование в структуры поддержки новой ОС, просто поддерживая не ту лошадь?
Это путь в будущее, покупка нового настольного оборудования и инвестирование в структуры поддержки новой ОС, просто поддерживая не ту лошадь? Помимо очевидных соображений безопасности и материально-технического обеспечения (например, какова модель стимулирования работников на поставку самофинансируемого оборудования), BYOD означает значительные инвестиции в другие области. Но скажите, что BYOD полностью исключен из карт по любой причине; не все ли покупают эти новомодные планшеты

KB: обращают ли покупатели внимание на безопасность, обеспечиваемую сертификатом SSL, или они полагаются на другие факторы (положительное мнение о довольных клиентах, общие данные компании и т. Д.)?
Что мы можем сделать, если мы не знаем JavaScript?
Стоит ли выбирать WordPress?
Стоит ли выбирать WordPress?
Кто лучше защищает домашний компьютер от вымогателей, зараженных веб-сайтов и других угроз?
Почему бы не попробовать его благодаря 30-дневной гарантии возврата денег?
Это путь в будущее, покупка нового настольного оборудования и инвестирование в структуры поддержки новой ОС, просто поддерживая не ту лошадь?