Bootstrap padding là một trong những tiện ích cần thiết để tạo khoảng trống giữa nội dung và vùng chứa. Đây là một thành phần thiết kế để tạo khoảng trống bên trong vùng chứa hoặc đường viền bằng cách sử dụng lớp bootstrap. Đây là một tiện ích nâng cao để sửa đổi các phần tử và vùng chứa của chúng bằng cách sử dụng các thuộc tính kích thước không gian và không gian. Nó dùng để tạo khoảng trống trong nội dung của ứng dụng web và đường viền của nó
cú pháp
Bắt đầu khóa học phát triển phần mềm miễn phí của bạn
Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác
- Phần đệm bootstrap với tất cả các bên và cú pháp kích thước bên dưới
{Property}-{Size}
- Bootstrap Padding với kích thước 1
- Lớp “p” được sử dụng cho phần đệm bootstrap và p là từ viết tắt của phần đệm
- Kích thước 1 được sử dụng cho không gian 4px khi kích thước phông chữ là 16px
- Phần đệm với cú pháp kích thước và cạnh cụ thể bên dưới
{Property}{Sides}-{Size}
- Bootstrap top Padding với size3
- Chữ “t” được sử dụng cho mặt trên của khoảng cách trong vùng chứa
- Kích thước 3 được sử dụng cho không gian 16px khi kích thước phông chữ là 16px
- Phần đệm với một cú pháp bên, điểm dừng và kích thước cụ thể bên dưới
{Property}{Sides}-{Breakpoint}-{Size}
- Đệm top bootstrap đáp ứng với size2
- Điểm ngắt tạo phần đệm đáp ứng trong ứng dụng web
- Điểm ngắt “sm” hoạt động cho các thiết bị có kích thước màn hình bằng và lớn hơn 576px
- "B" hoạt động cho phía dưới cùng của khoảng cách trong vùng chứa
- Kích thước 2 được sử dụng cho không gian 8px khi kích thước phông chữ là 16px
Padding hoạt động như thế nào trong Bootstrap?
Các tệp hỗ trợ bootstrap được thêm vào phần đầu của trang HTML
Mã số
The container and their elements placed in the HTML page using
Mã số
responsive bootstrap top Padding with size2
The syntax placed in the
bootstrap Padding with size 1
responsive bootstrap top Padding with size2
Quy trình làm việc dưới đây
Gói phát triển phần mềm tất cả trong một[hơn 600 khóa học, hơn 50 dự án]
Giá bán
Xem các khóa học
Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 [86.130 xếp hạng]
Mã số
Bootstrap padding Example
Bootstrap Padding Example
bootstrap Padding with size 1
responsive bootstrap top Padding with size2
ví dụ
Dưới đây là các ví dụ khác nhau
Ví dụ 1. với kích thước
Mã số
________số 8_______đầu ra
Sự miêu tả
- Kích thước 4 được sử dụng cho không gian 24px khi kích thước phông chữ là 16px
- Kích thước e5 được sử dụng cho không gian 48px khi kích thước phông chữ là 16px
- Kích thước đệm âm không áp dụng
Ví dụ #2. có mặt
Mã số
Bootstrap padding Example
Bootstrap Padding Example with Sides
Bootstrap Padding with top side
Bootstrap Padding with bottom side
Bootstrap Padding with left side
Bootstrap Padding with right side
Bootstrap Padding with horizontal side
Bootstrap Padding with vertical side
đầu ra
Sự miêu tả
- px được sử dụng cho phần đệm ngang được điều chỉnh bên trái và bên phải
- Py hoạt động cho phần đệm dọc, điều chỉnh mặt trên và mặt dưới
Ví dụ #3. Với điểm dừng
Mã số
{Property}{Sides}-{Size}
0đầu ra
Sự miêu tả
- Điểm dừng xs nhỏ hơn màn hình thiết bị 576px có nghĩa là không cần bất kỳ điểm dừng nào
- sm, md, lg, xl có bốn điểm dừng chính theo kích thước màn hình thiết bị
- Điểm ngắt tạo phần đệm đáp ứng của ứng dụng web
Ví dụ #4
Mã số
{Property}{Sides}-{Size}
1đầu ra
Phần kết luận
- Đây là một tiện ích hữu ích trong ứng dụng web cho mục đích thiết kế và giãn cách
- Nó tạo ra một ứng dụng web hấp dẫn, thân thiện với người dùng bằng cách sử dụng lớp đệm
- Nó là một thành phần thiết yếu để làm cho các phần tử và đường viền của chúng được sắp xếp và dễ hiểu
Bài viết được đề xuất
Đây là hướng dẫn về Bootstrap Padding. Ở đây chúng tôi thảo luận về định nghĩa, Cách thức hoạt động của phần đệm trong Bootstrap và các ví dụ về triển khai mã tương ứng. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –