Source

Giới thiệu

Bắt đầu với Bootstrap, khuôn khổ phổ biến nhất thế giới để xây dựng các trang web đáp ứng, ưu tiên thiết bị di động, với jsDelivr và trang bắt đầu mẫu.

Bắt đầu nhanh

Bạn muốn nhanh chóng thêm Bootstrap vào dự án của mình? Sử dụng jsDelivr, được cung cấp miễn phí bởi những người tại jsDelivr. Sử dụng trình quản lý gói hoặc cần tải xuống các tệp nguồn? Đi đến trang tải xuống.

CSS

Sao chép-dán biểu định kiểu <link>vào của bạn <head>trước tất cả các biểu định kiểu khác để tải CSS của chúng tôi.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Nhiều thành phần của chúng tôi yêu cầu sử dụng JavaScript để hoạt động. Cụ thể, chúng yêu cầu jQuery , Popper.js và các plugin JavaScript của riêng chúng tôi. Đặt các ký tự sau đây <script>gần cuối các trang của bạn, ngay trước </body>thẻ đóng, để kích hoạt chúng. jQuery phải xuất hiện đầu tiên, sau đó đến Popper.js và sau đó là các plugin JavaScript của chúng tôi.

Chúng tôi sử dụng bản dựng mỏng của jQuery , nhưng phiên bản đầy đủ cũng được hỗ trợ.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Bạn muốn biết thành phần nào yêu cầu rõ ràng jQuery, JS của chúng tôi và Popper.js? Nhấp vào liên kết hiển thị các thành phần bên dưới. Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang ví dụ.

Hiển thị các thành phần yêu cầu JavaScript
  • Cảnh báo loại bỏ
  • Các nút để chuyển đổi trạng thái và hộp kiểm / chức năng radio
  • Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
  • Thu gọn để chuyển đổi khả năng hiển thị của nội dung
  • Trình đơn thả xuống để hiển thị và định vị (cũng yêu cầu Popper.js )
  • Các phương thức hiển thị, định vị và hành vi cuộn
  • Thanh điều hướng để mở rộng plugin Thu gọn của chúng tôi để triển khai hành vi đáp ứng
  • Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị (cũng yêu cầu Popper.js )
  • Scrollspy để cập nhật hành vi cuộn và điều hướng

Mẫu dành cho người mới bắt đầu

Đảm bảo các trang của bạn được thiết lập với các tiêu chuẩn phát triển và thiết kế mới nhất. Điều đó có nghĩa là sử dụng loại tài liệu HTML5 và bao gồm thẻ meta chế độ xem để có các hành vi đáp ứng thích hợp. Đặt tất cả lại với nhau và các trang của bạn sẽ trông như thế này:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Đó là tất cả những gì bạn cần cho các yêu cầu tổng thể về trang. Truy cập tài liệu về Bố cục hoặc các ví dụ chính thức của chúng tôi để bắt đầu bố trí nội dung và thành phần trang web của bạn.

Các hình cầu quan trọng

Bootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng mà bạn sẽ cần phải lưu ý khi sử dụng nó, tất cả đều hầu như chỉ hướng tới việc bình thường hóa các kiểu trình duyệt chéo. Hãy đi sâu vào.

Loại tài liệu HTML5

Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Nếu không có nó, bạn sẽ thấy một số kiểu dáng không hoàn chỉnh vui nhộn, nhưng bao gồm cả nó sẽ không gây ra bất kỳ trục trặc đáng kể nào.

<!doctype html>
<html lang="en">
  ...
</html>

Thẻ meta đáp ứng

Bootstrap được phát triển trên thiết bị di động trước tiên , một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước tiên và sau đó mở rộng quy mô các thành phần khi cần thiết bằng cách sử dụng các truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và phóng to chạm cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bạn có thể xem một ví dụ về điều này đang hoạt động trong mẫu khởi động .

Kích thước hộp

Để định cỡ đơn giản hơn trong CSS, chúng tôi chuyển box-sizinggiá trị toàn cục từ content-boxthành border-box. Điều này đảm bảo paddingkhông ảnh hưởng đến chiều rộng được tính toán cuối cùng của một phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ Tìm kiếm Tùy chỉnh của Google.

Trong một số trường hợp hiếm hoi bạn cần ghi đè nó, hãy sử dụng một cái gì đó như sau:

.selector-for-some-widget {
  box-sizing: content-box;
}

Với đoạn mã trên, các phần tử lồng nhau — bao gồm cả nội dung được tạo qua ::beforevà ::after—sẽ kế thừa tất cả các phần tử được chỉ định box-sizingcho điều đó .selector-for-some-widget.

Tìm hiểu thêm về mô hình hộp và định cỡ tại Thủ thuật CSS .

Khởi động lại

Để hiển thị trên nhiều trình duyệt được cải thiện, chúng tôi sử dụng Khởi động lại để sửa các điểm không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các thiết lập lại vững chắc hơn một chút cho các phần tử HTML phổ biến.

Cộng đồng

Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng bằng những tài nguyên hữu ích này.

  • Theo dõi @getbootstrap trên Twitter .
  • Đọc và đăng ký Blog Bootstrap Chính thức .
  • Trò chuyện với các Bootstrappers đồng nghiệp trong IRC. Trên irc.freenode.netmáy chủ, trong ##bootstrapkênh.
  • Có thể tìm thấy trợ giúp triển khai tại Stack Overflow (được gắn thẻ bootstrap-4).
  • Các nhà phát triển nên sử dụng từ khóa bootstraptrên các gói sửa đổi hoặc thêm vào chức năng của Bootstrap khi phân phối thông qua npm hoặc các cơ chế phân phối tương tự để có khả năng phát hiện tối đa.

Bạn cũng có thể theo dõi @getbootstrap trên Twitter để biết những câu chuyện phiếm mới nhất và các video âm nhạc tuyệt vời.