JSP ページにブートストラップ フレームワークを使用しています。特定の JSP ページで、ページの中央に大きな円を配置し、大きな円の周りに他の 6 つの小さな円を配置しました。これを達成するために、ページを行とスパンに分割しました。縮小版は次のようになります。
<div class=row>
<div class=span2> //Small circle 4 </div>
<div class=span2> //Small circle 6 </div>
</div>
<div class=row>
<div class=span2> //Small circle 1 </div>
<div class=span2> //Small circle 5 </div>
</div>
<div class=row>
//Big Circle
</div>
<div class=row>
<div class=span2> //Small circle 2 </div>
<div class=span2> //Small circle 3 </div>
</div>
サーブレットは、表示する円の数を JSP ページに送信します (小さい円の総数 (=合計) が異なるたびに。合計は ε [0 , 6] です)。私がこれまで行ってきたことは、if ステートメントを次のようにすべてのスパンに配置することです。
<% int i=0 %>
<div class=row>
<% if (i<sum) {%>
<div class=span2> //Small circle 4 </div> <% i++ } %>
<% if (i<sum) %>
<div class=span2> //Small circle 6 </div> <% i++ } %>
</div>
//etc...
このアプローチでは、上から下に行を追加するので、大きな円の上に 4 つの小さな円を配置し、大きな円の下に 2 つの小さな円を配置します。そう:
- 合計= 3の場合、上に3つの小さな円があり、下に0があります
- 合計 = 5 の場合、上に 4 つの小さな円、下に 1 つの小さな円が表示されます。
ただし、私が名前を付けたように小さな円を配置したい場合は、たとえば
- 合計 = 3 の場合、上に小さな円が 1 つ、下に 2 つ表示されます
これらすべてを while ステートメントにネストして、次のように言うことを考えました。
<% int i=0;
while (i < sum) { %>
<div class=row>
<% if (i == 4) { %>
<div class=span2> //Small circle 4 </div> <% } %>
<% if (i == 6) { %>
<div class=span2> //Small circle 6 </div> <% } %>
</div>
//etc..
<% i++; } %> //end of while
理論的には、大きな円の上下に行を徐々に追加します。ただし、実際に起こっていることは、すべてのループで前のループの後に円が追加されることです。したがって、それらは次の順序で表示されます: 大きな円とその下、小さな円 1、2、3、4、5、6。
結論:好みの方法でページに行を追加する方法はありますか?