Bài viết trước mình đã giới thiệu đến các bạn biết Bootstrap là gì? Và như mình đã nói là đến bài hôm nay chúng ta sẽ bắt đầu với Bootstrap.
Các tập tin HTML
Từ khi Bootstrap sử dụng các phần tử HTML và các thuộc tính CSS đòi hỏi việc sử dụng các loại tài liệu HTML5 ở đầu trang, cùng với bộ ký tự chính xác:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
Hãy nhớ rằng Bootstrap 3 là đầu tiên cho mobile. Phong cách bobile đầu tiên được tìm thấy trong suốt toàn bộ thư viện Bootstrap thay vì trong các tập tin riêng biệt.
Để đảm bảo cung phù hợp và cảm ứng phóng to thu nhỏ, cũng có thể thêm các thẻ meta bên trong <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Với width=device-width để theo dõi màn hình rộng của thiết bị (mà sẽ thay đổi tùy theo thiết bị).
initial-scale=1 thiết lập mức độ zoom ban đầu khi trang web được nạp đầu tiên trên trình duyệt.
Thêm Bootstrap cho trang web của bạn
Có hai cách để bắt đầu sử dụng Bootstrap trên trang web của riêng bạn.
Bạn có thể:
- Tải về Bootstrap từ getbootstrap.com
- Bootstrap từ một CDN, như MaxCDN
Tải về Bootstrap
Bootstrap CDN
Nếu bạn không muốn tải về và lưu trữ Bootstrap chính mình, bạn có thể đưa nó từ một CDN (Mạng Phân phối Nội dung).
MaxCDN hỗ trợ CDN cho Bootstrap CSS và JavaScript. Cũng bao gồm jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 | Một lợi thế của việc sử dụng Bootstrap CDN: Nhiều người sử dụng đã đã tải về Bootstrap từ MaxCDN khi đến thăm một trang web khác. Kết quả là, nó sẽ được nạp từ bộ nhớ cache khi họ truy cập vào trang web của bạn, dẫn đến thời gian tải nhanh hơn.Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng một khi người dùng yêu cầu một tập tin từ nó, nó sẽ được phục vụ từ máy chủ gần nhất với họ, đó cũng dẫn đến thời gian tải nhanh hơn. |
|---|
Một số thủ thuật web sẽ được chia sẻ với bạn đọc hàng ngày qua Blog này!
Đặt các yếu tố HTM bên trong container
Bootstrap cũng đòi hỏi một phần tử có chứa nội dung trang web để bọc.
Có hai container để lựa chọn:
1 Sử dụng lớp .container cho một container cố định chiều rộng đáp ứng:
2. Sử dụng lớp .container-fluid trong một thùng chứa đầy đủ chiều rộng, kéo dài toàn bộ chiều rộng của khung nhìn:
Cú pháp:
<div class="container-fluid">
...
</div>
</div>
Ví Dụ:
<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-fluid">
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div><!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<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>
Trình duyệt hỗ trợ Bootstrap
Bootstrap hoạt động tốt nhất trong máy tính để bàn mới nhất và trình duyệt di động.
Trình duyệt cũ có thể hiển thị kết xuất khác nhau (mặc dù đầy đủ chức năng) của một số yếu tố / thành phần.
Bootstrap hỗ trợ các phiên bản mới nhất của trình duyệt và nền tảng sau đây:
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | Not available | NO | Not available |
| iOS | YES | Not available | Not available | NO | YES |
| Mac OS X | YES | YES | Not available | YES | YES |
| Windows | YES | YES | YES* | YES | NO |
* Bootstrap hỗ trợ Internet Explorer 8 và cao hơn.
Bài viết này cũng sẽ dừng ở đây, hy vọng các bạn đón tiếp bài mới và cho ý kiến đóng góp.
Thiet ke web chúc các bạn học tốt!
1 comments:
Undeniably believe that which you said. Your favorite justification seemed to be at the net the easiest factor to bear in mind of. I say to you, I certainly get annoyed whilst other people think about worries that they plainly don't understand about. You controlled to hit the nail upon the top as neatly as defined out the entire thing with no need side-effects , other people could take a signal. Will probably be again to get more. Thank you
Post a Comment