masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial Bootstrap > bootstrap 怎么设置字体颜色

bootstrap 怎么设置字体颜色

藏色散人
Lepaskan： 2023-02-14 17:46:47
asal
15699 orang telah melayarinya

bootstrap设置字体颜色的方法：1、打开Bootstrap.css文件；2、搜索text-muted；3、查看默认情况下bootstrap给出的文本颜色样式；4、以基于这些样式进行修改和添加即可。

bootstrap 怎么设置字体颜色

本教程操作环境：windows7系统，bootstrap3版本，Dell G3电脑。

先来看看bootstrap自定义的文本颜色是什么样的：

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="stylesheet" href="bootstrap.css">
    <title>Bootstrap 101 Template</title>
    <style>
          p{font-size:50px;}
    </style>
    
  </head>
  <body>
              <p>我是muted</p>
              <p>我是primary</p>
              <p>我是success</p>
              <p>我是info</p>
              <p>我是warning</p>
              <p>我是danger</p>          
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
  </body>
</html>
Salin selepas log masuk

显示效果：

981ca7b998a289c91d793d13c612b5c.png

上面就是六个不同的文本颜色，我们再来看看具体的文本颜色是多少？

打开Bootstrap.css , 搜索text-muted:

结果如下：

9fbb69309c921285eebb0be31814553.png

这样我们就可以看出默认情况下bootstrap给出的文本颜色样式为：

.text-muted{  color: #777 ;  }
.text-primary{  color: #337ab7 ;  }
.text-success{  color: #3c763d ;  }
.text-info{  color: #31708f ;  }
.text-warning{  color: #8a6d3b ;  }
.text-danger{  color: #a94442 ;  }
Salin selepas log masuk

我们也可以基于这些样式进行修改和添加，得到符合自己需求的样式；

相关教程推荐：《bootstrap教程》

Atas ialah kandungan terperinci bootstrap 怎么设置字体颜色. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
bootstrap
sumber：php.cn
Artikel sebelumnya：bootstrap怎么实现可关闭tab Artikel seterusnya：bootstrap 怎么添加关闭按钮
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Suis Bootstrap tidak berfungsi dengan betul apabila halaman web diubah saiznya 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
daripada 2024-04-05 08:45:39
0
1
3443
Paparkan fail PDF AWS dalam mod Bootstrap dalam Laravel Saya telah memuat turun url aws seperti https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std...
daripada 2024-04-04 22:16:18
0
1
1450
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan