Bootstrap Basic tut 1: Giới thiệu qua về Bootrap

By DragonKnightMT Last updated Th11 11, 2021

Dịch từ trang chủ bootrap https://getbootstrap.com/docs/5.0/getting-started/introduction/

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.Trên trang này

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, một CDN mã nguồn mở miễn phí. 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.Sao chép

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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 các plugin JavaScript và Popper của riêng chúng tôi . Nơi một trong các cách sau <script>s gần cuối trang của bạn, ngay trước khi bế mạc </body>thẻ, để kích hoạt chúng.

Bó

Bao gồm mọi plugin Bootstrap JavaScript và phụ thuộc với một trong hai gói của chúng tôi. Cả hai bootstrap.bundle.jsvà bootstrap.bundle.min.jsbao gồm Popper cho chú giải công cụ và cửa sổ bật lên của chúng tôi. Để biết thêm thông tin về những gì được bao gồm trong Bootstrap, vui lòng xem phần nội dung của chúng tôi .Sao chép

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Riêng biệt

Nếu bạn quyết định sử dụng giải pháp tập lệnh riêng biệt, thì Popper phải đến trước (nếu bạn đang sử dụng chú giải công cụ hoặc cửa sổ bật lên), sau đó mới đến các plugin JavaScript của chúng tôi.Sao chép

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Mô-đun

Nếu bạn sử dụng <script type="module">, vui lòng tham khảo phần sử dụng Bootstrap làm mô-đun của chúng tôi .

Các thành phần

Bạn muốn biết những thành phần nào yêu cầu rõ ràng JavaScript và Popper của chúng tôi? 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

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:Sao chép

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

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

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Đối với các bước tiếp theo, hãy 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.

Toàn 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 lưu ý khi sử dụng nó, tất cả đều hầu như chỉ hướng đến 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.Sao chép

<!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>.Sao chép

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

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 kích thướ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 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:Sao chép

.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 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.

Đọc và đăng ký Blog Bootstrap Chính thức .
Tham gia phòng Slack chính thức .
Trò chuyện với các Bootstrappers đồng nghiệp trong IRC. Trên irc.libera.chatmá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-5).
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.