Các chức năng JavaScript của một số thành phần như danh sách thả xuống, tab, v.v. phụ thuộc vào jQuery và popper. js

Vì vậy, bao gồm jQuery và popper. js theo thứ tự sau ngay trước khi tải tệp JavaScript bootstrap để hoạt động bình thường

2. Tải xuống các tệp cục bộ

Thay vì sử dụng CDN, bạn có thể tải xuống các tệp cục bộ vào thư mục dự án của mình từ https. //getbootstrap. com/docs/4. 3/bắt đầu/tải xuống/

Khi bạn tải xuống tệp, bạn có thể bao gồm bootstrap. tối thiểu. tệp css và bootstrap. tối thiểu. js trong. Ngay cả khi bạn đang sử dụng tệp bootstrap đã tải xuống, bạn phải bao gồm jquery. tối thiểu. js và popper. tối thiểu. js trước khi tải bootstrap. tối thiểu. js

3. Sử dụng trình quản lý gói

Bootstrap có thể dễ dàng được đưa vào bất kỳ dự án nào bằng cách sử dụng các trình quản lý gói như 'npm', 'yarn', v.v. Vì npm là trình quản lý gói phổ biến nhất được sử dụng bởi các nhà phát triển front-end, chúng tôi sẽ tiếp tục với lệnh npm để cài đặt bootstrap. Nhập lệnh sau vào thư mục dự án của bạn (giả sử bạn đã khởi tạo npm trong dự án)

npm install bootstrap

Lệnh này sẽ tải xuống một bản sao cục bộ của các tệp bootstrap bên trong thư mục ‘node_modules’ trong dự án của bạn. Sau đó, bạn có thể bao gồm bootstrap. tối thiểu. tệp css và bootstrap. tối thiểu. js trong. Như đã đề cập trong phương pháp không. 2, bạn phải bao gồm jquery. tối thiểu. js và popper. tối thiểu. js trước khi tải bootstrap. tối thiểu. js

Cách sử dụng

Một tệp HTML mẫu sau khi bao gồm CSS bootstrap và js sẽ trông như thế này (Chúng tôi đã sử dụng phương thức CDN trong ví dụ bên dưới. Bạn có thể chỉnh sửa thuộc tính HREF cho biểu định kiểu và src cho javascript bằng đường dẫn thích hợp nếu bạn chọn bất kỳ phương thức nào khác)

  
    
    
    
    
    
    Bootstrap example

   
    
    
    
    
  

Khi bạn đã đưa Bootstrap vào dự án của mình bằng bất kỳ phương pháp nào ở trên, bạn có thể sử dụng tất cả các thành phần có sẵn trong bootstrap một cách dễ dàng

Ví dụ: để tạo nút Bootstrap bằng Màu chính, bạn chỉ cần sử dụng mã đánh dấu

Primary

Chỉ với hai lớp này, bạn sẽ nhận được một nút với tất cả các kiểu có liên quan, do đó giúp bạn tiết kiệm thời gian tạo kiểu cho nút HTML mặc định

Giống như các nút, Bootstrap có rất nhiều thành phần hữu ích như thanh điều hướng, cảnh báo, huy hiệu, danh sách thả xuống, v.v. Đây là cách bạn có thể tạo thanh điều hướng với Bootstrap.  

Cách xây dựng thanh điều hướng với Bootstrap

Có thể dễ dàng tạo thanh điều hướng được sắp xếp hợp lý bằng bootstrap bằng cách thêm mã đánh dấu HTML sau

  Navbar
  
    

  

    

      

        Home (current)
      
      

        Link
      
      

        
          Dropdown
        
        

          Action
          Another action
          
          Something else here
        




      
      

        Disabled
      
    
    
      
      Search
    
  

Mã này tạo ra một thanh điều hướng theo kiểu sau mà không cần tự viết một CSS hoặc JS nào

Phần kết luận

Tóm lại, sử dụng Bootstrap với HTML mang lại vô số khả năng và tùy chọn khi làm việc trên một dự án phát triển hoặc thiết kế web phức tạp. Bootstrap cho phép bạn truy cập vào một loạt các thành phần giao diện người dùng thiết yếu và nó cũng có thể được tích hợp vào các dự án khác nhau

Hãy xem hướng dẫn miễn phí của chúng tôi về Bootstrap 4 để tìm hiểu đầy đủ các khả năng trong Bootstrap 4. Bạn cũng có thể xem trang web của chúng tôi nếu bạn muốn nhận mẫu quản trị Bootstrap

Ngoài ra, hãy xem bộ sưu tập các mẫu quản trị bootstrap miễn phí và các trang đích miễn phí do nhóm BootstrapDash tạo ra

Ghi chú. Các mẫu mã bên dưới dành cho Bootstrap 4. 3. 1. Vui lòng kiểm tra tài liệu Bootstrap để tải phiên bản Bootstrap mới nhất

Đầu tiên, thêm thẻ liên kết CSS bắt buộc vào phần tử head của bạn

Thứ hai, thêm các thẻ tập lệnh bắt buộc ngay trước thẻ đóng

npm install bootstrap

0

Chi tiết

Khung Bootstrap đầy đủ bao gồm một biểu định kiểu CSS và một đến ba tệp JavaScript, tùy thuộc vào phiên bản Bootstrap mà bạn đang sử dụng

Để thêm Bootstrap vào một dự án hiện có, bạn có thể thêm thẻ liên kết bắt buộc vào phần tử head của mình và các thẻ tập lệnh ngay trước thẻ đóng

npm install bootstrap

0. Sau khi thêm Bootstrap, bạn sẽ thấy một số kiểu trên trang web của mình thay đổi

Mẫu khởi động Bootstrap 4

Để thêm Bootstrap vào một dự án mới, bạn có thể sử dụng mẫu khởi động có trong tài liệu. Mẫu khởi động có phần tử liên kết và thẻ tập lệnh được đặt sẵn cho bạn. Đây là giao diện của mẫu khởi động dành cho Bootstrap 4. 3. 1

  
    
    
    

    
    

    
  
  
    
Hello, world!

    
    
    
    
    
  

Mẫu khởi động Bootstrap 5

Đây là mẫu khởi động cho Bootstrap 5. Lưu ý rằng các tùy chọn cho các thẻ tập lệnh khác so với Bootstrap 4

________số 8

Thêm CSS tùy chỉnh

Nếu bạn muốn thêm CSS tùy chỉnh vào dự án của mình, bạn có thể thêm phần tử

npm install bootstrap

3 liên kết đến tệp CSS của mình sau phần tử

npm install bootstrap

3 cho tệp Bootstrap CSS, như thế này

Bạn có thể sử dụng Bootstrap với CSS không?

Bạn nên đặt liên kết Bootstrap CSS ở đâu?