Аришан

Как используется на реальных проектах bootstrap ?

Рекомендованные сообщения

Здравствуйте. Я начинающий верстальщик. Посмотрел вакансии какие требуются знания для того чтобы стать HTML-верстальщиком, и одним из требований который присутствует в практический каждой вакансии это bootstrap. Начал читать документацию  bootstrap'а понял как он работает но все же остались вопросы которые я хотел бы тут задать и получить на них ответ от специалистов в данной сфере.

И эти вопросы актуальны не только для bootstrap но и для остальных CSS framework'ов (faunadation, semantic UI, skeleton и т.д.)

1. Первый момент который я не понимаю это как в bootstrap использовать готовые стили, ведь они никак не подходят к моему макету ? (перезаписывать, а это правильно, или же все стили которые есть в bootstrap переписывать в самом framework'е, опять же это правильно, так нормальные разработчики делают ?);
2. Предположим что у меня несколько видов карточек на сайте, и первый вид то что есть в bootstrap'e я уже использовал и мне нужно еще несколько видов таких же карточек в итоге мне их нужно создать самому так как первый вид что было в bootsrap я уже использовал ?
3. Так же в вакансиях требуют знание bem'а и тут я не понимаю как верстать в bootstrap'e по bem'у  ведь там совсем нет логики в наименованиях классов(как на практике такое делается)?
4. JS как я понял если мне нужен слайдер или еще что то из интерактивности я просто использую готовое решение от boostrap'a (а на практике так и делают?) ?

С сеткой вроде все понятно.
  

И объясните пожалуйста (если Вам не сложно), как могут быть использоваться эти css framework'и на практике, и к чему мне готовится, так как они много возможности дают хотелось бы знать варианты их применения.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Здравствуйте.

  1. Собирайте стили из исходников (SCSS) или перезаписывайте своими поверх стилей фреймворка
  2. Используйте модификаторы "class=".card card_modificator""
  3. БЭМ — это методология, которая помогает грамотно выстраивать именование классов, писать универсальный самодокументируемый код. БЭМ + Bootstrap отлично совмещаются вместе если придерживайся одно стандарта написания.
  4. Да, на практике так и делают. Но не обязательно использовать скрипты Bootstrap, так как они имеют базовый минимальный требуемый набор возможностей. В действительности, как правило, требуются более сложные решения

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
7 часов назад, klierik сказал:

Здравствуйте.

  1. Собирайте стили из исходников (SCSS) или перезаписывайте своими поверх стилей фреймворка
  2. Используйте модификаторы "class=".card card_modificator""
  3. БЭМ — это методология, которая помогает грамотно выстраивать именование классов, писать универсальный самодокументируемый код. БЭМ + Bootstrap отлично совмещаются вместе если придерживайся одно стандарта написания.
  4. Да, на практике так и делают. Но не обязательно использовать скрипты Bootstrap, так как они имеют базовый минимальный требуемый набор возможностей. В действительности, как правило, требуются более сложные решения.

  

Спасибо за ответ. 
У меня еще остались вопросы: 
1. Получается когда пишут в вакансиях знание bootstrap это не означает что в проектах будет использоваться все что есть в bootstrap а только то что нужно верстальщику на его усмотрение, и это касается и для других css framework'ов, я не заблуждаюсь сейчас ? (теперь ясно почему их такое количество).  
2. С БЭМ не совсем понятно. Я прочитал и знаю на данный момент только часть методологии БЭМ (только наименование классов), и мне нравится эта методология, но не совсем понятно как использовать в связке с bootstrap, там ведь классы написаны не по БЭМу, получается нужно переписать boostrap для БЭМа ?
3.

Цитата

"Собирайте стили из исходников (SCSS) или перезаписывайте своими поверх стилей фреймворка"

- Перезаписывать я так понимаю нужно взять тот же класс bootstrap'а и задать новый стиль, а за это проверяющий не "поругает" ? 
- scss знаю а вот как из исходников собирать не совсем понял.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
16 часов назад, Аришан сказал:

1. Получается когда пишут в вакансиях знание bootstrap это не означает что в проектах будет использоваться все что есть в bootstrap а только то что нужно верстальщику на его усмотрение, и это касается и для других css framework'ов, я не заблуждаюсь сейчас ? (теперь ясно почему их такое количество).  

Когда я провожу собеседования, то ожидаю что бы кандидат хорошо знал инструмент и умел им пользоваться. Это не значит что всё-всё что есть в Bootstrap будет использоваться в одном проекте, но в недолгих, сумарно, очень может быть.

16 часов назад, Аришан сказал:

2. С БЭМ не совсем понятно. Я прочитал и знаю на данный момент только часть методологии БЭМ (только наименование классов), и мне нравится эта методология, но не совсем понятно как использовать в связке с bootstrap, там ведь классы написаны не по БЭМу, получается нужно переписать boostrap для БЭМа ?

Нет, не нужно. Можно использовать классы фреймворка только для его компонентов, а всю остальную часть проекта на базе БЭМ. Любой другой разработчик который знает и то и другое сможет читать и понимать код.

16 часов назад, Аришан сказал:

- Перезаписывать я так понимаю нужно взять тот же класс bootstrap'а и задать новый стиль, а за это проверяющий не "поругает" ? 

Ревьювер не будет ругать за внесение изменений (так как другого способа нет) в стили элемента путём их переписывания (overwrite). Такое делается постоянно (на пример для изменения состояний).

16 часов назад, Аришан сказал:

- scss знаю а вот как из исходников собирать не совсем понял.

SCSS — это не CSS. Вам следует использовать препроцессор что бы преобразовать SCSS в CSS. Значит Вы можете внести изменения в исходники (SCSS) и получить требуемый результат.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
6 часов назад, klierik сказал:

Когда я провожу собеседования, то ожидаю что бы кандидат хорошо знал инструмент и умел им пользоваться. Это не значит что всё-всё что есть в Bootstrap будет использоваться в одном проекте, но в недолгих, сумарно, очень может быть.

Нет, не нужно. Можно использовать классы фреймворка только для его компонентов, а всю остальную часть проекта на базе БЭМ. Любой другой разработчик который знает и то и другое сможет читать и понимать код.

Ревьювер не будет ругать за внесение изменений (так как другого способа нет) в стили элемента путём их переписывания (overwrite). Такое делается постоянно (на пример для изменения состояний).

SCSS — это не CSS. Вам следует использовать препроцессор что бы преобразовать SCSS в CSS. Значит Вы можете внести изменения в исходники (SCSS) и получить требуемый результат.

О спасибо что смогли найти время ответить на мои глупые вопросы, что бы я без Вас делал. 
Я прочитал что Вы проводите курсы по повышению квалификации, можно узнать примерную цену ?

 

Теперь я работаю через Gulp и npm и папка boostrap-scss находится в папке node_modules (который разумеется в удаленный репозиторий Git'а не попадает) и получается я не могу изменить исходники в boostrap-scss в папке node_modules так как другой разработчик не получит их в таком случае мне как быть, как будет правильнее ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
2 часа назад, Аришан сказал:

Я прочитал что Вы проводите курсы по повышению квалификации, можно узнать примерную цену ?

В данный момент курс полный. Если хотите я дам Вам знать когда будет следующий набор.

2 часа назад, Аришан сказал:

Теперь я работаю через Gulp и npm и папка boostrap-scss находится в папке node_modules (который разумеется в удаленный репозиторий Git'а не попадает) и получается я не могу изменить исходники в boostrap-scss в папке node_modules так как другой разработчик не получит их в таком случае мне как быть, как будет правильнее ?

У Вас есть 2 варианта:

  1. Вынесите исходники в проект из node_modules/ (нормальная ситуация)
  2. Ознакомьтесь со статьей, в которой описан процесс как гибко использовать Bootstrap в проекте

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Статистика пользователей

    46 176
    Всего пользователей
    3 128
    Рекорд онлайна
    argotel
    Новый пользователь
    argotel
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.



  • Спрашивают сейчас

  • Пишут сейчас

    • Здравствуйте, предлагаем наши услуги хостинга с защитой от DDOS и без защиты
      Мы рады предложить Вам наш хостинг argotel.ru
      Стабильность, качество, виртуальное гостеприимство – это наш конек. Используем гибкие условия, для максимального комфорта – мощные серверные процессоры, SSD диски, защита от DDOS.
      Мы предоставляем тестовый период, есть возможность moneyback.
      Подберем тарифы индивидуально под каждого, выделим IP любого количества.
      Базовое администрирование бесплатно, для каждого клиента! Защищенные тарифные планы:
      Тариф Минимальный: 1 x (2.6 GHz*), RAM 512 МБ, SSD 10 ГБ, защита от DDOS - 390 руб/м
      Тариф Стандарт: 2 x (2.6 GHz*), RAM 1024 МБ, SSD 15 ГБ, защита от DDOS - 459 руб/м
      Тариф Стандарт+: 3 x (2.6 GHz*), RAM 2048 МБ, SSD 30 ГБ, защита от DDOS - 710 руб/м
      Мощные тарифы с защитой от DDOS:
      Тариф MAX1: 4 x (2.60 GHz*), RAM 4 ГБ, SSD 120 ГБ, защита от DDOS - 1850 руб/м
      Тариф MAX2: 6 x (2.60 GHz*), RAM 6 ГБ, SSD 180 ГБ, защита от DDOS - 2499 руб/м
      Тариф MAX3: 8 x (2.60 GHz*), RAM 10 ГБ, SSD 240 ГБ, защита от DDOS - 3799 руб/м Незащищенные тарифные планы:
      Тариф Меркурий: 2 x (2.7 GHz*) , RAM 1024 МБ , SSD 30 ГБ - 349 руб/м
      Тариф Марс: 3 x (2.7 GHz*) , RAM 3072 МБ , SSD 40 ГБ - 600 руб/м
      Тариф Юпитер: 4 x (2.7 GHz*) , RAM 8192 МБ , SSD 50 ГБ - 950 руб/м
      Ссылка на тарифную сетку: прямая ссылка на тарифы Подойдет под прокси, VPN, парсинг и другие приложения. Размещение в Москве, но будете приятно удивлены сюрпризом для прокси и VPN.
      Кроме этого, дарим скидку 50% на любой сервер VPS/VDS, на первый месяц для новых клиентов.[
      Промокод: ARGOTEL-NEW Промо-акция оплати сервер VDS/VPS за 6 месяцев, получи + 6 месяцев в подарок.
      Улучшили связность в СНГ на тарифах: Меркурий, Марс, Юпитер. По необходимости, можно добавить большие подсети на сервера /24-/21
      Принимаем: Без. расчет , Яндекс, Webmoney, BTC, Paypal, Qiwi , Visa-Mastercard-Мир. Email: info@argotel.ru, Telegram: @infosaleargotel
      Сайт: https://argotel.ru
    • Если это сайт не какой-то существующей компании, у которой уже есть логотип, а сайт сам в себе, или же компания создаётся вместе с сайтом, то, мне кажется, цвета сайта ни под что можно не подгонять, а наоборот подогнать логотип под сайт. Добавить логотип в вёрстку — это же не проблема, если только у него не окажутся совсем странные размеры, типа 500x20, а там уже место под меню размечено.
    • когда начинаете тащить свой блок внутри родителя вы должны знать: координаты блока (top,left) и размеры блока (width,height) и родителя (parent_width,parent_height)
      зная эти данные вы можете вычислить left+width<=parent_width и top+height<=parent_height
      а также left>=0 и top>=0
      если left или top меньше 0, то принудительно выставляете его в 0
      аналогично для параметров больше parent_width  и parent_height
  • Лучшие авторы