ブートストラップを使用したユーザーインターフェイスデザイン

Question

私は下記のリンク先のようなUIを作りたいと思います。どのようにブートストラップや基本的なHTMLテーブルで可能ですか？最初の列+大きな要素、残り4つの小さな要素に対するもう一つの最初の4つの要素のための1つ -

https://imgur.com/COVjhAL

Answer 1

このレイアウトは、二列に作成することができます。ブートストラップの行は、基本的には<div class="row">

の中に、幅が異なる2つの列（パーセント）が必要です。第1のものは<div class="col-xs-3">であり、第2のものは<div class="col-xs-9">である。

[注]：col-xs-3とcol-xs-9の数字の合計は、に等しくなければなりません。

第2行についても同様です。そこに4つの要素があるので、計算が容易であろう。

12/4 = 3 - その列内の各要素について、<div class="col-xs-3">が使用されるべきです。

---

結果のHTMLは次のようになります。

<div> 

    <div class="row"> 
    <div class="col-sm-3"> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="col-sm-9"></div> 
    </div> 

    <div class="row"> 
    <div class="col-sm-3"></div> 
    <div class="col-sm-3"></div> 
    <div class="col-sm-3"></div> 
    <div class="col-sm-3"></div> 
    </div> 

</div> 

Answer 2

あなたは、このようにやろうとすることができる。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-9"> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-3"> 
     </div> 
     <div class="col-md-3"> 
     </div> 
     <div class="col-md-3"> 
     </div> 
     <div class="col-md-3"> 
     </div> 
    </div> 
</div>