Latest web development tutorials

Form bootstrap

Bootstrap menyediakan meja tata letak dibuat jelas. Tabel berikut ini berisi beberapa elemen tabel dukungan Bootstrap:

label deskripsi
<Table> Menambahkan untuk membentuk dasar dari gaya.
<Thead> Tabel kontainer baris header elemen (<tr>), digunakan untuk mengidentifikasi kolom tabel.
<Tbody> Tabel kontainer elemen dalam tubuh baris tabel (<tr>).
<Tr> Sekelompok muncul di satu baris dalam elemen kontainer dari sel tabel (<td> atau <th>).
<Td> Tabel standar sel.
<Th> Khusus sel tabel, digunakan untuk mengidentifikasi kolom atau baris (tergantung pada luas dan lokasi). Anda harus menggunakan <thead> dalam.
<Keterangan> Tentang toko meja deskripsi konten atau ringkasan.

kelas formulir

Berikut tabel gaya tabel dapat digunakan:

kategori deskripsi contoh
.table Sewenang-wenang <table> Add gaya dasar (hanya separator horizontal) mencoba
.table-bergaris Dalam <tbody> dalam bentuk untuk menambahkan garis-garis zebra (IE8 tidak mendukung) mencoba
.table-berbatasan Menambahkan perbatasan untuk semua sel tabel mencoba
.table-melayang Dalam <tbody> dalam baris manapun memungkinkan negara melayang mencoba
.table-kental Membuat bentuk yang lebih kompak mencoba
penggunaan bersama dari semua kelas bentuk mencoba

kelas <Tr>, <th> dan <td>

Kelas Tabel berikut dapat digunakan untuk membentuk baris atau sel:

kategori deskripsi contoh
.active Aplikasi warna hover pada baris atau sel mencoba
.success Ini menunjukkan keberhasilan operasi mencoba
.info Informasi yang mewakili berbagai operasi mencoba
.warning Ini merupakan operasi peringatan mencoba
.danger Ini merupakan operasi yang berbahaya mencoba

Bentuk dasar

Jika Anda ingin hanya dengan padding (padding) dan tingkat meja perpecahan dasar, menambahkankelas.table, seperti yang ditunjukkan dalam contoh berikut:

contoh

<Table class = "table"> <Caption> tata letak tabel dasar </ caption> <Thead> <Tr> <Th> Nama </ th> <Th> Kota </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> </ Tr> </ Tbody> </ Table>

Coba »

Hasilnya adalah sebagai berikut:

Bentuk dasar

kelas Formulir opsional

Selain markup meja dasar dan kelas .table, dan beberapa dapat digunakan sebagai penanda untuk menentukan kelas gaya. Berikut ini akan memperkenalkan Anda kepada kelas-kelas ini.

tabel bergaris

Dengan menambahkankelas .table-bergaris,Anda akan melihat garis-garis pada baris <tbody> dalam, seperti contoh berikut menunjukkan:

contoh

<Table class = "meja meja-bergaris" > <Caption> tata letak meja garis-garis </ caption> <Thead> <Tr> <Th> Nama </ th> <Th> Kota </ th> <Th> sandi </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400.003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411.027 </ td> </ Tr> </ Tbody> </ Table>

Coba »

Hasilnya adalah sebagai berikut:

tabel bergaris

tabel Perbatasan

Dengan menambahkankelas .table-berbatasan,Anda akan melihat bahwa setiap elemen memiliki perbatasan sekitar, dan total bulat bentuk, seperti yang ditunjukkan dalam contoh berikut:

contoh

<Table class = "meja meja-berbatasan" > <Caption> Tabel tata letak bingkai </ caption> <Thead> <Tr> <Th> Nama </ th> <Th> Kota </ th> th> sandi </ th> </ Tr> </ Thead> tbody> <tr > <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400.003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411.027 </ td> </ Tr> </ Tbody> </ Table>

Coba »

Hasilnya adalah sebagai berikut:

tabel Perbatasan

tabel Hover

Dengan menambahkankelas .table-hover,ketika kursor berada di atas baris ketika akan ada latar belakang abu-abu terang, seperti yang ditunjukkan dalam contoh berikut:

contoh

<Table class = "meja meja-melayang" > <Caption> tata letak meja melayang </ caption> <Thead> <Tr> <Th> Nama </ th> <Th> Kota </ th> <Th> sandi </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400.003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411.027 </ td> </ Tr> </ Tbody> </ Table>

Coba »

Hasilnya adalah sebagai berikut:

tabel Hover

Form kompak

Dengan menambahkankelas .table-kental,inline padding (padding) yang dipotong setengah, sehingga meja terlihat lebih kompak, seperti yang ditunjukkan dalam contoh berikut. Informasi ini berguna ketika Anda ingin terlihat lebih kompak.

contoh

<Table class = "meja meja-kental" > <Caption> efisien tata letak bentuk </ caption> <Thead> <Tr> <Th> Nama </ th> <Th> Kota </ th> <Th> sandi </ th> </ tr> </ Thead> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400.003 </ td> </ tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411.027 </ td> </ tr> </ Tbody> </ Table>

Coba »

Hasilnya adalah sebagai berikut:

Form kompak

kelas konteks

kelas konteks tercantum dalam tabel berikut memungkinkan Anda untuk mengubah warna latar belakang dari baris tabel atau sel-sel individual.

类描述
.active对某一特定的行或单元格应用悬停颜色
.success表示一个成功的或积极的动作
.warning表示一个需要注意的警告
.danger表示一个危险的或潜在的负面动作

Kelas-kelas ini dapat diterapkan pada <tr>, <td> atau <th>.

contoh

<Table class = "table"> <Caption> tata letak meja konteks </ caption> <Thead> <Tr> <Th> Produk </ th> <Th> Tanggal Pembayaran </ th> <Th> Status </ th> </ tr> </ Thead> <Tbody> <Tr class = "aktif"> <Td> Produk 1 </ td> <Td> 23/11/2013 </ td> <Td> untuk dikirim </ td> </ tr> <Tr class = "sukses"> <Td> Produk 2 </ td> <Td> 2013/10/11 </ td> <Td> Pengiriman </ td> </ tr> <Tr class = "warning"> <Td> Produk 3 </ td> <Td> 20/10/2013 </ td> <Td> dikonfirmasi </ td> </ tr> <Tr class = "bahaya"> <Td> Produk 4 </ td> <Td> 20/10/2013 </ td> <Td> telah kembali </ td> </ tr> </ Tbody> </ Table>

Coba »

Hasilnya adalah sebagai berikut:

kelas konteks

meja responsif

Oleh.tabledibungkus dalamkelas .table-responsif,Anda dapat memiliki meja untuk menggulir secara horizontal untuk mengakomodasi perangkat kecil (kurang dari 768px). Bila dilihat pada peralatan skala besar lebih besar dari 768px lebar, Anda tidak akan melihat perbedaan.

contoh

<Div class = "table-responsif"> <Table class = "table"> <Caption> responsif tata letak meja </ caption> <Thead> <Tr> <Th> Produk </ th> <Th> Tanggal Pembayaran </ th> <Th> Status </ th> </ tr> </ Thead> <Tbody> <Tr> <Td> Produk 1 </ td> <Td> 23/11/2013 </ td> <Td> untuk dikirim </ td> </ tr> <Tr> <Td> Produk 2 </ td> <Td> 2013/10/11 </ td> <Td> Pengiriman </ td> </ tr> <Tr> <Td> Produk 3 </ td> <Td> 20/10/2013 </ td> <Td> dikonfirmasi </ td> </ tr> <Tr> <Td> Produk 4 </ td> <Td> 20/10/2013 </ td> <Td> telah kembali </ td> </ tr> </ Tbody> </ Table> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

meja responsif