1

Foundation 4（Bootstrapから）を始めたばかりです。私が本当に理解できない概念がいくつかあり、それらのドキュメントには説明の兆候がありません:

私は次のものを持っています：

<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>

small-2 と large-4 の組み合わせが何を意味するのか本当に理解できません。ブートストラップには span* しかなかったのでsmall-*同じだと思いますが、どうlarge-*ですか？大きいのは何の略？large-*また、2つのうちの1つを省略して、 orだけを使用できるようにも思えsmall-*ます。

また、columnsクラスはどうですか？「スパン」が他のクラスによって既に定義されている場合、なぜそれが必要なのですか?

前もって感謝します。

4

1 に答える 1

7

' small ' と ' large ' を使用して、小さいサイズの画面用の列構造と大きいサイズの画面用の列構造を定義できます。したがって、上記の設定では、大きな画面で表示すると 4 つの列が表示され、小さい画面で表示すると 2 つの列が表示されます。

例えば

大きい

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------------------------------------------
|                     |                       |                       |
|   div1              |      div2             |      div3             |    
|                     |                       |                       |
-----------------------------------------------------------------------

小さな

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------
|         |           |           |
|  div1   |   div2    |   div3    |    
|         |           |           |
-----------------------------------

' large-# 'のみを使用して ' small-# ' 値を省略した場合、小さな画面で表示すると、デフォルトで 12 列になり、 small-12 large-4と書くのと本質的に同じになります。

すべての画面サイズで表示するときに「 small-# 」のみを使用し、「 large- # 」値を省略すると、「 small- # 」値が使用されます。

' column ' クラスは、div を列として定義します。' small-# ' または ' large-# 'を定義しない場合、div は 100% 幅 (つまり 12 列) に設定されます。

Foundation も ' row ' を使用します。

一連の ' column ' divを ' row ' div でラップすると、すべての ' column ' divが同じ行に配置されようとします。行で定義された列の総数が 12 を超える場合、それらはラップされます。列の総数が 12 未満の場合、列は折り返されません。

2列

<div class="row">
  <div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
  <div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
  <div class="small-2 large-4 columns end" style="background-color:lightgrey">...</div>
</div>
<div class="row">
  <div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
  <div class="small-2 large-4 columns end" style="background-color:lightgrey">...</div>
</div>

大きい

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------------------------------------------
|                     |                       |                       |
|   div1              |      div2             |      div3             |  (row 1)
|                     |                       |                       |
-----------------------------------------------------------------------

-----------------------------------------------
|                     |                       |
|   div1              |      div2             |   (row 2)
|                     |                       |
-----------------------------------------------

小さな

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------
|         |           |           |
|  div1   |   div2    |   div3    |    (row 1)
|         |           |           |
-----------------------------------

-----------------------
|         |           |
|  div1   |   div2    |    (row 2)
|         |           |
-----------------------

1行になりました

<div class="row">
  <div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
  <div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
  <div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
  <div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
  <div class="small-2 large-4 columns end" style="background-color:lightgrey">. . .</div>   
</div>

大きい - 12 を超える 1 行の列なので、それらは折り返されます

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------------------------------------------
|                     |                       |                       |
|   div1              |      div2             |      div3             |    
|                     |                       |                       |
-----------------------------------------------------------------------
|                     |                       |
|   div4              |      div5             |
|                     |                       |
-----------------------------------------------

小 - 1 行の列が 12 未満、折り返しなし

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------------------------------
|         |           |           |           |           |
|  div1   |   div2    |   div3    |   div4    |   div5    |     
|         |           |           |           |           |
-----------------------------------------------------------

お役に立てれば。

注:上記のレイアウトのように正確に 12 列を使用しない場合は、クラス ' end ' を行の最後の列に追加して、デフォルトで最後の列が右に浮動するように左に浮動させる必要があります。

例えば 

<div class="row">
  <div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
  <div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
</div>

終了クラスがないと、次のようになります。

大きい

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |


-----------------------                        ------------------------
|                     |                        |                      |
|   div1              |                        |      div2            | 
|                     |                        |                      |
-----------------------                        ------------------------

小さな

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |


-----------                                                ------------
|         |                                                |          |
|  div1   |                                                |  div2    |
|         |                                                |          |
-----------                                                ------------
于 2013-07-03T09:04:44.213 に答える