Могу ли я просто использовать компоненты Bootstraps, а не макет системы

Question

Мое веб-приложение в настоящее время не использует Bootstrap или какой-либо другой фреймворк.Сейчас я смотрю на то, как сделать его более отточенным, и понимаю, что эффект, которого я хочу достичь, очень похож на Bootstrap (т.е. округлые кнопки).

Так что, если я сейчас добавлю Bootstrap на свой веб-сайт, у меня есть два вопроса

1. Оставит ли мой веб-сайт без изменений, пока я не начну ссылаться на компоненты Bootstrap.
2. Могу ли я использовать компоненты Bootstrap без необходимости использовать сеточную систему Bootstrap
3. Можно ли переопределить Bootstrap с помощьюCSS или я должен использовать LESS, который я не понимаю

Answer 1

Q3: вы можете переопределить его с более высокой специфичностью.Это означает, что если вы используете класс btn из начальной загрузки, вы можете добавить свой собственный класс, например my-btn, а затем ссылаться на него в своем CSS как

.btn .my-btn{
    color:#123456;
}

Надеюсь, что это поможет

Answer 2

Q 1. Оставит ли мой веб-сайт без изменений, пока я не начну ссылаться на компоненты Bootstrap.

Ответ: Это полностью зависит от того, какие классы вы использовали в своем HTML. Например, если вы использовали class = "btn" , а затем добавили загрузчик в свое приложение, оно демонстративно попытается переопределить CSS, поскольку Bootstrap определил этот класс в своем файле CSS.

Q 2 . Могу ли я использовать компоненты Bootstrap без необходимости использовать сетку Bootstrap.

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

Q 3 : Могу ли я переопределить Bootstrap с помощью CSS или мне нужно использовать LESS, которого я не понимаю

Ответ : Да, можно. Например Если у вас уже есть класс

`.btn-primary{
        color: #eee;
        background-color: #337ab7;
        border-color: #2e6da4;
        border: 2px solid transparent;
        border-radius: 2px;
    }` in your app.

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

`.btn-primary{
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
        border: 1px solid transparent;
        border-radius: 4px;
    }`
    and overriding  your class.

Итак, вы можете просто использовать ! Important в вашем CSS для атрибута, который конфликтует. Как:

`.btn-primary{
        color: #eee !important;
        background-color: #337ab7;
        border-color: #2e6da4;
        border: 2px solid transparent !important;
        border-radius: 2px !important;
    }`

Теперь движок HTML всегда будет выбирать ваш CSS