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

Hãy nhớ rằng hướng dẫn này chỉ đi qua một trong nhiều loại cài đặt Bootstrap. Chúng tôi sẽ sử dụng cài đặt Bootstrap tiêu chuẩn. Điều này là tốt nhất cho người mới bắt đầu Bootstrap. Các cài đặt khác yêu cầu kiến ​​thức về bộ tiền xử lý CSS

Các hướng dẫn này là để cài đặt Bootstrap phiên bản 4. 2. 1

Đang tải xuống Bootstrap

Bạn thích video hơn? .  

Bước đầu tiên là tải xuống Bootstrap. Truy cập trang Tải xuống Bootstrap và trong phần CSS và JS đã biên dịch, hãy nhấp vào Tải xuống .

Khi tệp đã được tải xuống, hãy chuyển đến vị trí tệp. Bạn sẽ cần phải giải nén các tập tin trước khi bạn có thể sử dụng chúng. Nếu bạn đang dùng Mac, nó sẽ tự động giải nén các tệp cho bạn. Trên Windows, bạn sẽ phải giải nén tệp theo cách thủ công. Xem trang hỗ trợ này của Microsoft để biết thông tin về cách giải nén tệp.

Tải tệp lên máy chủ của bạn

Sau khi các tệp được giải nén, chúng đã sẵn sàng để tải lên máy chủ của bạn. Đi vào thư mục Bootstrap (tệp sẽ được đặt tên như bootstrap-4. 2. 1-dist). Bạn sẽ cần tải nội dung lên thư mục của miền bạn muốn.

Hầu hết thời gian, bạn có thể tìm thư mục của miền bằng cách truy cập thư mục Web trong ACC. lý do duy nhất điều này không hoạt động là nếu bạn đã ánh xạ lại tên miền sang thư mục khác. Đối với những tên miền chưa được ánh xạ lại, bạn có thể tìm thư mục của chúng bằng cách làm theo các bước sau.

1. Đăng nhập vào Trung tâm kiểm soát tài khoản (ACC)
2. Chuyển đến thanh bên trái và nhấp vào Tệp
3. Trong trình đơn thả xuống, hãy nhấp vào Web
   
4. Tìm thư mục mà tên miền của bạn được ánh xạ tới. Thông thường, đây là tên miền.

Nếu bạn nhấp vào tên thư mục, nó sẽ hiển thị cho bạn nội dung của thư mục

Bây giờ, bạn cần sao chép các thư mục trong bootstrap-4. 2. 1-dist vào thư mục tên miền của bạn. Các thư mục trong tệp Bootstrap sẽ là

• css
• js

Bạn có thể dễ dàng chuyển các tệp và thư mục bằng SFTP. Xem của chúng tôi để biết thêm thông tin về cách sử dụng SFTP.

Thêm một trang chỉ mục

Vì bạn sẽ sử dụng Bootstrap để thiết lập trang web của mình nên bạn cần có một tệp HTML sử dụng Bootstrap đúng cách. Bootstrap cung cấp một phác thảo cơ bản gọi tất cả các thành phần cần thiết để chạy Bootstrap. Đây là một phác thảo Bootstrap cơ bản có thể được chỉnh sửa và thêm vào tên miền của bạn để tạo một trang Bootstrap

 lang="en">
  
     charset="utf-8">
     http-equiv="X-UA-Compatible" content="IE=edge">
     name="viewport" content="width=device-width, initial-scale=1">
    
    

    
     href="css/bootstrap.min.css" rel="stylesheet">

    
    
    
  
  
    
Hello, world!

    
    
    
    
  

Sao chép phác thảo cơ bản này và thêm vào tệp HTML. Đặt tên cho nó là index. html . Tải tệp này lên thư mục của tên miền bạn muốn. Nếu trang web của bạn chưa có trang chủ, trang này sẽ xuất hiện dưới dạng trang chủ của tên miền của bạn. Bạn có thể sử dụng điều này để kiểm tra xem trang Bootstrap mới của bạn đã hoạt động chưa.

Kiểm tra quyền của bạn

Để xuất bản, bạn cần đảm bảo rằng các tệp của mình được đặt thành các quyền cho phép tệp có thể xem được. Nếu quyền không được đặt chính xác, trang web của bạn sẽ không có nội dung trang web. Để xem cách quản lý quyền, hãy xem bài viết của chúng tôi. Quyền đối với tệp.

Khi bạn đã xác nhận rằng trang web của mình đang hoạt động bình thường với Bootstrap, bạn có thể chỉnh sửa tệp chỉ mục bằng nhiều thành phần Bootstrap. Xem các thành phần này trên trang Thành phần của Bootstrap.

Bootstrap là một khung CSS nguồn mở được cho phép theo giấy phép MIT. Bootstrap không phải là sản phẩm của Pair Networks, Inc. và Pair Networks không bảo hành cho Bootstrap. Xin lưu ý rằng có nhiều cấp độ khung CSS có sẵn. Vui lòng tham khảo ý kiến ​​chuyên gia CNTT của bạn để được tư vấn và hướng dẫn về khung CSS phù hợp. Sản phẩm cụ thể này có thể hoặc không thể đáp ứng nhu cầu của bạn. Cặp mạng, Inc. đang cung cấp hỗ trợ cho hướng dẫn này để thuận tiện cho bạn và không chịu trách nhiệm về hiệu suất của Bootstrap. Vui lòng đọc kỹ các điều khoản và phạm vi dịch vụ đối với bất kỳ dịch vụ hoặc sản phẩm trực tuyến nào mà bạn đang cân nhắc mua hoặc sử dụng

Làm cách nào để đưa Bootstrap vào HTML cục bộ?

Làm cách nào để sử dụng Bootstrap mà không cần internet?

Làm cách nào để thêm Bootstrap theo cách thủ công?

Làm cách nào để cài đặt Bootstrap bằng dấu nhắc lệnh?