Pengantar layout Bootstrap

Komponen dan pilihan dalam mengerjakan layout Boostrap adalah

1. Container
2. Sistem Grid
3. Media Object yang fleksibel
4. Utility Class yang responsif

 

• • Container
    Container merupakan elemen paling dasar dari Bootstrap. Container merupakan layout wajib ketika menggunakan sistem Grid.
    Secara umum class .container memiliki lebar atau width yang tetap.
    Sedangkan class .container-fluid menggunakan seluruh viewport
    
  • Responsive breakpoints
    

    // Extra small devices (portrait phones, less than 576px)
    // No media query for `xs` since this is the default in Bootstrap

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

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

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

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

  • z-index
    

    $zindex-dropdown: 1000 !default;
    $zindex-sticky: 1020 !default;
    $zindex-fixed: 1030 !default;
    $zindex-modal-backdrop: 1040 !default;
    $zindex-modal: 1050 !default;
    $zindex-popover: 1060 !default;
    $zindex-tooltip: 1070 !default;

Informasi lebih lanjut silahkan mengunjungi https://getbootstrap.com/docs/4.2/layout/overview/ .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.