Scribd Logo
Upload

Welcome to Scribd!

  • Grid System

    Uploaded by

    Entot Suhartono
    21 views4 pages
    Grid Sistem pada Bootstrap

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Grid Sistem pada Bootstrap

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    21 views4 pages

    Grid System

    Uploaded by

    Entot Suhartono
    Grid Sistem pada Bootstrap

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Ada beberapa aturan dalam membuat webdesain salah satunya adalah grid system, Grid System

    adalah alat yang akan membantu untuk membuat layout web agar menjadi lebih rapi.

    Pada bootstrap, Grid System dibagi dalam 12 kolom (col-*) dimana dalam tiap barisnya (.row)
    yang diset dalam empat model xs (extra small), md (medium), sm (small), lg (large) sesuai lebar
    dari layar monitor, sehingga selain membantu dalam membuat layout web yang rapi, Grid
    System Bootstrap juga membantu membuat layout web yang responsive.

    Grid System Bootstrap dibagi dalam 12 kolom dan empat macam ukuruan. empat ukuran
    tersebut adalah :

    1. col-xs-* ini digunakan pada ukuran kurang dari 768px atau seukuran mobile.
    2. col-sm-* ini digunakan pada ukuran lebih dari atau sama dengan 768px atau seukuran
    tablet.
    3. col-md-* ini digunakan pada ukuran lebih dari atau sama dengan 992px atau selebar
    monitor.
    4. col-lg-* ini lebih dari atau sama dengan 1200px atau monitor besar.

    Berdasarkan grid di atas kita bisa mengkombinasikan grid agar bisa memperoleh layout web
    sesuai keinginan.

    Contoh:

    <div class="col-md-3 col-xs-3 col-sm-3 col-lg-3">...</div>


    membuat tiga kolom apapun ukuran layarnya

    <div class="col-md-3">...</div>
    Membuat tiga kolom saat berada di layar monitor seperti laptop tapi menjadi satu kolom saat
    berada dilayar smartphone.

    Selain empat macam ukuran di atas di dalam bootstrap terdapat dua macam class lain yang
    berguna dalam membuat layout web yaitu .container dan .row
    Tanpa Container Dengan Container

    Dengan container
    1 <div class="continer">
    2 <div class="row">
    3 <div class="col-md-12">...</div>
    4 </div>
    5 </div>
    Tanpa container
    1 <div class="col-md-12">
    2 <div class="row">
    3 <div class="col-md-12">...</div>
    4 </div>
    5 </div>
    Persiapan Folder dan Bootstrap WebSite

    Templater Dasar
    <html>
    <head>
    <title>Latihan 2 - Bootstrap 03</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


    <!-- <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script> -->
    <script src="js/jquery-1.12.4.min.js">
    </script>
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    Script Tahap 2
    <div class="container">

    <!-- Bagian Header -->


    <div class="row">
    <div class="col-md-12 header" id="site-header">
    <!-- isi header -->
    </div>
    </div>
    <!-- End Bagian Header -->

    <!-- Bagian Wrapper 2 kolom -->


    <div class="row">
    <div class="col-md-8 articles" id="site-content">
    <!-- isi content -->
    </div>
    <div class="col-md-4 sidebar" id="site-sidebar">
    <!-- isi sidebar -->
    </div>
    </div>
    <!-- End Bagian wrapper -->

    <!-- Bagian footer -->


    <div class="row">
    <div class="col-md-12 footer" id="site-footer">
    <!-- isi footer -->
    </div>
    </div>
    <!-- End Bagian footer -->
    </div>

    You might also like