Bootstrap 文本
2018-03-21 09:30 更新
较小的文本
我们可以使用带有.small类的<small>标签或<span>标签来显示每个标题的次要文本，使其更小更轻。
<!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>标签来强调一个文本的片段，使其带有较重的字体重量。<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<strong>rendered as bold text</strong>
</body>
</html>斜体文本
为了用斜体强调文本片段，我们可以使用<em>来标记文本。<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<em>rendered as italicized text</em>
</body>
</html>小文本样式
若要不强调内联或文本块，请使用<small> 标签将文本设置为父级文本大小的85%，为了嵌套 <small> 元素，标题元素会使用它自己的字体大小。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/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>等文本格式标签，使文本变粗体，变斜体，变小等等。
<!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>文本转换类
我们可以将文本转换为小写，大写或使其首字母大写。
<!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>文本强调类
Bootstrap的强调工具类，以绿色显示成功消息，红色显示警告或错误消息等。
<!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="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<abbr title="attribute">attr</abbr>
</body>
</html>小缩写
我们可以通过将.initialism添加到较小的字体大小的缩写上，以设置较小字体的缩写的样式。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/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>地址
提供给亲人或者工作伙伴的联系信息，通过使用<br>结束所有行来保留格式。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/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="//www.w3cschool.cn/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>封装代码的内联片段。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/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>以上内容是否对您有帮助：
更多建议：