Hướng dẫn bootstrap 5 components - bootstrap 5 thành phần

Question

Bắt đầu nhanh

Bắt đầu bằng cách bao gồm CSS sẵn sàng sản xuất Bootstrap và JavaScript thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo codepen bootstrap này.

Nội dung chính Show

Bắt đầu nhanh
Liên kết CDN
Bước tiếp theo
Thành phần JS
Quả cầu quan trọng
HTML5 DOCTYPE
Thẻ meta đáp ứng
Kích thước hộp
Khởi động lại

Tạo một tệp index.html mới trong root dự án của bạn. Bao gồm thẻ cũng như hành vi phản hồi thích hợp trong thiết bị di động. Include the tag as well for proper responsive behavior in mobile devices.


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
  head>
  <body>
    <h2>Hello, world!h2>
  body>
html>

Bao gồm Bootstrap từ CSS và JS. Đặt thẻ trong cho CSS của chúng tôi và thẻ


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

0 cho gói JavaScript của chúng tôi (bao gồm Popper để định vị thả xuống, poppers và chú giải công cụ) trước khi đóng
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demotitle> <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> head> <body> <h2>Hello, world!h2> <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script> body> html>
1. Tìm hiểu thêm về các liên kết CDN của chúng tôi. Place the tag in the for our CSS, and the


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

0 tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

1. Learn more about our CDN links.


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không có kế hoạch sử dụng thả xuống, popover hoặc chú giải công cụ, hãy lưu một số kilobyte bằng cách không bao gồm popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs//dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous">script>

Chào thế giới! Mở trang trong trình duyệt của bạn để xem trang Bootstrapping của bạn. Bây giờ bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng bạn, thêm hàng tá thành phần và sử dụng các ví dụ chính thức của chúng tôi. Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own layout, adding dozens of components, and utilizing our official examples.
Có thể bạn quan tâm

Liên kết CDN

Để tham khảo, đây là các liên kết CDN chính của chúng tôi.

Sự mô tả URL

CSS


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

2

JS


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

3

Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung.

Bước tiếp theo

Đọc thêm một chút về một số cài đặt môi trường toàn cầu quan trọng mà Bootstrap sử dụng.
Đọc về những gì mà bao gồm trong bootstrap trong phần Nội dung của chúng tôi và danh sách các thành phần yêu cầu JavaScript dưới đây.
Cần thêm một chút sức mạnh? Xem xét việc xây dựng với Bootstrap bằng cách bao gồm các tệp nguồn thông qua Trình quản lý gói.

Tìm cách sử dụng bootstrap làm mô -đun với


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

4? Vui lòng tham khảo chúng tôi bằng cách sử dụng bootstrap làm phần mô -đun.

Thành phần JS

Tò mò những thành phần nào rõ ràng yêu cầu JavaScript và Popper của chúng tôi? Nhấp vào liên kết Hiển thị thành phần bên dưới. Nếu bạn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc cho một mẫu trang ví dụ.

Hiển thị các thành phần yêu cầu JavaScript

Cảnh báo cho việc bác bỏ
Các nút để chuyển đổi trạng thái và chức năng kiểm tra/radio
Băng chuyền cho tất cả các hành vi, điều khiển và chỉ số trượt
Sụp đổ vì khả năng hiển thị nội dung
Thả xuống để hiển thị và định vị (cũng yêu cầu Popper)
Các phương thức để hiển thị, định vị và hành vi cuộn
Navbar để mở rộng các plugin sụp đổ và offcanvas của chúng tôi để thực hiện các hành vi đáp ứng
NAVS với plugin tab để chuyển đổi các tấm nội dung
Offcanvase để hiển thị, định vị và hành vi cuộn
ScrollSpy cho hành vi cuộn và cập nhật điều hướng
Bánh mì nướng để hiển thị và loại bỏ
Tooltips và PopoVers để hiển thị và định vị (cũng yêu cầu Popper)

Quả cầu quan trọng

Bootstrap sử dụng một số ít các phong cách và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Hãy để lặn trong.

HTML5 DOCTYPE

Bootstrap yêu cầu sử dụng HTML5 DocType. Không có nó, bạn sẽ thấy một số kiểu dáng vui nhộn và không hoàn chỉnh.


<html lang="en">
  ...
html>

Thẻ meta đáp ứng

Bootstrap được phát triển di động trước tiên, một chiến lược trong đó chúng tôi tối ưu hóa mã cho các thiết bị di động trước và sau đó mở rộng 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 kết xuất và chạm vào phù hợp cho tất cả các thiết bị, hãy thêm thẻ Meta Viewport đáp ứng vào của bạn.

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

Bạn có thể thấy một ví dụ về điều này trong hành động trong khởi đầu nhanh chóng.

Kích thước hộp

Để có kích thước đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

6 từ


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

7 sang


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

8. Điều này đảm bảo


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

9 khô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à Google Custom Search Engine.

Trong dịp hiếm hoi, bạn cần phải ghi đè nó, sử dụng một cái gì đó như sau:

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

Với đoạn trích trên, các phần tử lồng nhau, bao gồm nội dung được tạo ra thông qua

<script src="https://cdn.jsdelivr.net/npm/@popperjs//dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous">script>

0 và ________ 21, tất cả sẽ được thừa hưởng


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  head>
  <body>
    <h2>Hello, world!h2>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">script>
  body>
html>

6 được chỉ định cho

<script src="https://cdn.jsdelivr.net/npm/@popperjs//dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous">script>

3 đó.

Tìm hiểu thêm về mô hình hộp và kích thước tại các thủ thuật CSS.

Khởi động lại

Để kết xuất trình duyệt chéo được cải thiện, chúng tôi sử dụng khởi động lại để sửa chữa sự không nhất quán trên các trình duyệt và thiết bị trong khi cung cấp các thiết lập lại có ý kiến hơn một chút cho các yếu tố HTML thông thường.

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

Đọc và đăng ký blog Bootstrap chính thức.
Hỏi và khám phá các cuộc thảo luận github của chúng tôi.

Trò chuyện với đồng nghiệp bootstrappers trong IRC. Trên máy chủ

<script src="https://cdn.jsdelivr.net/npm/@popperjs//dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous">script>

4, trong kênh

<script src="https://cdn.jsdelivr.net/npm/@popperjs//dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous">script>

5.

Trợ giúp thực hiện có thể được tìm thấy tại Stack Overflow (được gắn thẻ

<script src="https://cdn.jsdelivr.net/npm/@popperjs//dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous">script>

6).

Các nhà phát triển nên sử dụng từ khóa

<script src="https://cdn.jsdelivr.net/npm/@popperjs//dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous">script>

7 trê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ự để khám phá tối đa.

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

programming bootstrap Bootstrap 5 Bootstrap 5 w3school Bootstrap4 Bootstrap table Get Bootstrap Bootstrap w3school Bootstrap 5 navbar Bootstrap 5 CDN

Hướng dẫn bootstrap 5 components - bootstrap 5 thành phần

Bắt đầu nhanh

Có thể bạn quan tâm

Liên kết CDN

Bước tiếp theo

Thành phần JS

Quả cầu quan trọng

HTML5 DOCTYPE

Thẻ meta đáp ứng

Kích thước hộp

Khởi động lại

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Token Data

Quảng Cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội