Senarai gaya apa yang menyokong Bootstrap?

Bootstrap menyokong empat gaya senarai: senarai yang tidak disengajakan, senarai yang diperintahkan, senarai yang tidak teratur (semuanya adalah gaya lalai), dan senarai sebaris yang boleh digunakan untuk membuat menu navigasi mendatar dan awan tag. Di samping itu, Bootstrap juga menyediakan kelas senarai kumpulan yang kuat yang membuat senarai dengan sudut bulat, sempadan, dan warna latar belakang untuk memaparkan senarai projek atau menu navigasi.

Senarai gaya apa yang menyokong Bootstrap? Soalan ini hebat! Ia kelihatan mudah di permukaan, tetapi jika anda menggali lebih mendalam, anda akan mendapati bahawa Bootstrap mengendalikan senarai lebih fleksibel daripada yang anda fikirkan. Ia bukan sekadar pelarasan gaya yang mudah, tetapi ia menyediakan alat yang kuat untuk membina pelbagai struktur senarai, dan juga membolehkan anda bermain dengan beberapa helah yang tidak dijangka.

Pertama, anda perlu memahami idea teras bootstrap: cepat membina elemen halaman melalui kelas CSS yang telah ditetapkan. Oleh itu, berkenaan dengan senarai, ia tidak mencipta sebarang jenis senarai baru, tetapi sebaliknya mengubahsuai penampilan dan tingkah laku elemen senarai standard HTML <ul></ul> , <ol></ol> dan <dl></dl> dengan bijak menggunakan kelas CSS.

Paling asas, Bootstrap menyediakan gaya lalai untuk senarai yang tidak terkawal, senarai yang diperintahkan dan senarai yang tidak teratur. Walaupun mudah, gaya ini adalah asas untuk membina senarai kompleks. Anda boleh menggunakan <ul></ul> dan <ol></ol> tag secara langsung, dan Bootstrap secara automatik akan menggunakan gaya lalainya.

Tetapi apa yang benar-benar menarik ialah Bootstrap menyediakan dua kelas yang kuat: list-inline dan list-group . Kelas list-inline boleh mengatur item senarai pada baris yang sama, yang sangat berguna apabila membuat menu navigasi mendatar atau awan tag. Lihat ini:

 <code class="html"><ul class="list-inline"> <li class="list-inline-item">Item 1</li> <li class="list-inline-item">Item 2</li> <li class="list-inline-item">Item 3</li> </ul></code>

Mudah? Tetapi kesan yang boleh dibawa adalah menakjubkan. Harus diingat bahawa kelas list-inline-item digunakan dengan list-inline . Ia secara automatik akan menambah margin dan beberapa pelarasan gaya lain ke item senarai untuk memastikan terdapat jarak yang betul antara item senarai. Jika anda ingin mengawal jarak dengan lebih halus, anda boleh menyesuaikan CSS sendiri. Ingat, Bootstrap hanya rangka kerja, dan kawalan gaya muktamad masih ada di tangan anda.

Kelas list-group lebih berkuasa, ia boleh membuat senarai dengan sudut bulat, sempadan, dan warna latar belakang, yang biasanya digunakan untuk memaparkan senarai item, menu navigasi, atau sidebars.

 <code class="html"><ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul></code>

Contoh ini menunjukkan gabungan list-group dan list-group-item . Anda boleh menukar status item senarai dengan menambah active , disabled , dan lain -lain, dan anda juga boleh menggabungkan kelas bootstrap lain untuk mencapai kesan gaya yang lebih kompleks. Sebagai contoh, list-group-flush boleh mengeluarkan pembahagi antara item senarai, list-group-horizontal boleh mengatur item senarai secara mendatar.

Tetapi jangan lupa tag <dl></dl> ! Tag <dl></dl> , <dt></dt> dan <dd></dd> yang menentukan senarai keterangan juga digunakan dalam bootstrap, kecuali tidak ada kelas khas untuk mengubahnya. Ini memerlukan anda menggunakan CSS untuk menyesuaikan gaya sendiri, atau menggunakan kelas alat lain yang disediakan oleh Bootstrap untuk mencapai kesan yang lebih kaya.

Akhirnya, saya ingin mengingatkan anda bahawa kemas kini versi bootstrap boleh membawa beberapa perubahan halus, jadi lebih baik merujuk kepada dokumentasi rasmi untuk mendapatkan maklumat terkini. Jangan menjadi takhayul tentang tutorial lama atau blog, merangkul perubahan dan menjadi pemaju yang belajar sepanjang masa! Lagipun, teknologi sentiasa berubah, dan hanya dengan pembelajaran berterusan kita tidak dapat dikalahkan. Ingat, kod tidak statik, dan aplikasi fleksibel adalah cara terbaik untuk pergi.

Atas ialah kandungan terperinci Senarai gaya apa yang menyokong Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!