Trung tâm phản ứng-bootstrap theo chiều ngang

Tại W3Schools, bạn sẽ tìm thấy một tài liệu tham khảo Bootstrap đầy đủ về tất cả các lớp CSS, Thành phần và plugin JavaScript - tất cả đều có các ví dụ "Tự dùng thử"

Bootstrap Chủ đề / Mẫu

Chúng tôi đã tạo một số Mẫu Bootstrap mà bạn có thể sử dụng. Chúng hoàn toàn miễn phí để sử dụng

Bootstrap 5 so với. Bootstrap 3 & 4

Hướng dẫn này tuân theo Bootstrap 3, được phát hành vào năm 2013. Tuy nhiên, chúng tôi cũng bao gồm các phiên bản mới hơn;

Bootstrap 5 là phiên bản mới nhất của Bootstrap; . Nó hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ

Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery

Ghi chú. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng

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

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 ContainerExample() {
export default ContainerExample;

bình chứa chất lỏng

Bạn có thể sử 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;

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á đỡ

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;

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 ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

Tự động bố trí cột

Khi không có độ rộng cột nào được chỉ định, thành phần

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 AutoLayoutExample() {
export default AutoLayoutExample;

Đặ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

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

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

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 ContainerExample() {
export default ContainerExample;

lưới đáp ứng

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 ContainerExample() {
export default ContainerExample;

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

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

Props

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 ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

Bạn có thể sử dụng thuộc tính

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

Tài sản

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
export default ContainerFluidBreakpointExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

Để bù trừ các cột lưới, bạn có thể đặt giá trị

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

import 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 Hàng

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

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;

Lưu ý rằng chiều rộng của cột

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

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;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
export default ContainerFluidExample;

API

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

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

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
export default AutoLayoutExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

Cho phép Vùng chứa lấp đầy tất cả không gian ngang có sẵn của nó

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
export default ContainerExample;

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 hiểm để làm việc với css bootstrap được tùy chỉnh nhiều