Bootstrap -- 文本,背景,其他样式

2018-12-11 09:03:28来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

Bootstrap -- 文本,背景,其他样式

1. 文本样式:展示了不同的文本颜色

使用文本样式:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>    
    <p class="text-primary">样式 "text-primary"。</p>   
    <p class="text-success">样式 "text-success"。</p>   
    <p class="text-warning">样式 "text-warning"。</p>   
</body>
</html>
View Code

样式效果:

 

 

2. 背景样式:展示了不同的背景颜色

使用背景样式:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>    
    <p class="bg-primary">样式 "bg-primary"。</p>   
    <p class="bg-success">样式 "bg-success"。</p>   
    <p class="bg-warning">样式 "bg-warning"。</p>   
</body>
</html>
View Code

样式效果:

 

3. 其他样式

使用样式:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>    
    <p>下拉样式
      <span class="caret"></span>
    </p>
    <div class="pull-left">向左快速浮动</div>
    <div class="pull-right">向右快速浮动</div>
</body>
</html>
View Code

样式效果:

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端如何进行用户权限管理

下一篇:Bootstrap -- 下拉菜单、输入框组、导航菜单