Tổng quan Bootstrap 4.1

Tiêu đề này dùng .display-2 ngoài ra còn có thể dùng .display-1 .display-3 .display-4


bootstrap

Bootstrap là một Framework CSS, mã nguồn SASS/CSS cung cấp tại Bootstrap Git, bạn có thể clone về và phát triển - tùy biến - xây dựng theme. Ở cấp độ sử dụng thông thường thì có thể tải về ngay Bootstrap đã biên dịch CSS về (Download Bootstrap). Sau đó tích hợp vào trang muốn sử dụng. Ngoài ra bạn cũng cần tải jQuery để các JS của Bootstrap hoạt động

Đoạn mã cơ bản tích hợp Bootstrap vào trang (HTML)

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

Hộp giới thiệu này đang sử dụng Jumbotron

Layout/Grid .row .col-# .col-{breakpoint}-#

Kích thước màn hình trong Bootstrap chi thành các loại sm md lg xl gọi chúng là breakpoint

Layout cơ bản xây dựng với hệ lưới gồm các hàng và cột, chúng được tạo ra từ .container, .row, .col-*

Cột 3

Tiện ích cơ bản, màu sắc, căn lề, vị trí, hiện thị

Các thành phần sử dụng có liên quan đến màu sắc như (.bg-*), màu chữ (.text-*), các button (.btn btn-*) ... sử dụng với hậu tố có tên primary, secondary, success, info, warning, danger, light, dark

Ví dụ màu chữ : .text-primary .text-secondary .text-success .text-info .text-warning .text-danger .text-light .text-dark

Ví dụ màu nền : .bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-light .bg-dark


Breadcrumb .breadcrumb .breadcrumb-item

Pagination .pagination .page-item

Nav và Tab .nav .nav-item .nav-link

Nội dung Tab1 - HTML code
Nội dung Tab2 - HTML code
Nội dung Tab3 - HTML code
Nội dung Tab1 - HTML code
Nội dung Tab2 - HTML code
Nội dung Tab3 - HTML code

Navbar .navbar


Badge - Nhãn badge badge-*

1 2 3 4 5 6 7 8
1 2 3 4 5 6 7 8

Button btn btn-* - Button Group .btn-group


Card .card .card-deck .card-group

Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm

Collapse .collapse

Nội dung hiện thị !

DropDown .dropdown .dropdown-menu


Alert .alert

List Group .list-group

  • Phần tử 1
  • Phần tử 2 | active
  • Phần tử 3 | disabled
  • Phần tử 4 | list-group-item-danger
  • Phần tử 5 21
  • Phần tử 3
  • List group item heading
    3 days ago

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

    Donec id elit non mi porta.

Progress .progress .progress-bar

Form

Carousel - Slides


Popover


Tooltip


Media .media .media-body

Nguyễn Thu Hà

Media là gì, cách sử dụng Media như thế nào?

Xuan Thu - Lab

Đọc nội dung bài viết này nhé: Đối tượng Media

Modal Dialog .modal