bootstrap text_bootstrap 火车图标-CSDN博客

此篇文章展示了Bootstrap框架中用于文本和链接的各种样式类，如text-muted,text-primary,text-success等，以及背景颜色类和布局定位类，如bg-warning,pull-left,center-block等，还包括了辅助类如.sr-only用于无障碍访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap text

There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence.
The blog content is all parallel goods. Those who are worried about being cheated should leave quickly.

<div class="container">
	<h2>文本</h2>
	<p class="text-muted">该段落使用了样式 "text-muted"。</p>            
	<a class="text-muted" href="https://www.wfsb.com">链接使用了样式 "text-muted"。</a>
	<p class="text-primary">该段落使用了样式 "text-primary"。</p>            
	<a class="text-primary" href="http://www.wfsb.com">链接使用了样式 "text-primary"。</a> 
	<p class="text-success">该段落使用了样式 "text-success"。</p>            
    <a class="text-success" href="http://www.wfsb.com">链接使用了样式 "text-success"。</a> 
	<p class="text-info">该段落使用了样式 "text-info"。</p>            
	<a class="text-info" href="http://www.wfsb.com">链接使用了样式 "text-info"。</a> 
	<p class="text-warning">该段落使用了样式 "text-warning"。</p>            
	<a class="text-warning" href="http://www.wfsb.com">链接使用了样式 "text-warning"。</a> 
	<p class="text-danger">该段落使用了样式 "text-danger"。</p>            
	<a class="text-danger" href="http://www.wfsb.com">链接使用了样式 "text-danger"。</a>
	<p class="bg-primary">该段落使用了类 "bg-primary"。</p>
	<a class="bg-primary" href="http://www.wfsb.com">该链接使用了类 "bg-primary"。</a>
	<p class="bg-success">该段落使用了类 "bg-success"。</p>
	<a class="bg-success" href="http://www.wfsb.com">该链接使用了类 "bg-success"。</a>
	<p class="bg-info">该段落使用了类 "bg-info"。</p>
	<a class="bg-info" href="http://www.wfsb.com">该链接使用了类 "bg-info"。</a>
	<p class="bg-warning text-danger">该段落使用了类 "bg-warning text-danger"。</p>
	<a class="bg-warning" href="http://www.wfsb.com">该链接使用了类 "bg-warning"。</a>
	<p class="bg-danger">该段落使用了类 "bg-danger"。</p>
	<a class="bg-danger" href="http://www.wfsb.com">该链接使用了类 "bg-danger"。</a>
	<br>
	<div class="pull-left bg-warning">元素浮动到左侧</div>
	<div class="pull-right" style="width:150px;background-color:red;">元素浮动到右侧</div>
	<div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>
	<p class="show">该段落强制显示</p>
	<p class="hidden">该段落强制隐藏</p> 
	<p> .sr-only 类除了屏幕阅读器外，其他设备上都隐藏元素:</p>
	<a class="sr-only" href="#">跳转到主要内容</a>
	<p>.sr-only 与 .sr-only-focusable 类结合使用，在元素获取焦点时显示(如：键盘操作的用户):</p>
	<a class="sr-only sr-only-focusable" href="#">跳转到主要内容</a>
	<button type="button" class="close"><span aria-hidden="true">x</span><span class="sr-only">关闭</span></button>
	<span class="caret"></span>
</div>