Membuat Template Dengan Bootstrap Part 3 : Membuat Grid System

Membuat Grid System DI Bootstarp

Pengertian :

Bootstrap merupkakan Framework CSS yang sedang Booming tahun 2015 ini, karena kemudahan penggunaannya dan yang secara otomatis telah mendukung RWD atau di kenal dengan Responsive Web Design. Grid System merupakan teknik pembuatan Layout, pada framework CSS Bootstrap Grid di bagi 12.

Grid OptionGrid System Bootstrap dapat bekerja berbagai device yang terbagi 4 device yaitu:

Extra Small (col-xs) : Smarthphone < 768px
Small (col-sm) : Tablet >= 768px
Medium (col-md) : Desktop >= 992px
Large (col-lg) : Large Desktop > =1200px

ContainerDalam membuat layout kita menggunakan .container atau menggunakan .container-fluid. perbedaan container dengan container fluid adalah jika menggunakan container-fluid penggunaannya pada saat full-width atau layar penuh.

berikut perbedaan menggunakan container dan container-fluid

Script :

<div id="about" class="container-fluid">
<div class="row">
    <div class="col-sm-8">
      <h2>SMK Negeri 1 Mejayan</h2><br>
      <h4>SMK Negeri 1 Mejayan dibangun berdasarkan program pemerintah Jawa Timur yang mengembangkan sekolah bertaraf internasional khususnya jenjang SMK. Pemerintah Jawa Timur dalam hal ini yang mengampu dinas pendidikan Provinsi jawa Timur menyiapkan anggaran untuk pembangunan infrastruktur yang berupa gedung dan peralatan praktek yang berstandar internasional sedang pemerintah daerah diwajibkan menyiapkan lahan.</h4><br>
      <p>Sebagai sekolah baru dengan program keahlian baru yang belum banyak di kenal masyarakat, untuk tahun pertama pertama program keahlian TO menampung 70 siswa, RPL 56 siswa dan TPHP 18 siswa. Berkat sosialisasi yang baik masyarakat semakin besar kepercayaannya untuk mendaftarkan putra - putrinya di SMK Negeri 1 mejayan, terbukti pada PPDB tahun pelajaran 2014/2015 tercatat ada 716 pendaftar. Sekolah berhasil menampung progli TO 76 siswa, RPL 72 siswa, TPHP 93 siswa dan Teknik Kendaraan Ringan (TKR) sebagai progli baru menampung 74 siswa.</p>
      <br><button class="btn btn-default btn-lg">READ MORE</button>
    </div>
    <div class="col-sm-4">
      <img class="logo slideanim" src="../../portal_smk/img/smk.png" width="50%">
    </div>
</div>
</div>
</div>

<div class="container-fluid bg-grey">

<div class="row">
    <div class="col-sm-4">
    <img class="logo slideanim" src="../../portal_smk/img/web.png" width="50%">
    </div>
    <div class="col-sm-8">
      <h2>VISI MISI SMKN 1 MEJAYAN</h2><br>
      <h4><strong>VISI :</strong> "Menyiapkan Sumber Daya Manusia yang Berkarakter, Beriman, dan Berakhlaq Mulia, Terampil, Berjiwa Enterpreneur"</h4><br>
      <p><strong>MISI :</strong>
<ul>
    <li>Mendidik siswa yang perilaku jujur, sopan, ramah, dan bertanggung jawab.</li>
    <li>Mendidik siswa yang taat menjalankan ibadah sesuai dengan agama yang dianutnya.</li>
    <li>Membentuk Pribadi siswa yang berakhlaq mulia, menghormati sesama hidup, dan tolong menolong.</li>
    <li>Menyiapkan siswa yang menguasai ilmu pengetahuan dan teknologi sehingga mampu menjawab tantangan jaman.</li>
    <li>Mencetak siswa yang memiliki jiwa wirausaha yang berdaya saing tinggi.</li>
</ul>
</p>
    </div>
</div>
</div>
</div>
<div class="bgimg-2">
<div id="services" class="container-fluid text-center">
<h2>PRODUKTIF</h2>
<h4>Macam - Macam Jurusan yang ada di SMK Negeri 1 Mejayan</h4>
<br>
<div class="row slideanim">
    <div class="col-sm-4">
    <div class="panel-footer">
    <img src="../../portal_smk/img/rpl.png" width="30%">
      <h4>Rekayasa Perangkat Lunak</h4>
      <p>RPL adalah suatu ...</p>

      <button class="btn btn-lg">READ MORE</button>
      </div>
    </div>
    <div class="col-sm-4">
    <div class="panel-footer">
    <img src="../../portal_smk/img/tkr.png" width="37%">
      <h4>Teknik Kendaran Ringan</h4>
      <p>TKR adalah suatu ...</p>
      <button class="btn btn-lg">READ MORE</button>
    </div>
    </div>
    <div class="col-sm-4">
    <div class="panel-footer">
    <img src="../../portal_smk/img/tphp.png" width="44%">
      <h4>Teknik Pengolahan Hasil Pertanian</h4>
      <p>TPHP adalah suatu ...</p>
      <button class="btn btn-lg">READ MORE</button>
    </div>
    </div>
</div>
<br><br>
<div class="row slideanim">
    <div class="col-sm-4">
    <div class="panel-footer">
    <img src="../../portal_smk/img/tsm.png" width="37%">
      <h4>Teknik Sepedah Montor</h4>
      <p>TSM adalah suatu ...</p>
      <button class="btn btn-lg">READ MORE</button>
    </div>
    </div>

    <div class="col-sm-4">
    <div class="panel-footer">
    <img src="../../portal_smk/img/to1.png" width="39%">
      <h4>Teknik Ototronik</h4>
      <p>TO adalah suatu ...</p>
      <button class="btn btn-lg">READ MORE</button>
    </div>
    </div>
</div>
</div>
</div>
<div id="portfolio" class="container-fluid text-center bg-grey">
<h2>Sarana & Prasarana</h2>
<h4>SMK Negeri 1 Mejayan</h4>
<div class="row text-center slideanim">
    <div class="col-sm-4">
      <div class="thumbnail">
      <br>
        <p>Free Hotspot Area</p>
        <p>2 Lab RPL</p>
        <p>2 Lab TO</p>
        <p>2 Lab TKR</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
      <br>
        <p>2 Lab TPHP</p>
        <p>Lab KKPI</p>
        <p>2 Kamar Mandi Siswa</p>
        <p>Tempat Parkir</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
      <br>
        <p>Lapangan</p>
        <p>3 Kantin</p>
        <p>CCTV di 5 titik sekolah</p>
        <p>Mobil Sekolah</p>
      </div>
    </div>
</div>