Bài 13: Glyphicons trong bootstrap 3
Trong bài học ngày hôm nay các bạn sẽ cùng với tôi tìm hiểu về Glyphicons . Đây là thành phần components được tích hơp vào bootstrap 3, nó sẽ ...
Trong bài học ngày hôm nay các bạn sẽ cùng với tôi tìm hiểu về Glyphicons. Đây là thành phần components được tích hơp vào bootstrap 3, nó sẽ giúp chúng ta ứng dụng vào quá trình thiết kế website và đẩy nhanh quá trình xây dựng layout hơn.
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
<!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.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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
<!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.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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
Kết bài:
Bài viết xin được phép kết thúc, vì bài viết này có thể coi là khá đơn giản nhất so với các bài trước đúng không các bạn chỉ cần xem code và vào trang chủ lựa chọn cho mình một glyphicons trong bootstrap 3 theo nhu cầu của mình. Các bạn đừng nghĩ nó đơn giản mà không xem kỹ nhé vì bài tiếp theo chúng ta sẽ phải sử dụng lại nó khá là nhiều đấy.
Nguồn: code24h.com
