App下載

bootstrap字體顏色怎么設(shè)置？代碼分享！

猿友 2021-06-11 14:18:45 瀏覽數(shù) (6230)
反饋

今天我們來看看有關(guān)于"bootstrap字體顏色怎么設(shè)置？代碼分享！"這個(gè)問題，從版本上來看；在2.3版本中使用?.muted?和?.text-error?這兩個(gè)屬性來進(jìn)行樣式字體設(shè)置，在3.0的版本中則是換成了?.text-muted?與?.text-danger?來實(shí)現(xiàn)。接下來我們來看代碼與截圖；

1.我們首先創(chuàng)建個(gè)項(xiàng)目，在項(xiàng)目中加入我們的連接語句：?<link rel="stylesheet" href="dist/css/bootstrap.css">?，在<body>標(biāo)簽中加入文本，代碼如下；

<!DOCTYPE html

	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<link rel="stylesheet" href="css/bootstrap.css">

		<script type="text/javascript" src="js/jquery.js"></script>

		<script type="text/javascript" src="js/bootstrap.js"></script>

		<title>無標(biāo)題文檔</title>

	</head>

	<body style="margin:200px">

		<div class="container">

			<p class="text-muted">這個(gè)是text-muted屬性的強(qiáng)調(diào)色！</p>

			<p class="text-primary">這個(gè)是text-primary屬性的強(qiáng)調(diào)色！</p>

			<p class="text-success">這個(gè)是text-success屬性的強(qiáng)調(diào)色！</p>

			<p class="text-info"> 這個(gè)是text-info屬性的強(qiáng)調(diào)色！</p>

			<p class="text-warning">這個(gè)是text-warning屬性的強(qiáng)調(diào)色！</p>

			<p class="text-danger">這個(gè)是text-danger屬性的強(qiáng)調(diào)色！</p>

		</div>

	</body>

</html>

bootstrap字體樣式設(shè)計(jì)

運(yùn)行結(jié)果我們就可以看到字體都發(fā)生了變化，說明我們成功調(diào)用了屬性。

總結(jié)：

以上就是有關(guān)于“bootstrap字體顏色怎么設(shè)置？代碼分享！”這個(gè)問題的方法和案例。希望對(duì)大家有所幫助。更多的相關(guān)內(nèi)容我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解！


Bootstrap

0 人點(diǎn)贊