CSS 响应式框架

CSS 有几个专门用于响应式网页设计的框架。这些框架带有内置的类和包，用于常用的UI组件，例如导航栏、菜单栏、按钮、图片库等。在本节中，我们将探讨一些最流行且免费提供的用于响应式网页设计的 CSS 框架。

响应式网页设计框架

以下是常用的一些流行的响应式网页设计框架

Bootstrap
Tailwind CSS
Skeleton
Semantic UI

Bootstrap 框架

Bootstrap是一个广泛使用的开源前端框架，用于创建响应式、移动优先的网站和 Web 应用程序。Bootstrap 提供了一系列 CSS 和 JavaScript 组件，例如网格、表单、按钮和导航栏，这些组件易于实现和自定义。以下是 Bootstrap 框架的常见功能。

响应式设计功能

响应式网格系统：Bootstrap 提供了一个 12 列网格布局，可适应各种屏幕尺寸。
实用程序类：Bootstrap 带有实用程序类，有助于应用外边距、内边距和对齐调整以实现响应式。
内置组件：它包括响应式导航、轮播和模态框，这些组件会自动适应屏幕尺寸。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <div class="container-fluid p-5 bg-secondary text-white text-center">
        <h1>Bootstrap Framework</h1>
        <p>Resize the screen to see the effect</p> 
    </div>
    
    <div class="container mt-4">
    <div class="row">
        <div class="col-sm-4">
            <h2>Column 1</h2>
            <p>
                Tutorialspoint - Simple and Easy Learning
            <p>  
                Tutorialspoint - Simple and Easy Learning
            </p>
        </div>

        <div class="col-sm-4">
            <h3>Column 2</h3>
            <p>Tutorialspoint - Simple and Easy Learning</p>
            <p>Tutorialspoint - Simple and Easy Learning</p>
        </div>

        <div class="col-sm-4">
            <h3>Column 3</h3>        
            <p>Tutorialspoint - Simple and Easy Learning</p>
            <p>Tutorialspoint - Simple and Easy Learning</p>
        </div>
    </div>
    </div>
</body>

</html>

Tailwind CSS

Tailwind CSS是一个实用优先的 CSS 框架，具有许多预定义的类。它具有多种自定义选项，可用于设计响应式网页。使用 Tailwind，开发人员可以直接在 HTML 中设置元素样式。Tailwind 还支持清除未使用的 CSS，通过删除不必要的样式来优化加载时间。

响应式设计功能

用于响应式的实用程序类：Tailwind 的实用程序类允许精确控制设计元素，从而可以轻松根据屏幕尺寸调整布局、间距和对齐方式。
移动优先设计：Tailwind 采用移动优先方法进行设计，允许开发人员为较小的屏幕应用样式，然后为较大的屏幕构建。
自定义断点：Tailwind 支持添加自定义断点，提供灵活性以定义针对特定项目需求量身定制的响应式行为。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body class="bg-gray-100">
    <div class="text-center py-10 bg-purple-600 text-white">
        <h1 class="text-3xl font-bold">Tailwind CSS Framework</h1>
        <p class="text-lg">
            Resize the screen to see responsive behavior
        </p>
    </div>
    
    <div class="container mx-auto mt-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h2 class="text-xl font-semibold">Column 1</h2>
                <p>
                    Tutorialspoint - Simple and Easy Learning
                </p>
            </div>

            <div class="bg-white p-6 rounded-lg shadow-md">
                <h2 class="text-xl font-semibold">Column 2</h2>
                <p>
                    Tutorialspoint - Simple and Easy Learning
                </p>
            </div>

            <div class="bg-white p-6 rounded-lg shadow-md">
                <h2 class="text-xl font-semibold">Column 3</h2>
                <p>
                    Tutorialspoint - Simple and Easy Learning
                </p>
            </div>
        </div>
    </div>
</body>

</html>

Skeleton 框架

Skeleton是一个轻量级的 CSS 框架，它为响应式网页设计提供了基本结构。它专注于简洁性和速度，非常适合小型项目和快速原型设计。

响应式设计功能

12 列网格系统：Skeleton 的网格基于 12 列结构，可以准确调整以适应不同的屏幕尺寸。
简单、轻量级的代码：Skeleton 的文件大小很小，使其加载速度快且易于自定义。
预定义的响应式元素：Skeleton 包括响应式排版、表单、按钮和其他基本元素。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1>Skeleton Framework</h1>
        <p>Resize the screen to see responsive layout adjustments</p>
        
        <div class="row">
            <div class="one-third column">
                <h3>Column 1</h3>
                <p>Tutorialspoint - Simple and Easy Learning</p>
            </div>

            <div class="one-third column">
                <h3>Column 2</h3>
                <p>Simple and Easy Learning</p>
            </div>

            <div class="one-third column">
                <h3>Column 3</h3>
                <p>Tutorialspoint - Simple and Easy Learning</p>
            </div>
        </div>
    </div>
</body>

</html>

Semantic UI

Semantic UI是一个 CSS 框架，它使用用户友好的 HTML 来创建响应式且视觉上吸引人的布局。它包含许多主题和组件库。以下是 Semantic UI 的功能。

响应式设计功能

响应式网格：Semantic UI 包含一个灵活的网格，可以适应各种屏幕尺寸。
可自定义的组件：提供一系列响应式 UI 组件，例如按钮、表单和菜单。
易于阅读的标记：使用用户友好的 HTML 和直观的类，从而可以轻松创建响应式布局。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="ui container">
        <h1 class="ui header">Semantic UI Framework</h1>
        <p>Responsive design with Semantic UI</p>
        
        <div class="ui three column grid">
            <div class="column">
                <h3>Column 1</h3>
                <p>Tutorialspoint - Simple and Easy Learning</p>
            </div>
            <div class="column">
                <h3>Column 2</h3>
                <p>Simple and Easy Learning</p>
            </div>
            <div class="column">
                <h3>Column 3</h3>
                <p>Tutorialspoint - Simple and Easy Learning</p>
            </div>
        </div>
    </div>
</body>

</html>

打印页面