Bagaimana untuk melaksanakan senarai definisi bootstrap?

Senarai definisi bootstrap pada dasarnya adalah gabungan html

,

,

tags. Bootstrap menambah gaya dan sistem raster kepadanya, menjadikannya kelihatan lebih cantik dan responsif.

Senarai definisi untuk bootstrap? Soalan ini indah. Nampaknya mudah, tetapi sebenarnya terdapat banyak helah. Ramai orang baru berfikir bahawa Bootstrap hanya sekumpulan gaya, dan semuanya dilakukan jika anda meletakkannya. Malah, ini tidak berlaku. Hanya dengan memahami idea -idea reka bentuk di belakangnya, anda boleh bermain dengannya. Dalam artikel ini, mari kita lihat pelaksanaan senarai definisi bootstrap dan bercakap tentang beberapa teknik yang tidak diketahui. Selepas membacanya, anda bukan sahaja dapat dengan mudah mendapatkan senarai definisi, tetapi juga mempunyai pemahaman yang lebih mendalam tentang mekanisme bootstrap.

Mari kita bincangkan asas -asas terlebih dahulu. Senarai definisi bootstrap pada dasarnya adalah gabungan html <dl></dl> , <dt></dt> , <dd></dd> tags. Bootstrap hanya menambah beberapa barangan ke tag ini untuk menjadikannya kelihatan lebih cantik dan lebih sesuai dengan gaya keseluruhan bootstrap. Jika anda menulis secara langsung dalam HTML asli, anda juga boleh melaksanakan senarai definisi, tetapi kesannya, anda tahu, adalah sama dan tidak mempunyai estetika.

Ayuh, tambahkan kod dan pengalaman pesona bootstrap:

 <code class="html"><dl class="row"> <dt class="col-sm-3">Term 1</dt> <dd class="col-sm-9">Definition 1 goes here.</dd> <dt class="col-sm-3">Term 2</dt> <dd class="col-sm-9">Definition 2 goes here.</dd> <dt class="col-sm-3">Term 3</dt> <dd class="col-sm-9">Definition 3 goes here.</dd> </dl></code>

Pernahkah anda melihat class="row" dan col-sm-* ? Inilah sistem raster Bootstrap yang berfungsi. Ia mengatur senarai definisi secara mendatar, col-sm-* mengawal lebar setiap item, dan direka secara respons. Tidak mengapa untuk tidak menggunakan sistem grid ini, tetapi tidak mengapa menggunakan gaya lalai bootstrap, tetapi kesannya akan sedikit berbeza, dan tentu saja, ia juga lebih mudah:

 <code class="html"><dl> <dt>Term 1</dt> <dd>Definition 1 goes here.</dd> <dt>Term 2</dt> <dd>Definition 2 goes here.</dd> <dt>Term 3</dt> <dd>Definition 3 goes here.</dd> </dl></code>

Walau bagaimanapun, kedua -dua kaedah penulisan ini mungkin berkelakuan berbeza di bawah saiz skrin yang berbeza, jadi anda perlu memilih mengikut keadaan sebenar. Saya secara peribadi lebih suka menggunakan sistem grid kerana ia lebih fleksibel dan lebih terkawal.

Seterusnya, mari kita bercakap tentang beberapa penggunaan lanjutan. Sebagai contoh, jika anda ingin menambah gaya titik ke item definisi ( <dt></dt> ) seperti berani atau warna, ia benar -benar baik:

 <code class="html"><dl class="row"> <dt class="col-sm-3 text-primary">Term 1</dt> <!-- text-primary是Bootstrap的样式类--> <dd class="col-sm-9">Definition 1 goes here.</dd> <!-- ...more items... --> </dl></code>

Sebagai contoh, jika anda ingin bersarang senarai definisi, ia juga OK, yang sangat berguna apabila berurusan dengan struktur maklumat yang kompleks. Walau bagaimanapun, apabila bersarang, anda perlu memberi perhatian kepada rasa lapisan dan tidak membuatnya terlalu kemas, jika tidak, ia akan menyakitkan untuk dikekalkan. Ini memerlukan anda mempunyai pemahaman yang baik tentang semantik HTML.

Akhirnya, mari kita bercakap tentang beberapa perangkap. Kesilapan umum untuk pemula tidak memahami reka bentuk responsif Bootstrap, yang membawa kepada prestasi paparan yang lemah di bawah saiz skrin yang berbeza. Terdapat juga konflik gaya, kerana gaya Bootstrap mungkin bertentangan dengan gaya anda sendiri, menyebabkan pengecualian paparan. Penyelesaian? Sama ada CSS semakan semula atau gunakan preprocessor CSS yang lebih maju (seperti SASS atau kurang) untuk menguruskan gaya anda dengan lebih baik.

Singkatnya, pelaksanaan senarai definisi Bootstrap tidak rumit. Kuncinya adalah untuk memahami sistem Raster dan kelas gaya Bootstrap. Hanya dengan mengamalkan lebih banyak dan meringkaskan lebih banyak, anda boleh menguasainya. Ingat, kod hanyalah alat, dan memahami falsafah reka bentuk di belakangnya hanya boleh menulis lebih elegan dan lebih mudah untuk mengekalkan kod.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai definisi bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!