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/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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/npm/tailwindcss@2.2.19/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>

列印頁面