免費AI編程助手
Bootstrap 文本
2018-03-21 09:30 更新
較小的文本
我們可以使用帶有.small類的<small>標(biāo)簽或<span>標(biāo)簽來顯示每個標(biāo)題的次要文本，使其更小更輕。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
<hr>
<h1>h1. Bootstrap heading <span class="small">Secondary text</span></h1>
<h2>h2. Bootstrap heading <span class="small">Secondary text</span></h2>
<h3>h3. Bootstrap heading <span class="small">Secondary text</span></h3>
<h4>h4. Bootstrap heading <span class="small">Secondary text</span></h4>
<h5>h5. Bootstrap heading <span class="small">Secondary text</span></h5>
<h6>h6. Bootstrap heading <span class="small">Secondary text</span></h6>
</div>
</body>
</html>加粗文本
我們可以使用<strong>標(biāo)簽來強調(diào)一個文本的片段，使其帶有較重的字體重量。<!DOCTYPE HTML>
<html>
<head>
<link href="//o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<strong>rendered as bold text</strong>
</body>
</html>斜體文本
為了用斜體強調(diào)文本片段，我們可以使用<em>來標(biāo)記文本。<!DOCTYPE HTML>
<html>
<head>
<link href="//o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<em>rendered as italicized text</em>
</body>
</html>小文本樣式
若要不強調(diào)內(nèi)聯(lián)或文本塊，請使用<small> 標(biāo)簽將文本設(shè)置為父級文本大小的85%，為了嵌套 <small> 元素，標(biāo)題元素會使用它自己的字體大小。
<!DOCTYPE HTML>
<html>
<head>
<link href="//o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<small>This line of text is meant to be treated as fine print.</small>
</body>
</html>文本格式化
與你在簡單的HTML中一樣，我們可以使用像<strong>，<i>，<small>等文本格式標(biāo)簽，使文本變粗體，變斜體，變小等等。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<p><b>This is bold text</b></p>
<p><big>This is big text</big></p>
<p><code>This is computer code</code></p>
<p><em>This is emphasized text</em></p>
<p><i>This is italic text</i></p>
<p><mark>This is highlighted text</mark></p>
<p><small>This is small text</small></p>
<p><strong>This is strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>
</div>
</body>
</html>文本轉(zhuǎn)換類
我們可以將文本轉(zhuǎn)換為小寫，大寫或使其首字母大寫。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>
</div>
</body>
</html>文本強調(diào)類
Bootstrap的強調(diào)工具類，以綠色顯示成功消息，紅色顯示警告或錯誤消息等。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<p class="text-muted">Muted: This text is grayed out.</p>
<p class="text-primary">Important: Please read the instructions carefully before proceed.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
<p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-danger">Error: An error has been occurred while submitting your data.</p>
</div>
</body>
</html>縮寫樣式
對于縮寫的長懸停的擴展文本，需包含有<abbr>元素的title屬性。
<!DOCTYPE HTML>
<html>
<head>
<link href="//o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<abbr title="attribute">attr</abbr>
</body>
</html>小縮寫
我們可以通過將.initialism添加到較小的字體大小的縮寫上，以設(shè)置較小字體的縮寫的樣式。
<!DOCTYPE HTML>
<html>
<head>
<link href="//o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
</body>
</html>地址
提供給親人或者工作伙伴的聯(lián)系信息，通過使用<br>結(jié)束所有行來保留格式。
<!DOCTYPE HTML>
<html>
<head>
<link href="//o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<address>
<strong>Monster, Inc.</strong><br> 999 Main Ave, Suite 600<br>
San Diego, CA 99999<br> <abbr title="Phone">P:</abbr> (123)
456-7890
</address>
<br />
<br />
<br />
<br />
<br />
<address>
<strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a>
</address>
</body>
</html>錨
我們可以使用btn類來使錨看起來像一個按鈕，并將.disabled類添加到<a>按鈕以禁用它們。
<!DOCTYPE HTML>
<html>
<head>
<link href="//o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a>
</body>
</html>我們在這里使用 .disabled 作為工具類，類似于常見的 .active類，因此不需要前綴。
代碼
使用<code>封裝代碼的內(nèi)聯(lián)片段。
<!DOCTYPE HTML>
<html>
<head>
<link href="//o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
For example, <code><section></code> should be wrapped as inline.
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：