Дизайн пользовательского интерфейса с Bootstrap

Question

Я хотел был бы сделать интерфейс как в ссылке, которую я представил ниже. Как это возможно с помощью Bootstrap или с базовой таблицей html?

https://imgur.com/COVjhAL

Answer 1

Это расположение может быть создан в два ряда - один для первых 4-х элементов в первом столбце + большой элемент, а другой для остальных 4 маленьких элементов. Ряд в Bootstrap в основном равен <div class="row">

Внутри первой строки должно быть 2 столбца различной ширины (в процентах). Первым может быть <div class="col-xs-3">, а вторым может быть <div class="col-xs-9">.

[Примечание]: сумма чисел в col-xs-3 и col-xs-9 должна быть равна .

То же самое относится ко второй строке. Есть 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>