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

Download Bootstrap 4 và nhúng Bootstrap 4 vào website

Chào các bạn, hôm nay chúng ta tiếp tục tìm hiểu về cách nhúng bootstrap 4 vào website. Ở bài này mình sẽ chỉ đề cập đến 2 cách nhúng cơ bản nhất đó là dùng CDN(Content delivery networks) và download trực tiếp source code trên trang chủ về.

1: Chuẩn bị

Trước tiên bạn cần chuẩn bị một Editor or IDE để code (mình khuyên các bạn nên sử dụng sublimetext 3).

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.

Tiếp theo các bạn nhớ đảm bảo hệ thống mạng nhà bạn đang không bị bác cá Mập vui tính nào cắn.

Sau đó là tạo file cần nhúng bootstrap 4, chẳng hạn như index.html, file này bắt buộc phải có:

  • Cấu trúc HTML5 Doctype
  • Thẻ meta viewport

Cấu trúc tối thiểu cần thiết của file nhúng bootstrap 4
<!doctype html>
<html lang="en">
<head>
	<!-- thẻ meta viewport đảm bảo scale trình duyệt khi responsive -->
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
</html>

Sau khi có đầy đủ 3 thứ trên rồi thì các bạn lên trang chủ của bootstrap 4 tại đây và download về cho mình bộ source ở link đầu tiên (Compiled Css and Js). Bước này chỉ cần thiết cho cách nhúng bootstrap 4 từ source download.

2: Nhúng bootstrap 4 qua CDN

Nếu bạn không muốn dowload và lưu trữ source bootstrap 4 ở local thì bạn có thể sử dụng cách này. Dưới đây là những link CND cần thiết khi bạn muốn sử dụng bootstrap 4. Mình đã chú thích từng file trong phần comment code.

CND cho Bootstrap 4
<!doctype html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Nhúng bootstrap 4</title>
	<!-- Bản css đã nén của bootstrap 4, nên đặt trong cặp thẻ head -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

</head>
<body>
	<div class="container">
		<h2>Tích hợp bootstrap 4</h2>
	</div>

	<!-- Thư viện jquery đã nén phục vụ cho bootstrap.min.js  -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!-- Thư viện popper đã nén phục vụ cho bootstrap.min.js -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
	<!-- Bản js đã nén của bootstrap 4, đặt dưới cùng trước thẻ đóng body-->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>

3: Nhúng bootstrap 4 từ source download

Sau khi đã chuẩn bị được bộ source như mình nói ở trên(bạn có thể download thêm thư viện jquery và popper) thì các bạn sẽ nhìn thấy cấu trúc như sau, các bạn chỉ cần để í đến 2 file mình khoan đỏ. Các file này có í nghĩa tương tự mình đã giải thích trong phần nhúng qua CND.

Cấu trúc thư mục source bootstrap 4

 Sau đó các bạn kéo đường dẫn tương ứng vào file mà bạn cần nhúng bootstrap 4. Chẳng hạn như mình ở đây

Nhúng bootstrap 4 qua source download

 

4: Kết luận

Sau khi tích hợp giống mình bằng 1 trong 2 bước trên, các bạn mở file index.html bằng trình duyệt như Chrome chẳng hạn và thấy kết quả như dưới đây thì các bạn đã thành công.

Nhúng bootstrap 4 thành công

Hi vọng qua bài này các bạn sẽ biết cách tích hợp bootstrap 4 vào website, chúc các bạn thành công và theo dõi các bài tiếp theo để làm chủ bootstrap 4.

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 13: Glyphicons trong bootstrap 3

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

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…

Top