标题:
Bootstrap CSS----------Bootstrap 网格系统（3）
[打印本页]
作者:
look_w
时间:
2019-5-11 14:53
标题:
Bootstrap CSS----------Bootstrap 网格系统（3）
Bootstrap 网格系统实例：手机、平板电脑、台式电脑区分
我们已经看过 中型和大型设备 。现在，让我们一起看另一个实例，我们将让它同样适用于小型手机。我们要把手机的列分割为 25%/75%，我们将添加如下选项：
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
现在，给我们提供了 3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/66% 的布局。请查看下面的实例进行验证。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 手机,平板，台式机区分</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第一列段落1
</p>
<p>第一列段落2
</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列段落1
</p>
<p>第二列段落2
</p>
</div>
</div>
</body>
</html>
效果如下，代码保存为html文件打开可见。
小型设备--手机
中型设备-平板电脑
大型设备--台式
总结来说 Bootstrap 在小型设备中，会优先查找使用带有sm的class，中型设备中，会查找带有 md 的class，并使用它们。在大型设备中，会查找带有 lg 的class，并使用它们。
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)
Powered by Discuz! 7.0.0
