Як я можу перезаписати стилі в Twitter Bootstrap? Наприклад, зараз я використовую клас .sidebar, у якому є правило CSS 'float: left;' Як я можу змінити це так, щоб воно перейшло направо? Я використовую HAML та SASS, але порівняно новачок у веб-розробці.
Відповіді:
Додайте власний клас, наприклад:, <div class="sidebar right"></div>за допомогою CSS як
.sidebar.right {
float:right
}
Всі ці поради спрацюють, але більш простим способом може бути включення вашої таблиці стилів після стилів Bootstrap.
Якщо ви включите ваш css ( site-specific.css) після Bootstrap's ( 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 aпісля .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 бали (порахуйте самі). Отже, все, що нам потрібно, - це щось більше, ніж це. Таким чином, я додав спеціальні ідентифікатори до елементів, тобто домашнє меню-контейнер та домашнє меню. Тепер буде працювати наступний 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 при використанні завантажувача!
Скажімо, ось клас заголовка сторінки в завантажувальній системі, який має 40px запас зверху, моєму клієнту це не подобається, і він хоче, щоб це було 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;
}
Зверніть увагу на! Важливо з моїм полем, яке буде замінено поле запасу класу 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 в рейках
Я знаю, що це старе питання, але все-таки я зіткнувся з подібною проблемою і зрозумів, що мій "не працює" код css у моєму bootstrapOverload.cssфайлі був написаний після media queries. коли я перемістив його над медіа-запитами, він почав працювати.
Про всяк випадок, якщо хтось інший стикається з тією ж проблемою