Hướng Dẫn Nhúng Boostrap Vào Blogger

Trong bài viết trước tôi đã hướng dẫn các bạn tạo 1 trang web trắng tinh trên bloggspot. Tiếp nối bài này tôi sẽ hướng dẫn các bạn tích hợp bootstrap vào trong blogspot

Bài hướng dẫn tạo trang web trắng blogspot các bạn có thể tham khào tại link này

1. Tôi xin trích dẫn lại code bày trước

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
Thêm nội dung trang web của bạn vào đây
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
Đây là cấu trúc cơ bản của 1 template blogspot . Về giải thích các nội dung trong code bạn có thể comment bên dưới tôi sẽ giải thích.

2. Để thêm thêm link bootstrap vào ta sẽ thực hiện như sau:

2.1 Thêm Link css: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML bạn thêm đoạn code bên dưới vào phía dưới thể <head>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
2.2 Thêm Link Js : Làm tương tự bạn thêm 2 link bên dưới vào trước trên thẻ </body>
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>
<script async='async' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script>
 3.3 Thêm thẻ Reponsive cho blogger

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

Thật ra code này rất nhiều bạn đã biết rồi tôi không cần phải nhắc lại nữa. Bạn thêm nó vào bên dưới thẻ <head>

Kết luận
Trên đây, tôi đã hướng dẫn các bạn cách nhúng bộ thư viện Bootstrap vào website. Sau khi thực hiện việc nhúng xong Boostrap vào website, bạn có thể làm việc với các thành phần của Bootstrap.

Không có nhận xét nào:

Đăng nhận xét