Explore five popular CSS layout frameworks-CSS Tutorial-php.cn

Explore five popular CSS layout frameworks

WBOY

Release： 2024-01-16 11:04:06

Original

684 people have browsed it

Explore five popular CSS layout frameworks

CSS Layout Framework Revealed: Analysis of Five Popular Frameworks

Introduction:
In the process of web design and development, how to achieve a good layout has always been a important challenge. The CSS layout framework helps us create complex layouts more easily and improves development efficiency by providing powerful tools and components. In this article, we’ll explore five popular CSS layout frameworks and provide concrete code examples.

1. Bootstrap
Bootstrap is currently one of the most popular CSS layout frameworks. It provides a large number of styles and components, allowing us to quickly build responsive web pages. Below is a simple example that shows using Bootstrap to implement a page layout that includes a navigation bar, content area, and bottom copyright information.

<!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>Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
      <div class="col-md-4">
        <h3>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>

Copy after login

2. Foundation
Foundation is another popular CSS layout framework, which also provides a wealth of components and styles. Below is an example of a basic layout implemented using 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>Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
      <div class="cell medium-4">
        <h3>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>

Copy after login

3. Semantic UI
Semantic UI is a CSS layout framework that focuses on semantics. Its naming and use are very intuitive. Below is an example of a basic layout implemented using Semantic UI.

<!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>Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
      <div class="five wide column">
        <h3>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>

Copy after login

4. Bulma
Bulma is a lightweight CSS layout framework. Its design is simple and beautiful, easy to use and customize. Below is an example of a basic layout implemented using 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 class="title">Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
      <div class="column">
        <h3 class="subtitle">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>

Copy after login

5. Tailwind CSS
Tailwind CSS is a highly customizable CSS framework that provides a wealth of practical classes that can be used directly in HTML. Below is an example of a basic layout implemented using Tailwind CSS.

<!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 class="text-4xl">Welcome to our website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="w-1/4 p-8">
        <h3 class="text-2xl">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>

Copy after login

Conclusion:
This article introduces five popular CSS layout frameworks, namely Bootstrap, Foundation, Semantic UI, Bulma and Tailwind CSS. By using these frameworks, we can implement complex web page layouts more efficiently. Each framework has its own unique characteristics and style. Choose the framework that suits you based on your actual needs.

The above is the detailed content of Explore five popular CSS layout frameworks. For more information, please follow other related articles on the PHP Chinese website!