Twitter Bootstrap и css

Twitter Bootstrap – это css-фреймворк. Т.е. набор инструментов для создания блоков, кнопок, меток, форм и навигации. Наше приложение мы будем основывать на этом фрейморке.

Подробнее тут:

https://twitter.github.com/bootstrap/

Установим bootstrap:

Install-Package Twitter.Bootstrap

Удалим Jquery.UI:

Uninstall-Package Jquery.UI.Combined

Добавим в BundleConfig bootstap и уберем оттуда jquery.UI (App_Start/BundleConfig.cs):

public class BundleConfig

{

public static void RegisterBundles(BundleCollection bundles)

{

bundles.Add(new ScriptBundle(" ~/bundles/jquery").Include(

" ~/Scripts/jquery-1.*"));

bundles.Add(new ScriptBundle(" ~/bundles/modernizr").Include(

" ~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle(" ~/bundles/bootstrap").Include(

" ~/Scripts/bootstrap*"));

bundles.Add(new StyleBundle(" ~/Content/css")

.Include(" ~/Content/site.css") /* не перепутайте порядок */

.Include(" ~/Content/bootstrap*"));

}

}

Важно помнить про порядок приоритета задания стилей:

· Наименее низким приоритетом обладают встроенные стили браузера

· Пользовательский стиль в браузере

· Наследуемые стили от родительских элементов

· Следующие css-стили заданные во внешних файлах, тут правило важнее (при прочих равных условиях), если файл содержащий правило находится после файла содержащий предыдущее. Это же правило относится и к взаимному расположению правил внутри документа.

· Далее по стоимости применения селекторов:

o Теги имеют наименьший приоритет:

h1, div, p

o Классы и псевдоклассы. Селектор:

.item { },: hover { }

o Аттрибуты [attr=”value”]. Пример:

[type=”checkbox”] {}

o Идентификатор ID – наивысший приоритет. Типа

#main { }

· Еще более высоким приоритетом является задание стиля прямо в style теге:

< div style=”width: 203px”> < /div>

· И наиболее высоким приоритетом является стиль с сопроводительным словом! important.

Основная работа в задании стилей идет с помощью тегов, классов (псевдоклассов), и атрибутов. Использовать! important не рекомендуется, равно как и задавать стили в атрибуте style и использовать атрибут ID.

Для задания стилей будем использовать css-файл site.css. Так как в bootstrap уже заданы стили для базовых форм, удалим этот блок и оставим файл (Content/Site.css):

/* Styles for validation helpers

-----------------------------------------------------------*/

.field-validation-error {

color: #f00;

}

.field-validation-valid {

display: none;

}

.input-validation-error {

border: 1px solid #f00;

background-color: #fee;

}

.validation-summary-errors {

font-weight: bold;

color: #f00;

}

.validation-summary-valid {

display: none;

}

Это css стили, которые используются для вывода ошибок в методах Html.ValidationMessage(), Html.ValidationSummary().

Теперь давайте определим правила, по которым мы будем создавать свой стиль:

- Запрещено использовать селектор через id, типа #Main. Это связано с тем, что хотя браузеры и обрабатывают все элементы содержащий данный атрибут, но в правилах DOM атрибут ID должен быть уникальный во всей странице.

- Классы для офомления используют тип SmallCaps: some-class-name, все с маленькой буквы, для разделения используется “-”. Собственно, так, как это в самом CSS и используется.

- Классы, предназначенные только для управления (использование исключительно в js-коде) для разделения используют тип lowerCamelCase: someClassName. Собственно, как и соглашения по написанию кода в js или в jquery.

- Атрибуты id задаются типом UpperCamelCase: id=”SomeButton”.

- Не используйте классы общего значения, такие как.list,.item,.button,.text,.user,.image,.container,.wrapper на верхнем уровне.

- Не усложняйте слова. Не используйте конструкцию типа:.main-container-left-part-wrapper-list.

- Задайте популярные стили если необходимо, делайте это в общем описании типа:.error {color: red },.left { float: left }.

- Используйте каскадное описание от общего к частному:

.list

{

}

.list.item

{

}

- используйте селекторы для задания глубины применения стиля

.list >.item

{

}

- и для тегов с множественным классом:

.item.odd

{

}

для

< div class=" item odd" > < /div>

- используйте следующую структуру документа

/* Главные определения стилей для сайта

- основной шрифт

- междустрочное расстояние

- размер шрифта

- основные цвета ссылок и текста

- h1, h2, h3...

- a

- p

*/

/* Вспомогательные классы:

-.error

-.field-validation-error и др.

-.show-me { border: 1px solid red; }

-.hidden {display: none; }

-.relative { position: relative; }

*/

/* Основные вспомогательные окна и стили

-.popup-window

-.popup-window.close

-.popup-window.wrapper

-.popup-window.header

-.error-message

-.info-message

*/

/* Основные стили сайта

- header

-.logo

-.user-login

- nav.main-menu

-.main-content

- footer

*/

/*Главная страница */

/* Страница входа */

/* Страница ошибки */

/* Остальные страницы… */