Грид система

Bootstrap грид системата предоставя на ползване 12 колони. Ако не искаме да ползваме всичките можем да групираме някои за да имаме по-широки колони.

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap грида е риспонсив колоните могат да се реаранжират автоматично в зависимост от размера на екрана.

Класове

  • xs (за телефони)
  • sm (за таблети)
  • md (за десктоп)
  • lg (за големи десктопи)

Всички тези класове може да се комбинират за създаването на динамични и гъвкави структури.

Основна структура на Bootstrap грида

Следващия код е примерен:

<div class=„row“> <div class=„col-*-*“></div> </div> <div class=„row“> <div class=„col-*-*“></div> <div class=„col-*-*“></div> <div class=„col-*-*“></div> </div> <div class=„row“></div>
Първо: създаваме „ред“ – <div class=“row“>. След това добавяме броя колони, който искаме.

За да създадем три еднакви колони

.col-sm-4
.col-sm-4
.col-sm-4

За да създадем две разнородни колони

.col-sm-4
.col-sm-8

Ще разгледаме подробно грида в друг урок