Terokai lima rangka kerja reka letak CSS yang popular-tutorial css-php.cn

Jadual Kandungan

Welcome to our website

Side bar

Rumah

hujung hadapan web

tutorial css

Terokai lima rangka kerja reka letak CSS yang popular

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jan 16, 2024 am 11:04 AM

menghuraikan rangka kerja susun atur css rangka kerja yang popular

Terokai lima rangka kerja reka letak CSS yang popular

Rangka Kerja Susun atur CSS Didedahkan: Analisis Lima Rangka Kerja Popular

Pengenalan:
Dalam proses reka bentuk dan pembangunan web, cara mencapai susun atur yang baik sentiasa menjadi cabaran penting. Rangka kerja reka letak CSS membantu kami membuat reka letak yang kompleks dengan lebih mudah dan meningkatkan kecekapan pembangunan dengan menyediakan alatan dan komponen yang berkuasa. Dalam artikel ini, kami akan meneroka lima rangka kerja susun atur CSS yang popular dan memberikan contoh kod konkrit.

1. Bootstrap
Bootstrap ialah salah satu rangka kerja reka letak CSS yang paling popular pada masa ini. Ia menyediakan sejumlah besar gaya dan komponen, membolehkan kami membina halaman web responsif dengan cepat. Di bawah ialah contoh mudah yang menunjukkan penggunaan Bootstrap untuk melaksanakan reka letak halaman yang merangkumi bar navigasi, kawasan kandungan dan maklumat hak cipta bawah.

<!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@4.5.0/dist/css/bootstrap.min.css">
  <title>Bootstrap Layout Example</title>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <h1 id="Welcome-to-our-website">Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
      <div class="col-md-4">
        <h3 id="Side-bar">Side bar</h3>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </div>
  </div>

  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">© 2020. All rights reserved.</span>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

Salin selepas log masuk

2. Foundation
Foundation ialah satu lagi rangka kerja reka letak CSS yang popular, yang turut menyediakan pelbagai komponen dan gaya. Di bawah ialah contoh susun atur asas yang dilaksanakan 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 Layout Example</title>
</head>
<body>
  <nav class="top-bar">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-text">Logo</li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

  <div class="grid-container">
    <div class="grid-x">
      <div class="cell medium-8">
        <h1 id="Welcome-to-our-website">Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
      <div class="cell medium-4">
        <h3 id="Side-bar">Side bar</h3>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </div>
  </div>

  <footer>
    <div class="grid-container">
      <div class="grid-x">
        <div class="cell">
          <p>© 2020. All rights reserved.</p>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Salin selepas log masuk

3. Semantic UI
Semantic UI ialah rangka kerja reka letak CSS yang memfokuskan pada semantik dan penggunaannya sangat intuitif. Di bawah ialah contoh reka letak asas yang dilaksanakan menggunakan UI Semantik.

<!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/semantic-ui/dist/semantic.min.css">
  <title>Semantic UI Layout Example</title>
</head>
<body>
  <div class="ui inverted menu">
    <a class="active item">Logo</a>
    <a class="item" href="#">Home</a>
    <a class="item" href="#">About</a>
    <a class="item" href="#">Services</a>
    <a class="item" href="#">Contact</a>
  </div>

  <div class="ui container">
    <div class="ui grid">
      <div class="eleven wide column">
        <h1 id="Welcome-to-our-website">Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
      <div class="five wide column">
        <h3 id="Side-bar">Side bar</h3>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="ui inverted vertical footer segment">
    <div class="ui container">
      <p>© 2020. All rights reserved.</p>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.js"></script>
</body>
</html>

Salin selepas log masuk

4. Bulma
Bulma ialah rangka kerja reka letak CSS yang ringan Reka bentuknya ringkas dan cantik, mudah digunakan dan disesuaikan. Di bawah ialah contoh reka letak asas yang dilaksanakan 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/css/bulma.min.css">
  <title>Bulma Layout Example</title>
</head>
<body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">Logo</a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item" href="#">Home</a>
        <a class="navbar-item" href="#">About</a>
        <a class="navbar-item" href="#">Services</a>
        <a class="navbar-item" href="#">Contact</a>
      </div>
    </div>
  </nav>

  <div class="container">
    <div class="columns">
      <div class="column is-three-quarters">
        <h1 id="Welcome-to-our-website">Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
      <div class="column">
        <h3 id="Side-bar">Side bar</h3>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="container">
      <p>© 2020. All rights reserved.</p>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bulma"></script>
</body>
</html>

Salin selepas log masuk

5. Tailwind CSS
Tailwind CSS ialah rangka kerja CSS yang boleh disesuaikan yang menyediakan pelbagai kelas praktikal yang boleh digunakan secara langsung dalam HTML. Di bawah ialah contoh reka letak asas yang dilaksanakan menggunakan CSS Tailwind.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@1.4.6/dist/tailwind.min.css" rel="stylesheet">
  <title>Tailwind CSS Layout Example</title>
</head>
<body>
  <nav class="bg-gray-200">
    <div class="container mx-auto">
      <ul class="flex">
        <li class="p-4">Logo</li>
        <li class="p-4"><a href="#">Home</a></li>
        <li class="p-4"><a href="#">About</a></li>
        <li class="p-4"><a href="#">Services</a></li>
        <li class="p-4"><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

  <div class="container mx-auto">
    <div class="flex">
      <div class="w-3/4 p-8">
        <h1 id="Welcome-to-our-website">Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="w-1/4 p-8">
        <h3 id="Side-bar">Side bar</h3>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </div>
  </div>

  <footer class="bg-gray-200">
    <div class="container mx-auto p-8">
      <p>© 2020. All rights reserved.</p>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script>
    // Tailwind CSS does not require JavaScript
  </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan:
Artikel ini memperkenalkan lima rangka kerja reka letak CSS yang popular, iaitu Bootstrap, Foundation, Semantic UI, Bulma dan Tailwind CSS. Dengan menggunakan rangka kerja ini, kami boleh melaksanakan reka letak halaman web yang kompleks dengan lebih cekap. Setiap rangka kerja mempunyai ciri dan gaya tersendiri. Pilih rangka kerja yang sesuai dengan anda berdasarkan keperluan sebenar anda.

Atas ialah kandungan terperinci Terokai lima rangka kerja reka letak CSS yang popular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Repo: Cara menghidupkan semula rakan sepasukan

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7333

Tutorial Java

1627

Tutorial CakePHP

1351

Tutorial Laravel

1262

Tutorial PHP

1209

Tunjukkan Lagi

Related knowledge

Menyelam mendalam tentang maksud dan penggunaan kod status HTTP 460 Feb 18, 2024 pm 08:29 PM

Analisis mendalam tentang peranan dan senario aplikasi kod status HTTP 460 Kod status HTTP adalah bahagian yang sangat penting dalam pembangunan web dan digunakan untuk menunjukkan status komunikasi antara klien dan pelayan. Antaranya, kod status HTTP 460 ialah kod status yang agak istimewa Artikel ini akan menganalisis secara mendalam peranan dan senario aplikasinya. Definisi kod status HTTP 460 Takrif khusus kod status HTTP 460 ialah "ClientClosedRequest", yang bermaksud bahawa klien menutup permintaan. Kod status ini digunakan terutamanya untuk menunjukkan

iBatis dan MyBatis: Analisis Perbandingan dan Kelebihan Feb 18, 2024 pm 01:53 PM

iBatis dan MyBatis: Analisis Perbezaan dan Kelebihan Pengenalan: Dalam pembangunan Java, ketekunan adalah keperluan biasa, dan iBatis dan MyBatis ialah dua rangka kerja kegigihan yang digunakan secara meluas. Walaupun mereka mempunyai banyak persamaan, terdapat juga beberapa perbezaan dan kelebihan utama. Artikel ini akan memberikan pembaca pemahaman yang lebih komprehensif melalui analisis terperinci tentang ciri, penggunaan dan kod sampel kedua-dua rangka kerja ini. 1. Ciri iBatis: iBatis ialah rangka kerja kegigihan yang lebih lama yang menggunakan fail pemetaan SQL.

Penjelasan terperinci tentang ralat Oracle 3114: Cara menyelesaikannya dengan cepat Mar 08, 2024 pm 02:42 PM

Penjelasan terperinci tentang ralat Oracle 3114: Bagaimana untuk menyelesaikannya dengan cepat, contoh kod khusus diperlukan Semasa pembangunan dan pengurusan pangkalan data Oracle, kami sering menghadapi pelbagai ralat, antaranya ralat 3114 adalah masalah yang agak biasa. Ralat 3114 biasanya menunjukkan masalah dengan sambungan pangkalan data, yang mungkin disebabkan oleh kegagalan rangkaian, pemberhentian perkhidmatan pangkalan data atau tetapan rentetan sambungan yang salah. Artikel ini akan menerangkan secara terperinci punca ralat 3114 dan cara menyelesaikan masalah ini dengan cepat, dan melampirkan kod tertentu

Analisis ciri baharu Win11: Bagaimana untuk melangkau log masuk ke akaun Microsoft Mar 27, 2024 pm 05:24 PM

Analisis ciri baharu Win11: Cara melangkau log masuk ke akaun Microsoft Dengan keluaran Windows 11, ramai pengguna mendapati ia membawa lebih banyak kemudahan dan ciri baharu. Walau bagaimanapun, sesetengah pengguna mungkin tidak suka sistem mereka terikat pada akaun Microsoft dan ingin melangkau langkah ini. Artikel ini akan memperkenalkan beberapa kaedah untuk membantu pengguna melangkau log masuk ke akaun Microsoft dalam Windows 11 dan mencapai pengalaman yang lebih peribadi dan autonomi. Mula-mula, mari kita fahami sebab sesetengah pengguna enggan log masuk ke akaun Microsoft mereka. Di satu pihak, sesetengah pengguna bimbang bahawa mereka

Analisis makna dan penggunaan titik tengah dalam PHP Mar 27, 2024 pm 08:57 PM

[Analisis makna dan penggunaan titik tengah dalam PHP] Dalam PHP, titik tengah (.) ialah operator yang biasa digunakan untuk menyambung dua rentetan atau sifat atau kaedah objek. Dalam artikel ini, kami akan menyelami makna dan penggunaan titik tengah dalam PHP, menggambarkannya dengan contoh kod konkrit. 1. Operator titik tengah rentetan Concatenate Penggunaan yang paling biasa dalam PHP adalah untuk menggabungkan dua rentetan. Dengan meletakkan . antara dua rentetan, anda boleh menyambungkannya untuk membentuk rentetan baharu. $string1=&qu

Apache2 tidak boleh menghuraikan fail PHP dengan betul Mar 08, 2024 am 11:09 AM

Disebabkan oleh keterbatasan ruang, berikut ialah artikel ringkas: Apache2 ialah perisian pelayan web yang biasa digunakan, dan PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas. Dalam proses membina tapak web, kadangkala anda menghadapi masalah bahawa Apache2 tidak dapat menghuraikan fail PHP dengan betul, menyebabkan kod PHP gagal dilaksanakan. Masalah ini biasanya disebabkan oleh Apache2 tidak mengkonfigurasi modul PHP dengan betul, atau modul PHP tidak serasi dengan versi Apache2. Secara umumnya terdapat dua cara untuk menyelesaikan masalah ini, satu

Parsing Wormhole NTT: rangka kerja terbuka untuk sebarang Token Mar 05, 2024 pm 12:46 PM

Wormhole ialah peneraju dalam kebolehkendalian blockchain, memfokuskan pada mencipta sistem terdesentralisasi yang berdaya tahan, kalis masa hadapan yang mengutamakan pemilikan, kawalan dan inovasi tanpa kebenaran. Asas visi ini ialah komitmen terhadap kepakaran teknikal, prinsip etika dan penjajaran komuniti untuk mentakrifkan semula landskap kebolehoperasian dengan kesederhanaan, kejelasan dan rangkaian luas penyelesaian berbilang rantaian. Dengan peningkatan bukti pengetahuan sifar, penyelesaian penskalaan dan piawaian token yang kaya dengan ciri, rantaian blok menjadi lebih berkuasa dan kesalingoperasian menjadi semakin penting. Dalam persekitaran aplikasi yang inovatif ini, sistem tadbir urus baharu dan keupayaan praktikal membawa peluang yang belum pernah berlaku sebelum ini kepada aset merentas rangkaian. Pembina protokol kini bergelut dengan cara untuk beroperasi dalam pelbagai rantaian yang muncul ini

Analisis fungsi eksponen dalam bahasa C dan contoh Feb 18, 2024 pm 03:51 PM

Analisis terperinci dan contoh fungsi eksponen dalam bahasa C Pengenalan: Fungsi eksponen ialah fungsi matematik biasa, dan terdapat fungsi perpustakaan fungsi eksponen sepadan yang boleh digunakan dalam bahasa C. Artikel ini akan menganalisis secara terperinci penggunaan fungsi eksponen dalam bahasa C, termasuk prototaip fungsi, parameter, nilai pulangan, dsb. dan memberikan contoh kod khusus supaya pembaca dapat memahami dan menggunakan fungsi eksponen dengan lebih baik. Teks: Fungsi perpustakaan fungsi eksponen math.h dalam bahasa C mengandungi banyak fungsi yang berkaitan dengan eksponen, yang paling biasa digunakan ialah fungsi exp. Prototaip fungsi exp adalah seperti berikut

See all articles