Login

Học Bootstrap 4

  Trang Chủ / Tin tức / Học Bootstrap 4

Văn bản (Text/Typography) trong Boostrap 4

Trong bài trước chúng ta đã học về Grid system của Bootstrap, trong bài này, chúng ta cùng đến tiếp với văn bản (text, typography) trong bootstrap 4

Thiết lập mặc định văn bản thẻ <p> trong Bootstrap 4

Bootstrap 4 quy định sử dụng font chữ mặc định trên website có kích thước font-size là 16px, với chiều cao dòng là 1.5. Kiểu chữ mặc định là “Helvetica Neue”, Helvetica, Arial, Sans-Serif. Tất cả các phần tử <p> đều có margin-top: 0 và margin-bottom: 1rem (1rem = 16px).

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

Các thẻ Heading H1 đến H6

Bootstrap 4 quy định cho các thẻ tiêu đề (từ H1 đến H6) như sau:

h1, .h1 {
  font-size: 2.5rem; /*40px*/
}
 
h2, .h2 {
  font-size: 2rem; /*32px*/
}
 
h3, .h3 {
  font-size: 1.75rem; /*28px*/
}
 
h4, .h4 {
  font-size: 1.5rem; /*24px*/
}
 
h5, .h5 {
  font-size: 1.25rem; /*20px*/
}
 
h6, .h6 {
  font-size: 1rem; /*16px*/
}

Tiêu đề display

Các tiêu đề display mở rộng tính phong phú cho các tiêu đề thông thường với font chữ lớn hơn và có độ đậm font chữ hơn.

Có 4 class display để lập trình viên có thể lựa chọn, như sau:

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}
 
.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}
 
.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}
 
.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

Các phần tử HTML định dạng trong Bootstrap

Thẻ <small>

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

Trong Bootstrap 4, phần tử <small> dùng để tạo bất cứ tiêu đề phụ với font nhạt hơn. Bạn có thể xem ví dụ sau để cảm nhận sự thay đổi.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap 4</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">     
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
</div>
 
</body>
</html>

 

Phần tử <mark>

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

Phần tử mark dùng để đánh dấu văn bản với nền nhạt, giống kiểu highlight cho phần cần đánh dấu.

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Đánh dấu văn bản</h1> 
  <p>Đây là cách <mark>highlight</mark> văn bản phần quan trọng.</p>
</div>
</body>
</html>

 

Phần tử <abbr>

Phần tử <abbr> dùng để định nghĩa cụm từ viết tắt với đường gạch chân chấm.

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Viết tắt</h1>
  <p>Phần tử abbr dùng để đánh dấu từ viết tắt</p>
  <p>Từ viết tắt <abbr title="World Health Organization">WHO</abbr> có nghĩa là Tổ chức Y tế Thế giới.</p>
</div>
</body>
</html>

 

Phần tử blockquote

Phần tử này dùng để tạo 1 đoạn trích dẫn nội dung từ một nguồn nào đó.

Trong Bootstrap 4 quy định CSS như sau:

blockquote {
  margin: 0 0 1rem;
}
<div class="container">
  <h1>Trích dẫn</h1>
  <blockquote class="blockquote">
    <p>Trang web baobinh.net với kho dữ liệu khổng lồ về lập trình Web, thiết kế Web và nhiều thứ khác</p>
  <blockquote>
</div>

Phần tử dl, dt

Hai phần tử này dùng để liệt kê danh sách.

Bootstrap 4 quy định CSS như sau:

dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
dt {
  font-weight: 700;
}

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>
</body>
</html>


Ngoài ra còn có phần tử kbd và pre dùng để định dạng văn bản mà bạn có thể tự tìm hiểu thêm. Bootstrap 4 quy định như sau:
 

kbd {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}
 
pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

Các class định nghĩa văn bản

Bootstrap 4 chứa một số class mẫu khác dùng để định nghĩa văn bản sau đây.

  • .font-weight-bold: in đậm
  • .font-italic: in nghiêng
  • .font-weight-light: in nhạt
  • .font-weight-normal: in bình thường
  • .lead: làm văn bản nổi bật
  • .small: chữ nhỏ (85% bình thường)
  • .text-left, .text-center:, .text-right canh trái, canh giữa, canh phải
  • .text-*-left, .text-*-center, .text-*-right: canh trái, canh giữa, canh phải tùy theo màn hình small, medium, large hay xlarge.
  • .text-monospace: văn bản khoảng trống đơn
  • .text-nowrap: văn bản không bao
  • .text-lowercase, .text-uppercase, .text-capitalize: văn bản thường, văn bản hoa chữ đầu, văn bản in hoa
  • .text-justify: căn đều
.font-weight-light {
  font-weight: 300 !important;
}
 
.font-weight-normal {
  font-weight: 400 !important;
}
 
.font-weight-bold {
  font-weight: 700 !important;
}
 
.font-italic {
  font-style: italic !important;
}
 
.lead {
  font-size: 1.25rem;
  font-weight: 300;
}
 
.small {
  font-size: 80%;
  font-weight: 400;
}
.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
 
.text-justify {
  text-align: justify !important;
}
 
.text-nowrap {
  white-space: nowrap !important;
}
 
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.text-left {
  text-align: left !important;
}
 
.text-right {
  text-align: right !important;
}
 
.text-center {
  text-align: center !important;
}
 
@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}
 
@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
 
@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
 
@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}
 
.text-lowercase {
  text-transform: lowercase !important;
}
 
.text-uppercase {
  text-transform: uppercase !important;
}
 
.text-capitalize {
  text-transform: capitalize !important;
}


Riêng phần text và typography này có tương đối nhiều class, nên các bạn cần phải học được càng nhiều càng tốt để áp dụng vào công việc của mình.

Kết luận

Bài học này giúp bạn tìm hiểu một số cách định dạng văn bản, kiểu chữ bằng Bootstrap 4 thông qua các ví dụ. Chúng ta sẽ gặp lại nhau ở bài học tiếp theo trong series này.

bootstrap bootstrap 4 văn bản trong bootstrap text bootstrap typography bootstrap

Danh Mục Lập Trình

Baobinh.net
TIN LIÊN QUAN
DANH MỤC GIAO DIỆN

Bài viết ngẫu nhiên

Danh mục lập trình