membuat panel dengan bootstrap

Bootstrap Part 10 : Membuat Panel Dengan Bootstrap


Membuat panel dengan Bootstrap

Panel adalah sebuah kotak yang memiliki garis dan padding. bootstrap menyediakan class panel untuk membuat kotak yang memiliki heading dan footer kotak tersebut. panel yang di sediakan oleh bootstrap terdiri dari panel heading atau bagian kepala panel, panel body atau panel bagian badan, dan panel footer atau panel yang terletak di bawah panel sebagai footer.

Ada beberapa class panel yang di sediakan oleh bootstrap untuk membuat panel.

  • panel-default
    merupakan class yang di gunakan untuk membuat panel dengan warna standar.
  • panel-success
    merupakan class yang di sediakan bootstrap untuk membuat panel yang berwarna hijau.
  • panel-info
    merupakan class yang di sediakan bootstrap untuk membuat panel yang berwarna biru.
  • panel-warning
    merupakan class yang di sediakan bootstrap untuk membuat panel yang berwarna kuning.
  • panel-danger
    merupakan class yang di sediakan bootstrap untuk membuat panel yang berwarna merah.
  • panel-heading
    merupakan class yang di sediakan bootstrap untuk membuat panel bagian kepala atau heading.
  • panel-body
    merupakan class yang di sediakan bootstrap untuk membuat panel bagian badan.
  • panel-footer
    merupakan class yang di sediakan bootstrap untuk membuat panel bagian footer atau kaki.

langsung saja ke cara membuat panel dengan bootstrap.

membuat panel dengan bootstrap

membuat panel dengan bootstrap

dapat di lihat pada contoh membuat panel dengan bootstrap di atas. contoh panel di atas merupakan panel default. perhatikan contoh di atas untuk membuat panel dengan bootstrap. untuk membuat panel dengan bootstrap yang pertama kali di buat adalah menentukan model panel. contoh di atas kita menggunakan “panel-default”

untuk menggunakan model panel yang lain anda bisa mengganti panel-default dengan panel-success, panel-danger, panel-info, panel-warning seperti yang sudah di jelaskan di atas.

kemudian berikan isi panel dengan membuat panel heading, panel-body dan panel-footer, panel-heading dan panel-footer merupakan optional, anda bisa menggunakannya boleh tidak sesuai dengan keinginan anda.

dan berikut ini contoh lain penggunaan panel bootstrap.

cara membuat panel dengan bootstrap

cara membuat panel dengan bootstrap

See the Pen XXRjoZ by Malas Ngoding (@malasngoding) on CodePen.0

Sekianlah tutorial bootstrap part 10 : membuat panel dengan bootstrap.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

Incoming search terms:

  • membuat dashboard admin dengan bootstrap
  • membuat header dengan bootstrap
  • membuat halaman admin dengan bootstrap
  • membuat sidebar dengan bootstrap
  • membuat footer dengan bootstrap 3
  • membuat dashboard bootstrap
  • malasngoding bootstrap membuat content
  • membuat dashboard dengan bootstrap
  • membuat header bootstrap
  • cara membuat panel di bootstrap




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • 2 Comments
  • […] 8 : Pagination dan Breadcrumb dengan Bootstrap Bootstrap Part 9 : Membuat List dengan Bootstrap Bootstrap Part 10 : Membuat Panel dengan Bootstrap Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap Bootstrap Part 12 : Membuat […]


  • […] 8 : Pagination dan Breadcrumb dengan Bootstrap Bootstrap Part 9 : Membuat List dengan Bootstrap Bootstrap Part 10 : Membuat Panel dengan Bootstrap Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap Bootstrap Part 12 : Membuat […]



Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]