Glyphicons trong bootstrap 3
1. Glyphicons trong bootstrap 3
Glyphicons là những biểu tượng mà các bạn có thể áp dụng nó vào website của các bạn. và nó thuộc về dạng font-icons nên
chúng ta hoàn toàn có thể thay đổi màu sắc và kích thước của nó dễ
dàng. Để dễ hình dung hơn thì chúng ta sẽ tìm hiểu cách khai báo các
thuộc tính bên trong nó.
Vì nó thuộc về dạng font-icons nên chúng ta cần phải vào trang chủ bootstrap để dowload bộ source về, bên trong source các bạn sẽ thấy có một folder tên là fonts, đó chính là nơi chứa các font của glyphicons, hoặc
các bạn cũng có thể nhúng trực tiếp đường link khai báo css & js để
có thể sử dụng bootstrap mà tôi đã hướng dẫn các bạn ở các bài trước.
Tuy nhiên tôi khuyến khích các bạn nên dowload về và tập thói quen khai
báo đường dẫn chính xác hơn. Ở bài này tôi sẽ dùng đường dẫn mà
bootstrap cung cấp để demo các ví dụ.
Ở ví dụ đầu tiên thì tôi sẽ
chia layout ra làm 6 khối. Bên trong các khối sẽ chứa một đoạn text nhỏ
và phía trên đoạn text sẽ là phần mà chúng ta dùng để nhúng biểu tượng
của glyphicons vào. Các bạn truy cập vào đây để có thể copy các class biểu tượng mà bootstrap hỗ trợ chúng ta.
Để có thể khai báo và sử dụng glyphicons thì chúng ta sẽ phải điền vào hai class. Đầu tiên là class
glyphicons và phía sau nó sẽ là class con hỗ trợ sinh ra biểu tượng mà bootstrap cung cấp cho chúng ta.
Ví dụ: Xem demo
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
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap 3 Glyphicons</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <style type="text/css"> .example{ margin: 20px; } </style></head><body> <div class="example"> <div class="container"> <div class="row"> <h2 class="text-center">Freetuts.net - Bootstrap 3 Glyphicons - Author Hoài Minh</h2> <hr /> <div class="col-md-4"> <p><span class="glyphicon glyphicon-home"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-download-alt"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-glass"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-star"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-user"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-film"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> </div></div></div> </body> </html> |
Hình ảnh glyphicons
Ở ví dụ này thì tôi bọc biểu
tượng trong cặp thẻ span , vì sao phải là thẻ span? Trên trang chủ của
bootstrap có câu trích dẫn như sau:
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.
Dịch nôm na thì có nghĩa đại
loại là biểu tượng không thể khai báo với các thành phần khác và nó chỉ
có tác dụng khi khai báo trong cặp thẻ span. Còn cách khai báo để sử
dụng thì tôi nghĩ sau khi các bạn click xem demo và xem code thì sẽ hình
dung ra cách sử dụng ngay mà không cần tôi phải giải thích nửa.
2. Thay đổi màu sắc và kích thước glyphicons trong bootstrap 3
Các bạn nên ghi nhớ dùm tôi
rằng, vì glyphicons là một dạng font-icons và nó thuộc một nhánh con
trong font, vì thế chúng ta hoàn toàn có thể thay đổi màu sắc và kích
thước của nó một cách khá là đơn giản bằng cách stylesheet cho class
glyphicon
Tôi sẽ mượn lại code của ví
dụ đầu tiên để sử dụng cho ví dụ thứ hai này. Ở ví dụ này thì tôi sẽ
biến các biểu tượng thành màu xanh dương cũng như mỗi biểu tượng sẽ có
kích thước tương đương với 100px. Để làm được đều này thì tôi sẽ viết
css trực tiếp ngay trong file html luôn.
Ví dụ: Xem demo
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
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap 3 Glyphicons</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <style type="text/css"> .example{ margin: 20px; } .glyphicon{ font-size: 100px; color: orange; } </style></head><body> <div class="example"> <div class="container"> <div class="row"> <h2 class="text-center">Freetuts.net - Bootstrap 3 Glyphicons - Author Hoài Minh</h2> <hr /> <div class="col-md-4"> <p><span class="glyphicon glyphicon-home"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-download-alt"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-glass"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-star"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-user"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> <div class="col-md-4"> <p><span class="glyphicon glyphicon-film"></span></p> <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p> </div> </div></div></div> </body> </html> |
Hình ảnh custom glyphicons
No comments
Post a Comment