Bootstrap 基本样式-背景

最新推荐文章于 2023-10-07 23:25:32 发布

litengbin

最新推荐文章于 2023-10-07 23:25:32 发布

阅读量7.4k

点赞数

分类专栏：前端-Bootstrap

前端-Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1 : 强调的背景 bg-primary
2 : 成功操作文字的背景 bg-success
3 : 信息提示文字的背景 bg-info
4 : 警告提示文字的背景 bg-warning
5 : 危险提示文字的背景 bg-danger

强调的背景

一般用在需要强调的文字上

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<p class="bg-primary">强调</p>

成功操作文字的背景

一般用在操作成功了的文字上

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<p class="bg-success">操作成功</p>

信息提示文字的背景

一般用在提示性的文字上

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<p class="bg-info">请输入姓名</p>

警告提示文字的背景

一般用在警告信息的文字上

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<p class="bg-warning">警告语</p>

危险提示文字的背景

一般用在危险信息的文字上

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<p class="bg-danger">本操作会导致服务器挂掉</p>

litengbin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 基本样式-背景

1 : 强调的背景 bg-primary2 : 成功操作文字的背景 bg-success3 : 信息提示文字的背景 bg-info4 : 警告提示文字的背景 bg-warning5 : 危险提示文字的背景 bg-danger强调的背景一般用在需要强调的文字上强调成功操作文字的背景一般用在操作成功了的文字
复制链接

扫一扫