Необходимо изменять bootstrap.min.css, чтобы добавлять / делать преобладать мои особенные стили?

В проекте в VS2013 интернет-сайта я хочу изменить какие-то признаки рисунка. Изменения, реализованные в bootstrap.css в инспекторе страниц появляются, но напечатав, не появляются сайт. Когда чешутся я открыл, что bootstrap.min.css он также поддерживает данные css, и это те, которые властвуют.

Мои сомнения: Нужно изменять 2 css? Почему находится все в единственной линии? Как нужно действовать?

5
задан 09.03.2016, 17:40
4 ответа

Хорошая практика состояла бы в том, чтобы не изменять первоначальные стили proovedor (vendor), что этот случай - Твиттер с Вашим книжным магазином Bootstra v3.x.

В следующей ссылке (испанце) говорят селекторы CSS и иерархию, которая есть между правилами, чтобы определять, который брать:

Вкратце:

  1. Если существуют равные правила, прими последнее чтение за браузер (в разгрузке наверху для внизу), всякий раз когда у одной из них не было свойства! important.
  2. У правила с большим especificidad есть большее первенство, чем у одной, у которой нет ее.

Рекомендация: Пытайся использовать! important только как последний ресурс.

Заметь: Перед тем, как скроллировать примеры, умственно создай решение (гипотезу) того, что он был бы должен давать как результат.


Пример 1:

Один <div> с несколькими прикладными этикетками цвета (замечать порядок классов и определение правил):

  • Какой цвет покажет текст?.

.rojo { color: red; }
.azul { color: blue; }
.verde { color: green; }
<div class="azul verde rojo">Texto con color.</div>

Пример 2:

Один <div> с несколькими прикладными этикетками цвета (замечать order правил в CSS):

  • Какой цвет покажет текст?.

.verde { color: green; }
.color { color: blue; }
.color { color: orange; }
<div class="color verde">Texto con color.</div>

Пример 3:

Один <div> с несколькими прикладными этикетками цвета (добавленная especificidad в цвет):

  • Какое правило дает больший especificidad, чем оставшаяся часть?.
  • Какой цвет покажет текст?.

div.rojo { color: red; }
.azul { color: blue; }
.verde { color: green; }
<div class="azul verde rojo">Texto con color.</div>
3
ответ дан 24.11.2019, 14:45

Рекомендуемое состояло бы в том, чтобы ты не изменил файл, что ты загрузился из официальной страницы. Прибывает момент, в котором ты не знаешь, каковы твои стили, и каковы оригиналы Bootstrap, и это создает проблемы содержания (особенно, если другой программист пробует оставаться с проектом и пойми, что стили - оригиналы).

То, что ты должен делать, состоит в том, чтобы создавать файл собственного CSS, в котором "sobreescriban" правила Bootstrap, которые ты хочешь изменить. Такой ты поддержишь функциональность Bootstrap, но с твоими изменениями.

Для того, чтобы у твоих стилей было первенство на назначенных по умолчанию стилях Bootstrap, у тебя есть несколько выборов:

  1. Напиши более специфические селекторы. especificidad - метод, который используют браузеры, чтобы решать, какие стили будут применяться, когда есть более одного селектора, определенного для элемента. Они продолжают формулу, которая вычисляет стоимость каждого правила давая больше точек (первенство) в этом порядке:

    • ИДЕНТИФИКАЦИЯ.
    • Классы и псевдо-классы.
    • Селекторы типа и псевдо-элементов.

    Так, если то, что ты хочешь, что один <nav> имейте твои стили вместо стилей Bootstrap, ты можешь помещать ему признак id и (re) определять стили только для этого пойдите.

  2. Используй !important. Когда стиль определяется и добавляют он !important в конце концов, он говорит это ему в браузер, что этот стиль предпочитает на любом другом (он важнее). Например, хотя стиль для div он менее специфический, чем div#azul, будет применяться красный цвет, потому что это свойство приходит с !important:

    <style>
    div {
        color: red !important;
    }
    div#azul {
        color: blue;
    }
    </style>
    <div id="azul">Este texto es rojo</div>
    

    Но глаз использование !important он должен бы быть предотвращенным, потому что она считается плохой практикой, как ты можешь читать в этой статье MDN. Если ты используешь !important везде, прибудь момент, в котором он теряет Ваше чувство и единственное, что он делает, состоит в том, чтобы увеличивать твои файлы CSS и делать их более тяжелыми для того, чтобы читать и для того, чтобы поддерживать.

Так что лично, он выбрал бы первый метод, потому что он чище.

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

6
ответ дан 24.11.2019, 14:45

Файл bootstrap.min.css это "приуменьшенная" версия файла bootstrap.css и он производится автоматически используя инструмент (самое обычное делать это с задания Gulp или Grunt)

То, что обычно делают, состоит в том, что пока оно разработано используется первоначальная версия и в производстве, приуменьшенная версия. Например, основываясь на свойстве HttpContext.IsDebuggingEnabled

Как только это настраивания внешнего вида Bootstrap он рекомендовал бы тебе, что ты используешь страницу Customize. С этой страницы ты можешь конфигурировать много выборов и после загружаешься zip с этими personalizaciones.

Также ты можешь делать то, что комментирует Альваро Монторо, добавляя другой файл css с правилами более специфическими, чем sobrescriben назначенными по умолчанию стилями.

Это очень могущественное, потому что ты можешь украшать главный элемент с классом, который пометил бы "skin", и настраивать на основании ее стили bootstrap

Я храню в архиве html:

<div class="skin-rob">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>
    </div>
    ...
</div>

Я храню в архиве css:

.skin-rob .navbar-default .navbar-brand, .navbar-default {
    background-color: blue;
}

.skin-rob .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    background-color: red;
}

Это изменение способствует тому, чтобы фон "brand" меню был синим обычно и красным, когда - мышь сверху (ты можешь видеть это функционируя в этом JSFiddle)

1
ответ дан 24.11.2019, 14:45

У того же Bootstrap есть выбор, чтобы настраивать стили твоего bootstrap: http://getbootstrap.com/customize/

На эту утилиту ты сможешь менять то, что ты захочешь Bootstrap, и в конце концов производить твои файлы, чтобы использовать в твоем коде. С этим ты не будешь должен изменять вручную произведенный код.

0
ответ дан 24.11.2019, 14:45