Rumah >hujung hadapan web >tutorial css >Rangka Kerja CSS Mudah Alih Dinyahsulit: Alat Yang Sangat Penting Didedahkan

Rangka Kerja CSS Mudah Alih Dinyahsulit: Alat Yang Sangat Penting Didedahkan

WBOYasal: 2024-01-16 10:24:061139semak imbas

Rangka kerja CSS mudah alih merujuk kepada satu set koleksi kod CSS boleh guna semula untuk pembangunan pantas halaman web dan aplikasi mudah alih. Dengan populariti peranti mudah alih dan pengguna yang semakin menggunakan telefon bimbit untuk menyemak imbas tapak web dan aplikasi, rangka kerja CSS mudah alih memainkan peranan yang semakin penting dalam reka bentuk dan pembangunan mudah alih. Artikel ini akan memperkenalkan beberapa rangka kerja CSS mudah alih biasa untuk membantu pembaca memahami dan menguasai alatan yang diperlukan ini dengan cepat dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik.

Bootstrap

Bootstrap ialah rangka kerja HTML, CSS dan JavaScript yang paling popular yang dibangunkan oleh Twitter dan sesuai untuk mencipta tapak web responsif dan aplikasi mudah alih. Ia menyediakan ratusan komponen CSS, HTML dan JavaScript, termasuk butang, borang, navigasi, imej, ikon, modal dan banyak lagi. Dengan menggunakan Bootstrap, pembangun boleh membina antara muka yang cantik dengan cepat kerana ia termasuk banyak gaya CSS yang dipratentukan.

Berikut ialah contoh kod menggunakan Bootstrap:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Hello, world!</h1>
  <p>This is a Bootstrap example.</p> 
  <button type="button" class="btn btn-primary">Click me</button>
</div>

</body>
</html>

Dalam contoh ini, kami menggunakan gaya dan skrip yang disediakan oleh Bootstrap untuk mencipta halaman ringkas yang mengandungi tajuk, perenggan dan butang.

Yayasan

Yayasan ialah satu lagi rangka kerja CSS responsif popular yang juga boleh digunakan untuk mencipta apl mudah alih dan tapak web. Foundation menyediakan beberapa ciri yang sangat berguna seperti grid penyesuaian, komponen CSS yang dipratentukan dan pemalam JavaScript. Tidak seperti Bootstrap, Foundation lebih memfokuskan pada penggayaan tersuai dan kebolehaksesan.

Berikut ialah contoh kod menggunakan Foundation:

<!DOCTYPE html>
<html>
<head>
    <title>Foundation Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.min.js"></script>
</head>
<body>

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-6 medium-4 large-2">
      <div class="card">
        <div class="card-divider">
          Card Title
        </div>
        <div class="card-section">
          <p>Some text...</p>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Dalam contoh ini, kami menggunakan sistem grid dan komponen kad yang disediakan oleh Foundation untuk mencipta halaman yang mengandungi kad.

Bulma

Bulma ialah rangka kerja CSS yang moden dan ringan Berbanding dengan Bootstrap dan Foundation, Bulma memberi lebih perhatian kepada kesederhanaan dan kecantikan. Ia menyediakan beberapa kelas dan komponen CSS yang berguna, seperti butang, borang, navigasi serbuk roti, grid responsif dan banyak lagi. Bulma juga menyokong tema tersuai, dan pengguna boleh melaraskan gaya mengikut keperluan mereka sendiri.

Berikut ialah contoh kod menggunakan Bulma:

<!DOCTYPE html>
<html>
<head>
    <title>Bulma Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
</head>
<body>

<section class="hero is-primary is-bold">
    <div class="hero-body">
        <div class="container">
            <h1 class="title">
                Hello, world!
            </h1>
            <h2 class="subtitle">
                This is a Bulma example.
            </h2>
        </div>
    </div>
</section>

<div class="container">
    <div class="columns">
        <div class="column is-one-third">
            <h3 class="title is-3">Column 1</h3>
            <p>Some text...</p>
        </div>
        <div class="column">
            <h3 class="title is-3">Column 2</h3>
            <p>Some more text...</p>
        </div>
    </div>
</div>

</body>
</html>

Dalam contoh ini, kami menggunakan gaya Bulma untuk mencipta halaman dengan tajuk dan dua baris teks, dan menggunakan sistem grid untuk membahagikan kandungan kepada dua lajur.

Ringkasan

Dalam reka bentuk dan pembangunan mudah alih, rangka kerja CSS mudah alih ialah alat yang sangat berguna yang membolehkan pembangun membina antara muka yang cantik dengan cepat. Artikel ini memperkenalkan beberapa rangka kerja CSS biasa, termasuk Bootstrap, Foundation dan Bulma, serta menyediakan contoh kod khusus untuk membantu pembaca memahami dan menguasai alatan ini dengan lebih baik. Sama ada anda seorang pemula atau pembangun berpengalaman, anda harus menguasai sekurang-kurangnya satu rangka kerja CSS dan membuat pengubahsuaian tersuai mengikut keperluan untuk meningkatkan kecekapan pembangunan dan pengalaman pengguna.

Atas ialah kandungan terperinci Rangka Kerja CSS Mudah Alih Dinyahsulit: Alat Yang Sangat Penting Didedahkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css bootstrap html Foundation

Kenyataan：

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

Artikel sebelumnya：Menganalisis peranan dan kelebihan rangka kerja dan tipografi CSS dalam reka bentuk webArtikel seterusnya：Menganalisis peranan dan kelebihan rangka kerja dan tipografi CSS dalam reka bentuk web

Artikel berkaitan

Lihat lagi