Bootstrap 5文本重置颜色

Bootstrap 5文本重置颜色

文本重置颜色是用来重置文本颜色或链接文本的颜色。我们都知道通过链接任何文本,我们得到一个蓝色的文本。有时我们想去掉这个颜色,让它看起来像正常的文本。

文字重置颜色类:

  • text-reset:该类用于重置文本颜色。

语法:

<tag class="text-reset">...</tag>

例子1:下面的例子说明了Bootstrap 5中的文本复位颜色。在这个例子中,我们将链接两个文本,并在第二个链接的文本上使用文本复位类,这样你就可以通过查看注释清楚地了解其中的区别。

<!DOCTYPE html>
<html>
  
<head>
    <link crossorigin="anonymous" rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
</head>
  
<body>
    <div class="text-center">
    <h1 class="text-success">
        Geeksforgeeks
    </h1>
    <p>
        A Computer Science Portal for
        <!-- Bootsrap text-reset class not used -->
        <a href="#">Geeks</a>
    </p>
  
    <p>
        <!-- Bootsrap text-reset class used -->
        <a href="#" class="text-reset">Geeks</a> 
        Learning Together
    </p>
</body>
  
</html>

输出:

Bootstrap 5文本重置颜色

Bootstrap 5文本重置颜色

例子2:在这个例子中,我们将链接两个文本,并在第二个链接的文本上使用文本复位类,这样你就可以清楚地理解其中的区别。

<!DOCTYPE html>
<html>
  
<head>
    <link crossorigin="anonymous" rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
</head>
  
<body class="text-center">
    <h1 class="text-success">
        Geeksforgeeks
    </h1>
  
    <p class="text-muted">
        Bootstrap 5 text-reset not used:
        <a href="#">GeeksforGeeks</a>
    </p>
      
    <p class="text-muted">
        Bootstrap 5 text-reset used:
        <a href="#" class="text-reset">
            GeeksforGeeks</a>
    </p>
</body>
  
</html>

输出:

Bootstrap 5文本重置颜色

Bootstrap 5文本重置颜色

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程