zoukankan html css js c++ java

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

样式效果：

查看全文

相关阅读:
uni-app系列回顾总结----项目国际化3(代码更新合并)
uni-app系列回顾总结----项目国际化2(翻译问题与解决方案)总结
 uni-app系列回顾总结----简介了解
 CSS3 filter(滤镜) 属性
 百度小程序中三级联动深入理解
 记录工作中遇到的一个关于CSS的坑
 打通百度小程序登录授权流程任督二脉
 rpx转px
nginx安装和配置
 uniapp实战电影预告项目

原文地址：https://www.cnblogs.com/ChengWenHao/p/BootstrapPart5.html