Как привязать якорь при использовании бутстрапа

Bootstrap добавляет очень хорошие стили по умолчанию для якорей, но это затрудняет использование тега <a> для чего-то другого, кроме синего текста. Скажем, я хочу, чтобы текст был черным. Один из способов сделать это - добавить тег class="my_class" к тегу привязки, а затем поместить правило a.my_class{color:black}.

Но, как скоро я узнаю, что bootstrap добавляет стиль для :hover. Поэтому я тоже должен изменить это. Также он изменяет стили для outline, text-decoration, :focus и т.д.

Конечно, я мог бы просто прочитать unminified версию bootstrap.css и попытаться понять, что все случаи, которые я должен покрыть, чтобы убедиться, что он остается черным. Но я понимаю, что должен быть какой-то более простой способ - я ожидал чего-то вроде добавления class="link-unstyled" или чего-то еще?

ОТВЕТЫ

Ответ 1

Вот живой пример: http://jsfiddle.net/S9JXC/12/ Вы можете создать индивидуальный элемент или группу элементов. В этом случае они переопределяют стили, определенные bootstrap.css, которые загружаются перед этими стилями и имеют приоритет.

Стили, определенные bootstrap.css

a {
    color: #428BCA;
    text-decoration: none;
}

a:hover, a:focus {
    color: #2A6496;
    text-decoration: underline;
}

Пользовательские стили

.style-1 {
    color: red;
}
.style-1:hover, 
.style:focus {
    color: darkred;
}
.style-2 a {
    color: #9F5F9F;
    text-decoration: underline;
}
.style-2 a:hover,
.style-2 a:focus {
    color: #871F78;
}

<a href="#">Link</a><br>
<a href="#" class="style-1">Link with a different style</a>

<div class="style-2">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

Ответ 2

Даже позже на вечеринку, но с более коротким решением для обычных текстовых ссылок (внутри p и т.д.):

.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
  color: inherit;
  text-decoration: inherit;
}

Мои тесты показывают, что при :link все специальные стили при наведении или после нажатия на них удаляются.

Изменить 22.11.2015: :hover по-прежнему необходимо для некоторых случаев использования, например, в следующем фрагменте. Обновлен css выше.

.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
  color: inherit;
  text-decoration: inherit;
}
.bg-menu:hover {
  background-color: #0079C1;
  color: #FFFFFF;
}
.clickable {
  cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="row" style="width:400px;">
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test1-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test1-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test1-3</a>
    </li>
  </ul>
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test2-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test2-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test2-3</a>
    </li>
  </ul>
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test3-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test3-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="link-unstyled">test3-3</a>
    </li>
  </ul>
</div>

Ответ 3

Я опаздываю на вечеринку, но все равно хотел бы предложить альтернативный ответ для решения некоторых вопросов непосредственно из вопроса и предложить свое собственное решение FWIW.

Некоторые общие точки

Я ожидал чего-то вроде добавления class="link-unstyled" или чего-то еще?

Я тоже. Видимо, его там нет.

Конечно, я мог бы просто прочитать unminified версию bootstrap.css [...] Но я понимаю, что должен быть какой-то более простой способ.

Не бойтесь: источник twitter-bootstrap вполне понятен. Посмотрите соответствующие строки в scaffolding.less, которые выглядят следующим образом:

// Links      

a { 
  color: @link-color; 
  text-decoration: none; 

  &:hover, 
  &:focus { 
    color: @link-hover-color; 
    text-decoration: underline; 
  } 

  &:focus { 
    .tab-focus(); 
  } 
}

Таким образом, источник Bootstrap удивил меня: как вы говорите, есть хотя бы :visited, но Bootstrap игнорирует это. Ответ на это можно найти в этом вопросе SO:

поскольку Bootstrap был создан для приложений, он не поддерживает [ :visited]

Имеет смысл. В любом случае, я думаю, нам нужно только переопределить стили Bootstrap, добавив другие псевдоселекторы по своему желанию. Но, как вы говорите в своем комментарии к другому ответу:

как я знаю как разработчика то, что мне нужно "не стирать"?

На самом деле существует короткий список вещей, которые вы должны переопределить, MDN суммируется в статье: hover:

Чтобы создать подходящие ссылки, вам необходимо установить правило: hover после правил: link и: visited, но до: active, как определено LVHA-order:: link -: visited -: hover -:. активный

Это ответ на ваш вопрос: вы знаете из MDN (или если вам нужно: из спецификации W3, которая, конечно же, более авторитарна) - или вы знаете, глядя на этот поток, который вы создали: -.)

Если вы хотите, вы все равно можете установить :active для своего веб-сайта. Который подводит меня к...

Мое решение

На самом деле это решение, на которое вы ссылаетесь в своем вопросе: используйте определенный класс для создания правильных псевдоклассов.

Версия Sass:

$unstyledAColor: #333;
$unstyledAColorHover: #000;
$unstyledAColorInverse: #969696;
$unstyledAColorInverseHover: #FFF;

.a-unstyled {
    color: $unstyledAColor;
    &:link { color: $unstyledAColor; }
    &:visited { color: $unstyledAColor; }
    &:hover { color: $unstyledAColorHover; }
    &:active { color: $unstyledAColor; }
}

.navbar-inverse .a-unstyled {
    color: $unstyledAColorInverse;

    &:link { color: $unstyledAColorInverse; }
    &:visited { color: $unstyledAColorInverse; }
    &:hover { color: $unstyledAColorInverseHover; }
    &:active { color: $unstyledAColorInverse; }
}

версия CSS:

.a-unstyled { color: #333; }
.a-unstyled:link { color: #333; }
.a-unstyled:visited { color: #333; }
.a-unstyled:hover { color: #000; }
.a-unstyled:active { color: #333; }

.navbar-inverse .a-unstyled { color: #969696; }
.navbar-inverse .a-unstyled:link { color: #969696; }
.navbar-inverse .a-unstyled:visited { color: #969696; }
.navbar-inverse .a-unstyled:hover { color: #FFF; }
.navbar-inverse .a-unstyled:active { color: #969696; }

Ответ 4

Пришел к этому, и в то время как ответ Джереена довольно всеобъемлющий, он также довольно длинный.

Если я хочу, чтобы этот ярлык имел нормальный цвет текста ярлыка, мне просто нужны два новых правила CSS.

a.unlink {
  color: inherit;
}
a.unlink:hover {
  color: inherit;
}

Если вы посмотрите на мой фрагмент, вы можете увидеть разницу.

a.unlink {
  color: inherit;
}
a.unlink:hover {
  color: inherit;
}
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'; return false;" rel="stylesheet" />

<span class="label label-primary"><a class="unlink" href="#">Good looking tag</a></span> <-- This looks good
<br />
<span class="label label-primary"><a href="#">Bad looking tag</a></span> <-- This looks bad