V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
soli
V2EX  ›  Bootstrap

从 Bootstrap 2 迁移到 3,一个问题想不明白。

  •  
  •   soli · 2013-08-22 17:27:35 +08:00 · 20245 次点击
    这是一个创建于 3871 天前的主题,其中的信息可能已经有所发展或是发生改变。
    关于网格布局的。

    原来版本2 中直接使用 span* 就可以了,现在版本3 中这东西分成了四类:col-xs-*、col-sm-*、col-md-* 和 col-lg-*。

    我的问题是,为什么不直接 col-* 就好了,或者还是使用 span* ?不是有 media query 么?为什么 Bootstrap 不自己把响应式布局搞定,而还要用户自己选 xs、sm、md 还是 lg 呢?

    现在我都不知道该用上面四类的哪一个了。

    PS:前端新手,请轻拍。
    17 条回复    1970-01-01 08:00:00 +08:00
    haiyang416
        1
    haiyang416  
       2013-08-22 17:40:45 +08:00   ❤️ 1
    分别对应四种主流的屏幕宽度:手机、平板、笔记本、电脑宽屏。
    这四种是可以同时使用的,比如
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
    那么在手机上看到的是单栏,平板和笔记本上看到的是双栏,宽屏上看到的是4栏。
    具体的像素数值你自己在query里看。
    laogui
        2
    laogui  
       2013-08-22 17:45:59 +08:00   ❤️ 1
    很灵活啊,可以分别设置成电脑,平板,手机显示几栏。

    当然只用md也行,和以前的span一样,由bootstrap来控制几栏,但这样小于970px就都单栏显示了,是不是有点太宽呢?
    icyflash
        3
    icyflash  
       2013-08-22 17:54:49 +08:00   ❤️ 1
    呃,如果你用过foudation就明白了,foudation的这个清晰明了些。

    这些是为了方便控制元素在不同设备上的显示效果

    举个简单的例子,页面导航按钮 上一页 下一页。
    在手机上的时候,我可能希望这两个按钮各占据一半的页面宽度,width:50%
    但在电脑上的话,50%的宽度显示,肯定很别扭了,可能只要10-20%就足够了

    要达到这种要求,media query肯定可以做到,不过这就需要你去手写许多css了
    但是在b3里面,grid可以轻松做到这种效果
    <div class="page">
    <div class="col-xs-6 col-md-4">.col-xs-12 col-md-8</div>
    <div class="col-xs-6 col-md-4 col-md-offset-4">.col-xs-6 .col-md-4</div>
    </div>


    col-xs-*在手机页面上(宽度<768px)起作用
    col-md-*在桌面(宽度≥992px)起作用
    icyflash
        4
    icyflash  
       2013-08-22 17:56:38 +08:00
    呃 上面拼错了 foundation http://foundation.zurb.com/
    soli
        5
    soli  
    OP
       2013-08-22 18:05:01 +08:00
    @haiyang416 像这样的写法,是不是在PC上的话,col-sm-* 和 col-xs-* 都是无效的?这样会不会很麻烦?用下面这种写法是不是更好点:

    <link rel="stylesheet" media="(...)” herf="md.css" />
    <link rel="stylesheet" media="(...)” herf="sm.css" />


    @laogui 小于970px 的话,Bootstrap 会都单栏显示啊?为什么不是修改宽带来适应呢?就像上面的例子:

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    soli
        6
    soli  
    OP
       2013-08-22 18:11:36 +08:00
    @icyflash 如果不是 Bootstrap 帮我们搞定不同的设备间表现一致的话,那为什么不是为每种设备单独写套 css,然后用 media query 去决定加载哪套 css?这样把所有设备的样式都写在一起的话,是不是很乱,并且对某一设备来说加载了额外的样式?
    laogui
        7
    laogui  
       2013-08-22 18:31:47 +08:00   ❤️ 1
    是有这个缺点,不知道能不能这样?等会测试测试

    @media (max-width: 767px) {
    @import url("aaa.css");
    }
    haiyang416
        8
    haiyang416  
       2013-08-22 18:52:26 +08:00   ❤️ 1
    我没觉得哪里麻烦了,首先移动优先是特性,col-xs-* 是bootstrap默认样式,如果你只想固定比例,比如这样写一个两栏结构:
    <div class="container">
    <div class="col-xs-4">left</div>
    <div class="col-xs-8">right</div>
    </div>
    那么你在任何设备上看到的都是4:8的两栏,只有当你想在其他宽度改变比例的时候才需要写其他的,比如我想在宽屏上变为8:4栏,我直接加上col-lg-*就可以了,
    <div class="container">
    <div class="col-xs-4 col-lg-8">left</div>
    <div class="col-xs-8 col-lg-4">right</div>
    </div>
    如果你觉得这样也麻烦,那么你有一种针对同一个class属性可以改变比例的方法?
    你难道要这样写:
    @media (min-width: 768px) {
    .col-4 {width:20%}
    .col-8 {width:70%}
    }
    @media (min-width: 1200px) {
    .col-4 {width:70%}
    .col-8 {width:20%}
    }
    你不觉得非常的别扭么?
    至于你说多加载了额外的样式,你可以看下源码,其实基本上都只是改变了下宽度,代码非常少。我觉得这点冗余要比多几个请求划算得多,不然为什么会有css sprites。
    haiyang416
        9
    haiyang416  
       2013-08-22 19:04:00 +08:00
    @haiyang416 上面只是随手写的结构,没用标准的bootstrap结构,不要对号入座。
    soli
        10
    soli  
    OP
       2013-08-22 23:52:59 +08:00
    @haiyang416 感谢回复。但我还是想继续弄得更清楚点。

    如你所说,是可以很方便的改变宽度比例。但如果比例都变了,那内容的布局结构是不是也得跟着变?比如,原来4:8的左边是边栏右边是主要内容,变成8:4了之后,如果边栏占了8而主要内容只占4,那是不是很不协调。

    我的意思是说,虽然理论上可以很容易的改变比例,但实际操作中,还是需要大量修改样式吧?那样的话,上面所说的那种便利性是不是就不存在了?


    或许,有个更典型的例子可以看看?
    soli
        11
    soli  
    OP
       2013-08-22 23:59:37 +08:00
    @laogui 嗯,我的意思也是这样。这样设计者至少可以根据具体设备设计一套专门的样式,而不是把对所有设备的设计混在一块。
    saharabear
        12
    saharabear  
       2013-08-23 01:01:54 +08:00
    受教。
    msg7086
        13
    msg7086  
       2013-08-23 05:50:16 +08:00
    @soli 你这么想吧

    比如我要做一个图片墙。宽屏一行放6张图片,窄屏一行4张,平板2张,用css怎么写呢?
    soli
        14
    soli  
    OP
       2013-08-23 09:15:37 +08:00
    @msg7086 是这样么? 这样的话,不但 css 不一样,连模板都要改吧。


    <!-- 宽屏 -->
    <div class="row">
    <div class="col-lg-2">img</div>
    <div class="col-lg-2">img</div>
    <div class="col-lg-2">img</div>
    <div class="col-lg-2">img</div>
    <div class="col-lg-2">img</div>
    <div class="col-lg-2">img</div>
    </div>

    <!-- 窄屏 -->
    <div class="row">
    <div class="col-md-3">img</div>
    <div class="col-md-3">img</div>
    <div class="col-md-3">img</div>
    <div class="col-md-3">img</div>
    </div>

    <!-- 平板 -->
    <div class="row">
    <div class="col-sm-6">img</div>
    <div class="col-sm-6">img</div>
    </div>
    justfindu
        15
    justfindu  
       2013-08-23 09:28:23 +08:00   ❤️ 1
    所以 可以把class合并到一起~ 会自动判断就对了~ 还是不需要改变格式来着~
    msg7086
        16
    msg7086  
       2013-08-23 15:05:56 +08:00   ❤️ 1
    @soli
    <div class="row">
    <div class="col-lg-2 col-md-3 col-sm-6">img1</div>
    <div class="col-lg-2 col-md-3 col-sm-6">img2</div>
    <div class="col-lg-2 col-md-3 col-sm-6">img3</div>
    <div class="col-lg-2 col-md-3 col-sm-6">img4</div>
    省略无数个
    </div>

    在宽屏上就是
    img1 img2 img3 img4 img5 img6
    img7 img8 ...

    在窄屏上就是
    img1 img2 img3 img4
    img5 img6 ...

    在平板上就是
    img1 img2
    img3 img4
    ...

    这样就保证了在大屏上可以显示更多的元素,但是也不会在小屏幕上挤成一团。

    这种在bootstrap2上就得自己写定义,比如
    .span3or6orstack
    @ > 1200px: 24.3%
    @ > 960px < 1200px: 49.6%
    @ < 960px: stack
    soli
        17
    soli  
    OP
       2013-08-23 17:42:38 +08:00
    @msg7086 多谢。好像明白点了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1589 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:57 · PVG 00:57 · LAX 09:57 · JFK 12:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.