Chủ đề nổi bật
03/08/2018, 09:48

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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

Twitter Bootstrap 3

BÀI KẾ SAU BÀI KẾ TIẾP

Twitter Bootstrap 4

BÀI KẾ SAU BÀI KẾ TIẾP

Bài 19: Helper classes trong bootstrap 3

Trong bài viết này thì chúng ta sẽ tìm hiểu về các helper classes hỗ trợ của bootstrap 3, đây là các class sẽ giúp các bạn trong việc tạo ra ...

Bài 17: Dropdown menu trong bootstrap 3

Thuật ngữ dropdown menu đã trở nên quá quen thuộc trong mỗi người của chúng ta, và với bootstrap nó cũng được hỗ trợ một cách tốt nhất để người ...

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Hiện nay PHP có rất nhiều Framework và CMS hỗ trợ giúp cho công việc lập trình trở nên đơn giản và thống nhất với nhau. Nhưng bạn có nghĩ trong ...

Bài 15: Navigation trong bootstrap 3

Như vậy, kết thúc bài trước chúng ta đã tìm hiểu xong khái niệm về navs và trong bài học ngày hôm nay thì chúng ta sẽ tiếp tục tìm hiểu về một ...

Bài 11: List group trong bootstrap 3

Trong bài này chúng ta sẽ cùng nhau tìm hiểu khái niệm List Group trong bootstrap 3 , nghe tới cái tên list chắc hẳn các bạn đã hình dung ra ...

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Đây là bài lý thuyết cuối cùng trong series bootstrap 3, ở các bài tiếp theo chúng ta sẽ thực hành và tạo ra những mẫu layout với những kiến thức ...

Bài 18: Tạo Tabs trong bootstrap 3

Bài viết này cũng có một mối liên quan mật thiết với component navs vì tabs cũng là dạng danh sách nằm ngang được phân làm từng khối riêng biệt. ...