zoukankan      html  css  js  c++  java
  • bootstrap 针对超小屏幕和中等屏幕设备定义的不同的类

    注意:bootstrap不支持IE8,需要下载Respond.js激活media query支持。

    另外使用Respond.js还有跨域的问题,所以建议把 Respond.js 和网站目录放在一起。

    根据移动端和电脑端屏幕不同大小,针对不同屏幕下占不同比例

    <div class="container">
        <!-- <div class="row">
            <div class="col-xs-3 bg-info">1</div>
            <div class="col-xs-3 bg-info">2</div>
            <div class="col-xs-3 bg-info">3</div>
            <div class="col-xs-3 bg-info">4</div>
        </div> -->
        <div class="row">
            <div class="col-md-4 col-lg-2 bg-info">在lg屏幕下占2:2:8</div>
            <div class="col-md-4 col-lg-2 bg-info">在md屏幕下占4:4:4</div>
            <div class="col-md-4 col-lg-8 bg-info">在sx屏幕下占12:12:12</div>
        </div>
        <br>
    
        <div class="row">
            <div class="col-xs-6 col-md-3 bg-info">在md及以上屏幕中占比3:4:5</div>
            <div class="col-xs-6 col-md-4 bg-info">在sx屏幕下占6:6:6</div>
            <div class="col-xs-6 col-md-5 bg-info">sx屏幕下共18份,多余被挤下来</div>
        </div>
        <br>
    
        <div class="row">
            <div class="col-xs-12 bg-info col-sm-6 col-md-8">xs占比12:1 sm占比6:6 md占比8:4</div>
            <div class="col-xs-6  bg-info col-md-4">xs占比12:1 sm占比6:6 md占比8:4</div>
        </div>
        <br>
    
        <div class="row">
            <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:6 sm占比4:4:4</div>
            <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:6 sm占比4:4:4</div>
            <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:6 sm占比4:4:4</div>
        </div>
        <br>
    
        <div class="row">
            <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:12 sm占比4:4:4</div>
            <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:12 sm占比4:4:4</div>
            <div class="col-xs-12 bg-info col-sm-4">xs占比6:6:12 sm占比4:4:4</div>
        </div>
    </div>
  • 相关阅读:
    oracle基本语句
    html页面比较长,如何用js实现网页一打开显示在网页的中部?
    idea拉出Output窗口和还原窗口
    关于idea的目录结构如何变成树状,也就是横向变纵向
    IDEA -- idea无法导入HttpServlet包解决方法
    tomcat启动startup.bat一闪而过
    li标签和checkbox绑定
    利用jQuery对li标签操作
    &#65279导致页面顶部空白一行解决方法
    Myeclipse快速排版的快捷键
  • 原文地址:https://www.cnblogs.com/qtbb/p/12706180.html
Copyright © 2011-2022 走看看