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

[soli]

关于网格布局的。

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

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

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

PS：前端新手，请轻拍。

[haiyang416]

分别对应四种主流的屏幕宽度：手机、平板、笔记本、电脑宽屏。
这四种是可以同时使用的，比如
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
那么在手机上看到的是单栏，平板和笔记本上看到的是双栏，宽屏上看到的是4栏。
具体的像素数值你自己在query里看。

[laogui]

很灵活啊，可以分别设置成电脑，平板，手机显示几栏。

当然只用md也行，和以前的span一样，由bootstrap来控制几栏，但这样小于970px就都单栏显示了，是不是有点太宽呢？

[icyflash]

呃，如果你用过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]

呃 上面拼错了 foundation http://foundation.zurb.com/

[soli]

@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]

@icyflash 如果不是 Bootstrap 帮我们搞定不同的设备间表现一致的话，那为什么不是为每种设备单独写套 css，然后用 media query 去决定加载哪套 css？这样把所有设备的样式都写在一起的话，是不是很乱，并且对某一设备来说加载了额外的样式？

[laogui]

是有这个缺点，不知道能不能这样？等会测试测试

@media (max-width: 767px) {
@import url("aaa.css");
}

[haiyang416]

我没觉得哪里麻烦了，首先移动优先是特性，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]

@haiyang416 上面只是随手写的结构，没用标准的bootstrap结构，不要对号入座。

[soli]

@haiyang416 感谢回复。但我还是想继续弄得更清楚点。

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

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


或许，有个更典型的例子可以看看？

[soli]

@laogui 嗯，我的意思也是这样。这样设计者至少可以根据具体设备设计一套专门的样式，而不是把对所有设备的设计混在一块。

[saharabear]

受教。

[msg7086]

@soli 你这么想吧

比如我要做一个图片墙。宽屏一行放6张图片，窄屏一行4张，平板2张，用css怎么写呢？

[soli]

@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]

所以 可以把class合并到一起~ 会自动判断就对了~ 还是不需要改变格式来着~

[msg7086]

@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]

@msg7086 多谢。好像明白点了。