Trong bài hướng dẫn này , bạn học Bootstrap Grid System Hướng Dẫn Sử Dụng để tạo ra Grid System .
Như bạn đã biết, trong thiết kế đồ họa, hệ thống lưới là một cấu trúc hai chiều tạo thành các trục ngang và dọc , hữu ích cho cấu trúc nội dung. Nó được sử dụng rộng rãi để thiết kế bố trí và cấu trúc nội dung trong thiết kế in ấn. Trong thiết kế web, nó là một phương pháp rất hiệu quả để tạo ra một bố trí phù hợp nhanh chóng và hiệu quả sử dụng HTML và CSS. Như vậy, hệ thống lưới đã trở thành một thành phần thiết yếu / mô-đun cho các khuôn khổ thiết kế web hoặc công việc.
Giải thích nó một cách đơn giản, trong thiết kế web, chúng tôi tạo ra các hàng và cột bằng HTML và CSS để đạt được một mạng lưới. Và cột chứa các nội dung thực tế.
Như của phiên bản 2.3.2, Twitter Bootstrap cung cấp hai loại lưới. Hệ thống lưới mặc định là 940px cột rộng và 12. Bạn có thể thêm các kiểu phản ứng với nó và sau đó nó sẽ trở nên thích nghi với 724px và 1170px rộng đối với khung nhìn nó là ra về với.
Ngoài ra còn có một hệ thống lưới tuy biến. Đây là dựa trên một percentange thay vì điểm ảnh dựa. Và có thể được mở rộng để đáp ứng giống như lưới cố định mặc định. Chúng tôi sẽ thảo luận về một mặc định với một số ví dụ trong hướng dẫn này và sẽ có hướng dẫn riêng biệt cho hệ thống lưới tùy biến.
Nó sẽ là tuyệt vời nếu bạn đã tải về các tập tin Bootstrap mới nhất từ “http://twitter.github.io/bootstrap/assets/bootstrap.zip”.
Getting started with default Grid – bắt đầu với lưới mặt định
Bắt đầu với HTML cơ bản chúng ta sẽ thấy được làm thế nào để sử dụng Grid mặt định.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| </pre><!DOCTYPE html><html> <head> <title>Fixed layout example with Twitter Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body><div class="container"><div class="row"> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div></div></div> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html> |
Cú pháp chung cho việc tạo ra các lưới là :
- <div class=”row”>
- <div class=”spanx”>
- inline elements like span, block level elements like p, div.
- </div>
- repeat <div class=”spanx”> y times.
Trong ví dụ trên chúng ta sử dụng ba cột cùng độ rộng nhưng nếu bạn muốn cột 1 rộng hơn hay một cột nào đó trong ba cột thì bạn chỉ việc khai báo class=”span6″ hai cột khác là “span3″.Nói vậy chắc các bạn hơi khó hiểu tại sao lai như vậy
sau đây chúng ta sẽ tìm hiểu Cách thức các cột được tạo ra trong lưới thì các bạn sẽ hiểu ngay thui.
- [class*="span"] {
- float: left;
- min-height: 1px;
- margin-left: 20px;
- }
CSS quy định riêng biệt được sử dụng để thiết lập chiều rộng của các cột. Bảng sau đây cho thấy chi tiết
| Mã CSS | Giải thích |
|---|---|
Span12 {.
chiều rộng: 940px;
}
| Nếu đó là dòng có một cột duy nhất, chiều rộng của cột là 940px. |
Span11 {.
chiều rộng: 860px;
}
| Nếu dòng là có một eqaual cột đến 11 cột, chiều rộng của cột là 860px. |
Span10 {.
chiều rộng: 780px;
}
| Nếu dòng là có một eqaual cột đến 10 cột, chiều rộng của cột là 780px. |
Span9 {.
chiều rộng: 700px;
}
| Nếu dòng là có một eqaual cột 9 cột, chiều rộng của cột là 700px. |
Span8 {.
chiều rộng: 620px;
}
| Nếu dòng là có một eqaual cột 8 cột, chiều rộng của cột là 620px. |
Span7 {.
chiều rộng: 540px;
}
| Nếu dòng là có một eqaual cột 7 cột, chiều rộng của cột là 540px. |
Span6 {.
chiều rộng: 460px;
}
| Nếu dòng là có một eqaual cột 6 cột, chiều rộng của cột là 460px. |
Span5 {.
chiều rộng: 380px;
}
| Nếu dòng là có một eqaual cột 5 cột, chiều rộng của cột là 380px. |
Span4 {.
chiều rộng: 300px;
}
| Nếu dòng là có một eqaual cột 4 cột, chiều rộng của cột là 300px. |
Span2 {.
chiều rộng: 220px;
}
| Nếu dòng là có một eqaual cột 3 cột, chiều rộng của cột là 220px. |
Span2 {.
chiều rộng: 140px;
}
| Nếu dòng là có một eqaual cột 2 cột, chiều rộng của cột là 140px. |
Span1 {.
chiều rộng: 60px;
}
| Chiều rộng của một cột 1 là 60px. |
Ví dụ của Twitter Bootstrap lưới mặc định
Ví dụ này cho thấy làm thế nào để tạo ra 1 cột, 2 cột, 6 cột, 12 cột và 4 cột (theo thứ tự).
Cũng lưu ý rằng, tất cả các cột tạo ra được gói bởi một lớp “container” , được sử dụng để tạo ra một bố trí cố định sử dụng Twitter Bootstrap.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| </pre><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Twitter Bootstrap Grid System Example - w3resource Twitter Bootstrap Tutorial</title><meta name="description" content="Creating a 16 columns Grid with Twitter Bootstrap. Learn with examples to create a Grid System in Twitter Bootstrap."><link href="booststrap/css/bootstrap.min.css" rel="stylesheet"><style>.span12 h1{color:#FE6E4C; font-weight: bold; padding: 5px;}h3 {margin: 10px 0 10px 0;}</style></head><body><div class="container"><div class="row"><div class="span12"><h1>w3resource.com is a web design and development tutorial.</h1></div></div><div class="row"><div class="span3"><p><img src="/images/w3logo6.png" width="149" height="52" alt="w3resource logo" /></p></div><div class="span9"><p>w3resource offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content. With 3000+ unique content pages and thousands of examples, we are comprehensive. We have online practice editors to play around with the example codes.</p></div></div><div class="row"><div class="span12"><h3>Some of the topics and more... :</h3></div><div class="span2"><p><img src="images/html5_logo.png" width="140" height="86" alt="html5 logo" /></p></div><div class="span2"><p><img src="images/javascript-logo.png" width="140" height="86" alt="javascript logo" /></p></div><div class="span2"><p><img src="images/json.gif" width="140" height="86" alt="JSON logo" /></p></div><div class="span2"><p><img src="images/php.png" width="140" height="86" alt="PHP logo" /></p></div><div class="span2"><p><img src="images/mysql-logo.png" width="140" height="86" alt="MySQL logo" /></p></div><div class="span2"><p><img src="images/browser-statistics.png" width="140" height="86" alt="Browser Statistics logo" /></p></div></div><div class="row"><div class="span12"><h3>Social networking sites to share:</h3></div></div><div class="row"><div class="span1"><p><img src="images/gplus.png" width="50" height="49" alt="GPlus logo" /></p></div><div class="span1"><p><img src="images/twitter.png" width="50" height="38" alt="Twitter logo" /></p></div><div class="span1"><p><img src="images/orkut.png" width="50" height="55" alt="Orkut logo" /></p></div><div class="span1"><p><img src="images/ipad.png" width="50" height="53" alt="iPad logo" /></p></div><div class="span1"><p><img src="images/digo.png" width="50" height="54" alt="Digo logo" /></p></div><div class="span1"><p><img src="images/zapface.png" width="51" height="53" alt="Zapface logo" /></p></div><div class="span1"><p><img src="images/facebook.png" width="48" height="53" alt="facebook logo" /></p></div><div class="span1"><p><img src="images/netvibes.png" width="51" height="53" alt="Netvibes logo" /></p></div><div class="span1"><p><img src="images/linkedin.png" width="49" height="54" alt="LinkedIn logo" /></p></div><div class="span1"><p><img src="images/newsvine.png" width="48" height="53" alt="Newsvine logo" /></p></div><div class="span1"><p><img src="images/blogger.png" width="51" height="53" alt="Blogger logo" /></p></div><div class="span1"><p><img src="images/reditt.png" width="48" height="57" alt="Reddit logo" /></p></div></div><div class="row"><div class="span3"><h3>Fontend Development:</h3><p>HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript</p></div><div class="span3"><h3>Backend Developemt:</h3><p>PHP, Ruby, Python, Java, ASP.NET, SCALA</p></div><div class="span3"><h3>Database Management:</h3><p>SQL, MySQL POstgreSQL, NoSQL, MongoDB</p></div><div class="span3"><h3>APIs, Tools and Tips:</h3><p>Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG</p></div></div></div></body></html> |
Kết luận
Hướng dẫn này được dựa trên V2.3.2 của Bootstrap. Sau đây là một bản tóm tắt của những gì chúng ta đã thảo luận trong hướng dẫn này:
- Grid System Twitter Bootstrap là 940px rộng và có thể chứa 12 cột.
- Trong lưới , các hàng được tạo ra với “class =” row”và các cột được tạo ra với” class = “spanx”, trong đó x là một số nguyên dương. Tổng của x cho tất cả các cột được sử dụng không vượt quá 12.
- Bằng cách thêm css đáp ứng của Bootstrap, bạn có thể thêm các tính năng đáp ứng cho lưới deafult.
- Bạn có thể sử dụng hiệu số để tạo ra không gian bổ sung cho một cột. Để làm điều đó “class =” OffsetX “” được sử dụng, trong đó x là một integer.if , bạn đang sử dụng hiệu số, sau đó tổng số lượng các cột, trong đó có nhiều đối tượng dời được sử dụng, không thể vượt quá 11.
- Cột có thể được lồng nhau. Nếu cột lồng nhau được sử dụng, trong khi đếm tổng số cột trong lưới (trong một hàng trực thuộc container), cột lồng nhau cũng được tính với các cột trong hệ thống phân cấp.
mọi ý kiến xin comment phía dưới để được trợ giúp nhiều hơn chia sẽ cung bạn bè của bạn nhé.