Pilih rangka kerja reka letak responsif yang sesuai untuk anda: Penilaian menyeluruh alat yang berbeza-tutorial css-php.cn

Pilih rangka kerja reka letak responsif yang sesuai untuk anda: Penilaian menyeluruh alat yang berbeza

王林

Lepaskan： 2024-02-19 11:53:05

asal

1199 orang telah melayarinya

Pilih rangka kerja reka letak responsif yang sesuai untuk anda: Penilaian menyeluruh alat yang berbeza

Reka bentuk responsif bermakna halaman web boleh disusun secara adaptif mengikut saiz skrin dan resolusi peranti yang berbeza untuk memastikan pengalaman menyemak imbas yang baik pada pelbagai peranti. Untuk memudahkan pembangun melaksanakan reka letak responsif, banyak rangka kerja dan alatan yang sangat baik telah muncul. Artikel ini akan meringkaskan beberapa rangka kerja reka letak responsif arus perdana dan menyediakan contoh kod khusus untuk membantu pembaca memilih alat yang paling sesuai dengan mereka.

Bootstrap (https://getbootstrap.com/)
Bootstrap ialah salah satu rangka kerja reka letak responsif yang paling popular, yang menyediakan set komponen dan alatan yang kaya untuk melaksanakan antara muka responsif dengan mudah. Berikut ialah contoh kod menggunakan Bootstrap:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <title>Bootstrap Example</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>Hello, World!</h1>
      </div>
      <div class="col-md-6">
        <p>This is a Bootstrap example.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Salin selepas log masuk

Foundation (https://foundation.zurb.com/)
Foundation ialah satu lagi rangka kerja reka letak responsif yang sangat popular yang menyediakan set gaya dan komponen asas yang berkuasa. Berikut ialah contoh kod menggunakan Foundation:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
  <title>Foundation Example</title>
</head>

<body>
  <div class="grid-container">
    <div class="grid-x">
      <div class="cell medium-6">
        <h1>Hello, World!</h1>
      </div>
      <div class="cell medium-6">
        <p>This is a Foundation example.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
</body>

</html>

Salin selepas log masuk

Bulma (https://bulma.io/)
Bulma ialah rangka kerja reka letak responsif ringan yang menggunakan teknologi CSS terkini dan menyediakan satu siri penggayaan dan komponen Moden. Berikut ialah contoh kod menggunakan Bulma:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  <title>Bulma Example</title>
</head>

<body>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column">
          <h1 class="title">Hello, World!</h1>
        </div>
        <div class="column">
          <p class="subtitle">This is a Bulma example.</p>
        </div>
      </div>
    </div>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
</body>

</html>

Salin selepas log masuk

Ini hanya sedikit menunjukkan penggunaan asas rangka kerja ini menyediakan komponen dan fungsi yang lebih kaya yang boleh dilanjutkan dan disesuaikan mengikut keperluan. Pembaca boleh memilih alat yang paling sesuai mengikut ciri dan keutamaan projek mereka. Saya harap artikel ini dapat membantu pembaca!

Atas ialah kandungan terperinci Pilih rangka kerja reka letak responsif yang sesuai untuk anda: Penilaian menyeluruh alat yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!