现在时间是:
当前位置:首 页 >> 网站开发>> 文章列表

Bootstrap 网格及响应布局

作者:   发布时间:2016-12-09 09:46:59   浏览次数:984

 .col-xs- 超小屏幕 手机 (<768px)

.col-sm- 小屏幕 平板 (≥768px)

.col-md- 中等屏幕 桌面显示器 (≥992px)

.col-lg- 大屏幕 大桌面显示器 (≥1200px)

 

HTML代码:

<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">                          </div>

当屏幕尺寸

小于 768px 的时候,用 col-xs-12 类对应的样式;

在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;

在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;

大于 1200px 的时候,用 col-lg-3 类对应的样式;

 

说白了"响应式"就是根据浏览器的宽度来决定使用哪一个class,以上效果展示了响应式布局的原理:

  • 当屏幕宽度u≥1200px时,bootstrap会自动选用col-lg-*这个class;
  • 当屏幕宽度u≥992px时,bootstrap会自动选用col-sm-*这个class;
  • 当屏幕宽度u≥768px时,bootstrap会自动选用col-md-*这个class;
  • 当屏幕宽度u<768px时,bootstrap会自动选用col-lg-*这个class;

 

Kivy tkinter Pyqt 前端界面设计的时候需要理解网格、容器、面板的一些基础概念。当然这个后面的docker中的容器不容,但思路有相通之处!







上一篇:没有了    下一篇:没有了

Copyright ©2018    易一网络科技|www.yeayee.com All Right Reserved.

技术支持:自助建站 | 领地网站建设 |短信接口 版权所有 © 2005-2018 lingw.net.粤ICP备16125321号 -5