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!
The Lost CSS Tricks of Cohost.orgApr 25, 2025 am 09:51 AMIn this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.
Next Level CSS Styling for CursorsApr 23, 2025 am 11:04 AMCustom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.
Worlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AMInteractive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a
Using CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AMTips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.
SMIL on?Apr 23, 2025 am 09:57 AMWell, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously
'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AMYay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.
CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AMThis CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.
Tailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AMMost of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio
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
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
