![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
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 */
/*Главная страница */
/* Страница входа */
/* Страница ошибки */
/* Остальные страницы… */
|