bootstrap栅格sae
时间: 2023-11-13 12:04:53 浏览: 48
Bootstrap栅格系统是一种响应式的网格布局系统,用于在不同的屏幕尺寸下,自动适应和排列网页内容。它基于行(row)和列(column)的概念来构建页面布局。
在你提供的示例代码中,使用了Bootstrap的列偏移(column offset)功能。列偏移可以用来在网格系统中创建水平偏移的列。在这个例子中,第一个列使用了`col-md-1`类,表示它占据了一列的宽度。而第二个列使用了`col-md-1`和`col-lg-offset-4`类,其中`col-lg-offset-4`表示在大屏幕尺寸(大于等于lg)下,该列向右偏移了4列的宽度。
通过使用偏移类,我们可以在网格系统中创建各种布局,使页面在不同屏幕尺寸下呈现出不同的样式和排列方式。
引用:
<script src="js/bootstrap.min.js"></script>
bootlint:官方提供的检测工具,在使用了Bootstrap页面上,用于自动检测某些常见的HTML和class错误。
Bootstrap列偏移
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Bootstrap列偏移</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<style>
body { margin-top: 20px; color: #fff; }
.container { outline: 1px solid red; }
.row div { outline: 1px solid; background: black; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">第一个</div>
<div class="col-md-1 col-lg-offset-4">第二个</div>
</div>
</div>
</body>
</html>