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

Home

Web Front-end

CSS Tutorial

Explore five popular CSS layout frameworks

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jan 16, 2024 am 11:04 AM

parsecss layout frameworkpopular framework

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 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>

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 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>

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 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>

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 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>

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 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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python解析XML中的特殊字符和转义序列Aug 08, 2023 pm 12:46 PM

Python解析XML中的特殊字符和转义序列XML（eXtensibleMarkupLanguage）是一种常用的数据交换格式，用于在不同系统之间传输和存储数据。在处理XML文件时，经常会遇到包含特殊字符和转义序列的情况，这可能会导致解析错误或者误解数据。因此，在使用Python解析XML文件时，我们需要了解如何处理这些特殊字符和转义序列。一、特殊字符和

Python编程解析百度地图API文档中的坐标转换功能Aug 01, 2023 am 08:57 AM

Python编程解析百度地图API文档中的坐标转换功能导读：随着互联网的快速发展，地图定位功能已经成为现代人生活中不可或缺的一部分。而百度地图作为国内最受欢迎的地图服务之一，提供了一系列的API供开发者使用。本文将通过Python编程，解析百度地图API文档中的坐标转换功能，并给出相应的代码示例。一、引言在开发中，我们有时会涉及到坐标的转换问题。百度地图AP

使用Python解析SOAP消息Aug 08, 2023 am 09:27 AM

使用Python解析SOAP消息SOAP（SimpleObjectAccessProtocol）是一种基于XML的远程过程调用（RPC）协议，用于在网络上不同的应用程序之间进行通信。Python提供了许多库和工具来处理SOAP消息，其中最常用的是suds库。suds是Python的一个SOAP客户端库，可以用于解析和生成SOAP消息。它提供了一种简单而

PHP8.0中的XML解析库May 14, 2023 am 08:19 AM

随着PHP8.0的发布，许多新特性都被引入和更新了，其中包括XML解析库。PHP8.0中的XML解析库提供了更快的解析速度和更好的可读性，这对于PHP开发者来说是一个重要的提升。在本文中，我们将探讨PHP8.0中的XML解析库的新特性以及如何使用它。什么是XML解析库？XML解析库是一种软件库，用于解析和处理XML文档。XML是一种用于将数据存储为结构化文档

使用Python解析带有命名空间的XML文档Aug 09, 2023 pm 04:25 PM

使用Python解析带有命名空间的XML文档XML是一种常用的数据交换格式，能够适应各种应用场景。在处理XML文档时，有时会遇到带有命名空间（namespace）的情况。命名空间可以防止不同XML文档中元素名的冲突，提高了XML的灵活性和可扩展性。本文将介绍如何使用Python解析带有命名空间的XML文档，并给出相应的代码示例。首先，我们需要导入xml.et

PHP 爬虫实战之获取网页源码和内容解析Jun 13, 2023 am 10:46 AM

PHP爬虫是一种自动化获取网页信息的程序，它可以获取网页代码、抓取数据并存储到本地或数据库中。使用爬虫可以快速获取大量的数据，为后续的数据分析和处理提供巨大的帮助。本文将介绍如何使用PHP实现一个简单的爬虫，以获取网页源码和内容解析。一、获取网页源码在开始之前，我们应该先了解一下HTTP协议和HTML的基本结构。HTTP是HyperText

PHP中的单点登录（SSO）鉴权方法解析Aug 08, 2023 am 09:21 AM

PHP中的单点登录（SSO）鉴权方法解析引言：随着互联网的发展，用户通常要同时访问多个网站进行各种操作。为了提高用户体验，单点登录（SingleSign-On，简称SSO）应运而生。本文将探讨PHP中的SSO鉴权方法，并提供相应的代码示例。一、什么是单点登录（SSO）？单点登录（SSO）是一种集中化认证的方法，在多个应用系统中，用户只需要登录一次，就能访问

PHP中的HTTP Basic鉴权方法解析及应用Aug 06, 2023 am 08:16 AM

PHP中的HTTPBasic鉴权方法解析及应用HTTPBasic鉴权是一种简单但常用的身份验证方法，它通过在HTTP请求头中添加用户名和密码的Base64编码字符串进行身份验证。本文将介绍HTTPBasic鉴权的原理和使用方法，并提供PHP代码示例供读者参考。一、HTTPBasic鉴权原理HTTPBasic鉴权的原理非常简单，当客户端发送一个请求时

See all articles