Как переписать стили в Twitter Bootstrap

126

Как я могу перезаписать стили в Twitter Bootstrap? Например, в настоящее время я использую класс .sidebar, который имеет правило CSS: float: left; Как я могу изменить это, чтобы вместо этого перейти вправо? Я использую HAML и SASS, но относительно новичок в веб-разработке.

Теги:

8 ответов

43
Лучший ответ

Добавьте свой собственный класс, например: <div class="sidebar right"></div>, с CSS как 

.sidebar.right { 
    float:right
}
Поделиться
  • 1
    Не очень хорошая практика: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes
  • 2
    @DamjanPavlica Честно? Вы все еще заботитесь о IE 6? Не говоря уже о том, что, как мне кажется, начальная загрузка использует цепочку.
232

Все эти советы будут работать, но более простым способом может быть включение вашей таблицы стилей после стилей 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, я не знаю их достаточно хорошо, чтобы писать учебники в них.

Поделиться
  • 0
    А как насчет стилей "-responsive.css"? Могут ли они быть перезаписаны таким же образом?
  • 7
    @ClaudiuConstantin Я не вижу причин, почему бы и нет. Эмпирическое правило: второй стиль всегда превосходит первый, если два имеют одинаковый уровень специфичности. Пока ваш стиль придет после того, как он переопределится.
Показать ещё 14 комментариев
57

Ответ на это - спецификация CSS. Вам нужно быть более "конкретным" в вашем CSS, чтобы он мог переопределять свойства bootstrap 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>

Здесь вам нужно запомнить иерархию специфики. Это происходит следующим образом:

  • Дайте элемент с указанным идентификатором 100 баллов
  • Дайте элемент с классом, указанным 10 баллов
  • Дайте простой элемент одиночный 1 пункт

Итак, для вышеуказанного, если у вашего 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 пункта (подсчитайте сами). Так что все, что нам нужно, это нечто большее. Таким образом, я добавил пользовательские идентификаторы к элементам, например home-menu-container и home-menu. Теперь будет работать следующий css:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

Готово.

Вы можете ссылаться на эту ссылку MDN.

Поделиться
  • 4
    это должен быть принятый ответ.
  • 1
    Что если они связаны?
Показать ещё 3 комментария
20

Вы можете перезаписать класс CSS, сделав его "более конкретным".

Вы поднимаете дерево HTML и указываете родительские элементы:

div.sidebar { ... } более специфичен, чем .sidebar { ... }

Вы можете пройти весь путь до BODY, если вам нужно:

body .sidebar { ... } будет отменять практически все.

См. это удобное руководство: http://css-tricks.com/855-specifics-on-css-specificity/

Поделиться
  • 0
    На самом деле это лучший ответ
9

Вы можете просто убедиться, что ваш файл css анализирует ПОСЛЕ boostrap.css, например:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/myFile.css" rel="stylesheet">

Поделиться
6

Если вы хотите перезаписать любой css при загрузке, важно!

Скажем, вот класс заголовка страницы в бутстрапе, который имеет верхний край на 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;
}

Обратите внимание на важность! с моим пометкой, которая перезапишет маржу поля класса заголовка bootstarp.

Поделиться
  • 0
    классно! это то, что я хочу. Спасибо
  • 2
    Обратите внимание, что использование! Important - это своего рода анти-шаблон. Узнайте больше здесь: james.padolsey.com/css/dont-use-important
3

Произошло это поздно, но я думаю, что он мог бы использовать другой ответ.

Если вы используете sass, вы можете фактически изменить переменные перед импортом bootstrap. 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

Поделиться
2

Я знаю, что это старый вопрос, но все же я столкнулся с подобной проблемой, и я понял, что мой "нерабочий" код css в моем файле bootstrapOverload.css был записан после media queries. когда я переместил его выше медиа-запросов, он начал работать.

На всякий случай кто-то сталкивается с той же проблемой

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню