♠ Posted by Hà Phạm in Bootstrap,Bootstrap container,button,học Bootstrap,học thiết kế web,icon,Thêm nút Button và Icon at 9:00 AM
Ở bài viết trước, học thiết kế web đã chia sẻ đến các bạn đưa một thông tin quan trọng hơn vào Jumbotron. Hôm nay, các bạn sẽ được tìm hiểu về cách làm nền cho những nút Button thật đơn giản và có thể có cả icon cho nó mà không mất nhiều thời gian để chỉnh sửa như trước đây ta vẫn làm.Thêm một Button
Để sử dụng một nút, chỉ cần viết class = "btn btn-default".Chúng ta có thể sử dụng nó trong thẻ <button>:
<button type="button" class="btn btn-default">Button Text</button>
hoặc trong một liên kết:
<a href="..." class="btn btn-default">Button Text</a>
Các Class Button khác là: .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, and .btn-link (đại diện cho tất cả các màu sắc khác nhau cho các nút).Kích thước nút có thể được xác định với các class sau: .btn-lg (large button), .btn-sm (small button), and .btn-xs (extra small button).
Ví dụ sau đây sẽ đặt một Button "Search" lớn và nền màu xanh trong hộp Jumbotron. Để đạt được hiệu ứng này, chúng tôi sẽ sử dụng các class .btn-lg và .btn-info:Ví dụ:
<button type="button" class="btn btn-default">Button Text</button>
<a href="..." class="btn btn-default">Button Text</a>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">Search</a>
</div>
</div>
Kết quả
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">Search</a>
</div>
</div>
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">Search</a>
</div>
</div>
Thêm một Icon
Bootstrap cũng có 200 glyphicons chúng ta có thể sử dụng miễn phí.
Để hiển thị một biểu tượng icon, bạn chỉ cần viết:
<span class="glyphicon glyphicon-print"></span>
Dòng mã trên sẽ hiển thị một biểu tượng Print như thế này:
Ví dụ sau đây thêm một biểu tượng tìm kiếm vào nút "Search":
Ví dụ
<span class="glyphicon glyphicon-print"></span>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
</div>
Kết quả
Code hoàn chỉnh
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>
</div>
</div>
<div class="container">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="https://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>
</body>
</html>
Thiết kế web tại Hà Nội chúc các bạn thành công!
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
</div>
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
</div>
|
| Kết quả |
Code hoàn chỉnh
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>
</div>
</div>
<div class="container">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="https://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>
</body>
</html>
Thiết kế web tại Hà Nội chúc các bạn thành công!
0 comments:
Post a Comment