#css #asp.net-mvc-3 #twitter-bootstrap
#css #asp.net-mvc-3 #twitter-bootstrap
Вопрос:
Я хотел бы использовать Bootstrap из Twitter в моем ASP.Net Приложение MVC 3. Я скачал bootstrap.css и добавил его в свой проект в папке Content. Я открыл _Layout.cshtml и добавил ссылку на файл:
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
При запуске приложения таблица стилей не применяется. Как мне ссылаться на Site.css и bootstrap.css из моего файла _Layout.cshtml?
Комментарии:
1. То, что у вас есть, должно работать. Если вы откроете сайт в Firebug и проверите вкладку Net, все ли файлы загружаются?
2. Да, вкладка Firebug Net показывает загрузку обеих. Я изменил порядок расположения двух строк ссылок, после чего все заработало. Если Site.css находится перед bootstrap.css, применяется только bootstrap (чего я сначала не понял). Измените порядок, и обе будут работать. Странно.
Ответ №1:
Я думаю, что проблема здесь в CSS наследования, каскада и специфичности.Имейте в виду, что Bootstrap в Twitter сбрасывает все стили.
‘Если Site.css находится перед bootstrap.css, применяется только bootstrap (чего я сначала не понял). Измените порядок, и обе будут работать. Странно’
На самом деле, это имеет полный смысл. Site.css загружается со всеми объявлениями своих стилей и сразу после этого Bootstrap.css загружается, который сбрасывает большинство (если не все стили), таким образом, будут применены объявления внутри Bootstrap.css . Только кажется, что обе работают, вероятно, потому, что у Bootstrap.css может не быть определенного стиля или Site.css очень специфический стиль, определенный с использованием html-идентификаторов или классов.
Измените порядок в обратном порядке (с Bootstrap.css первым), теперь сначала выполняется сброс всех стилей, а затем применяются другие стили. Поскольку Site.css загружается вторым, стили, определенные в нем, будут применены к вашему сайту.
Для вашего собственного интереса попробуйте определить встроенный стиль в вашем html-документе, который был определен как в ‘Site.css’, так и в ‘Bootstrap.css’, и посмотрите, как стиль применяется путем добавления / удаления определения стиля.
Я попытался найти хорошее поддерживающее объяснение каскадирования CSS, и лучшим графическим и простым объяснением, которое я нашел, было это, в котором отмечается
Если селекторы во внешних и встроенных таблицах стилей конфликтуют, но имеют одинаковую специфику, окончательный тай-брейк основан на порядке появления правил: правило, объявленное позже, выигрывает. Это относится не только к порядку правил на одном листе, но и к порядку, в котором листы связаны, импортированы или встроены в заголовок (X) HTML-страницы.
Ответ №2:
Вы можете скопировать и вставить CSS из файла начальной загрузки в свой единственный файл .css, чтобы сократить количество HTTP-запросов.
Просто поместите весь загрузочный код в самое начало, а затем ваш личный CSS, следующий за ним, для организационных целей.
Однако то, что вы сделали, должно сработать. Можете ли вы опубликовать в JSFiddle пример того, как выглядит ваша разметка?
Для получения дополнительной информации смотрите:
Комментарии:
1. Спасибо. Я не пробовал JSFiddle, но вкладка Firebug Net показывает загрузку обеих. Я изменил порядок расположения двух строк ссылок, после чего все заработало. Если Site.css находится перед bootstrap.css, применяется только bootstrap (чего я сначала не понял). Измените порядок, и обе будут работать. Странно.
2. >> Вы можете скопировать и вставить CSS из файла начальной загрузки в свой единственный файл .css, чтобы сократить количество HTTP-запросов. << Не делайте этого вручную, используйте инструмент вроде squishit, который будет связывать / минимизировать скрипты codethinked.com /…