Hướng dẫn cơ bản cách nhúng bootstrap 3 vào trong blogger

LongAnIT 6/30/2019
Bootstrap 3 Framework

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ (typography), các form, các nút (button), tables, modals, v.v... chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework, một công cụ để phục vụ công việc nội bộ của Twitter. Trước khi phát triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột. Bootstrap ra đời để khắc phục những yếu tố này, cũng như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn, tiện lợi và đồng bộ hơn.

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Firefox, IE, Opera.... Kể từ phiên bản 2.0 trở l nó cũng hỗ trợ Responsive Web Design. Thiết kế và bố trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động).

1. Tôi xin trích dẫn cấu trúc cơ bản của trang Blogger

<?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 blogger ( Cấu trúc cơ bản, CSS, HTML...).

2. Để sử dụng bootstrap vào trong blogger chúng ta sẽ thực hiện cách sau:

Đă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 ngay phía dưới thẻ <head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 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>
 Thêm thẻ Reponsive cho blogger
<meta name="viewport" content="width=device-width, initial-scale=1">
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

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây