На моей индексной странице я хочу, чтобы цвет текста h1 был белым и имел тень, но я не хочу изменять поведение по умолчанию h1 на других страницах. Как я могу достичь этого?
С помощью Twitter Bootstrap, как я могу настроить цвет текста h1 на одной странице и оставить другие страницы по умолчанию?
Ответ 1
Вы можете добавить свой собственный идентификатор или класс в тег body вашей индексной страницы, чтобы таргетировать все элементы на этой странице с помощью такого стиля:
<body id="index">
<h1>...</h1>
</body>
Затем вы можете настроить таргетинг на элементы, которые вы хотите изменить, с помощью своего класса или идентификатора:
#index h1 {
color:red;
}
Ответ 2
в bootstrap 3 вот классы для изменения цвета текста:
<p class="text-muted">...</p> //grey
<p class="text-primary">...</p> //light blue
<p class="text-success">...</p> //green
<p class="text-info">...</p> //blue
<p class="text-warning">...</p> //orangish,yellow
<p class="text-danger">...</p> //red
Документация под Классы помощников - Контекстные цвета.
Ответ 3
Вы также можете применять классы "по умолчанию" по умолчанию, доступные из самого bootstrap
<h1 class='text-info'>Hey... I'm blue</h1>
Ответ 4
Изучив это самостоятельно (используя классы текстового цвета в ответе Коннора Лича)
Будьте осторожны, обратите внимание на класс "navbar-text".
Чтобы получить зеленый текст на панели навигации, например, у вас может возникнуть соблазн сделать это:
<p class="navbar-text text-success">Some Text Here</p>
Это НЕ будет работать!! "navbar-text" переопределяет цвет и заменяет его стандартным цветом текста навигатора.
Правильный способ сделать это - вложить текст во второй элемент, EG:
<p class="navbar-text"><span class="text-success">Some Text Here</span></p>
или в моем случае (так как мне нужен выделенный текст)
<p class="navbar-text"><strong class="text-success">Some Text Here</strong></p>
Когда вы делаете это так, вы получаете правильно выровненный текст с высотой навигационной панели, и вы также можете изменить цвет.
Ответ 5
В дополнение к ответу @Connor Leech.
Если вы хотите создать собственный собственный собственный тип собственной типографии, определите следующее в своем файле css.
.text-foo {
.text-emphasis-variant(#FFFFFF);
}
Mixin text-emphasis-variant определяется в файле Bootstrap mixins.less.
Ответ 6
В бутстрапе 3 с контекстными цветами есть вспомогательные классы, используйте эти классы в атрибутах html.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Ответ 7
Лучший способ решить эту проблему - начать с настройки Bootstrap с помощью своих инструментов настройки.
http://getbootstrap.com/customize/
Спуститесь к @headings-color и измените его с "inherit" на то, что вы хотели бы, чтобы ваши заголовки находились через сайт (если вам нравится по умолчанию, просто измените его на # 333).
Обратите внимание, что это будет держать все ваши заголовки одного и того же цвета, как вы просили.
Теперь, чтобы выполнить то, что вы хотите, после того как вы сделаете это изменение, вы можете теперь переписать их специально в своем собственном CSS, чтобы применить к ним свой собственный цвет. Ключевое слово "inherit" я всегда считал болью в рамках.
Ответ 8
вы можете использовать стиль шрифта Как:
<font color="white"><h1>Header Content</h1></font>