我正在参加[码上掘金挑战赛]详情请看:码上掘金挑战赛来了!
栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="dis/css/bootstrap.css">
<script src="jquery/jquery-3.4.1.min.js"></script><!--引入js文件-->
<script src="dis/css/bootstrap.min.js"></script>
<style>
div{
border:1px solid black ;
height:200px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-md-push-9">1 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">2 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">3 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-md-pull-9">4 </div>
</div>
</div>
</body>
</html>
col-md-4:把屏幕3等分。
class="col-md-4 col-md-offset-2"向右移两个单位。
class="col-md-3 col-md-push-9"排序从序号一到序号四,3x3=9
class="col-md-3 col-md-pull-9"排序从序号四到序号三,3x3=9
依赖于媒体查询技术:@media (min-width: @screen-sm-min) { ... }(css);最小的宽度为,,时什么样子。写在head里,用style括起来。
物理上把第一个和第四个换了,用push和pull换位置。
全局CSS样式
图片形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
rounded:圆形;circle:圆;thumbnail:缩略图
图片替换
<h1 class="text-hide">Custom heading</h1>
三角符号
<span class="caret"></span>
相对路径:以引用位置为参考,而建立起来的相对路径。前一个点。
绝对路径:主页上的文件或目录在硬盘上真正的路径,放在盘下的。前两个点