Latest web development tutorials

panel bootstrap

Bab ini akan menjelaskan panel Bootstrap (Panel). DOM perakitan panel untuk perakitan dimasukkan ke dalam kotak. Buat panel dasar, hanya perlu <div> elemen dan menambahkankelas kelas.panel .panel-default bisa, seperti yang ditunjukkan dalam contoh berikut:

contoh

<Div class = "panel panel-default" > <Div class = "panel-body"> Ini adalah panel dasar </ div> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

panel standar

title panel

Kami adalah dua cara yang bagus untuk menambahkan judul panel:

  • Menggunakankelas .panel-pos dapat menambahkan judul untuk wadah panel.untuk dengan mudah menambahkan wadah pos ke panel Anda.
  • Gunakan dengankelas .panel-judul <h1> - <h6> untuk menambahkan gaya pos yang telah ditentukan.

Contoh berikut menunjukkan ini dalam dua cara:

contoh

<Div class = "panel panel-default" > <Div class = "panel-judul"> Judul panel tanpa judul </ div> <Div class = "panel-body"> panel Konten </ div> </ Div> <Div class = "panel panel-default" > <Div class = "panel-pos"> <H3 class = "panel-title"> dengan judul judul panel </ h3> </ Div> <Div class = "panel-body"> panel Konten </ div> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

title panel

panel Catatan kaki

Kita dapat menambahkan catatan kaki di panel, hanya menempatkan teks pada tombol ataudengan kelas .panel-footer dengan <div> bisa.Contoh berikut menggambarkan hal ini:

contoh

<Div class = "panel panel-default" > <Div class = "panel-body"> Ini adalah panel dasar </ div> <Div class = "panel-footer"> Panel catatan kaki </ div> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

panel Catatan kaki
Panel Catatan kaki tidak mewarisi warna dan warna perbatasan dari panel dengan konteks, karena tidak dalam isi latar.

panel konteks dengan warna

Gunakan Konteks Status kelaspanel-utama, panel-sukses, panel-info, panel-peringatan, panel-bahaya, untuk mengatur panel warna dengan konteks, contoh adalah sebagai berikut:

contoh

<Div class = "panel panel-utama" > <Div class = "panel-pos"> <H3 class = "panel-title"> title Panel </ h3> </ Div> <Div class = "panel-body"> Ini adalah panel dasar </ div> </ Div> <Div class = "panel panel-sukses" > <Div class = "panel-pos"> <H3 class = "panel-title"> title Panel </ h3> </ Div> <Div class = "panel-body"> Ini adalah panel dasar </ div> </ Div> <Div class = "panel panel-info" > <Div class = "panel-pos"> <H3 class = "panel-title"> title Panel </ h3> </ Div> <Div class = "panel-body"> Ini adalah panel dasar </ div> </ Div> <Div class = "panel panel-warning" > <Div class = "panel-pos"> <H3 class = "panel-title"> title Panel </ h3> </ Div> <Div class = "panel-body"> Ini adalah panel dasar </ div> </ Div> <Div class = "panel panel-bahaya" > <Div class = "panel-pos"> <H3 class = "panel-title"> title Panel </ h3> </ Div> <Div class = "panel-body"> Ini adalah panel dasar </ div> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

panel konteks dengan warna

Dengan panel meja

Untuk membuat tabel tanpa batas di panel, kita dapat menggunakan .tablekelas di panel.Misalkan ada <div> yang mengandung.panel-tubuh, kita dapat menambahkan perbatasan ekstra untuk bagian atas meja untuk memisahkan.Jika tidak.panel-badan <div>, komponen akan bergerak tanpa gangguan dari panel ke meja kepala.

Contoh berikut menggambarkan hal ini:

contoh

<Div class = "panel panel-default" > <Div class = "panel-pos"> <H3 class = "panel-title"> title Panel </ h3> </ Div> <Div class = "panel-body"> Ini adalah panel dasar </ div> <Table class = "table"> <Th> Produk </ th> <th> Harga </ th> <Tr> <td> Produk A </ td> <td> 200 </ td> </ tr> <Tr> <td> Produk B </ td> <td> 400 </ td> </ tr> </ Table> </ Div> <Div class = "panel panel-default" > <Div class = "panel-pos"> judul Panel </ div> <Table class = "table"> <Th> Produk </ th> <th> Harga </ th> <Tr> <td> Produk A </ td> <td> 200 </ td> </ tr> <Tr> <td> Produk B </ td> <td> 400 </ td> </ tr> </ Table> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

Dengan panel meja

Dengan daftar kelompok panel

Kami dapat dimasukkan dalam daftar kelompok panel dengan menambahkan.panel dan kelas .panel-defaultdi <div> elemen untuk membuat panel, dan menambahkan daftar grup di panel. Anda dapat memilih dari daftar kelompok belajar cara membuat kelompok daftar bab.

contoh

<Div class = "panel panel-default" > <Div class = "panel-pos"> judul Panel </ div> <Div class = "panel-body"> <P> Ini adalah konten dasar panel. Ini adalah isi dasar panel. Ini adalah isi dasar panel. Ini adalah isi dasar panel. Ini adalah isi dasar panel. Ini adalah isi dasar panel. Ini adalah isi dasar panel. Ini adalah isi dasar panel. </ P> </ Div> <Ul class = "list-kelompok"> <Li class = "list-kelompok-item "> registrasi nama domain gratis </ li> <Li class = "list-kelompok-item "> Jendela ruang hosting gratis </ li> <Li class = "list-kelompok-item "> Jumlah gambar </ li> <Li class = "list-kelompok-item "> 24 * 7 dukungan </ li> <Li class = "list-kelompok-item "> Memperbarui biaya tahunan </ li> </ Ul> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

Dengan daftar kelompok panel