Bootstrap Page Layout

Container

Container kullanımı bootstrap'ta en yaygın kullanılan sayfa düzeni elemanlarındandır. Sabit bir genişlikte ortalı olarak kullanılır ve her bir alt öğeyi destekler. Container kullanmak sayfada alt alta yatay bloklar oluşturmanızı sağlar. container 576 pikselden önce 100% genişliğinde sonraki ekran boyutlarında aşağıdaki tabloya göre değişen ölçülerdedir.

Container-fluid

Bootstrap container-fluid ekrandaki tüm genişliği kullanan etikettir. container-fluid  her boyutta 100% genişliğinde sahiptir.

<div class="container">
  <!-- İçerik -->
</div>

<div class="container-fluid">
   <!-- İçerik -->
</div>

min-width

// genişlikği en az 576px ve yukarı olan cihazlarda css kodlarını buraya yazabilirsiniz
@media (min-width: 576px) { ... }

// genişlikği en az768px(tablet ve üstü)
@media (min-width: 768px) { ... }

// genişlikği en az 992px
@media (min-width: 992px) { ... }

// genişlikği en az 1200px
@media (min-width: 1200px) { ... }



max-width

// genişlikği en fazla 576px ve aşağı olan cihazlarda css kodlarını buraya yazabilirsiniz
@media (max-width: 575.98px) { ... }

/ genişlikği en fazla 768px
@media (max-width: 767.98px) { ... }

/ genişlikği en fazla 992px
@media (max-width: 991.98px) { ... }

/ genişlikği en fazla 1200px
@media (max-width: 1199.98px) { ... }



Ekstra küçük <576 px
Küçük ≥576px
Orta ≥768px
Büyük ≥992px
Ekstra büyük ≥1200px
.container
100%
540 px
720 px960px
1140 px
.container-sm
100%
540 px
720 px
960px
1140 px
.container-md
100%
100%
720 px
960px
1140 px
.container-lg
100%
100%
100%
960px1140 px
.container-xl
100%
100%
100%
100%
1140 px
.container-fluid
100%
100%
100%
100%
100%



// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
E.Albayrak

0 Yorum

Soru & Yorum


Web Tasarım

Renkli Kare

Web Tasarım Ajansı