To relieve patients with difficulty in making choices: recommend several excellent CSS frameworks-CSS Tutorial-php.cn

To relieve patients with difficulty in making choices: recommend several excellent CSS frameworks

PHPz

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

Original

1113 people have browsed it

To relieve patients with difficulty in making choices: recommend several excellent CSS frameworks

In recent years, with the continuous advancement of Internet technology, web design has also changed with each passing day. But without a professional designer, it may be difficult to write a page that looks good and has good compatibility. Therefore, the CSS framework (Cascading Style Sheets) came into being. It provides a convenient option for people who are not familiar with CSS, avoids the pain of designing websites from scratch, and helps people build their own websites faster. . This article will recommend several excellent CSS frameworks suitable for people with choice phobia, along with specific code examples.

Bootstrap

Bootstrap is one of the most popular and widely used front-end frameworks. It is a free, open source, responsive framework for All websites and apps. It has powerful features, including various styles, plug-ins, animations, and more. For example, it’s easy to create convenient responsive layouts using Bootstrap’s grid system.

The following is an example using 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>

Copy after login

Foundation

Foundation is another popular CSS framework that provides a series of Design elements of flexible grid system. Similar to Bootstrap, it has the advantages of responsiveness, good compatibility, and rich UI components. But unlike Bootstrap, Foundation pays more attention to flexibility and customizability.

The following is an example of using 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>

Copy after login

Pure

Compared with Bootstrap and Foundation, Pure is more lightweight and is derived from A small, responsive CSS framework for Yahoo. If you want a simple, efficient CSS framework, Pure is probably the best choice. It consists of various CSS modules that can be easily combined.

Here’s an example of using 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>

Copy after login

As a choice-phobic person, picking a CSS framework that’s right for you can be a daunting task. However, choosing a suitable framework can help you implement your website design faster. Bootstrap, Foundation and Pure recommended in this article are a few good choices. They all have their own advantages and can be selected and used according to your needs.

The above is the detailed content of To relieve patients with difficulty in making choices: recommend several excellent CSS frameworks. For more information, please follow other related articles on the PHP Chinese website!