Bootstrap - Thiết lập môi trường

Nó rất dễ dàng để thiết lập và bắt đầu sử dụng Bootstrap. Chương này sẽ giải thích cách tải xuống và thiết lập Bootstrap. Chúng tôi cũng sẽ thảo luận về cấu trúc tệp Bootstrap và chứng minh cách sử dụng của nó bằng một ví dụ.

Tải xuống Bootstrap

Bạn có thể tải xuống phiên bản Bootstrap mới nhất từ https://getbootstrap.com/. Khi bạn nhấp vào liên kết này, bạn sẽ thấy một màn hình như dưới đây:

Ở đây bạn có thể thấy hai nút -

Download Bootstrap- Nhấp vào đây, bạn có thể tải xuống các phiên bản được biên dịch trước và rút gọn của Bootstrap CSS, JavaScript và phông chữ. Không có tài liệu hoặc tệp mã nguồn gốc nào được bao gồm.
Download Source - Nhấp vào đây, bạn có thể lấy mã nguồn Bootstrap LESS và JavaScript mới nhất trực tiếp từ GitHub.

Nếu bạn làm việc với mã nguồn không biên dịch của Bootstrap, bạn cần biên dịch các tệp LESS để tạo ra các tệp CSS có thể sử dụng được. Để biên dịch file LESS vào CSS, Bootstrap chính thức hỗ trợ chỉ Recess , đó là Hinter CSS Twitter dựa trên less.js .

Để hiểu rõ hơn và dễ sử dụng, chúng tôi sẽ sử dụng phiên bản Bootstrap được biên dịch sẵn trong suốt hướng dẫn. Khi các tệp được tuân thủ và giảm thiểu, bạn không phải bận tâm mỗi khi bao gồm các tệp riêng biệt cho chức năng riêng lẻ. Tại thời điểm viết bài này, phiên bản mới nhất (Bootstrap 3) đã được tải xuống.

Cấu trúc tệp

Bootstrap được biên dịch trước

Khi phiên bản đã biên dịch Bootstrap được tải xuống, hãy giải nén tệp ZIP và bạn sẽ thấy cấu trúc tệp / thư mục sau:

Như bạn có thể thấy, có CSS và JS đã biên dịch (bootstrap. *), Cũng như CSS và JS được biên dịch và rút gọn (bootstrap.min. *). Phông chữ từ Glyphicons được bao gồm, vì nó là chủ đề Bootstrap tùy chọn.

Mã nguồn Bootstrap

Nếu bạn đã tải xuống mã nguồn Bootstrap thì cấu trúc tệp sẽ như sau:

Các tệp dưới ít / , js / và phông chữ / là mã nguồn cho Bootstrap CSS, JS và phông chữ biểu tượng (tương ứng).
Các dist / thư mục bao gồm tất cả mọi thứ được liệt kê trong phần tải về biên dịch sẵn ở trên.
docs-asset / , amples / và tất cả các tệp * .html là tài liệu Bootstrap.

Mẫu HTML

Một mẫu HTML cơ bản sử dụng Bootstrap sẽ trông như thế này:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Ở đây bạn có thể thấy jquery.js, bootstrap.min.js và bootstrap.min.csscác tệp được bao gồm để tạo tệp HTM bình thường cho Mẫu khởi động. Chỉ cần đảm bảo bao gồm thư viện jQuery trước khi bạn bao gồm thư viện Bootstrap.

Chi tiết hơn về từng phần tử trong đoạn mã trên sẽ được thảo luận trong chương Tổng quan về CSS Bootstrap .

Thí dụ

Bây giờ chúng ta hãy thử một ví dụ bằng cách sử dụng mẫu trên. Hãy thử ví dụ sau bằng cách sử dụng tùy chọn Live Demo có sẵn ở góc trên cùng bên phải của hộp mã mẫu bên dưới trên trang web của chúng tôi -

<h1>Hello, world!</h1>

Trong tất cả các chương tiếp theo, chúng tôi đã sử dụng văn bản giả từ trang web https://www.lipsum.com/.