TWITTER BOOTSTRAP 3
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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ẽ 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>

glyphicons bootstrap 3 png
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>


custom glyphicons png
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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Cùng chuyên mục:

Bootstrap4 là gì?

Bootstrap4 là gì?

Chào các bạn, nếu các bạn đang tìm hiểu về Bootstrap4 thì các bạn đã…

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

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…

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Sau khi kết thúc series bootstrap 3 lý thuyết thì ở bài này tôi sẽ…

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

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…

Bài 19: Helper classes trong bootstrap 3

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ỗ…

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

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ì…

Bài 17: Dropdown menu trong bootstrap 3

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…

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Như vậy sau khi kết thúc bài trước thì xem như chúng ta đã tìm…

Bài 15: Navigation trong bootstrap 3

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ề…

Bài 14: Navs menu trong bootstrap 3

Bài 14: Navs menu trong bootstrap 3

Như vậy sau khi kết thúc bài viết trước thì các bạn cùng với tôi…

Bài 12: Button group bootstrap 3

Bài 12: Button group bootstrap 3

Để có thể hiểu rõ bài viết này thì tôi cần các bạn phải xem…

Bài 11: List group trong bootstrap 3

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…

Bài 10: Tạo button trong bootstrap 3

Bài 10: Tạo button trong bootstrap 3

Như vậy kết thúc 9 bài trước thì các bạn cũng phần nào cảm nhận…

Bài 9: Xây dựng form với bootstrap 3

Bài 9: Xây dựng form với bootstrap 3

Khi các bạn tiến hành xây dựng giao diện một website thì form chính là…

Bài 8: Định dạng Typography bootstrap 3

Bài 8: Định dạng Typography bootstrap 3

Trong bài viết này, các bạn sẽ tìm hiểu về các phong cách và định…

Bài 7: Panel & Labels trong bootstrap 3

Bài 7: Panel & Labels trong bootstrap 3

Trong bài hôm nay chúng ta sẽ cùng tìm hiểu hai thuộc tính khác mà…

Bài 6: Pagination trong bootstrap 3

Bài 6: Pagination trong bootstrap 3

Pagination là một thuật ngữ không quá xa lạ đối với dân lập trình web,…

Bài 5: Breadcrumbs  & Images trong bootstrap 3

Bài 5: Breadcrumbs & Images trong bootstrap 3

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết…

Bài 4: Tạo table trong bootstrap 3

Bài 4: Tạo table trong bootstrap 3

Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần…

Bài 3: Grid System trong bootstrap 3

Bài 3: Grid System trong bootstrap 3

Chắc hẳn các bạn còn đang lạ lẫm và đặt ra câu hỏi Grid system…

Top