Apakah perubahan yang telah dibuat dengan gaya senarai Bootstrap 5?

Perubahan gaya Bootstrap 5 adalah disebabkan oleh pengoptimuman terperinci dan peningkatan semantik, termasuk: margin lalai senarai yang tidak teratur dipermudahkan, dan kesan visual adalah bersih dan kemas; Gaya senarai menekankan semantik, meningkatkan kebolehcapaian dan penyelenggaraan.

Bootstrap 5 senarai gaya perubahan? Malangnya, soalan ini adalah soalan yang baik! Bootstrap 5 perubahan kepada gaya senarai, sama ada besar atau kecil, tetapi ia pasti bernilai merasakannya. Ia tidak sepenuhnya membatalkan seni bina terdahulu, tetapi memberi perhatian lebih kepada pengoptimuman butiran dan peningkatan semantik. Untuk meletakkannya secara terang -terangan, ia adalah untuk menjadikan senarai anda kelihatan lebih moden, lebih elegan, dan lebih mudah untuk dikekalkan.

Mari kita bincangkan asas -asas terlebih dahulu. Bootstrap sentiasa menjadi pemprosesan yang lebih mudah senarai, dan ia tidak lebih daripada menggunakan beberapa nama kelas untuk mengawal gaya, seperti list-unstyled untuk menghapuskan peluru, list-inline untuk mengatur item senarai secara mendatar, dan lain-lain.

Tetapi intipati Bootstrap 5 terletak pada penggubalan butirannya. Ia menekankan semantik lebih banyak, yang dicerminkan dalam pelarasan gaya lalainya untuk menyenaraikan elemen. Sebagai contoh, pada masa lalu, senarai tidak teratur Bootstrap akan mempunyai margin kecil secara lalai, tetapi dalam Bootstrap 5, margin ini dipermudahkan dan kelihatan lebih bersih. Ini seolah -olah sedikit perubahan dapat meningkatkan kesan visual keseluruhan. Bayangkan jika halaman anda dipenuhi dengan pelbagai senarai, perbezaan halus ini dapat membuat perbezaan yang signifikan.

Mari kita lihat kod dan rasakan perbezaan yang halus:

 


  <meta charset="utf-8">
  <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
  <tirly> Bootstrap 5 List Styles 
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integriti="SHA384-9NDCYUIBZAI2FUVXJI0CJMCAPSMO7SNPJEF0486QHLNUZ2CDERHO02IUK6FUUVM" crossorigin="Anonymous">


  <ul class="List-Unstyled">
    <li> Perkara 1 </li>
    <li> Item 2 </li>
    <li> Perkara 3 </li>
  </ul>

  <ul>
    <li> Item 1 (lalai) </li>
    <li> Item 2 (lalai) </li>
    <li> Item 3 (lalai) </li>
  </ul>

  <ol>
    <li> Perkara 1 (dipesan) </li>
    <li> Item 2 (dipesan) </li>
    <li> Item 3 (dipesan) </li>
  </ol>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integriti="SHA384-GEWF76RCWLTNZ8QWWOWPQNGUL3RMWHVBC9FHGDLKRXDIJJIGB/J/68SIY3TE4BKZ" crossorigin="Anonymous"> </script>

</tirly>

Kod ini menunjukkan senarai bootstrap 5 ( <ul></ul> ) yang tidak teratur, serta senarai lalai yang tidak teratur dan senarai yang diperintahkan ( <ol></ol> ). Anda akan mendapati bahawa kelas list-unstyled masih berkesan menghilangkan peluru, sementara gaya senarai lalai lebih ringkas. Ini betul -betul pengoptimuman Bootstrap 5 secara terperinci.

Sudah tentu, ini hanyalah hujung gunung es. Bootstrap 5 juga boleh memperkenalkan lebih banyak tweak mengenai gaya senarai dalam siaran masa depan, seperti pilihan penyesuaian yang lebih fleksibel, atau sokongan responsif untuk saiz skrin yang berbeza. Oleh itu, perhatikan dokumen rasmi Bootstrap untuk mengikuti perkembangan perubahan terkini.

Akhirnya, sedikit pengalaman peribadi: jangan keliru dengan perubahan halus ini. Kuasa bootstrap adalah bahawa ia menyediakan banyak komponen dan gaya, yang membolehkan anda dengan cepat membina halaman. Daripada tangling dalam butiran, lebih baik untuk memberi tumpuan kepada seni bina dan pengalaman pengguna secara keseluruhan. Ingat, Bootstrap hanya alat, dan akhirnya menentukan kesan halaman anda atau kemahiran reka bentuk dan kod anda. Jangan lupa bahawa kod elegan lebih penting daripada gaya mewah.

Atas ialah kandungan terperinci Apakah perubahan yang telah dibuat dengan gaya senarai Bootstrap 5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!