Переопределить равные классы начальной загрузки для использования bootstrap css?

У меня есть проект MVC4 с классом global.css, и я добавил недавно bootstrap, но результат в моем классе global.css у меня есть несколько классов с одинаковым именем, поэтому я решил сделать bootstrap_migration.css, где я поместил некоторые из классов начальной загрузки, префикс класса .bt, и в моем html я положил что-то вроде class="bt container", и все работает нормально.Переопределить равные классы начальной загрузки для использования bootstrap css?

Что-то вроде этого на моем bootstrap_migration.css:

.bt .jumbotron { 
    padding: 30px; 
    margin-bottom: 30px; 
    font-size: 21px; 
    font-weight: 200; 
    line-height: 2.1428571435; 
    color: inherit; 
    background-color: #eeeeee; 
}

Но у меня есть лучший способ сделать это?

источник

2013-12-12 Phoenix_uy

2 способа: 1. включить css, который вы хотите применить в последнем или 2. использовать! важно переопределить – Godinall

Вы говорите, что все работает нормально, так что вы спрашиваете? Я понимаю, что вы ищете «лучший» способ, но что еще вы пробовали. Насколько хорошо вы понимаете CSS. – Jacques

Я не хочу, чтобы сделать класс bootstrap_migration.css ... это боль, вот почему я спрашиваю :) –

Вы не должны оставлять пространство в классах. она должна быть

.bt.jumbotron

редактировать: .bt .jumbotron означает, что .jumbotron является дочерним .bt и не относятся к одному элементу.

источник

2013-12-12 13:39:04 scooterlord

.bt.jumbotron

Просто не оставляйте пробелы между классами.

Пространства между классами означают, что это ребенок другого.

источник

2013-12-12 13:43:33

Хорошо .. я должен это сделать. Но мой вопрос направлен на то, чтобы не делать этого вообще. Я имею в виду .. использовать исходный css bootstrap и my global.css :) –

Тогда используйте! Важно в вашем css, чтобы вы могли использовать их вместе с их загрузкой. [ссылка] (http://css-tricks.com/when-using-important-is-the-right-choice/) –

Добавить новый файл css, например "booststrap-custom.css", и включить его после! ваш bootstrap.css в заголовке html.

Пример:

<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootrstrap-custom.css" />

Затем вы можете переопределить любые классы начальной загрузки, не касаясь файла bootstrap.css простым копированием определения элементов в пользовательский файл и переопределить пользовательские attributs там.

Firebug - очень полезный инструмент для копирования элемента, который вы хотите изменить.

Пример:

Если у вас есть bootstrap.css и содержит:

.jumbotron { 
    padding: 30px; 
    margin-bottom: 30px; 
    font-size: 21px; 
    font-weight: 200; 
    line-height: 2.1428571435; 
    color: inherit; 
    background-color: #eeeeee; 
}

И вы просто хотите переопределить отступы, например, вы вставить это в ваш самозагрузки-custom.css

.jumbotron { 
    padding: 30px; 
}

и вуаля, все готово!

Таким образом, вам не нужно и никогда не должны касаться оригинала bootstrap.css

источник

2013-12-12 14:46:48 Steini

Вы можете настроить загрузочный файл более легко, если вы используете источник начальную загрузку. less (который can be downloaded here, используя Download source code link)

Использование LESS вы можете вложить классы, так что вы можете применить изменения ко всем afected классов более легко. И вы можете сделать много дополнительных настроек очень легко.

Если вы добавите Web Essentials extension в свою Visual Studio, этот файл будет обновляться всякий раз, когда вы его редактируете.

Остальное решение не может быть лучше сделано лучше, чем вы это делаете.

источник

2013-12-12 15:31:55 JotaBe

Переопределить равные классы начальной загрузки для использования bootstrap css?

ответ

Смежные вопросы