“全宽”字段的列数PSD设计 [英] Number of columns in "full-width" PSD design

问题描述

我有一个PSD设计，其​​中1980px（全角），我需要使用Bootstrap 3将其转换为HTML。

我知道Bootstrap 3有流体网格的选项，但我的问题是**我如何计算网站上每个部分所需的列数？ **

如果是这样，1980px设计： b
$ b

我怎么知道有多少列设置为黑色，红色，和蓝色部分？

解决方案

以下是您的示例中的列的叠加：

因此，在这种情况下，你的html应该是这样的：

 < div class =row> 
< div class =col-sm-2> 
< p>黑色栏< / p> 
< / div> 
< div class =col-sm-6> 
< p>红色栏< / p> 
< / div> 
< div class =col-sm-4> 
< p>蓝色栏< / p> 
< / div> 
< / div> 
  

请参阅 此工作演示

I have one PSD design, which 1980px (full-width), and I need to convert it to HTML, using Bootstrap 3.

I do know that Bootstrap 3 has an option to fluid grids, but my question is **how can I count number of columns needed for each section on website? **

If this is that, 1980px design:

How can I know how many columns to set for the black, red, and blue section?

解决方案

Here's an overlay of columns on your example:

So in this case, your html would look something like this:

<div class="row">
    <div class="col-sm-2">
        <p>Black Column</p>
    </div>
    <div class="col-sm-6">
        <p>Red Column</p>
    </div>
    <div class="col-sm-4">
        <p>Blue Column</p>
    </div>
</div>

See this working demo

这篇关于“全宽”字段的列数PSD设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！