24

在我的索引页面上，我希望 h1 文本颜色为白色并带有阴影，但我不想更改 h1 在其他页面上的默认行为。我怎样才能做到这一点？

4

8 回答 8

105

在引导程序 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

Helper classes - Contextual colors下的文档。

于 2013-10-17T09:24:33.493 回答
25

您可以将自己的 id 或类添加到索引页面的 body 标记中，以使用自定义样式定位该页面上的所有元素，如下所示：

<body id="index">
   <h1>...</h1>
</body>

然后，您可以使用您的类或 id 来定位您希望修改的元素，如下所示：

#index h1 {
   color:red;
}
于 2012-06-22T19:07:31.320 回答
9

您还可以应用引导程序本身提供的默认“文本”类

 <h1 class='text-info'>Hey... I'm blue</h1>

http://twitter.github.io/bootstrap/base-css.html

于 2013-06-06T06:49:07.203 回答
3

在我自己仔细阅读之后（使用 Connor Leech 回答中的文本颜色类）

被警告要特别注意“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>

当你这样做时，你会得到与导航栏高度正确对齐的文本，你也可以改变颜色。

于 2015-01-22T00:33:16.357 回答
1

除了@Connor Leech 的回答。

如果您想创建自己的新自定义排版类型，请在您的 css 文件中定义以下内容。

.text-foo {
  .text-emphasis-variant(#FFFFFF);
}

mixintext-emphasis-variant在 Bootstrap 的mixins.less文件中定义。

于 2014-05-21T22:29:33.863 回答
1

bootstrap 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>

参考： http: //getbootstrap.com/css/#type

于 2017-05-28T04:56:18.397 回答
0

解决这个问题的最好方法是从使用他们的定制工具定制 Bootstrap 开始。

http://getbootstrap.com/customize/

转到@headings-color 并将其从“继承”更改为您希望标题在整个站点中出现的内容（如果您喜欢默认设置，只需将其更改为#333）。

请注意，这将按照您的要求使您的所有标题保持相同的颜色。

现在，为了完成您想要的，在您进行此更改后，您现在可以在您自己的 CSS 中专门覆盖它们以将您自己的颜色应用到它们。我一直发现“继承”关键字在框架中很痛苦。

于 2017-07-18T13:53:54.703 回答
-2

您可以使用字体样式，例如：

     <font color="white"><h1>Header Content</h1></font>
于 2017-03-05T13:15:37.420 回答