目录
Bootstrap 有三个类型的容器
实战
.container 演练
.container-fluid 演练
.container-sm .container-md .container-lg 演练
.container-xl .container-xxl 演练
Sass 映射 - 修改预定义的容器类
可视化大屏设计 - 总目录
导读:大屏案例参考YYDatav的数据可视化大屏《精彩案例汇总》(Python&Echarts源码)_YYDataV的博客-CSDN博客
容器 Container 是 Bootstrap 中最基本的布局元素,容器可以嵌套,但大多数布局不需要嵌套容器。
Bootstrap 有三个类型的容器
.container,该容器在每个响应断点设置最大宽度。
.container-fluid
, 在所有断点宽度都是: 100%。
. container-{ breakpoint } ,宽度为100% ,直到指定的断点。
下表说明了 .container 和 .container-fluid 以及
. container-{ breakpoint } 的宽度width
相比的情况。
实战
显示器分辨率为 1920*1080
这个分辨率属于 Large >= 992px 系列,所以显示效果为:
.container 演练
代码
<body>
<div class="container" style="border:3px solid blue">
hello
</div>
</body>
效果图
可以看到div布局的左右两边都有留白。
.container-fluid 演练
代码
<body>
<div class="container-fluid" style="border:3px solid blue">
hello
</div>
</body>
效果图
可以看到div布局100%占满了视窗。
.container-sm .container-md .container-lg 演练
代码
<body>
<div class="container-sm" style="border:3px solid blue">
hello
</div>
</body>
效果图
可以看到div布局的左右两边都有留白。与 .container效果一样
.container-xl .container-xxl 演练
代码
<body>
<div class="container-xl" style="border:3px solid blue">
hello
</div>
</body>
效果图
可以看到div布局100%占满了视窗。与 .container-fluid效果一样
Sass 映射 - 修改预定义的容器类
如上所示,Bootstrap 生成一系列预定义的容器类,以帮助您构建所需的布局。您可以通过修改 Sass 映射(可以在 _ variables.scss 中找到)来自定义这些预定义的容器类:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
可视化大屏设计 - 总目录
更多推荐
3 数据可视化大屏 - 布局: BootStrap 之容器Container
发布评论