Trong bài trước chúng ta đã biết sơ qua về Bootrap CSS tiện lợi như thế nào rồi phải không nào, hôm nay tôi sẽ hướng dẫn các bạn cách nhúng tập tin Bootrap CSS vào Website như thế nào.Nếu các bạn chưa hiểu Bootrap CSS dùng để làm gì thì xem lại bài làm quen với twinter bootrap css 3.
1. Tải tập tin Bootrap CSS
Trước tiên các bạn vào trang chính của Bootrap CSS địa chỉ tải tập tin tại đây. Trong đấy sẽ có ba phiên bản cho các bạn lựa chọn như hình:
nhưng trước tiên chúng ta nghiện cứu Bootrap CSS căn bản trước đã vì vậy ta tiến hành chọn Download Bootrap để sử dụng.
2. Nạp tập tin Bootrap CSS vào Website
Bootrap CSS tại MaxCDN hỗ trợ cung cấp cho chúng ta css và javascript Bootrap, chúng ta chỉ việc sử dụng trực tiếp những liên kết này rất tiện lợi, những dự án demo tôi ngại download cũng hay sử dụng những liên kết dạng này để làm cho nhanh, còn vào dự án các bạn nên tải về để website load nhanh hơn nhé.cách nhúng như sau:
Chúng ta thiết kế một dạng Template cản bản như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Nhìn vào Template trên chúng ta cần lưu ý 3 điểm sau:
<meta name="viewport" content="width=device-width, initial-scale=1">Thiết lập màn hình theo tỷ lệ 1×1 giúp loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay.
<link href="css/bootstrap.min.css" rel="stylesheet">
Thư viện để thiết kế giao diện
<script src="js/bootstrap.min.js"></script>Thư viện Jquery Bootrap JS để diều khiển giao diện phù hợp với các trình duyệt từ các thiết bị
0 comments:
Post a Comment