Как ПРАВИЛЬНО изменять/переоприделять клаcсы bootstrap?

Question

[Nick Bukovskiy]

Здравствуйте. К примеру такая ситуация: при создании навигации(nav) требуеться сделать угли у самой панели "острые" (по молчанию border-radius: 4px). Как это правильно сделать? Я только начал разбираться в bootstrap и не могу понять как. Я изменяю сам код в файлах bootstrap, но он результата нету. Знаю, что !important каждый аз использовать тоже не вариант. Так же видел как просто создавали файл css, туда подключали сам bootstrap и затем переопредиляли. Что из этого правильно и как это делается?

Answer 1

[sergey]

создаете файл custom.css к примеру, и в нем уже переопределяете стили например

.navbar-toggle {
	border: none;
	border-radius: 0;
  }

соблюдаете при этом по очередность подключения файлов, и да много !important - это плохо.
jsfiddle

Comments

[Nick Bukovskiy]

Так не работает, только с !important, а каждый раз писать его, как я понимаю, - плохо

[sergey]

Никита Буковский: значит не верно делаете, у меня к примеру сборка на gulp, подключен к проекту Bootstrap и я в своем файле main.scss правлю стили бутстраповские, и все работает

[sergey]

Никита Буковский: да еще надо соблюдать поочередность подключения css файлов

[Nick Bukovskiy]

SM: Смотрите, я создал стороний файл styles.css. Там написал строку, которую вы мне подсказали написать (.navbar{border-radius: 0;}). Подключил с начала свой css потом уже bootstrap. И если без !important - код не работает

[sergey]

Никита Буковский: странно

[sergey]

Никита Буковский: строку я вам привел как пример, вы же пишите реальный код, возможно там присутствует вложенность

[Nick Bukovskiy]

SM: только что для чистоты эксперимента создал 2 файта: html и css. В html кинул шаблон навигации с официального сайта bootstrap, а в css по-пробовал сделать, как вы посоветовали. Результата нету. Без !important не работает..

[sergey]

Никита Буковский: значит не верно делаете, еще раз говорю, вот смотрите я вам пример сбросил, обратите внимание на изменения стиля гамбургера https://jsfiddle.net/serge_sagan/fr2cu543/

[Nick Bukovskiy]

SM: разобрался, огромное спасибо за помощь!

[sergey]

Никита Буковский: navbar-toogle имеет сейчас красные полоски, можно сделать синие к примеру, но вы у меня important видите?

[sergey]

Никита Буковский: да не за что! удачи!

Answer 2

[T_y_l_e_r]

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

Comments

[Nick Bukovskiy]

Смотрите, если я создаю новый класс в и добавляю его - он будет работать только с !important. А если мне нужно будет переопределить не один метод, а несколько - мне нужно везде дописывать !important? Это не будет "говнокодом"?

[T_y_l_e_r]

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

[AlikDex]

бутстрап это фреймворк. И в его код лезть это нормально. Тем более что даже на сайте есть настройка под себя getbootstrap.com/customize