<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--以移动设备为优先，user-scalable=no禁止用户缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"</script>
<script src="bootstrap/js/bootstrap.min.js"</script>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
<p>I learned the value of hard work by working hard.</p>
<p class="text-muted">I learned the value of hard work by working hard.</p>
<p class="text-primary">I learned the value of hard work by working hard.</p>
<p class="text-success">I learned the value of hard work by working hard.</p>
<p class="text-info">I learned the value of hard work by working hard.</p>
<p class="text-warning">I learned the value of hard work by working hard.</p>
<p class="text-danger">I learned the value of hard work by working hard.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--以移动设备为优先，user-scalable=no禁止用户缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"</script>
<script src="bootstrap/js/bootstrap.min.js"</script>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
<p>I learned the value of hard work by working hard.</p>
<p class="text-muted">I learned the value of hard work by working hard.</p>
<p class="text-primary">I learned the value of hard work by working hard.</p>
<p class="text-success">I learned the value of hard work by working hard.</p>
<p class="text-info">I learned the value of hard work by working hard.</p>
<p class="text-warning">I learned the value of hard work by working hard.</p>
<p class="text-danger">I learned the value of hard work by working hard.</p>
<p class="text-primary bg-success">I learned the value of hard work by working hard.</p>
<p class="text-success bg-info">I learned the value of hard work by working hard.</p>
<p class="text-info bg-warning">I learned the value of hard work by working hard.</p>
<p class="text-warning bg-danger">I learned the value of hard work by working hard.</p>
<p class="text-danger bg-primary">I learned the value of hard work by working hard.</p>
</div>
</body>
</html>
辅助类浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--以移动设备为优先，user-scalable=no禁止用户缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"</script>
<script src="bootstrap/js/bootstrap.min.js"</script>
<style type="text/css" media="screen">
.top
{
width:500px;
border:1px solid blue;
margin: 10px auto;
overflow: hidden;/*使获得自然高*/
}
.pull-left
{
width: 200px;
height: 200px;
background: red;
}
.pull-right
{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
<p>I learned the value of hard work by working hard.</p>
<p class="text-muted">I learned the value of hard work by working hard.</p>
<p class="text-primary">I learned the value of hard work by working hard.</p>
<p class="text-success">I learned the value of hard work by working hard.</p>
<p class="text-info">I learned the value of hard work by working hard.</p>
<p class="text-warning">I learned the value of hard work by working hard.</p>
<p class="text-danger">I learned the value of hard work by working hard.</p>
<p class="text-primary bg-success">I learned the value of hard work by working hard.</p>
<p class="text-success bg-info">I learned the value of hard work by working hard.</p>
<p class="text-info bg-warning">I learned the value of hard work by working hard.</p>
<p class="text-warning bg-danger">I learned the value of hard work by working hard.</p>
<p class="text-danger bg-primary">I learned the value of hard work by working hard.</p>
<!--加小三角形-->
<span class="caret"></span>
<!--辅助类浮动-->
<div class="top clearfix"><!--clearfix清除浮动，加在父盒子上面-->
<div class="pull-left">
我在左边
</div>
<div class="pull-right">
我在右边
</div>
</div>
</div>
</body>
</html>
时间： 2024-08-09 16:02:36