Hướng dẫn nhúng Bootstrap vào website

Nên đọc trước

  1. Có nên sử dụng Bootstrap khi thiết kế giao diện website?

Hướng dẫn nhúng Bootstrap vào website

Bắt đầu thiết kế giao diện, hãy mở trình soạn thảo, tạo file index.html và copy đoạn HTML sau vào:

<!DOCTYPE html>

<html lang="vi">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">


<!-- Bootstrap -->

<link href="http://static.gateaz.com/bootstrap/3.3.6/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="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

<!-- 1. CSS đây -->

</head>

<body>

<!-- 2. HTML đây -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="http://static.gateaz.com/jquery/1.12.4/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="http://static.gateaz.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<!-- 3. JS đây -->

</body>

</html>

Như vậy là bạn đã có một giao diện với cấu trúc cơ bản và sử dụng Bootstrap rồi.

Có một số điểm lưu ý như sau:

  1. Giữ nguyên cài đặt lang="vi" nếu website của bạn sử dụng tiếng Việt, trường hợp là tiếng Anh thì sửa lại thành lang="en", trường hợp là ngôn ngữ khác thì bạn sửa tương ứng với ngôn ngữ đó là được.
  2. Nếu bạn có gắn thêm code, để tối ưu nhất bạn nên gắn CSS vào vị trí được đánh dấu số 1, HTML ở vị trí số 2 và JS ở vị trí số 3.