Trung tâm căn chỉnh biểu mẫu React-bootstrap

Các ví dụ và hướng dẫn sử dụng cho các kiểu điều khiển biểu mẫu, tùy chọn bố cục và các thành phần tùy chỉnh để tạo nhiều biểu mẫu khác nhau

Tổng quan

Các điều khiển biểu mẫu Bootstrap mở rộng trên các kiểu biểu mẫu Đã khởi động lại của chúng tôi với các lớp. Sử dụng các lớp này để chọn tham gia hiển thị tùy chỉnh của chúng để hiển thị nhất quán hơn trên các trình duyệt và thiết bị

Đảm bảo sử dụng thuộc tính

8 thích hợp trên tất cả các đầu vào (e. g. ,

9 cho địa chỉ email hoặc

  

    Email
    

      
    
  

  

    Password
    

      
    
  

0 cho thông tin số) để tận dụng các điều khiển đầu vào mới hơn như xác minh email, chọn số, v.v.

Đây là một ví dụ nhanh để minh họa các kiểu biểu mẫu của Bootstrap. Tiếp tục đọc tài liệu về các lớp bắt buộc, bố cục biểu mẫu, v.v.

Chúng tôi sẽ không bao giờ chia sẻ email của bạn với bất kỳ ai khác

Nộp

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

Điều khiển biểu mẫu

Kiểm soát hình thức văn bản—như

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1,

  

    Email
    

      
    
  

  

    Password
    

      
    
  

2

Đối với đầu vào tệp, hoán đổi

  

    Email
    

      
    
  

  

    Password
    

      
    
  

3 cho

  

    Email
    

      
    
  

  

    Password
    

      
    
  

4

________số 8

định cỡ

Đặt chiều cao bằng cách sử dụng các lớp như

  

    Email
    

      
    
  

  

    Password
    

      
    
  

5 và

  

    Email
    

      
    
  

  

    Password
    

      
    
  

6

1

2

Chỉ đọc

Thêm thuộc tính boolean

  

    Email
    

      
    
  

  

    Password
    

      
    
  

7 vào đầu vào để ngăn sửa đổi giá trị của đầu vào. Đầu vào chỉ đọc có vẻ nhẹ hơn (giống như đầu vào bị vô hiệu hóa), nhưng vẫn giữ nguyên con trỏ tiêu chuẩn

Văn bản thuần túy chỉ đọc

Nếu bạn muốn có các phần tử

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 trong biểu mẫu của mình được tạo kiểu dưới dạng văn bản thuần túy, hãy sử dụng lớp

  

    Email
    

      
    
  

  

    Password
    

      
    
  

9 để xóa kiểu dáng trường biểu mẫu mặc định và giữ nguyên lề và phần đệm chính xác

  

    Email
    

      
    
  

  

    Password
    

      
    
  

8

Phạm vi đầu vào

Đặt đầu vào phạm vi có thể cuộn theo chiều ngang bằng cách sử dụng

80

  

    Email
    

      
    
  

  

    Password
    

      
    
  

0

Hộp kiểm và radio

Các hộp kiểm và radio mặc định được cải thiện với sự trợ giúp của

81, một lớp duy nhất cho cả hai loại đầu vào giúp cải thiện bố cục và hành vi của các thành phần HTML của chúng. Các hộp kiểm dùng để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio dùng để chọn một tùy chọn từ nhiều tùy chọn

Hộp kiểm bị vô hiệu hóa và radio được hỗ trợ. Thuộc tính

82 sẽ áp dụng màu nhạt hơn để giúp biểu thị trạng thái của đầu vào

Các hộp kiểm và nút radio hỗ trợ xác thực biểu mẫu dựa trên HTML và cung cấp các nhãn ngắn gọn, dễ tiếp cận. Như vậy, các

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 và

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 của chúng ta là các phần tử anh em trái ngược với một

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 trong một

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1. Điều này dài dòng hơn một chút vì bạn phải chỉ định các thuộc tính

87 và

88 để liên kết giữa

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 và

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1

Mặc định (xếp chồng)

Theo mặc định, bất kỳ số lượng hộp kiểm và đài nào là anh chị em trực tiếp sẽ được xếp chồng lên nhau theo chiều dọc và cách nhau một cách thích hợp bằng

81

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

2____33

nội tuyến

Nhóm các hộp kiểm hoặc radio trên cùng một hàng ngang bằng cách thêm

  

    Email
    

      
    
  

  

    Password
    

      
    
  

02 vào bất kỳ

81 nào

  

    Example file input
    
  

0

  

    Example file input
    
  

0

không có nhãn

Thêm

  

    Email
    

      
    




  


Password

04 vào đầu vào trong

81 không có bất kỳ văn bản nhãn nào. Hãy nhớ vẫn cung cấp một số dạng nhãn cho các công nghệ hỗ trợ (ví dụ: sử dụng

  

    Email
    

      
    
  

  

    Password
    

      
    
  

06)

  

    Example file input
    
  

2

Cách trình bày

Vì Bootstrap áp dụng

  

    Email
    

      
    
  

  

    Password
    

      
    
  

07 và

  

    Email
    

      
    
  

  

    Password
    

      
    
  

08 cho hầu hết tất cả các điều khiển biểu mẫu của chúng tôi, nên theo mặc định, các biểu mẫu sẽ xếp chồng lên nhau theo chiều dọc. Các lớp bổ sung có thể được sử dụng để thay đổi bố cục này trên cơ sở mỗi biểu mẫu

Nhóm biểu mẫu

Lớp

  

    Email
    

      
    
  

  

    Password
    

      
    
  

09 là cách dễ nhất để thêm một số cấu trúc vào biểu mẫu. Nó cung cấp một lớp linh hoạt khuyến khích nhóm các nhãn, điều khiển, văn bản trợ giúp tùy chọn và thông báo xác thực biểu mẫu phù hợp. Theo mặc định, nó chỉ áp dụng cho

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

20, nhưng nó chọn các kiểu bổ sung trong

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

21 khi cần. Sử dụng nó với

S,

s hoặc gần như bất kỳ phần tử nào khác.

  

    Example file input
    
  

3

lưới biểu mẫu

Các biểu mẫu phức tạp hơn có thể được tạo bằng cách sử dụng các lớp lưới của chúng tôi. Sử dụng những thứ này cho bố cục biểu mẫu yêu cầu nhiều cột, độ rộng khác nhau và các tùy chọn căn chỉnh bổ sung

  

    Example file input
    
  

4

hàng biểu mẫu

Bạn cũng có thể hoán đổi

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

22 lấy

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

23, một biến thể của hàng lưới tiêu chuẩn của chúng tôi ghi đè lên các rãnh cột mặc định để có bố cục chặt chẽ và nhỏ gọn hơn

  

    Example file input
    
  

5

Bố cục phức tạp hơn cũng có thể được tạo bằng hệ thống lưới

  

    Example file input
    
  

6

dạng ngang

Tạo biểu mẫu ngang với lưới bằng cách thêm lớp

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

22 để tạo nhóm và sử dụng lớp

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

25 để chỉ định chiều rộng của nhãn và điều khiển của bạn. Đảm bảo thêm cả

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

26 vào các

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 của bạn để chúng được căn giữa theo chiều dọc với các điều khiển biểu mẫu được liên kết của chúng

Đôi khi, bạn có thể cần sử dụng các tiện ích lề hoặc đệm để tạo sự căn chỉnh hoàn hảo mà bạn cần. Ví dụ: chúng tôi đã xóa

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

28 trên nhãn đầu vào radio xếp chồng lên nhau để căn chỉnh đường cơ sở văn bản tốt hơn

  

    Example file input
    
  

7

Định cỡ nhãn dạng ngang

Đảm bảo sử dụng

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

29 hoặc

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

30 cho các

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 hoặc

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 của bạn để theo đúng kích thước của

  

    Email
    

      
    
  

  

    Password
    

      
    
  

5 và

  

    Email
    

      
    
  

  

    Password
    

      
    
  

6

  

    Example file input
    
  

8

Kích thước cột

Như đã trình bày trong các ví dụ trước, hệ thống lưới của chúng tôi cho phép bạn đặt bất kỳ số lượng

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

35 nào trong một

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

22 hoặc

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

23. Chúng sẽ chia đều chiều rộng có sẵn giữa chúng. Bạn cũng có thể chọn một tập hợp con các cột của mình để chiếm nhiều hoặc ít dung lượng hơn, trong khi các

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

35 còn lại chia đều phần còn lại, với các lớp cột cụ thể như

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

39

  

    Example file input
    
  

9

tự động định cỡ

Ví dụ dưới đây sử dụng tiện ích flexbox để căn giữa nội dung theo chiều dọc và thay đổi

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

35 thành

  

    Example file input
    
  

01 để các cột của bạn chỉ chiếm nhiều không gian nhất có thể. Nói cách khác, kích thước của cột dựa trên nội dung

10

Sau đó, bạn có thể phối lại điều đó một lần nữa với các lớp cột theo kích thước cụ thể

11

Và tất nhiên, các điều khiển biểu mẫu tùy chỉnh được hỗ trợ

12

biểu mẫu nội tuyến

Sử dụng lớp

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

21 để hiển thị một loạt nhãn, điều khiển biểu mẫu và nút trên một hàng ngang. Điều khiển biểu mẫu trong biểu mẫu nội tuyến thay đổi một chút so với trạng thái mặc định của chúng

• Các điều khiển là

  
    
  
      Example file input
      
    
  

  03, thu gọn bất kỳ khoảng trắng HTML nào và cho phép bạn cung cấp điều khiển căn chỉnh với các tiện ích khoảng cách và hộp linh hoạt
• Các nhóm điều khiển và đầu vào nhận được

  
    
  
      Example file input
      
    
  

  04 để ghi đè lên mặc định của Bootstrap là

  
    
  
      Email
      
  
        
      
    
  
    
  
      Password
      
  
        
      
    
  
  

  08
• Các điều khiển chỉ xuất hiện nội tuyến trong các cổng xem rộng ít nhất 576px để giải thích cho các cổng xem hẹp trên thiết bị di động

Bạn có thể cần giải quyết thủ công chiều rộng và căn chỉnh của các điều khiển biểu mẫu riêng lẻ bằng các tiện ích giãn cách (như minh họa bên dưới). Cuối cùng, hãy đảm bảo luôn bao gồm một

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 với mỗi điều khiển biểu mẫu, ngay cả khi bạn cần ẩn nó khỏi những khách truy cập không đọc màn hình bằng

  

    Example file input
    
  

07

13

Các điều khiển và lựa chọn biểu mẫu tùy chỉnh cũng được hỗ trợ

14

Các lựa chọn thay thế cho nhãn ẩn

Các công nghệ hỗ trợ như trình đọc màn hình sẽ gặp sự cố với các biểu mẫu của bạn nếu bạn không bao gồm nhãn cho mọi thông tin nhập vào. Đối với các biểu mẫu nội tuyến này, bạn có thể ẩn nhãn bằng lớp

  

    Example file input
    
  

07. Có nhiều phương pháp thay thế khác để cung cấp nhãn cho các công nghệ hỗ trợ, chẳng hạn như thuộc tính

  

    Email
    

      
    
  

  

    Password
    

      
    
  

06,

  

    Example file input
    
  

10 hoặc

  

    Example file input
    
  

11. Nếu không có thuộc tính nào trong số này, thì các công nghệ hỗ trợ có thể sử dụng thuộc tính

  

    Example file input
    
  

12, nếu có, nhưng lưu ý rằng không nên sử dụng

  

    Example file input
    
  

12 để thay thế cho các phương pháp ghi nhãn khác

văn bản trợ giúp

Có thể tạo văn bản trợ giúp cấp khối trong các biểu mẫu bằng cách sử dụng

  

    Example file input
    
  

14 (trước đây gọi là

  

    Example file input
    
  

15 trong v3). Văn bản trợ giúp nội tuyến có thể được triển khai linh hoạt bằng cách sử dụng bất kỳ phần tử HTML nội tuyến và lớp tiện ích nào như

  

    Example file input
    
  

16

Liên kết văn bản trợ giúp với các điều khiển biểu mẫu

Văn bản trợ giúp phải được liên kết rõ ràng với điều khiển biểu mẫu liên quan đến việc sử dụng thuộc tính

  

    Example file input
    
  

17. Điều này sẽ đảm bảo rằng các công nghệ hỗ trợ—chẳng hạn như trình đọc màn hình—sẽ thông báo văn bản trợ giúp này khi người dùng tập trung hoặc nhập điều khiển

Văn bản trợ giúp bên dưới đầu vào có thể được tạo kiểu bằng

  

    Example file input
    
  

14. Lớp này bao gồm

  

    Email
    

      
    
  

  

    Password
    

      
    
  

07 và thêm một số lề trên để tạo khoảng cách dễ dàng từ các đầu vào ở trên

Mật khẩu của bạn phải dài 8-20 ký tự, chứa các chữ cái và số và không được chứa dấu cách, ký tự đặc biệt hoặc biểu tượng cảm xúc

15

Văn bản nội tuyến có thể sử dụng bất kỳ phần tử HTML nội tuyến điển hình nào (có thể là

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1,

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 hoặc thứ gì đó khác) mà không có gì khác ngoài một lớp tiện ích

Phải dài 8-20 ký tự

16

biểu mẫu bị vô hiệu hóa

Thêm thuộc tính boolean

82 vào đầu vào để ngăn chặn tương tác của người dùng và làm cho nó có vẻ nhẹ hơn

Thêm thuộc tính

82 vào một

để vô hiệu hóa tất cả các điều khiển trong.

18

Hãy cẩn thận với neo

Theo mặc định, các trình duyệt sẽ xử lý tất cả các điều khiển biểu mẫu gốc (

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1,

  

    Example file input
    
  

25,

  

    Example file input
    
  

26

  

    Example file input
    
  

27

  

    Example file input
    
  

28

Nếu bố cục biểu mẫu của bạn cho phép, bạn có thể hoán đổi lớp

  

    Example file input
    
  

29 cho lớp

  

    Example file input
    
  

30 để hiển thị phản hồi xác thực trong chú giải công cụ được tạo kiểu. Đảm bảo có cha mẹ có

  

    Example file input
    
  

31 trên đó để định vị chú giải công cụ. Trong ví dụ bên dưới, các lớp cột của chúng tôi đã có tính năng này, nhưng dự án của bạn có thể yêu cầu thiết lập thay thế

Vui lòng chọn một tên người dùng duy nhất và hợp lệ

Vui lòng cung cấp một thành phố hợp lệ

Vui lòng chọn một trạng thái hợp lệ

Vui lòng cung cấp mã zip hợp lệ

Gửi biểu mẫu

19

tùy chỉnh

Trạng thái xác thực có thể được tùy chỉnh thông qua Sass với bản đồ

  

    Example file input
    
  

32. Nằm trong tệp

  

    Example file input
    
  

33 của chúng tôi, bản đồ Sass này được lặp lại để tạo trạng thái xác thực

  

    Example file input
    
  

34/

  

    Example file input
    
  

35 mặc định. Bao gồm là một bản đồ lồng nhau để tùy chỉnh màu sắc và biểu tượng của từng tiểu bang. Mặc dù không có trạng thái nào khác được trình duyệt hỗ trợ, nhưng những trình duyệt sử dụng kiểu tùy chỉnh có thể dễ dàng thêm phản hồi biểu mẫu phức tạp hơn

Xin lưu ý rằng chúng tôi khuyên bạn không nên tùy chỉnh các giá trị này mà không sửa đổi mixin

  

    Example file input
    
  

36

20

biểu mẫu tùy chỉnh

Để có nhiều tùy chỉnh hơn và tính nhất quán trên nhiều trình duyệt, hãy sử dụng các phần tử biểu mẫu hoàn toàn tùy chỉnh của chúng tôi để thay thế các giá trị mặc định của trình duyệt. Chúng được xây dựng dựa trên đánh dấu ngữ nghĩa và có thể truy cập, vì vậy chúng là sự thay thế chắc chắn cho bất kỳ điều khiển biểu mẫu mặc định nào

Hộp kiểm và radio

Mỗi hộp kiểm và ghép nối radio

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 và

  

    Email
    

      
    




  


Password

1 được bọc trong một

để tạo điều khiển tùy chỉnh của chúng tôi. Về mặt cấu trúc, đây là cách tiếp cận giống như cách tiếp cận mặc định của chúng tôi

81

Chúng tôi sử dụng bộ chọn anh chị em (

  

    Example file input
    
  

40) cho tất cả các trạng thái

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 của mình—chẳng hạn như

  

    Example file input
    
  

42—để tạo kiểu phù hợp cho chỉ báo biểu mẫu tùy chỉnh của chúng tôi. Khi kết hợp với lớp

  

    Example file input
    
  

43, chúng ta cũng có thể định kiểu văn bản cho từng mục dựa trên trạng thái của

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1

Chúng tôi ẩn

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 mặc định với

  

    Example file input
    
  

46 và sử dụng

  

    Example file input
    
  

43 để xây dựng một chỉ báo biểu mẫu tùy chỉnh mới ở vị trí của nó với

  

    Example file input
    
  

48 và

  

    Example file input
    
  

49. Thật không may, chúng tôi không thể tạo tùy chỉnh chỉ từ

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 vì CSS của

  

    Example file input
    
  

51 không hoạt động trên phần tử đó

Ở trạng thái đã chọn, chúng tôi sử dụng các biểu tượng SVG nhúng base64 từ Open Iconic. Điều này cung cấp cho chúng tôi khả năng kiểm soát tốt nhất để tạo kiểu và định vị trên các trình duyệt và thiết bị

hộp kiểm

21

Các hộp kiểm tùy chỉnh cũng có thể sử dụng lớp giả

  

    Example file input
    
  

52 khi được đặt thủ công qua JavaScript (không có thuộc tính HTML khả dụng để chỉ định nó)

Nếu bạn đang sử dụng jQuery, một cái gì đó như thế này là đủ

22

bộ đàm

23

nội tuyến

24

Vô hiệu hóa

Các hộp kiểm và radio tùy chỉnh cũng có thể bị vô hiệu hóa. Thêm thuộc tính boolean

82 vào

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 và chỉ báo tùy chỉnh và mô tả nhãn sẽ được tạo kiểu tự động

25

công tắc

Một công tắc có đánh dấu hộp kiểm tùy chỉnh nhưng sử dụng lớp

  

    Example file input
    
  

55 để hiển thị một công tắc bật/tắt. Công tắc cũng hỗ trợ thuộc tính

82

26

Giao diện ban đầu của

  

    Example file input
    
  

57 tùy chỉnh và không thể sửa đổi các

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 do hạn chế của trình duyệt

27

Bạn cũng có thể chọn từ các lựa chọn tùy chỉnh nhỏ và lớn để khớp với các kiểu nhập văn bản có kích thước tương tự của chúng tôi

28

Thuộc tính

  

    Example file input
    
  

59 cũng được hỗ trợ

27

Cũng như thuộc tính

  

    Example file input
    
  

60

27

Phạm vi

Tạo điều khiển

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 tùy chỉnh với

  

    Example file input
    
  

62. Bản nhạc (nền) và ngón tay cái (giá trị) đều được tạo kiểu để xuất hiện giống nhau trên các trình duyệt. Vì chỉ có IE và Firefox hỗ trợ "điền" theo dõi của họ từ bên trái hoặc bên phải của ngón tay cái như một phương tiện để biểu thị tiến trình một cách trực quan, chúng tôi hiện không hỗ trợ điều đó

1

Phạm vi đầu vào có các giá trị ngầm định cho

  

    Example file input
    
  

63 và

  

    Example file input
    
  

64—

  

    Example file input
    
  

65 và

  

    Example file input
    
  

66, tương ứng. Bạn có thể chỉ định giá trị mới cho những giá trị sử dụng thuộc tính

  

    Example file input
    
  

63 và

  

    Example file input
    
  

64

1

Theo mặc định, phạm vi đầu vào “bắt” thành giá trị số nguyên. Để thay đổi điều này, bạn có thể chỉ định giá trị

  

    Example file input
    
  

69. Trong ví dụ bên dưới, chúng tôi nhân đôi số bước bằng cách sử dụng

  

    Example file input
    
  

70

1

trình duyệt tệp

Plugin được đề xuất để tạo hiệu ứng đầu vào tệp tùy chỉnh. bs-custom-file-input, đó là những gì chúng tôi hiện đang sử dụng ở đây trong tài liệu của chúng tôi

Đầu vào tệp là thứ khó hiểu nhất trong nhóm và yêu cầu JavaScript bổ sung nếu bạn muốn kết nối chúng với chức năng Chọn tệp… và văn bản tên tệp đã chọn

4

Chúng tôi ẩn tệp mặc định

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 qua

  

    Example file input
    
  

46 và thay vào đó tạo kiểu cho tệp

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1. Nút được tạo và định vị bằng

  

    Example file input
    
  

49. Cuối cùng, chúng tôi tuyên bố một

  

    Example file input
    
  

75 và

  

    Example file input
    
  

76 trên

  

    Email
    

      
    
  

  

    Password
    

      
    
  

1 để có khoảng cách thích hợp cho nội dung xung quanh

Dịch hoặc tùy chỉnh chuỗi bằng SCSS

Lớp giả

  

    Example file input
    
  

78 được sử dụng để cho phép dịch văn bản “Duyệt” sang các ngôn ngữ khác. Ghi đè hoặc thêm các mục vào biến

  

    Example file input
    
  

79 Sass bằng thẻ ngôn ngữ có liên quan và các chuỗi được bản địa hóa. Các chuỗi tiếng Anh có thể được tùy chỉnh theo cùng một cách. Ví dụ: đây là cách một người có thể thêm bản dịch tiếng Tây Ban Nha (mã ngôn ngữ của tiếng Tây Ban Nha là

  

    Example file input
    
  

80)

5

Đây là

  

    Example file input
    
  

81 đang hoạt động trên đầu vào tệp tùy chỉnh cho bản dịch tiếng Tây Ban Nha

6

Bạn sẽ cần đặt chính xác ngôn ngữ của tài liệu (hoặc cây con của tài liệu đó) để hiển thị đúng văn bản. Điều này có thể được thực hiện bằng cách sử dụng thuộc tính

  

    Example file input
    
  

82 trên phần tử hoặc tiêu đề HTTP

  

    Example file input
    
  

83, trong số các phương thức khác

Dịch hoặc tùy chỉnh các chuỗi bằng HTML

Bootstrap cũng cung cấp cách dịch văn bản “Duyệt qua” trong HTML bằng thuộc tính

  

    Example file input
    
  

84 có thể được thêm vào nhãn đầu vào tùy chỉnh (ví dụ bằng tiếng Hà Lan)