Untuk melegakan pesakit yang mengalami kesukaran membuat pilihan: cadangkan beberapa rangka kerja CSS yang sangat baik-tutorial css-php.cn

Untuk melegakan pesakit yang mengalami kesukaran membuat pilihan: cadangkan beberapa rangka kerja CSS yang sangat baik

PHPz

Lepaskan： 2024-01-16 10:00:09

asal

1026 orang telah melayarinya

Untuk melegakan pesakit yang mengalami kesukaran membuat pilihan: cadangkan beberapa rangka kerja CSS yang sangat baik

Dalam beberapa tahun kebelakangan ini, dengan kemajuan berterusan teknologi Internet, reka bentuk web juga telah berubah setiap hari. Tetapi tanpa pereka profesional, mungkin sukar untuk menulis halaman yang kelihatan baik dan mempunyai keserasian yang baik. Oleh itu, rangka kerja CSS (Cascading Style Sheets) wujud. Ia menyediakan pilihan yang mudah untuk orang yang tidak biasa dengan CSS, mengelakkan kesakitan untuk mereka bentuk tapak web dari awal dan membantu orang membina tapak web mereka sendiri dengan lebih cepat. Artikel ini akan mengesyorkan beberapa rangka kerja CSS yang sangat baik yang sesuai untuk orang yang mempunyai fobia pilihan, bersama-sama dengan contoh kod tertentu.

Bootstrap

Bootstrap ialah salah satu rangka kerja bahagian hadapan yang paling popular dan digunakan secara meluas Ia adalah rangka kerja responsif percuma, sumber terbuka yang sesuai untuk semua tapak web dan aplikasi. Ia mempunyai ciri hebat, termasuk pelbagai gaya, pemalam, animasi dan banyak lagi. Sebagai contoh, mudah untuk membuat susun atur responsif yang mudah menggunakan sistem grid Bootstrap.

Berikut ialah contoh menggunakan Bootstrap:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap示例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <a class="navbar-brand" href="#">LOGO</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
            <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="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于我们</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系我们</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <h1>Bootstrap</h1>
        <p>Bootstrap是最受欢迎的、最广泛使用的前端框架之一，它是一个免费的、开源的、响应式框架，适用于所有的网站和应用程序。</p>
    </div>
</body>
</html>

Salin selepas log masuk

Foundation

Foundation ialah satu lagi rangka kerja CSS popular yang menyediakan satu siri elemen reka bentuk berdasarkan sistem grid yang fleksibel. Sama seperti Bootstrap, ia mempunyai kelebihan responsif, keserasian yang baik dan komponen UI yang kaya. Tetapi tidak seperti Bootstrap, Foundation memberi lebih perhatian kepada fleksibiliti dan kebolehsesuaian.

Berikut ialah contoh penggunaan Foundation:

<!DOCTYPE html>
<html>
<head>
    <title>Foundation示例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
</head>
<body>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="large-12 cell">
                <h1>Foundation</h1>
                <p>Foundation是另一款流行的CSS框架，它提供了一系列基于灵活栅格系统的设计元素。</p>
            </div>
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Pure

Berbanding Bootstrap dan Foundation, Pure lebih ringan dan merupakan rangka kerja CSS yang kecil dan responsif daripada Yahoo. Jika anda mahukan rangka kerja CSS yang ringkas dan cekap, Pure mungkin merupakan pilihan terbaik. Ia terdiri daripada pelbagai modul CSS yang boleh digabungkan dengan mudah.

Berikut ialah contoh penggunaan Pure:

<!DOCTYPE html>
<html>
<head>
    <title>Pure示例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/pure/0.6.0/pure-min.css">
</head>
<body>
    <div class="pure-g">
        <div class="pure-u-1">
            <h1>Pure</h1>
            <p>Pure是来自Yahoo的一个小型、响应式CSS框架。如果你想要一个简单的、高效的CSS框架，Pure可能是最好的选择。</p>
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Sebagai orang yang fobia terhadap pilihan, memilih rangka kerja CSS yang sesuai untuk anda boleh menjadi tugas yang sukar. Walau bagaimanapun, memilih rangka kerja yang sesuai boleh membantu anda melaksanakan reka bentuk tapak web anda dengan lebih pantas. Bootstrap, Foundation dan Pure yang disyorkan dalam artikel ini adalah beberapa pilihan yang baik Semuanya mempunyai kelebihan tersendiri dan boleh dipilih dan digunakan mengikut keperluan anda.

Atas ialah kandungan terperinci Untuk melegakan pesakit yang mengalami kesukaran membuat pilihan: cadangkan beberapa rangka kerja CSS yang sangat baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!