Pure.CSS - Hướng dẫn nhanh
Pure là một Bảng định kiểu xếp tầng (CSS) được phát triển bởi YAHOO. Nó giúp tạo ra các trang web nhanh hơn, đẹp và đáp ứng.
Một số tính năng nổi bật của nó như sau:
- Thiết kế đáp ứng tích hợp
- CSS chuẩn với dấu chân tối thiểu
- Tập hợp các mô-đun CSS nhỏ, đáp ứng
- Sử dụng miễn phí
Thiết kế đáp ứng
Pure có thiết kế đáp ứng được tích hợp sẵn để trang web được tạo bằng Pure sẽ tự thiết kế lại theo kích thước thiết bị. Pure có lưới chất lỏng ưu tiên di động 12 cột hỗ trợ các lớp đáp ứng cho các kích thước màn hình nhỏ, lớn và trung bình.
Các lớp thuần túy được tạo theo cách mà trang web có thể phù hợp với bất kỳ kích thước màn hình nào. Các trang web được tạo bằng Pure hoàn toàn tương thích với PC, máy tính bảng và thiết bị di động.
CSS chuẩn
Pure chỉ sử dụng CSS chuẩn và nó rất dễ học. Không có sự phụ thuộc vào bất kỳ thư viện JavaScript bên ngoài nào như jQuery.
Có thể mở rộng
Pure là bởi thiết kế rất tối thiểu và phẳng. Nó được thiết kế dựa trên thực tế là việc thêm các quy tắc CSS mới dễ dàng hơn nhiều so với việc ghi đè các quy tắc CSS hiện có. Bằng cách thêm một vài dòng CSS, giao diện của Pure có thể được tùy chỉnh để hoạt động với một dự án web hiện có.
Nó hỗ trợ bóng đổ và màu đậm. Màu sắc và sắc thái vẫn đồng nhất trên các nền tảng và thiết bị khác nhau. Và quan trọng nhất, nó hoàn toàn miễn phí để sử dụng.
Có hai cách để sử dụng Pure -
Local Installation - Bạn có thể tải xuống tệp pure.css trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.
CDN Based Version - Bạn có thể đưa tệp pure.css vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN).
Cài đặt cục bộ
Đi đến https://purecss.io/start/ để tải xuống phiên bản mới nhất có sẵn.
Đặt tệp pure-min.css đã tải xuống vào thư mục trên trang web của bạn, ví dụ: / css.
Thí dụ
Bạn có thể bao gồm css tệp trong tệp HTML của bạn như sau:
<html>
<head>
<title>The PURE.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="pure-g">
<div class="pure-u-1-3"><p>First Column</p></div>
<div class="pure-u-1-3"><p>Second Column</p></div>
<div class="pure-u-1-3"><p>Third Column</p></div>
</div>
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Phiên bản dựa trên CDN
Bạn có thể đưa tệp pure.css vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN). yui.yahooapis.com cung cấp nội dung cho phiên bản mới nhất.
Chúng tôi đang sử dụng phiên bản CDN của yui.yahooapis.com trong suốt hướng dẫn này.
Thí dụ
Bây giờ chúng ta hãy viết lại ví dụ trên bằng cách sử dụng pure.css từ PureCSS.io CDN.
<html>
<head>
<title>The PURE.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-3"><p>First Column</p></div>
<div class = "pure-u-1-3"><p>Second Column</p></div>
<div class = "pure-u-1-3"><p>Third Column</p></div>
</div>
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Pure.CSS có một số lớp đặc biệt để tạo ra một thiết kế đáp ứng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | .pure-u-* Đặt vùng chứa để chiếm không gian cần thiết trên bất kỳ thiết bị nào. |
| 2 | .pure-u-sm-* Đặt vùng chứa để chiếm không gian cần thiết trên thiết bị có chiều rộng ≥ 568px. |
| 3 | .pure-u-md-* Đặt vùng chứa để chiếm không gian cần thiết trên thiết bị có chiều rộng ≥ 768px. |
| 4 | .pure-u-lg-* Đặt vùng chứa để chiếm không gian cần thiết trên thiết bị có chiều rộng ≥ 1024px. |
| 5 | .pure-u-xl-* Đặt vùng chứa để chiếm không gian cần thiết trên thiết bị có chiều rộng ≥ 1280px. |
Trong ví dụ sau, chúng ta sẽ tạo một lưới đáp ứng với một hàng có bốn cột. Các cột nên xếp chồng trên màn hình nhỏ, chiếm chiều rộng: 50% trên màn hình cỡ trung bình và nên chiếm chiều rộng: 25% trên màn hình lớn.
Điều này được thực hiện bằng cách thêm .pure-u-1 lớp cho màn hình nhỏ, .pure-u-md-1-2 cho màn hình cỡ trung bình và .pure-u-lg-1-4cho màn hình lớn. Thay đổi kích thước trang để xem phản hồi của lưới đối với kích thước màn hình.
Thí dụ
purecss_responsive_design.htm
<html>
<head>
<title>The PURE.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.graybox {
background: rgb(240, 240, 240);
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-1">
<div class = "graybox">
<p>These four columns should stack on small screens,
should take up width: 50% on medium-sized screens, and should
take up width: 25% on large screens.</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class = "graybox">
<p>First Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Second Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Third Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class = "graybox">
<p>Fourth Column</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1">
<div class = "graybox">
<p>This column is to occupy the complete space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-2-5">
<div class = "graybox">
<p>This column is to occupy the two-fifth of the space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-3-5">
<div class = "graybox">
<p>This column is to occupy the three-fifth of the space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 1: This column is to occupy the one-third of the
space of a row on all devices.</p>
</div>
</div>
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 2: This column is to occupy the one-third of the space
of a row on all devices.</p>
</div>
</div>
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 3: This column is to occupy the one-third of the space of a
row on all devices.</p>
</div>
</div>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Pure.CSS cung cấp khái niệm Lưới thuần túy với hai loại lớp, pure-g, một lớp lưới và các lớp đơn vị, pure-u-*. Sau đây là các quy tắc để sử dụng Pure Grids.
Độ rộng của Đơn vị được tính bằng phân số. Ví dụ: pure-u-1-2 đại diện cho 1/2 hoặc 50% chiều rộng, pure-u-2-5 đại diện cho 2/5 hoặc 40% chiều rộng, v.v.
Con của Pure Grid (phần tử có lớp pure-g) phải đang sử dụng pure-u hoặc là pure-u-* tên lớp.
Tất cả nội dung phải là một phần của đơn vị lưới để được hiển thị đúng cách.
Kích thước đơn vị lưới
Pure Grid có kích thước đơn vị thứ 5 và 24. Các hình minh họa sau đây cho thấy các ví dụ về một số đơn vị có sẵn, có thể được thêm vàopure-ui-. Ví dụ: để tạo một ô có chiều rộng 50%, bạn có thể sử dụng kiểu csspure-ui-1-2.
Đơn vị dựa trên thứ 5
purecss_5th_based.htm
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.grid-unit {
margin: 0.25em 0;
padding-left: 4.5em;
}
.grid-unit .grid-unit-width {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 2em;
background: #eee;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">2-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-2-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">3-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-3-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">4-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-4-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Các đơn vị dựa trên thứ 24
purecss_24th_based.htm
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.grid-unit {
margin: 0.25em 0;
padding-left: 4.5em;
}
.grid-unit .grid-unit-width {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 2em;
background: #eee;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-12</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-12"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">2-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-2-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">3-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-3-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-8</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-8"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">4-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-4-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-6</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-6"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">5-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-5-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-4</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-4"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">6-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-6-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">7-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-7-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-3</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-3"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">22-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-22-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">23-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-23-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1</div>
<div class ="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">24-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-24-24"></div>
</div>
</div>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Pure.CSS có một CSS rất đẹp và đáp ứng cho các thiết kế biểu mẫu. CSS sau được sử dụng:
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | pure-form Đại diện cho một dạng nội tuyến nhỏ gọn. |
| 2 | pure-form-stacked Biểu diễn một biểu mẫu xếp chồng với các phần tử đầu vào bên dưới nhãn. Được sử dụng với dạng nguyên chất. |
| 3 | pure-form-aligned Đại diện cho một biểu mẫu được căn chỉnh với các phần tử đầu vào bên dưới nhãn. Được sử dụng với dạng nguyên chất. |
| 4 | pure-input-rounded Hiển thị một điều khiển biểu mẫu với các góc tròn |
| 5 | pure-button Làm đẹp một nút. |
| 6 | pure-checkbox Làm đẹp một hộp kiểm. |
| 7 | pure-radio Làm đẹp một đài phát thanh. |
Thí dụ
purecss_forms.htm
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<form class = "pure-form pure-form-aligned">
<fieldset>
<div class = "pure-control-group">
<label for = "name">Username</label>
<input id = "name" type = "text" placeholder = "Username" required>
</div>
<div class = "pure-control-group">
<label for = "email">Email</label>
<input id = "email" type = "text" placeholder = "Email Address" required>
</div>
<div class = "pure-control-group">
<label for = "comments">Comments</label>
<input id = "comments" type="text" placeholder = "Comments">
</div>
<div class = "pure-controls">
<label for = "married" class = "pure-checkbox">
<input id = "married" type = "checkbox" checked = "checked">
Married
</label>
<br>
<label for = "single" class = "pure-checkbox">
<input id = "single" type = "checkbox">
Single
</label>
<br>
<label for = "dontknow" class = "pure-checkbox">
<input id = "dontknow" type = "checkbox" disabled>
Don't know (Disabled)
</label>
<br>
<br>
</div>
<div class = "pure-controls">
<label for = "male" class = "pure-radio">
<input id = "male" type = "radio" name = "gender" value = "male" checked>
Male
</label>
<br>
<label for = "female" class= "pure-radio">
<input id = "female" type = "radio" name = "gender" value = "female">
Female
</label>
<br>
<label for = "dontknow1" class = "pure-radio">
<input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
Don't know (Disabled)
</label>
<button type = "submit" class = "pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>Kết quả
Xác minh kết quả.
Pure.CSS có một CSS rất đẹp và đáp ứng để tùy chỉnh giao diện của một nút. CSS sau được sử dụng:
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | pure-button Đại diện cho một nút tiêu chuẩn. Có thể được sử dụng để tạo kiểu cho một liên kết và nút. |
| 2 | pure-button-disabled Đại diện cho một nút bị vô hiệu hóa. Được sử dụng cùng với nút thuần túy. |
| 3 | pure-button-active Đại diện cho một nút được nhấn. Được sử dụng cùng với nút thuần túy. |
Thí dụ
purecss_buttons.htm
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<style>
.success,
.error,
.warning,
.secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.success {
background: rgb(28, 184, 65); /* green */
}
.error {
background: rgb(202, 60, 60); /* maroon */
}
.warning {
background: rgb(223, 117, 20); /* orange */
}
.secondary {
background: rgb(66, 184, 221); /* light blue */
}
.xsmall {
font-size: 70%;
}
.small {
font-size: 85%;
}
.large {
font-size: 110%;
}
.xlarge {
font-size: 125%;
}
</style>
</head>
<body>
<h2>Standard Buttons</h2>
<button class = "pure-button">Click Me</button>
<button class = "pure-button pure-button-active">Click Me</button>
<button class = "pure-button pure-button-disabled">I am disabled</button>
<h2>Links as Buttons</h2>
<a class = "pure-button">Link</a>
<a class = "pure-button pure-button-active">Link</a>
<a class = "pure-button pure-button-disabled">Disabled Link</a>
<h2>Primary Button</h2>
<a class = "pure-button pure-button-primary">Submit</a>
<h2>Customized button</h2>
<button class = "pure-button success">Success</button>
<button class = "pure-button error">Error</button>
<button class = "pure-button warning">Warning</button>
<button class = "pure-button secondary">Secondary</button>
<h2>Different Sized button</h2>
<button class = "pure-button xsmall">Extra Small</button>
<button class = "pure-button small">Small</button>
<button class = "pure-button large">Large</button>
<button class = "pure-button xlarge">Extra Large</button>
</body>
</html>Kết quả
Xác minh kết quả.
Pure.CSS có thể được sử dụng để hiển thị các loại bảng khác nhau bằng các kiểu khác nhau trên bảng thuần túy
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | pure-table Đại diện cho một bảng cơ bản với bất kỳ phần đệm, đường viền mặc định nào và tiêu đề được nhấn mạnh. |
| 2 | pure-table-bordered Vẽ một bảng có đường viền giữa các hàng. |
| 3 | pure-table-horizontal Vẽ một bảng với các đường ngang. |
| 4 | pure-table-striped Hiển thị một bảng đã loại bỏ. |
| 5 | pure-table-odd Nếu được áp dụng trên mọi tr khác, sẽ thay đổi nền của hàng và tạo hiệu ứng theo kiểu ngựa vằn. |
Thí dụ
purecss_tables.htm
<html>
<head>
<title>The PURE.CSS Tables</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<h2>Tables Demo</h2>
<hr/>
<h3>Simple Table</h3>
<table class = "pure-table">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Bordered Table</h3>
<table class="pure-table pure-table-bordered">
<thead>
<tr><
th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Table with Horizontal Borders</h3>
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Stripped Table</h3>
<table class = "pure-table pure-table-striped">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
Pure.CSS cung cấp các tùy chọn để hiển thị hình ảnh theo cách đáp ứng bằng cách sử dụng hình ảnh thuần túy làm lớp chính.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | pure-img Đại diện cho một hình ảnh được tạo kiểu cơ bản không có bất kỳ đường viền nào. Hình ảnh phát triển và thu nhỏ với nội dung duy trì tỷ lệ chính xác. |
Thí dụ
purecss_images.htm
<html>
<head>
<title>The W3.CSS Images</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<h2>Images Demo</h2>
<hr/>
<div class = "pure-g">
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Pure.CSS hỗ trợ các thư viện biểu tượng phổ biến sau:
- Biểu tượng phông chữ tuyệt vời
- Biểu tượng tài liệu của Google
- Biểu tượng Bootstrap
Sử dụng
Để sử dụng biểu tượng, hãy đặt tên của biểu tượng vào lớp của phần tử <i> HTML.
Thí dụ
purecss_icons.htm
<html>
<head>
<title>The PURE.CSS Icons</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.xsmall {
font-size: 70%;
}
.small {
font-size: 85%;
}
.large {
font-size: 110%;
}
.xlarge {
font-size: 125%;
}
</style>
</head>
<body>
<h2>Icons Demo</h2>
<hr/>
<h3>Font Awesome Icon Demo</h3>
<i class = "fa fa-cloud xsmall"></i>
<i class = "fa fa-cloud small"></i>
<i class = "fa fa-cloud"></i>
<i class = "fa fa-cloud large"></i>
<i class = "fa fa-cloud xlarge"></i>
<h3>Google Material Design Icon Demo</h3>
<i class = "material-icons xsmall">cloud</i>
<i class = "material-icons small">cloud</i>
<i class = "material-icons large">cloud</i>
<i class = "material-icons xlarge">cloud</i>
<i class = "material-icons">cloud</i>
<h3>Bootstrap Icon Demo</h3>
<i class = "glyphicon glyphicon-cloud xsmall"></i>
<i class = "glyphicon glyphicon-cloud small"></i>
<i class = "glyphicon glyphicon-cloud"></i>
<i class = "glyphicon glyphicon-cloud large"></i>
<i class = "glyphicon glyphicon-cloud xlarge"></i>
<h3>Button with Icon Demo</h3>
<button class = "pure-button"><i class = "fa fa-cog"></i> Settings</button>
<a class = "pure-button" href = "#"><i class = "fa fa-shopping-cart fa-lg"></i> Checkout</a>
</body>
</html>Kết quả
Xác minh kết quả.