Đào tạo Tin học Trực tuyến

Xử lý text với Typography trong Bootstrap 4 CSS FrameWork


Cập nhật: 4 tháng trước
Bài viết ngẫu nhiên:

   Xử lý hình ảnh (images) với Bootstrap CSS FrameWork phiên bản 4.x

   Xây dựng Website tin tức bằng PHP và MySql theo phương pháp lập trình hướng đối tượng (mysqli Object Oriented)

   Lấy ảnh đầu tiên trong bản tin làm ảnh đại diện với PHP

   Xây dựng, Thiết kế giao diện Website 2 cột MenuTop Banner bằng BootStrap CSS FrameWork

   Hướng dẫn cài đặt Wamp Server, cấu hình chạy PHP và MySql

   Lập trình C# cơ bản: Bài 7. Lớp, đối tượng và phương thức


Trong thiết kế web, xử lý text là một nội dung giữ vai trò hết sức quan trọng. Ở đây, Bootstrap 4 đã cung cấp cho chúng ta một thư viện Class xử lý Text cũng như định dạng sẵn một số thẻ thường xuyên sử dụng trong thiết kế. Xem chi tiết trong nội dung dưới đây:

          Bootstrap 4 sử dụng font-size mặc định là 1 rem (16px) và line-height là 1.5; font chữ mặc định là "Helvetica Neue", Helvetica, Arial, sans-serif. Ngoài ra, tất cả các thẻ <p> có margin-top là 0 và margin-bottom là 1 rem (16px).

          Tương tự bootstrap 3, bootstrap 4 hỗ trợ các thẻ h1 cho đến h6. Ngoài các thẻ này, nếu bạn có ý định thiết kế font chữ to hơn thì có thể sử dụng các class .display-1 cho đến display-4. Ngoài ra, trong cặp thẻ heading, bạn có thể sử dụng cặp thẻ <small> để thiết kế font chữ lồng bé hơn.

          Ngoài các thẻ heading và các class .display bootstrap cung cấp một hệ thống xử lý văn bản khá hữu ích. Cụ thể là:

          <mark> định dạng text với nền màu vàng

          <abbr> định dạng text có border-bottom

          <blockquote> thể hiện trích dẫn của một nguồn nào đó, bao gồm .blockquote (nội dung trích dẫn) và .blockquote-footer (tên tác giả).

          Nếu cần hiển thị một danh sách, bạn có thể sử dụng thẻ danh sách bao gồm:

          <dl> → <dd> và <dt>

          <code> định dạng dòng code với viền màu xám và text màu đỏ

          <kbd> định dạng đoạn text với nền đen bo tròn góc với phần text màu trắng

          <pre> định dạng cả một đoạn code dài gồm nhiều dòng.

          Hệ thống class định dạng font:

          .font-weight-bold   Font chữ đậm        

.font-weight-normal         Font chữ bình thường     

.font-weight-light   Tạo đoạn văn có màu chữ sáng hơn         

.font-italic    Font chữ nghiêng  

.lead  Làm nổi bật đoạn văn bản         

.small Indicates      Font chữ nhỏ hơn (khoảng 85%)         

.text-left       Căn trái       

.text-center   Căn giữa     

.text-right     Định dạng phải     

.text-justify   Căn đều hai bên    

.text-nowrap Indicates no wrap text     

.text-lowercase       Chuyển văn bản về dạng chữ thường

.text-uppercase       Chuyển văn bản sang dạng chữ in hoa    

.text-capitalize       Văn bản có chữ in hoa chữ cái đầu ở tất cả các từ

.initialism    Dạng thẻ <abbr> văn bản chuyển sang chữ in hoa nhỏ hơn      

.list-unstyled          Loại bỏ kiểu danh sách mặc định         

.list-inline    Đặt tất cả các mục danh sách trên một dòng (được sử dụng cùng với .list-inline-item trên mỗi phần tử <li>)       

.pre-scrollable       Văn bản trong cặp thẻ <pre></pre> có thể cuộn được

Xem thêm

   Bạn sẽ chọn ngành nào phù hợp với lĩnh vực Công nghệ Thông tin?

   Bạn hiểu thế nào là nghề lập trình? để bước vào nghề lập trình thì phải học những gì?

   Lập trình máy tính là gì? Các ngôn ngữ lập trình, phát triển phần mềm

   Tại sao bạn phải hiểu và có kỹ năng về lập trình hướng đối tượng?

   Xử lý hình ảnh (images) với Bootstrap CSS FrameWork phiên bản 4.x

   Để học lập trình bạn nên lựa chọn ngôn ngữ lập trình nào?

   Top 25 bài giảng có số lượt xem cao nhất thời điểm hiện tại

   Có gì khác biệt giữa HTML và HTML5?

   5 yếu tố quan trọng của định hướng thị giác trong thiết kế web

   Một số thẻ và Type quan trọng với HTML5 cần chú ý trong quá trình thiết kế website

   Bootstrap 4.0: Bài 2. Thiết lập hệ thống lưới Grid System

   Bootstrap 4.0: Bài 1. Giới thiệu và các thiết lập cơ bản về công cụ, css, javascript

   Laravel 5.6: Thiết kế trang đăng ký người dùng

Xem nhiều nhất

   Giáo trình hướng dẫn Microsoft PowerPoint 2016 từ cơ bản đến nâng cao

   Hệ thống bài giảng e-Learning lớp Ứng dụng CNTT và các phần mềm vào đổi mới phương pháp dạy và học

   Thực hành biên tập, thiết kế, chỉnh sửa Videos bằng Adobe Premiere

   Thiết lập hiệu ứng trống đồng quay trong Microsoft PowerPoint

   Xây dựng Website tin tức bằng PHP và MySql theo phương pháp lập trình hướng đối tượng (mysqli Object Oriented)

   Thực hành sử dụng phần mềm thiết kế đồ họa Adobe Illustrator

   Trọn bộ Giáo trình Microsoft Word 2016 từ cơ bản đến nâng cao

   Tạo câu hỏi trắc nghiệm với siêu liên kết (hyperlink) và Trigger với PowerPoint 2016

   Cài đặt và sử dụng tính năng mới của Office 365 trên Office 2016

   Hướng dẫn thu âm, chỉnh sửa âm thanh, tăng giảm tone nhạc bằng phần mềm Adobe Audition CC

   Bài giảng Microsoft PowerPoint 2013 và 2016 từ cơ bản đến nâng cao

   Thiết kế trò chơi ô chữ trong powerpoint (download miễn phí)

   Dòng chữ chạy liên tục từ trái qua phải và đồng hồ đếm ngược trong PowerPoint

   Thực hành sử dụng phần mềm thiết kế đồ họa Corel Draw

   Full Download phần mềm biên soạn bài giảng e-Learning iSpring Sute phiên bản 8.1

   Ghép ảnh đôi bàn tay nâng bong bóng có ghép hình ảnh với Adobe PhotoShop CC