Phần 4: Văn bản trong Boostrap

05/12/2018 Nguyễn Văn Huynh

Trong bài này, chúng ta sẽ học đến cách thiết lập mặc định cho phong cách văn bản trong Bootstrap.

Kích thước font (font-size) mặc định là 14px, với độ giãn dòng (line-height) là 1.428 (10/7). Phong cách này áp dụng cho phần tử và tất cả các đoạn văn bản.

Tất cả phần tử p có lề dưới (margin-bottom) vằng 1/2 độ rộng dòng (line-height có 10px theo mặc định).

So sánh Bootstrap và các phong cách mặc định của trình duyệt

Phần này, chúng ta xem xét một vài phần tử HTML mà sẽ có đôi chút khác biệt khi dùng Bootstrap so với các mặc định trình duyệt.

Các phần tử h1, h2, h3, h4, h5 và h6: theo mặc định, Bootstrap sẽ có kích thước font chữ như sau:

 <div class="container">
  <h1>h1 Bootstrap heading (36px)</h1>
  <h2>h2 Bootstrap heading (30px)</h2>
  <h3>h3 Bootstrap heading (24px)</h3>
  <h4>h4 Bootstrap heading (18px)</h4>
  <h5>h5 Bootstrap heading (14px)</h5>
  <h6>h6 Bootstrap heading (12px)</h6>
</div>


Phần tử small: khi dùng phần tử này, đoạn văn bản có có kiểu chữ nhỏ và thanh hơn.

<div class="container">
  <h1>Lighter, Secondary Text</h1>
  <p>The small element is used to create a lighter, secondary text in any heading:</p>
  <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>


Phần tử mark: phần tử này giúp tô sáng các chữ trong 1 đoạn văn bản

<div class="container">
  <h1>Văn bản được tô sáng</h1>
  <p>Đây là đoạn văn được <mark>tô sáng</mark> khi dùng phần tử mark.</p>
</div>

Phần tử abbr: phần tử này sẽ gạch chân cụm từ và xác định cụm từ đó cụm từ viết tắt về mặt ngữ nghĩa.

<div class="container">
  <p>Cụm từ World Health Organization được viết tắt là <abbr title="World Health Organization">WHO</abbr>.</p>
</div>


Ngoài ra còn nhiều phần tử khác để định nghĩa cho văn bản như: blockquote, dl, code, kbd, pre, … các bạn tự tìm hiểu thêm nhé.

Các lớp định nghĩa màu chữ: một số lớp để định nghĩa màu chữ là .text-muted, .text-primary, .text-success, .text-info, .text-warning, và .text-danger.

<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

Các lớp định nghĩa màu nền: một số lớp để định nghĩa màu nền là .bg-primary, .bg-success, bg-info, bg-warning, và .bg-danger.

<div class="container">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide "meaning through colors":</p>
  <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
</div>

Các lớp định nghĩa phong cách văn bản khác
Một số các lớp khác dùng để định nghĩa phong cách cho đoạn văn bản như sau:

.lead: định nghĩa 1 đoạn văn bản nổi bật
.text-left: canh đoạn văn bản bên trái
.text-center: canh đoạn văn bản ở giữa
.text-right: canh đoạn văn bản bên phải
.text-justify: canh đều đoạn văn bản
.text-nowrap: đoạn văn bản không bị bao lại
.text-lowercase, .text-uppercase, .text-capitalize: đoạn văn bản in thường, in hoa, viết hoa chữ cái đầu
.list-inline: định nghĩa các phần tử của danh sách nằm trên 1 dòng

Qua bài viết này, các bạn đã nắm cách áp dụng các phần tử và các lớp để định nghĩa phong cách cho các đoạn văn bản trong Bootstrap.

 

Tag: bootstraptext

Đang phát triển ...

Bài viết liên quan

Phần 5. Màu sắc văn bản trong Bootstrap 4

Bootstrap 4 xây dựng sẵn những lớp cho phép chúng ta có thể dùng để định nghĩa “màu sắc” cho văn bản trong trang web.

Phần 3: Hệ thống lưới nâng cao Bootstrap

Trong phần này, các bạn tiếp tục tìm hiểu các lớp lưới khác trong Bootstrap để thực hiện việc phân vùng cho các giao diện phức tạp hơn.

Phần 2: Hệ thống lưới trong Bootstrap 4

Nội dung của phần này là về hệ thống lưới được sử dụng trong Bootstrap.

Phần 1: Giới thiệu Bootstrap 4

Bootstrap là 1 framework JavaScript, CSS và HTML miễn phí và phổ biến nhất trong việc thiết kế giao diện web đáp ứng trên di động.

CSS định nghĩa sẵn trong bootstrap 3

Chương này chúng ta sẽ đi tìm hiểu những css được định nghĩa sẵn trong BS và cách sử dụng chúng.

Cài đặt và sử dụng Bootstrap 3

Để sử dụng được bootstrap chúng ta cần cầu hình cài đặt đưa các file thư viện của bootstrap vào dự án web của chúng ta

Giới thiệu về bootstrap (BS)

Bootstrap là gì: bootstrap là  Html, css, js được xây dựng sẵn để sử dụng trong các dự án phát triển web, các trang web đáp ứng lại các kích thước màn hình hiển thị.a

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Cuộc tấn công vào NHS đã sử dụng một dạng ransomware có tên Wanacryptor và nhắm mục tiêu vào hàng nghìn tổ chức ở 74 quốc gia. Ransomware là một dạng tấn công mạng có liên quan đến việc các hacker nắm quyền kiểm soát máy tính hoặc thiết bị di động và yêu cầu đòi tiền chuộc. Bằng nhiều cách, những kẻ tấn công tải phần mềm độc hại vào thiết bị và mã hóa thông tin của nạn nhân.

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Trong Word nói riêng, Office nói chung, có lẽ ai cũng biết chức năng tìm kiếm và thay thế nội dung văn bản, nhưng ngoài ra, còn nhiểu chức năng khác trong hộp thoại tìm kiếm và thay thế mà không phải ai cũng biết để sử dụng. Trong đó có tìm kiếm và thay thế định dạng, sử dụng các ký hiệu đại diện, các ký tự đặc biệt… 

Bài 6: Thủ thuật outlook 2010

Bài 6: Thủ thuật outlook 2010

Bài viết giới thiệu đến các bạn một số thủ thuật được dùng trong outlook 2010, để giúp công việc của các bạn được dễ dàng hơn.

Bài 5: Quản lý các thông tin trong  outlook 2010

Bài 5: Quản lý các thông tin trong outlook 2010

Bài viết giới thiệu về phương pháp quản lý thông tinn trong outlook 2010. Chúng ta hãy cùng tìm hiểu xem có điểm gì khác và nổi bật so với outlook 2007

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Để công việc của đạt hiệu quả cao hơn, chúng ta hãy cùng nhau tìm hiểu cách sử dụng lịch làm việc một cách hiệu quả hơn trong outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài viết sau đây sẽ giới thiệu về mục quản lý hộp thư của bạn về dung lượng và lưu trữ trong microsoft outlook 2010.

Hàm SLEEP trong PHP

Hàm SLEEP trong PHP

Có những lúc trong công việc lập trình ta cần mã tạm dừng theo một thời gian định trước thì trong php có hỗ trợ hàm sleep để các bạn làm điều này.

Hàm Rand trong PHP

Hàm Rand trong PHP

Đôi lúc chúng ta lập trình cần đến những con số sinh ngẫu nhiên vào những công việc khách nhau hôm này mình xin giới thiệu với mọi người hàm sinh số ngẫu nhiên trong PHP

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Các bạn tự học PHP nên biết về lập trình hướng đối tượng trong PHP, kỹ thuật lập trình hỗ trợ công nghệ đối tượng

Bài 8: Hàm có sẵn thông dụng trong PHP

Bài 8: Hàm có sẵn thông dụng trong PHP

Hàm thông dụng trong php cần biết, các bạn mới bắt đầu lên nắm rõ ý nghĩa cấu trúc cách dùng những hàm này để bổ trợ kiến thức sau này

Bài 7: Hàm trong PHP

Bài 7: Hàm trong PHP

Hàm do người sử dụng định nghĩa cho phép bạn xử lý những tác vụ thường lặp đi lặp lại trong ứng dụng. cách khai báo, cú pháp của hàm trong php