CSS RWD - Các Khung Công tác

Xin chào các bạn đang theo đuổi nghề lập trình web! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới của các Khung công tác CSS Thiết kế Web Đ响应 (RWD). Là giáo viên máy tính ở khu phố của bạn, tôi rất vui mừng được hướng dẫn các bạn qua chủ đề thú vị này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Vậy, hãy lấy một tách cà phê, ngồi舒适的, và cùng nhau khám phá nhé!

CSS RWD - Frameworks

Các Khung công tác CSS RWD là gì?

Trước khi chúng ta tìm hiểu các khung công tác cụ thể, hãy hiểu rõ CSS RWD Frameworks là gì và tại sao chúng lại quan trọng trong phát triển web hiện đại.

CSS RWD Frameworks là các gói mã CSS đã viết sẵn, tiêu chuẩn hóa giúp các nhà phát triển tạo ra các trang web响应 nhanh chóng và hiệu quả. Chúng cung cấp một nền tảng vững chắc của các thành phần đã được thiết kế sẵn và một hệ thống lưới tự động điều chỉnh theo kích thước màn hình khác nhau.

Hãy tưởng tượng các khung công tác này như một bộ LEGO khổng lồ cho phát triển web. Thay vì xây dựng mọi thứ từ đầu, bạn có các khối đã được làm sẵn để dễ dàng ghép lại với nhau và tạo ra một trang web响应 đẹp mắt.

Bây giờ, hãy cùng tìm hiểu một số Khung công tác CSS RWD phổ biến!

Khung công tác CSS RWD - Bootstrap

Bootstrap có lẽ là khung công tác CSS phổ biến nhất hiện nay. Được tạo ra bởi Twitter, nó được yêu thích bởi các nhà phát triển trên toàn thế giới nhờ sự dễ sử dụng và tài liệu phong phú.

Bắt đầu với Bootstrap

Để sử dụng Bootstrap, bạn cần bao gồm các tệp CSS và JavaScript của nó trong HTML. Dưới đây là cách bạn có thể làm điều đó:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang của tôi với Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Nội dung của bạn ở đây -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Mã này bao gồm các tệp CSS và JavaScript của Bootstrap từ một Mạng phân phối nội dung (CDN). Điều này giống như đặt mua pizza thay vì tự làm từ đầu - nhanh chóng và dễ dàng!

Hệ thống lưới của Bootstrap

Một trong những tính năng mạnh mẽ nhất của Bootstrap là hệ thống lưới của nó. Nó cho phép bạn tạo ra các bố cục响应 dễ dàng. Dưới đây là một ví dụ:

<div class="container">
    <div class="row">
        <div class="col-sm-4">Cột 1</div>
        <div class="col-sm-4">Cột 2</div>
        <div class="col-sm-4">Cột 3</div>
    </div>
</div>

Mã này tạo ra một hàng với ba cột có độ rộng bằng nhau trên màn hình nhỏ và lớn hơn. Trên màn hình rất nhỏ, các cột sẽ chồng lên nhau theo chiều dọc. Điều này giống như có một hộp có thể thay đổi hình dạng để phù hợp với bất kỳ màn hình nào nó được hiển thị!

Khung công tác CSS RWD - Pure CSS

Pure CSS là một khung công tác nhẹ, modular được phát triển bởi Yahoo. Nó非常适合 cho các dự án mà bạn muốn một cách tiếp cận tối thiểu.

Bắt đầu với Pure CSS

Để sử dụng Pure CSS, bao gồm dòng sau trong phần <head> của tệp HTML của bạn:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">

Hệ thống lưới của Pure CSS

Pure CSS cũng cung cấp một hệ thống lưới linh hoạt. Dưới đây là một ví dụ:

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3">Đầu tiên</div>
    <div class="pure-u-1 pure-u-md-1-3">Thứ hai</div>
    <div class="pure-u-1 pure-u-md-1-3">Thứ ba</div>
</div>

Điều này tạo ra một hàng với ba cột bằng nhau trên màn hình trung bình và lớn hơn. Trên màn hình nhỏ hơn, mỗi cột chiếm toàn bộ rộng độ.

Khung công tác CSS RWD - Skeleton

Skeleton là một khung công tác siêu nhẹ, phù hợp cho các dự án nhỏ hơn hoặc khi bạn chỉ cần một hệ thống lưới响应 cơ bản.

Bắt đầu với Skeleton

Để sử dụng Skeleton, bao gồm các dòng sau trong phần <head> của tệp HTML của bạn:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

Hệ thống lưới của Skeleton

Hệ thống lưới của Skeleton đơn giản nhưng hiệu quả. Dưới đây là một ví dụ:

<div class="container">
    <div class="row">
        <div class="four columns">Một phần ba</div>
        <div class="four columns">Một phần ba</div>
        <div class="four columns">Một phần ba</div>
    </div>
</div>

Điều này tạo ra một hàng với ba cột có độ rộng bằng nhau. Hệ thống lưới của Skeleton dựa trên bố cục 12 cột, vì vậy mỗi "four columns" chiếm 1/3 của hàng.

Khung công tác CSS RWD - Semantic UI

Semantic UI được biết đến với giao diện thân thiện với con người, sử dụng các nguyên tắc ngôn ngữ tự nhiên để làm cho mã dễ đọc hơn.

Bắt đầu với Semantic UI

Để sử dụng Semantic UI, bao gồm các dòng sau trong tệp HTML của bạn:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

Hệ thống lưới của Semantic UI

Hệ thống lưới của Semantic UI rất trực quan. Dưới đây là một ví dụ:

<div class="ui grid">
    <div class="five wide column">Cột 1</div>
    <div class="six wide column">Cột 2</div>
    <div class="five wide column">Cột 3</div>
</div>

Điều này tạo ra một hàng với ba cột có độ rộng khác nhau. Hệ thống lưới dựa trên 16 cột, vì vậy "five wide" chiếm 5/16 của hàng, "six wide" chiếm 6/16, và vân vân.

Khung công tác CSS RWD - Foundation

Foundation là một khung công tác phổ biến khác, được biết đến với sự linh hoạt và các tính năng tiên tiến.

Bắt đầu với Foundation

Để sử dụng Foundation, bao gồm các dòng sau trong tệp HTML của bạn:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"></script>

Hệ thống lưới của Foundation

Hệ thống lưới của Foundation rất mạnh mẽ. Dưới đây là một ví dụ:

<div class="grid-x grid-padding-x">
    <div class="cell small-4">Ô 1</div>
    <div class="cell small-4">Ô 2</div>
    <div class="cell small-4">Ô 3</div>
</div>

Điều này tạo ra một hàng với ba cột có độ rộng bằng nhau. Class grid-x tạo ra một lưới ngang, trong khi grid-padding-x thêm khoảng cách giữa các cột.

So sánh các tính năng của Khung công tác

Để giúp bạn chọn đúng khung công tác cho nhu cầu của mình, đây là bảng so sánh các khung công tác chúng ta đã thảo luận:

Khung công tác	Kích thước tệp	Độ khó học	Tùy chỉnh	Hỗ trợ cộng đồng
Bootstrap	Lớn	Dễ	Cao	Xuất sắc
Pure CSS	Nhỏ	Dễ	Trung bình	Tốt
Skeleton	Nhỏ	Rất dễ	Thấp	Trung bình
Semantic UI	Lớn	Trung bình	Cao	Rất tốt
Foundation	Lớn	Trung bình	Cao	Rất tốt

Nhớ rằng, khung công tác tốt nhất cho bạn phụ thuộc vào yêu cầu của dự án và sở thích cá nhân. Điều này giống như việc chọn xe - một chiếc xe thể thao có thể tốt cho một số người, nhưng những người khác có thể cần một chiếc xe gia đình!

Cuối cùng, các Khung công tác CSS RWD là các công cụ mạnh mẽ có thể giúp bạn tăng tốc quá trình phát triển web. Chúng cung cấp một nền tảng vững chắc để tạo ra các trang web响应, cho phép bạn tập trung hơn vào các khía cạnh độc đáo của dự án của bạn.

Khi bạn tiếp tục hành trình trong phát triển web, đừng ngại thử nghiệm với các khung công tác khác nhau. Mỗi khung công tác đều có những điểm mạnh riêng, và việc bạn khám phá càng nhiều, bạn sẽ càng có nhiều công cụ để chọn lựa cho mỗi công việc.

Chúc các bạn lập trình vui vẻ, những nhà lập trình tương lai! Nhớ rằng, mỗi chuyên gia đều từng là người mới bắt đầu, vì vậy hãy tiếp tục thực hành và đừng ngừng học hỏi!

Credits: Image by storyset

Hướng Dẫn Trước:

CSS RWD - Video

Hướng Dẫn Tiếp Theo:

CSS - Câu hỏi và câu trả lời