Вопрос по twitter-bootstrap, customization, css – Twitter Bootstrap Custom CSS включение

1

При использовании пользовательского css вместе с Twitter Bootstrap, который перезаписывает некоторые стили, лучше ли размещать пользовательскую ссылку css до или после css, реагирующего на загрузку?






или же





и каковы плюсы и минусы каждого?

Если я отредактирую заполнение тела после bootstrap-responseive.css следующим образом:




/* Add padding for navbar-top-fixed */
body {
  padding-top: 60px;
  padding-bottom: 40px;
}

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

/* Fix to remove top padding for narrow viewports */
@media (max-width: 979px) {
  body {
    padding-top: 0;
  }
}

Ваш Ответ

2   ответа
7

Обычно лучше размещать свой собственный CSS после Bootstrap CSS. Я'Представь, что тыВы хотите, чтобы пользовательский CSS переопределял Bootstrap CSS.

Преимущества размещения пользовательских стилей после Bootstraps заключаются в том, что вы можете изменить все, что установлено в Bootstraps CSS, используя те же селекторы, что и они. Делая это очень легко изменить мелочи. Если вы используете тот же селектор, то браузер будет использовать последние правила, примененные к элементу.

Я могу'на самом деле не вижу каких-либо преимуществ размещения Bootstrap CSS после вашего пользовательского CSS, это недействительно имеет смысл написать свои собственные стили, а затем переопределить их с помощью Bootstrap 's ...

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

<link href="framework.css" rel="stylesheet" type="text/css">
<link href="custom-styles.css" rel="stylesheet" type="text/css">

Затем вframework.css у вас было следующее:

div.row {
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 50px;
    padding: 15px;
}

Но потом вы поняли, что хотите добавить красный фон (почему ...) и изменить радиус границы, вы можете получить следующее:custom-styles.css

div.row {
    background-color: red;
    border-radius: 10px;
}

Результирующий CSS, примененный к элементу, будет таким:

div.row {
    background-color: red;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 50px;
    padding: 15px;
}

Потому что стили изcustom-styles.css переопределить существующие вframework.css и дополнительные тоже применяются! :)

Реагирует ли он так, как вы хотите, если вы размещаете адаптивный CSS после вашего собственного CSS? Seer
Я согласен на 100% с размещением пользовательского css после bootstrap.css, но мой вопрос больше относится к bootstrap-responseive.css. Если я, например, изменяю заполнение тела после bootstrap-responseive.css, я должен добавить дополнительные медиазапросы, чтобы исправить то, что я сломал. Я отредактирую вопрос, чтобы быть более понятным. TheGwa
Если вы собираетесь вносить изменения в стили, как это, добавляя пользовательские стили, вы 'Также придется добавить пользовательские стили для обработки адаптивного представления, этоЭто лишь часть работы по поддержанию адаптивного дизайна. Использование адаптивного CSS означает, что вам нужно добавить больше CSS для учета каждой роли, ноя никак не могу обойтисьБоюсь. :( Seer
0

что если вы поместите style.css поверх, тогда загрузочные стили переопределят его. Если вы поместите style.css снизу, то стили начальной загрузки будут переопределены вашими пользовательскими стилями.

Похожие вопросы