bootstrap基础

发布时间：2020-12-17 20:57:04 所属栏目：安全来源：网络整理

导读：1、网格选项 ? 超小设备手机（768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的最大容器宽度 None (auto) 750px 970px 1

1、网格选项

列数量和间隙宽度偏移量

?	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
12	12
最大列宽	Auto	60px	78px	95px
30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes
Yes
列排序	Yes

2、响应式网络

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.1.1.slim.js"></script>
</head>
<body>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
</div>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!