Как я могу перезаписать стили в Twitter Bootstrap? Например, в настоящее время я использую класс .sidebar с правилом CSS float: left; Как я могу изменить это так, чтобы вместо этого он шел вправо? Я использую HAML и SASS, но относительно новичок в веб-разработке.
Ответы:
Добавьте свой собственный класс, например:, <div class="sidebar right"></div>с CSS как
.sidebar.right {
float:right
} Все эти советы будут работать, но более простой способ - включить вашу таблицу стилей после стилей Bootstrap.
Если вы включите свой css ( site-specific.css) после Bootstrap ( bootstrap.css), вы можете переопределить правила, переопределив их.
Например, если вы включили CSS в свой <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />Вы можете просто переместить боковую панель вправо, написав (в своем site-specific.cssфайле):
.sidebar {
float: right;
}Простите за отсутствие HAML и SASS, я не знаю их достаточно хорошо, чтобы писать по ним учебники.
!importantтом, что вы никогда не сможете отменить его снова в будущем.
Site.cssобъединен, включен в список Bundle.configи физически визуализирован после, bootstrap.css но стили все еще не переопределены. Мне пришлось вынуть site.cssссылку из пакета модернизатора и вручную поместить ее после bootstrap.css(и нажать Ctrl + F5 после отладки, чтобы очистить кеш)
Ответ на это - специфичность CSS. Вам нужно быть более «конкретным» в своем CSS, чтобы он мог переопределять свойства начальной загрузки css.
Например, здесь у вас есть образец кода для меню начальной загрузки:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div id="home-menu-container" class="collapse navbar-collapse">
<ul id="home-menu" class="nav navbar-nav">
<li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
<li><a href="#intro">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">What We Do</a></li>
<li><a href="#process">Our Process</a><br /></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>Здесь нужно помнить об иерархии специфики. Это выглядит так:
Итак, для приведенного выше, если в вашем css есть что-то вроде этого:
.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */Таким образом, даже если вы определили .navbar aafter, .navbar ul li aон все равно будет заменен красным цветом, а не зеленым, поскольку специфичность больше (13 баллов).
Итак, в основном все, что вам нужно сделать, это вычислить баллы для элемента, для которого вы хотите изменить CSS, с помощью элемента проверки в вашем браузере. Здесь bootstrap указал свой css для элемента как
.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
color: #999;
}Итак, даже если ваш css загружается, он загружается после bootstrap.css, который имеет следующую строку:
.navbar-nav li a {
color: red;
}он по-прежнему будет отображаться как # 999. Чтобы решить эту проблему, у бутстрапа есть 22 балла (рассчитайте сами). Так что все, что нам нужно, это нечто большее. Таким образом, я добавил пользовательские идентификаторы к элементам, например, home-menu-container и home-menu. Теперь будет работать следующий css:
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */Готово.
Вы можете обратиться к этой ссылке MDN .
blockquoteстиля в CSS Bootstrap. Как ни странно, это было неправильно для обычных цитат, но выглядело правильно для и <ul> внутри цитаты. Ключом было обновление моего CSS blockquote p, что давало достаточный приоритет. <ul> делал это для другого раздела страницы.
Вы можете перезаписать класс CSS, сделав его «более конкретным».
Вы поднимаетесь по дереву HTML и указываете родительские элементы:
div.sidebar { ... } более конкретен, чем .sidebar { ... }
Вы можете пройти весь путь до BODY, если вам нужно:
body .sidebar { ... } переопределит практически все.
См. Это удобное руководство: http://css-tricks.com/855-specifics-on-css-specificity/
Если вы хотите перезаписать любой CSS при загрузке, используйте! Important
Скажем, вот класс заголовка страницы в начальной загрузке с полем 40 пикселей вверху, моему клиенту это не нравится, и он хочет, чтобы оно было 15 сверху и 10 только снизу.
.page-header {
border-bottom: 1px solid #EEEEEE;
margin: 40px 0 20px;
padding-bottom: 9px;
}Поэтому я добавил класс в свой файл site.css с таким же именем, как это
.page-header
{
padding-bottom: 9px;
margin: 15px 0 10px 0px !important;
}Обратите внимание на! Important с моим полем, которое перезапишет поле поля класса заголовка страницы bootstarp.
Пришел так поздно, но я думаю, что можно использовать другой ответ.
Если вы используете sass, вы действительно можете изменить переменные перед импортом начальной загрузки. http://twitter.github.com/bootstrap/customize.html#variables
Измените любой из них, например:
$bodyBackground: red;
@import "bootstrap";В качестве альтернативы, если нет переменной, доступной для того, что вы хотите изменить, вы можете переопределить стили или добавить свои собственные.
Sass:
@import "bootstrap";
/* override anything manually, like rounded buttons */
.btn {
border-radius: 0;
}Также смотрите: Правильная структура активов SCSS в Rails
Я знаю, что это старый вопрос, но все же я столкнулся с аналогичной проблемой и понял, что мой "неработающий" код css в моем bootstrapOverload.cssфайле был написан после media queries. когда я переместил его над медиа-запросами, он начал работать.
На всякий случай, если кто-то еще столкнется с той же проблемой