Senin, 13 Februari 2017

18.23

By Unknown



No comments

Bootstrap : Membuat Panel


Assalamualaikum wr.wb
Halo teman semua pada kesempatan hari ini saya akan memberikan materi
tentang apa itu Panel pada Bootstrap




PENGERTIAN
Panel adalah sebuah kotak yang memiliki garis dan padding.

LATAR BELAKANG
Membuat website agar tertata rapi dan tampilannya juga dap responsive

MAKSUD DAN TUJUAN
Agar membuat tampilan yang berada pada panel tersebut jadi responsive serta saya mempraktekan apa yang telah saya pelajari.

ALAT DAN BAHAN
  • Bootstrap
  • Sublime text
  • Laptop 

PEMBAHASAN
Bootstrap menyediakan class panel untuk membuat kotak yang terdiri dari: heading, body, dan footer.

Ada berbagai jenis dari panel yang disediakan oleh bootstrap, yaitu sabagai berikut:
  • panel-default, yaitu class untuk panel yang standar.
  • panel-success, yaitu class untuk panel dengan warna hijau.
  • panel-info, yaitu class untuk panel dengan warna biru
  • panel-danger, yaitu class untuk panel berwarna merah.
  • panel-heading, yaitu class untuk membuat panel pada bagian kepala.panel-body, yaitu class untuk membuat panel pada bagian badan atau isi utamanya.
  • panel-footer, yaitu class untuk bagian kaki yang berada dibawah

LANGKAH KERJA
Dibawah ini saa akan memberikan contoh untuk panel default atau standart:
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
    <title>panel</title>
</head>
<body>
<div class="container">
        <h3>Membuat panel dengan bootstrap</h3>
       
        <div class="panel panel-default">
            <div class="panel-heading">
                <b>MEMBUAT PANEL</b>
            </div>
            <div class="panel-body">
                <p>Panel adalah sebuah kotak yang memiliki garis dan padding.</p>
            </div>
            <div class="panel-footer">
                <b>panel footer</b>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Dari script diatas hasilnya akan seperti dibawah ini:


Keterangan
Untuk contoh diats menggunakan panel default,dan pada heading, body serta footer dapat diisi sesuai yang anda inginkan

KESIMPULAN
Bukan hanya panel default saja bootstrap juga menyediakan beberapa jenis panel lainnya.

REFERENSI
http://www.malasngoding.com/membuat-panel-dengan-bootstrap/

Sekian dan terimakasih
Wassalamualaikum wr.wb

0 komentar:

Posting Komentar