masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial Bootstrap > teks badan

Bagaimanakah bootstrap boleh mencapai perubahan warna berjalin?

WBOY
Lepaskan： 2021-12-28 09:44:27
asal
3481 orang telah melayarinya

Dalam bootstrap, anda boleh menggunakan kelas jadual ".jalur meja" untuk mencapai perubahan warna baris ganti ini digunakan untuk menetapkan latar belakang baris ganjil kepada kelabu dalam teg tbody untuk menambah gaya "class=" pada elemen jadual jadual berjalur "" sudah memadai.

Bagaimanakah bootstrap boleh mencapai perubahan warna berjalin?

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Apa yang boleh dicapai dengan bootstrap Perubahan warna baris alternatif

Dengan menambahkan kelas berjalur .table, anda akan melihat jalur pada baris di dalam

.

Anda boleh menggunakan kelas jadual ".jalur meja" untuk mencapai perubahan warna berjalin Anda hanya perlu menambah gaya "class="table table-striped"" pada elemen jadual.

Contoh adalah seperti berikut: 

<html>
<head>
<meta charset="utf-8"> 
<title>Bootstrap 实例 - 条纹表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</body>
</html>
Salin selepas log masuk

Hasil keluaran:

Bagaimanakah bootstrap boleh mencapai perubahan warna berjalin?

Pembelajaran yang disyorkan: "tutorial penggunaan bootstrap"

Atas ialah kandungan terperinci Bagaimanakah bootstrap boleh mencapai perubahan warna berjalin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
bootstrap
sumber：php.cn
Artikel sebelumnya：Apakah yang boleh membuatkan elemen terapung dibiarkan dalam bootstrap? Artikel seterusnya：Apakah maksud nav dalam bootstrap?
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Suis Bootstrap tidak berfungsi dengan betul apabila halaman web diubah saiznya 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
daripada 2024-04-05 08:45:39
0
1
3443
Paparkan fail PDF AWS dalam mod Bootstrap dalam Laravel Saya telah memuat turun url aws seperti https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std...
daripada 2024-04-04 22:16:18
0
1
1450
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan