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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
A deep dive into the meaning and usage of HTTP status code 460
Feb 18, 2024 pm 08:29 PM
In-depth analysis of the role and application scenarios of HTTP status code 460 HTTP status code is a very important part of web development and is used to indicate the communication status between the client and the server. Among them, HTTP status code 460 is a relatively special status code. This article will deeply analyze its role and application scenarios. Definition of HTTP status code 460 The specific definition of HTTP status code 460 is "ClientClosedRequest", which means that the client closes the request. This status code is mainly used to indicate
iBatis and MyBatis: Comparison and Advantage Analysis
Feb 18, 2024 pm 01:53 PM
iBatis and MyBatis: Differences and Advantages Analysis Introduction: In Java development, persistence is a common requirement, and iBatis and MyBatis are two widely used persistence frameworks. While they have many similarities, there are also some key differences and advantages. This article will provide readers with a more comprehensive understanding through a detailed analysis of the features, usage, and sample code of these two frameworks. 1. iBatis features: iBatis is an older persistence framework that uses SQL mapping files.
Detailed explanation of Oracle error 3114: How to solve it quickly
Mar 08, 2024 pm 02:42 PM
Detailed explanation of Oracle error 3114: How to solve it quickly, specific code examples are needed. During the development and management of Oracle database, we often encounter various errors, among which error 3114 is a relatively common problem. Error 3114 usually indicates a problem with the database connection, which may be caused by network failure, database service stop, or incorrect connection string settings. This article will explain in detail the cause of error 3114 and how to quickly solve this problem, and attach the specific code
Parsing Wormhole NTT: an open framework for any Token
Mar 05, 2024 pm 12:46 PM
Wormhole is a leader in blockchain interoperability, focused on creating resilient, future-proof decentralized systems that prioritize ownership, control, and permissionless innovation. The foundation of this vision is a commitment to technical expertise, ethical principles, and community alignment to redefine the interoperability landscape with simplicity, clarity, and a broad suite of multi-chain solutions. With the rise of zero-knowledge proofs, scaling solutions, and feature-rich token standards, blockchains are becoming more powerful and interoperability is becoming increasingly important. In this innovative application environment, novel governance systems and practical capabilities bring unprecedented opportunities to assets across the network. Protocol builders are now grappling with how to operate in this emerging multi-chain
Analysis of the meaning and usage of midpoint in PHP
Mar 27, 2024 pm 08:57 PM
[Analysis of the meaning and usage of midpoint in PHP] In PHP, midpoint (.) is a commonly used operator used to connect two strings or properties or methods of objects. In this article, we’ll take a deep dive into the meaning and usage of midpoints in PHP, illustrating them with concrete code examples. 1. Connect string midpoint operator. The most common usage in PHP is to connect two strings. By placing . between two strings, you can splice them together to form a new string. $string1=&qu
Analysis of new features of Win11: How to skip logging in to Microsoft account
Mar 27, 2024 pm 05:24 PM
Analysis of new features of Win11: How to skip logging in to a Microsoft account. With the release of Windows 11, many users have found that it brings more convenience and new features. However, some users may not like having their system tied to a Microsoft account and wish to skip this step. This article will introduce some methods to help users skip logging in to a Microsoft account in Windows 11 and achieve a more private and autonomous experience. First, let’s understand why some users are reluctant to log in to their Microsoft account. On the one hand, some users worry that they
Apache2 cannot correctly parse PHP files
Mar 08, 2024 am 11:09 AM
Due to space limitations, the following is a brief article: Apache2 is a commonly used web server software, and PHP is a widely used server-side scripting language. In the process of building a website, sometimes you encounter the problem that Apache2 cannot correctly parse the PHP file, causing the PHP code to fail to execute. This problem is usually caused by Apache2 not configuring the PHP module correctly, or the PHP module being incompatible with the version of Apache2. There are generally two ways to solve this problem, one is
Analysis of exponential functions in C language and examples
Feb 18, 2024 pm 03:51 PM
Detailed analysis and examples of exponential functions in C language Introduction: The exponential function is a common mathematical function, and there are corresponding exponential function library functions that can be used in C language. This article will analyze in detail the use of exponential functions in C language, including function prototypes, parameters, return values, etc.; and give specific code examples so that readers can better understand and use exponential functions. Text: The exponential function library function math.h in C language contains many functions related to exponentials, the most commonly used of which is the exp function. The prototype of exp function is as follows
