bootstrap 文字颜色

用户5760343

发布于 2022-01-10 08:35:38

3.3K0

发布于 2022-01-10 08:35:38

文章被收录于专栏：sktj

p class='text-muted' 浅灰色

image.png

<p class="text-muted">该段落使用了样式 "text-muted"。</p>

<a class="text-muted" href="//www.w3cschool.cc">链接使用了样式 "text-muted"。</a>

text-primary 浅蓝色

image.png

text-success 绿色 text-info 蓝色 text-warning 棕色 text-danger 红色

bg-primary 蓝色背景 bg-sucess bg-info bg-warning bg-danger

image.png

<div class="pull-left">元素浮动到左侧</div> <div class="pull-right">元素浮动到右侧</div>

image.png

中间显示 <div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>

image.png

clearfix清除浮动

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap .clearfix 实例</title>

</head>

<body>

<div class="container-fluid"> <h1>Hello World!</h1> <div class="row"> <div class="col-xs-6 col-sm-3" style="background-color:lavender;"> 列 1 重置窗口大小，查看效果。也尝试删除有 clearfix 的 div 查看效果。 </div> <div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列 2</div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列 3</div> <div class="col-xs-6 col-sm-3" style="background-color:lightgray;">列 4</div> </div> </div>

</body> </html>

.show显示 .hidden隐藏 .sr-only 隐藏 .sr-only-focusable 隐藏，获取焦点时显示 .text-hide 将页面元素所包含的文本内容替换为背景图

image.png

关闭图标 class=close <button type="button" class="close"><span aria-hidden="true">x</span><span class="sr-only">关闭</span></button>

image.png

下拉框按钮 <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">一个链接</a></li> <li><a href="#">另一个链接 link</a></li> <li><a href="#">其他功能</a></li> </ul> </div>

pull-right pull-left 浮动

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.05.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https