Tôi không thích bootstrap

Cách tốt nhất để sử dụng React-Bootstrap là thông qua gói npm mà bạn có thể cài đặt với npm (hoặc yarn nếu bạn thích)

Nếu bạn định tùy chỉnh các tệp Bootstrap Sass hoặc không muốn sử dụng CDN cho biểu định kiểu, thì cài đặt cũng có thể hữu ích

npm install react-bootstrap bootstrap

Nhập thành phần

Bạn nên nhập các thành phần riêng lẻ như. react-bootstrap/Button chứ không phải toàn bộ thư viện. Làm như vậy sẽ chỉ lấy các thành phần cụ thể mà bạn sử dụng, điều này có thể làm giảm đáng kể số lượng mã bạn gửi cho máy khách

Toàn cầu trình duyệt

Chúng tôi cung cấp các gói react-bootstrap.js và react-bootstrap.min.js với tất cả các thành phần được xuất trên đối tượng

0. Các gói này có sẵn trên jsDelivr, cũng như trong gói npm

ví dụ

React-Bootstrap đã bắt đầu repo với một vài ví dụ cơ bản về CodeSandbox. Nhấn vào đây để kiểm tra chúng

biểu định kiểu

Vì React-Bootstrap không phụ thuộc vào phiên bản Bootstrap rất chính xác nên chúng tôi không gửi kèm theo bất kỳ CSS nào. Tuy nhiên, một số biểu định kiểu được yêu cầu để sử dụng các thành phần này

CSS

Cách thức và kiểu Bootstrap nào bạn đưa vào tùy thuộc vào bạn, nhưng cách đơn giản nhất là đưa vào các kiểu mới nhất từ ​​CDN. Bạn có thể tìm thêm một chút thông tin về lợi ích của việc sử dụng CDN tại đây

ngổ ngáo

Trong trường hợp bạn đang sử dụng Sass, cách đơn giản nhất là đưa các tệp Sass nguồn của Bootstrap vào tệp Sass chính của bạn và sau đó yêu cầu nó trên tệp

1 hoặc

2 của bạn. Điều này áp dụng cho một ứng dụng

3 điển hình trong các trường hợp sử dụng khác, bạn có thể phải thiết lập gói theo lựa chọn của mình để biên dịch biểu định kiểu Sass/SCSS thành CSS

Tùy chỉnh Bootstrap

Nếu bạn muốn tùy chỉnh chủ đề Bootstrap hoặc bất kỳ biến Bootstrap nào, bạn có thể tạo tệp Sass tùy chỉnh

Và nhập nó vào tệp Sass chính

Sử dụng nâng cao

Xem tài liệu Bootstrap để biết các trường hợp sử dụng nâng cao hơn và chi tiết về cách tùy chỉnh biểu định kiểu

4 Prop API

Với một số thành phần React-Bootstrap nhất định, bạn có thể muốn sửa đổi thành phần hoặc thẻ HTML được hiển thị

Nếu bạn muốn giữ nguyên tất cả kiểu dáng của một thành phần React-Bootstrap cụ thể nhưng chuyển đổi thành phần được hiển thị cuối cùng (cho dù đó là thành phần React-Bootstrap khác, thành phần tùy chỉnh khác hay thẻ HTML khác), bạn có thể sử dụng prop

4

Ví dụ bên dưới chuyển một anchor đến chỗ dựa

4 trong thành phần

7. Điều này cuối cùng khiến thẻ

8 được hiển thị nhưng có cùng kiểu với thành phần

7

Dưới đây là hình minh họa về việc truyền một thành phần React Bootstrap. Nó chứa một thành phần

0 và một thành phần

7 đã được cung cấp cho giá đỡ

4. Điều này cuối cùng dẫn đến việc hiển thị thành phần

7 có cùng kiểu với thành phần

0

chủ đề

React-Bootstrap tương thích với các chủ đề Bootstrap hiện có. Chỉ cần làm theo hướng dẫn cài đặt cho chủ đề bạn chọn

Bạn nên luôn bao gồm các thuộc tính width và height. Nếu chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy khi tải video

Phần tử cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn từ. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên

Văn bản giữa và các thẻ sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử

---

HTMLTự động phát

Để tự động bắt đầu video, hãy sử dụng thuộc tính autoplay

Thí dụ

 
 
Trình duyệt của bạn không hỗ trợ thẻ video

Tự mình thử »

Ghi chú. Trình duyệt Chromium không cho phép tự động phát trong hầu hết các trường hợp. Tuy nhiên, tự động phát tắt tiếng luôn được cho phép

Thêm muted sau autoplay để video của bạn bắt đầu phát tự động (nhưng bị tắt tiếng)

Thí dụ

 
 
Trình duyệt của bạn không hỗ trợ thẻ video

Tự mình thử »

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử

Yếu tố4. 09. 03. 54. 010. 5

---

---

Định dạng video HTML

Có ba định dạng video được hỗ trợ. MP4, WebM và Ogg. Trình duyệt hỗ trợ cho các định dạng khác nhau là

Tài liệu và ví dụ về cách thêm cửa sổ bật lên Bootstrap, giống như cửa sổ bật lên trong iOS, vào bất kỳ thành phần nào trên trang web của bạn

Tổng quan

Những điều cần biết khi sử dụng plugin popover

• Popovers dựa vào thư viện bên thứ 3 Popper. js để định vị. Bạn phải bao gồm popper. tối thiểu. js trước bootstrap. js hoặc sử dụng

  $(function () {
    $('.example-popover').popover({
      container: 'body'
    })
  })

  7 /

  $(function () {
    $('.example-popover').popover({
      container: 'body'
    })
  })

  8 có chứa Popper. js để cửa sổ bật lên hoạt động
• Cửa sổ bật lên yêu cầu plugin chú giải công cụ làm phần phụ thuộc
• Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó
• Cửa sổ bật lên được chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi chạy chúng
• Các giá trị

  Click to toggle popover

  0 và

  Click to toggle popover

  1 có độ dài bằng 0 sẽ không bao giờ hiển thị cửa sổ bật lên
• Chỉ định

  Click to toggle popover

  2 để tránh sự cố hiển thị trong các thành phần phức tạp hơn (như nhóm đầu vào, nhóm nút, v.v.)
• Kích hoạt cửa sổ bật lên trên các phần tử ẩn sẽ không hoạt động
• Cửa sổ bật lên cho các phần tử

  Click to toggle popover

  3 hoặc

  Click to toggle popover

  4 phải được kích hoạt trên phần tử bao bọc
• Khi được kích hoạt từ các neo bao quanh nhiều dòng, các cửa sổ bật lên sẽ được căn giữa giữa chiều rộng tổng thể của các neo. Sử dụng

  Click to toggle popover

  5 trên

  Click to toggle popover

  6 của bạn để tránh hành vi này
• Cửa sổ bật lên phải được ẩn trước khi các phần tử tương ứng của chúng bị xóa khỏi DOM

Tiếp tục đọc để xem cách cửa sổ bật lên hoạt động với một số ví dụ

Thí dụ. Kích hoạt cửa sổ bật lên ở mọi nơi

Một cách để khởi tạo tất cả các cửa sổ bật lên trên một trang là chọn chúng theo thuộc tính

Click to toggle popover

7

$(function () {
  $('[data-toggle="popover"]').popover()
})

Thí dụ. Sử dụng tùy chọn Click to toggle popover8

Khi bạn có một số kiểu trên phần tử gốc can thiệp vào cửa sổ bật lên, bạn sẽ muốn chỉ định một

Click to toggle popover

8 tùy chỉnh để thay vào đó, HTML của cửa sổ bật lên xuất hiện trong phần tử đó

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Thí dụ

Click to toggle popover

bốn hướng

Bốn tùy chọn có sẵn. căn trên, phải, dưới và trái

Popover ở trên Popover ở bên phải Popover ở dưới Popover ở bên trái

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

Bỏ qua lần nhấp tiếp theo

Sử dụng trình kích hoạt

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

0 để loại bỏ cửa sổ bật lên trong lần nhấp tiếp theo của người dùng vào một phần tử khác với phần tử chuyển đổi

Yêu cầu đánh dấu cụ thể để loại bỏ khi nhấp vào lần nhấp tiếp theo

Để có hành vi đa nền tảng và trình duyệt phù hợp, bạn phải sử dụng thẻ

Click to toggle popover

6, không phải thẻ và bạn cũng phải bao gồm thuộc tính

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

2

Dismissible popover

$('.popover-dismiss').popover({
  trigger: 'focus'
})

yếu tố bị vô hiệu hóa

Các phần tử có thuộc tính

Click to toggle popover

4 không tương tác, nghĩa là người dùng không thể di chuột hoặc nhấp vào chúng để kích hoạt cửa sổ bật lên (hoặc chú giải công cụ). Như một giải pháp thay thế, bạn sẽ muốn kích hoạt cửa sổ bật lên từ trình bao bọc

hoặc

Click to toggle popover

6 và ghi đè

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

5 trên phần tử bị vô hiệu hóa

Đối với trình kích hoạt cửa sổ bật lên bị vô hiệu hóa, bạn cũng có thể thích

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

6 để cửa sổ bật lên xuất hiện dưới dạng phản hồi trực quan ngay lập tức cho người dùng của bạn vì họ có thể không muốn nhấp vào phần tử bị vô hiệu hóa

  Disabled button

Cách sử dụng

Kích hoạt cửa sổ bật lên qua JavaScript

$('#example').popover(options)

Tùy chọn

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

7, như trong

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

8

NameTypeDefaultDescriptionanimationbooleantrueÁp dụng chuyển đổi mờ dần CSS cho chuỗi popovercontainer. yếu tố. sai sự thật

Nối popover vào một phần tử cụ thể. Thí dụ.

Click to toggle popover

2. Tùy chọn này đặc biệt hữu ích vì nó cho phép bạn định vị cửa sổ bật lên trong luồng tài liệu gần phần tử kích hoạt - điều này sẽ ngăn cửa sổ bật lên trôi ra khỏi phần tử kích hoạt trong khi thay đổi kích thước cửa sổ

chuỗi nội dung. yếu tố. hàm số''

Giá trị nội dung mặc định nếu không có thuộc tính

Dismissible popover

0

Nếu một chức năng được đưa ra, nó sẽ được gọi với tham chiếu

Dismissible popover

1 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào

số chậm trễ. đối tượng0

Độ trễ hiển thị và ẩn cửa sổ bật lên (ms) - không áp dụng cho loại trình kích hoạt thủ công

Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn/hiện

Cấu trúc đối tượng là.

Dismissible popover

2

htmlbooleanfalseChèn HTML vào cửa sổ bật lên. Nếu sai, phương thức

Dismissible popover

3 của jQuery sẽ được sử dụng để chèn nội dung vào DOM. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS. chuỗi vị trí. chức năng'đúng'

Cách định vị cửa sổ bật lên - tự động. đứng đầu. đáy. bên trái. đúng
Khi

Dismissible popover

4 được chỉ định, nó sẽ tự động định hướng lại cửa sổ bật lên

Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM cửa sổ bật lên làm đối số đầu tiên và nút DOM phần tử kích hoạt làm đối số thứ hai. Bối cảnh

Dismissible popover

1 được đặt thành phiên bản popover

chuỗi chọn. falsefalseNếu bộ chọn được cung cấp, các đối tượng bật lên sẽ được ủy quyền cho các mục tiêu đã chỉ định. Trong thực tế, điều này được sử dụng để cho phép nội dung HTML động có thêm cửa sổ bật lên. Xem cái này và một ví dụ thông tin. chuỗi mẫu

Dismissible popover

6

HTML cơ sở để sử dụng khi tạo cửa sổ bật lên

Cửa sổ bật lên của

Click to toggle popover

0 sẽ được tiêm vào

Dismissible popover

8

Cửa sổ bật lên của

Click to toggle popover

1 sẽ được tiêm vào

$('.popover-dismiss').popover({
  trigger: 'focus'
})

0

$('.popover-dismiss').popover({
  trigger: 'focus'
})

1 sẽ trở thành mũi tên của popover

Phần tử bao bọc ngoài cùng phải có lớp

$('.popover-dismiss').popover({
  trigger: 'focus'
})

2

chuỗi tiêu đề. yếu tố. hàm số''

Giá trị tiêu đề mặc định nếu không có thuộc tính

Click to toggle popover

0

Nếu một chức năng được đưa ra, nó sẽ được gọi với tham chiếu

Dismissible popover

1 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào

chuỗi kích hoạt'click'Cách kích hoạt cửa sổ bật lên - nhấp chuột. bay lượn. tiêu điểm. thủ công. Bạn có thể vượt qua nhiều trình kích hoạt; . `thủ công` không thể được kết hợp với bất kỳ trình kích hoạt nào khác. số bù. string0Offset của cửa sổ bật lên so với mục tiêu của nó. Để biết thêm thông tin tham khảo Popper. js. chuỗi dự phòng. mảng'flip'Cho phép chỉ định vị trí mà Popper sẽ sử dụng khi dự phòng. Để biết thêm thông tin tham khảo Popper. chuỗi ranh giới của js. ranh giới ràng buộc element'scrollParent'Overflow của cửa sổ bật lên. Chấp nhận các giá trị của

$('.popover-dismiss').popover({
  trigger: 'focus'
})

5,

$('.popover-dismiss').popover({
  trigger: 'focus'
})

6,

$('.popover-dismiss').popover({
  trigger: 'focus'
})

7 hoặc tham chiếu HTMLElement (chỉ dành cho JavaScript). Để biết thêm thông tin tham khảo Popper. js

Thuộc tính dữ liệu cho các cửa sổ bật lên riêng lẻ

Ngoài ra, các tùy chọn cho các cửa sổ bật lên riêng lẻ có thể được chỉ định thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên

phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API đều không đồng bộ và bắt đầu quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin

$('.popover-dismiss').popover({
  trigger: 'focus'
})

8

Khởi tạo cửa sổ bật lên cho một bộ sưu tập phần tử

$('.popover-dismiss').popover({
  trigger: 'focus'
})

9

Hiển thị cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị (i. e. trước khi sự kiện

  Disabled button

0 xảy ra). Đây được coi là cách kích hoạt popover “thủ công”. Cửa sổ bật lên có cả tiêu đề và nội dung đều có độ dài bằng 0 sẽ không bao giờ được hiển thị

$('#element').popover('show')

  Disabled button

1

Ẩn popover của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự bị ẩn (i. e. trước khi sự kiện

  Disabled button

2 xảy ra). Đây được coi là cách kích hoạt popover “thủ công”

$('#element').popover('hide')

  Disabled button

3

Chuyển đổi cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị hoặc ẩn (i. e. trước khi sự kiện

  Disabled button

0 hoặc

  Disabled button

2 xảy ra). Đây được coi là cách kích hoạt popover “thủ công”

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

0

  Disabled button

6

Ẩn và phá hủy cửa sổ bật lên của một phần tử. Cửa sổ bật lên sử dụng ủy quyền (được tạo bằng cách sử dụng ) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con cháu

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

1

  Disabled button

8

Cung cấp cho cửa sổ bật lên của một phần tử khả năng được hiển thị. Popovers được bật theo mặc định

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

2

  Disabled button

9

Xóa khả năng hiển thị cửa sổ bật lên của một phần tử. Cửa sổ bật lên sẽ chỉ có thể được hiển thị nếu nó được bật lại