Làm cách nào để sử dụng các ví dụ Bootstrap trong dự án của bạn?

Ghi chú của biên tập viên. Bài đăng này đã được cập nhật vào ngày 23 tháng 6 năm 2022 để đảm bảo tất cả thông tin đều cập nhật và thêm một phần về

Sự phổ biến ngày càng tăng của các ứng dụng một trang trong vài năm qua đã dẫn đến một loạt các khung JavaScript, trong đó phổ biến nhất là React. Điều này trùng hợp với sự xuất hiện của các khung CSS được thiết kế để giúp các nhà phát triển xây dựng các ứng dụng web đáp ứng

Nếu React là khung JavaScript được sử dụng nhiều nhất để xây dựng các ứng dụng web, thì Bootstrap là khung CSS phổ biến nhất, cung cấp năng lượng cho hàng triệu trang web trên internet. Trong hướng dẫn này, chúng ta sẽ đi qua

• • 
    
      
        
        
        
        
        
        
        
        
    
        [email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous"
        />
      
      
        
        
    
        
      
    
    

    0

    
    
      
        
        
        
        
        
        
        
        
    
        [email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous"
        />
      
      
        
        
    
        
      
    
    

    1

• • 
    
      
        
        
        
        
        
        
        
        
    
        [email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous"
        />
      
      
        
        
    
        
      
    
    

    2

  • 
    
      
        
        
        
        
        
        
        
        
    
        [email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous"
        />
      
      
        
        
    
        
      
    
    

    3

Nếu bạn mới bắt đầu với những framework này, tôi khuyên bạn nên đọc lướt qua tài liệu chính thức về React và Bootstrap. Tôi cũng khuyến khích bạn xem video hướng dẫn toàn diện bên dưới để tìm hiểu sâu hơn

Giới thiệu sơ lược về JavaScript và CSS frameworks

Có nhiều khung JavaScript bạn có thể chọn, bao gồm Angular, React, Vue. js, Ember — danh sách tiếp tục. Nhờ những tùy chọn phong phú này, không còn cần thiết phải sử dụng thư viện DOM, chẳng hạn như jQuery, để xây dựng các ứng dụng web

Ngoài ra, nếu bạn là nhà phát triển giao diện người dùng, gần như chắc chắn bạn đã sử dụng hoặc ít nhất đã nghe nói về Bootstrap, Foundation và Bulma. Đây đều là các khung CSS đáp ứng (ưu tiên thiết bị di động) với các tính năng mạnh mẽ và tiện ích tích hợp

Như chúng tôi đã đề cập, React và Bootstrap hiện là các khung JavaScript và CSS phổ biến nhất, tương ứng. Tiếp theo, hãy xem cách thêm Bootstrap vào React

Cách thêm Bootstrap vào React

Ba cách phổ biến nhất để thêm Bootstrap vào ứng dụng React của bạn là

• Sử dụng Bootstrap CDN
• Nhập Bootstrap vào React dưới dạng phụ thuộc
• Cài đặt gói React Bootstrap như

  
  
    
      
      
      
      
      
      
      
      
  
      [email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
        crossorigin="anonymous"
      />
    
    
      
      
  
      
    
  
  

  4 hoặc

  
  
    
      
      
      
      
      
      
      
      
  
      [email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
        crossorigin="anonymous"
      />
    
    
      
      
  
      
    
  
  

  5

Hãy xem xét từng chi tiết này một cách chi tiết hơn

Thêm Bootstrap vào React bằng Bootstrap CDN

Bootstrap CDN là cách dễ nhất để thêm Bootstrap vào ứng dụng React của bạn. Không cần cài đặt hoặc tải xuống bổ sung

Bạn sẽ chỉ phải bao gồm một liên kết đến CDN trong phần đầu của tệp nhập ứng dụng của bạn. Trong một ứng dụng React điển hình được tạo bằng

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Vì chúng tôi muốn bao gồm phiên bản ổn định hiện tại của Bootstrap, liên kết của chúng tôi sẽ trông như thế này

Nếu dự án của bạn cũng yêu cầu sử dụng các thành phần JavaScript đi kèm với Bootstrap, chẳng hạn như chuyển đổi phương thức, danh sách thả xuống hoặc thanh điều hướng, chúng tôi sẽ cần liên kết tệp

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Chúng tôi có thể làm điều này bằng cách đặt thẻ

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Sau khi liên kết CSS Bootstrap và CDN Javascript đi kèm, mã hoàn chỉnh cho tệp

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Giờ đây, bạn có thể bắt đầu sử dụng các lớp Bootstrap tích hợp sẵn và các thành phần JavaScript trong các thành phần ứng dụng React của mình

Nhập Bootstrap vào React dưới dạng phụ thuộc

Nếu bạn đang sử dụng công cụ xây dựng hoặc gói mô-đun, chẳng hạn như

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Lệnh này sẽ cài đặt phiên bản Bootstrap mới nhất. Sau khi quá trình cài đặt hoàn tất, chúng tôi có thể đưa nó vào tệp mục nhập của ứng dụng

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Trong trường hợp dự án được xây dựng bằng

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Như được hiển thị trong mã ở trên, chúng tôi đã nhập cả Bootstrap CSS và tệp JavaScript được liên kết của nó. Chúng tôi cũng đảm bảo nhập Bootstrap trước tệp CSS chính của chúng tôi

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Khi quá trình này hoàn tất, chúng ta có thể tiếp tục và bắt đầu sử dụng các lớp Bootstrap tích hợp trong các thành phần ứng dụng React của mình

Cài đặt gói React Bootstrap như

4 hoặc

5

Cách thứ ba để thêm Bootstrap vào ứng dụng React là sử dụng gói đã xây dựng lại các thành phần Bootstrap được thiết kế để hoạt động như các thành phần React

Lợi ích của phương pháp này là trên thực tế, tất cả các thành phần Bootstrap đều được đóng gói dưới dạng thành phần React trong các thư viện này. Ví dụ: giờ đây, một thành phần phương thức Bootstrap đầy đủ có thể dễ dàng được nhập dưới dạng

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Mặc dù có nhiều gói khác nhau mà bạn có thể sử dụng để cài đặt Boostrap trong React, hai gói phổ biến nhất bao gồm

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Sử dụng các lớp và thành phần Bootstrap tích hợp

Bootstrap có thể được sử dụng trực tiếp trên các phần tử và thành phần trong ứng dụng React của bạn bằng cách áp dụng các lớp tích hợp giống như bất kỳ lớp nào khác. Để minh họa việc sử dụng các lớp và thành phần Bootstrap, hãy tạo một thành phần React của trình chuyển đổi chủ đề cơ bản

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Như được hiển thị trong bản trình diễn này, chúng tôi đang sử dụng một thành phần thả xuống có sẵn trong Bootstrap để triển khai trình chuyển đổi chủ đề của chúng tôi. Chúng tôi cũng đang sử dụng các lớp

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Chúng tôi sẽ tiếp tục và viết mã cho thành phần trình chuyển đổi chủ đề của chúng tôi. Đảm bảo bạn đã thiết lập ứng dụng React. Trong thư mục

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Trong đoạn mã trên, chúng tôi đã tạo một thành phần trình chuyển đổi chủ đề rất đơn giản bằng cách sử dụng thành phần thả xuống của Bootstrap và một vài lớp tích hợp

Sử dụng hook

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Tiếp theo, trong phần đánh dấu thành phần của chúng tôi, chúng tôi đã hiển thị danh sách thả xuống Bootstrap với bốn mục thả xuống. Ba mục đầu tiên cho phép chúng tôi chuyển đổi giữa các chủ đề khác nhau —

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Trong ví dụ này, chúng ta đã thấy việc sử dụng các lớp và thành phần tích hợp sẵn của Bootstrap trong ứng dụng React của chúng ta dễ dàng như thế nào. Để hiểu rõ hơn về cách thức hoạt động của các gói React Bootstrap, hãy tạo lại ứng dụng trình chuyển đổi chủ đề của chúng ta bằng cách sử dụng các thành phần do

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Ví dụ sử dụng

4

Giả sử rằng bạn đã thiết lập ứng dụng React, hãy cài đặt

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Điều đáng nói là

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Khi chúng tôi đã cài đặt

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Để tiếp tục với ví dụ về trình chuyển đổi chủ đề của chúng tôi, hãy tạo một tệp mới có tên

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Trong đoạn mã trên, chúng tôi đã cố gắng sao chép ví dụ ban đầu của mình nhiều nhất có thể bằng cách sử dụng

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

Chúng tôi đã nhập ba thành phần từ gói

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Cuối cùng, chúng tôi sẽ sửa đổi tệp

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Thay đổi duy nhất mà chúng tôi đã thực hiện đối với tệp này là loại bỏ trang bắt đầu

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Nếu chúng tôi chạy ứng dụng ngay bây giờ bằng lệnh

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Ví dụ sử dụng

5

Gói

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Chúng ta có thể dễ dàng thêm

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Mã cho thành phần

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Khi so sánh cả hai tệp mã từ ví dụ

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Nếu chúng tôi chạy ứng dụng ngay bây giờ bằng lệnh

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Tạo một ứng dụng React chi tiết hơn với Bootstrap

Hãy đẩy mạnh điều này hơn một chút để tạo một ứng dụng với một số chi tiết hơn. Chúng tôi sẽ cố gắng sử dụng càng nhiều lớp và thành phần Bootstrap càng tốt. Chúng tôi cũng sẽ sử dụng

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Hãy bắt đầu bằng cách tạo một ứng dụng mới với

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Tiếp theo, hãy tiếp tục và cài đặt các phụ thuộc như sau

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Lưu ý ở đây rằng chúng tôi đã cài đặt

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Hãy sửa đổi một chút đối với tệp

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Tiếp theo, chúng tôi sẽ tạo một thư mục mới có tên là

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Thành phần chúng ta vừa tạo trong đoạn mã trên là thành phần

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Khi đã xong, hãy tạo một tệp mới có tên

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Trong đoạn mã trên, chúng tôi đã tạo một thành phần

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Sau khi thành phần được gắn kết, chúng tôi đã sử dụng móc nối

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Cuối cùng, sửa đổi tệp

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Trong đoạn mã trên, chúng tôi chỉ đơn giản bao gồm các thành phần

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Nếu bạn chạy ứng dụng ngay bây giờ bằng lệnh

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Cách khắc phục sự cố Bootstrap không hoạt động trong React

Lý do duy nhất Bootstrap có thể không hoạt động bình thường trong ứng dụng React của bạn là nếu bạn chưa liên kết nó đúng cách

Nếu bạn đang sử dụng Bootstrap CDN, hãy kiểm tra kỹ xem URL CDN có hợp lệ không và URL đó có được thêm vào bằng cách sử dụng thẻ

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Nếu bạn đang sử dụng gói React Bootstrap, hãy đảm bảo rằng bạn đã cài đặt gói đó đúng cách và nhập gói đó vào trang nhập ứng dụng của mình,

Phần kết luận

Trong hướng dẫn này, chúng tôi đã khám phá một số cách khác nhau để chúng tôi có thể tích hợp Bootstrap với các ứng dụng React của mình. Chúng tôi cũng đã thấy cách chúng tôi có thể sử dụng hai trong số các thư viện React Bootstrap phổ biến nhất, đó là

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

  
    
    
    
    
    
    
    
    

    [email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  
  
    
    

    
  

Chúng tôi chỉ sử dụng một vài thành phần Bootstrap trong hướng dẫn này, chẳng hạn như cảnh báo, huy hiệu, danh sách thả xuống, thanh điều hướng, điều hướng, biểu mẫu, nút, thẻ, v.v. Vẫn còn một số thành phần Bootstrap mà bạn có thể thử nghiệm, chẳng hạn như bảng, phương thức, chú giải công cụ, băng chuyền, jumbotron, phân trang, tab, v.v.

Bạn có thể kiểm tra tài liệu về các gói mà chúng tôi đã sử dụng trong hướng dẫn này để tìm hiểu thêm các cách sử dụng chúng. Mã nguồn cho tất cả các ứng dụng demo trong hướng dẫn này có thể được tìm thấy trên GitHub

Đăng NhậpTên Lửa. Khả năng hiển thị đầy đủ vào các ứng dụng React sản xuất của bạn

LogRocket kết hợp tính năng phát lại phiên, phân tích sản phẩm và theo dõi lỗi – trao quyền cho các nhóm phần mềm để tạo ra trải nghiệm sản phẩm di động và web lý tưởng. Điều đó có ý nghĩa gì đối với bạn?

Thay vì đoán tại sao xảy ra lỗi hoặc yêu cầu người dùng chụp ảnh màn hình và kết xuất nhật ký, LogRocket cho phép bạn phát lại các sự cố như thể chúng đã xảy ra trong trình duyệt của chính bạn để nhanh chóng hiểu điều gì đã xảy ra.

Không còn cảnh báo ồn ào. Theo dõi lỗi thông minh cho phép bạn phân loại và phân loại các vấn đề, sau đó học hỏi từ điều này. Nhận thông báo về các sự cố có ảnh hưởng đến người dùng, không phải thông báo sai. Ít cảnh báo hơn, nhiều tín hiệu hữu ích hơn

Gói phần mềm trung gian LogRocket Redux thêm một lớp khả năng hiển thị bổ sung vào các phiên người dùng của bạn. LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn

Hiện đại hóa cách bạn gỡ lỗi ứng dụng React của mình — bắt đầu theo dõi miễn phí

Chia sẻ cái này

• Twitter
• reddit
• LinkedIn
• Facebook