Mỗi phần tử HTML có một giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó là gì. Giá trị hiển thị mặc định cho hầu hết các phần tử là
6 hoặcimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
7import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Nhấp để hiển thị bảng điều khiển
Bảng điều khiển này chứa một
phần tử, được ẩn theo mặc định [
8]import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Nó được tạo kiểu bằng CSS và chúng tôi sử dụng JavaScript để hiển thị nó [đổi thành [
9]import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Phần tử cấp khối
Phần tử cấp khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn [kéo dài sang trái và phải hết mức có thể]
Các
phần tử là phần tử cấp khối
Ví dụ về các phần tử cấp khối
- -
Yếu tố nội tuyến
Phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết
Đây là phần tử nội tuyến bên trong một đoạn văn.
Ví dụ về các yếu tố nội tuyến
Trưng bày. không ai;
0 thường được sử dụng với JavaScript để ẩn và hiển thị các phần tử mà không xóa và tạo lại chúng. Hãy xem ví dụ cuối cùng của chúng tôi trên trang này nếu bạn muốn biết làm thế nào để đạt được điều nàyimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Đó là nó từ hướng dẫn này. Bạn có thể tiếp tục học hỏi điều này và thay vì chỉ đóng phương thức, bạn có thể thực hiện những việc khác như chuyển các giá trị biểu mẫu tới máy chủ của mình, thêm chức năng theo dõi, v.v. Là nhà phát triển JavaScript, bạn phải hiểu cách sử dụng lệnh gọi lại và bổ sung các chức năng bổ sung thay vì hành vi mặc định—trong trường hợp này là đóng phương thức khi gửi biểu mẫu
Mỗi khi nhấp vào phần tử nút, giá trị boolean
1 được bật, nhưng điều này có thể được kích hoạt theo bất kỳ cách nào khácimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Lưu ý rằng chúng tôi đã chuyển một chức năng cho
2. Điều này rất quan trọng, bởi vì hàm mà chúng ta đã chuyển đếnimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
2 được đảm bảo sẽ được gọi với giá trị hiện tại [cập nhật nhất] của booleanimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
1import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Nếu trạng thái mới được tính bằng trạng thái trước đó, bạn có thể chuyển một hàm tới
5import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Thuộc tính
6 của chỗ dựaimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
7 của phần tửimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
82 được thiết lập có điều kiện bằng cách sử dụng toán tử bậc baimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Toán tử bậc ba rất giống với câu lệnh
83import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Nếu giá trị bên trái dấu chấm hỏi là true, toán tử trả về giá trị bên trái dấu hai chấm, ngược lại trả về giá trị bên phải dấu hai chấm
Nếu biến trạng thái
1 lưu trữ giá trị trung thực, chúng tôi đặt thuộc tínhimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
6 thànhimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
86. Mặt khác, nó được đặt thànhimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
8import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Cách tiếp cận tương tự cũng có thể được sử dụng nếu bạn dựa vào việc đặt tên lớp cho kiểu dáng của mình
Và đây là
88 định nghĩa các lớpimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
89 vàimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
60import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
.display-block {
display: block;
}
.display-none {
display: none;
}
Đoạn mã trên đạt được kết quả tương tự khi sử dụng các lớp thay vì prop57
Nếu phần tử bạn đang đặt lớp cũng có các lớp khác nhau, hãy sử dụng chuỗi mẫu
Cú pháp dấu ngoặc nhọn đô la cho phép chúng tôi đánh giá một biểu thức trực tiếp trong chuỗi mẫu
Hệ thống lưới của Bootstrap sử dụng một loạt các vùng chứa, hàng và cột để bố trí và căn chỉnh nội dung. Nó được xây dựng với flexbox và hoàn toàn đáp ứng. Dưới đây là một ví dụ và một cái nhìn sâu sắc về cách lưới kết hợp với nhau
Mới hoặc chưa quen với flexbox?
Thùng đựng hàng#
Vùng chứa cung cấp phương tiện để căn giữa và đệm theo chiều ngang cho nội dung trang web của bạn. Sử dụng
3 để có chiều rộng pixel đáp ứngimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample[] {
export default ContainerExample;
Thùng chứa chất lỏng #
Bạn có thể sử dụng
4 cho chiều rộng. 100% trên tất cả các kích thước khung nhìn và thiết bịimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Bạn có thể đặt điểm dừng cho giá đỡ
5. Đặt nó thành điểm dừng [import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
6] sẽ đặtimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
3 ở dạng linh hoạt cho đến điểm dừng được chỉ địnhimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
________số 8
Cột tự động bố trí #
Khi không có độ rộng cột nào được chỉ định, thành phần
8 sẽ hiển thị các cột có độ rộng bằng nhauimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
0import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Đặt chiều rộng một cột#
Bố cục tự động cho các cột lưới flexbox cũng có nghĩa là bạn có thể đặt chiều rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh cột đó. Bạn có thể sử dụng các lớp lưới được xác định trước [như được hiển thị bên dưới], hỗn hợp lưới hoặc độ rộng nội tuyến. Lưu ý rằng các cột khác sẽ thay đổi kích thước bất kể chiều rộng của cột trung tâm
1import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Nội dung chiều rộng thay đổi #
Đặt giá trị cột [cho bất kỳ kích thước điểm dừng nào] thành
9 để định kích thước cột dựa trên chiều rộng tự nhiên của nội dung của chúngimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
3import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Lưới đáp ứng #
8 cho phép bạn chỉ định độ rộng cột trên 6 kích thước điểm ngắt [xs, sm, md, lg, xl và xxl]. Đối với mỗi điểm ngắt, bạn có thể chỉ định số lượng cột cần mở rộng hoặc đặt giá đỡ thành độ rộng bố cục tự độngimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
5import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Bạn cũng có thể trộn và kết hợp các điểm dừng để tạo các lưới khác nhau tùy thuộc vào kích thước màn hình
6import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Props
8 breakpoint cũng có dạng propimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
2 phức tạp hơn.import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample[] {
export default ContainerFluidBreakpointExample;
3 để chỉ định độ lệch và hiệu ứng đặt hàngimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample[] {
export default ContainerFluidBreakpointExample;
Bạn có thể sử dụng thuộc tính
4 để kiểm soát thứ tự trực quan của nội dung của mìnhimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample[] {
export default ContainerFluidBreakpointExample;
1import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample[] {
export default ContainerExample;
Thuộc tính
4 cũng hỗ trợimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample[] {
export default ContainerFluidBreakpointExample;
6 [______87] vàimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample[] {
export default ContainerFluidBreakpointExample;
8 [import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample[] {
export default ContainerFluidBreakpointExample;
9]import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample[] {
export default ContainerFluidBreakpointExample;
7import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample[] {
export default ContainerExample;
Để bù trừ các cột lưới, bạn có thể đặt giá trị
00 hoặc để có bố cục tổng quát hơn, hãy sử dụng các tiện ích của lớp lềimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
0import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Đặt độ rộng cột trong Row#
01 cho phép bạn chỉ định độ rộng cột trên 6 kích thước điểm ngắt [xs, sm, md, lg, xl và xxl]. Đối với mỗi điểm dừng, bạn có thể chỉ định số lượng cột sẽ khớp với nhau. Bạn cũng có thể chỉ địnhimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
9 để đặt các cột thành chiều rộng tự nhiên của chúngimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
1import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Lưu ý rằng chiều rộng cột
01 sẽ ghi đè chiều rộngimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
8 được đặt trên các điểm dừng thấp hơn khi xem trên màn hình lớn hơn. Kích thước sẽ bị ghi đè bởiimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
4 trên màn hình trung bình và lớn hơnimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
2import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
API #
06Sao chép mã nhập cho thành phần Vùng chứaimport Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
TênLoạiMặc địnhMô tả
Bạn có thể sử dụng một yếu tố tùy chỉnh cho thành phần này
dịch07.import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
08.import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
09.import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
10.import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
11.import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
12import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
13import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Cho phép Vùng chứa lấp đầy tất cả không gian ngang có sẵn của nó
bsPrefix14import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample[] {
export default ContainerFluidExample;
Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp sửa đổi. Đây là một lối thoát để làm việc với css bootstrap được tùy chỉnh nhiều