Hướng dẫn và ví dụ tiện ích Bootstrap Text
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
text-justify-example
<h4>.text-justify</h4>
<p class="text-justify">
In my younger and more vulnerable years my father gave me some advice that
I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that you've had.'
</p>
text-alignment-example
<h4 class="mb-3">Text Alignment</h4>
<p class="text-left">(.text-left) Left aligned text.</p>
<p class="text-center">(.text-center) Center aligned text.</p>
<p class="text-right">(.text-right) Right aligned text.</p>
Các lớp khác có thể sử dụng trong tình huống "Responsive":
- text-left
- text-center
- text-right
- text-sm-left
- text-sm-center
- text-sm-right
- text-md-left
- text-md-center
- text-md-right
- text-lg-left
- text-lg-center
- text-lg-right
- text-xl-left
- text-xl-center
- text-xl-right
text-alignment-responsive-example
<h4 class="mb-3">Text Alignment</h4>
<p class="text-left text-sm-center text-md-right">
(.text-left .text-sm-center .text-md-right)
</p>
Wrapping là hiện tượng một phần nội dung của văn bản bị đẩy xuống các dòng dưới nếu độ dài của văn bản lớn hơn chiều rộng của phần tử cha.
text-wrapping-example
<h4>Text Wrapping</h4>
<div class="border border-danger">
Bootstrap is a free and open-source front-end framework.
</div>
Áp dụng lớp .text-nowrap cho phần tử cha để loại bỏ hiện tượng wrapping, nhưng bạn sẽ nhìn thấy hiện tượng văn bản bị tràn (overflow) ra ngoài phần tử cha.
text-nowrap-example
<h4 class="mb-4">.text-nowrap</h4>
<div class="text-nowrap border border-danger">
Bootstrap is a free and open-source front-end framework.
</div>
Để tránh nội dung văn bản tràn ra ngoài phần tử cha bạn có thể dùng lớp .text-truncate để áp dụng cho phần tử cha, phần nội dung tràn ra bên ngoài sẽ bị ẩn đi và xuất hiện 3 dấu chấm (...) ở cuối văn bản.
Lớp .text-truncate chỉ áp dụng được cho các phần tử được thiết lập {display:block} hoặc {display:inline-block}. Chú ý: <div>,<p> mặc định được thiết lập {display:block}.
text-truncate-example
<h4 class="mb-4">.text-truncate</h4>
<div class="text-truncate border border-danger">
Bootstrap is a free and open-source front-end framework.
</div>
Bootstrap cung cấp một vài lớp để chuyển đổi (transform) văn bản.
| Lớp | Mô tả |
| .text-lowercase | Chuyển đổi (transform) văn bản thành chữ thường (lowercase). |
| .text-uppercase | Chuyển đổi văn bản thành chữ hoa (uppercase). |
| .text-capitalize | Tất cả các ký tự đầu tiên trong mỗi chữ sẽ thành ký tự chữ hoa, còn các ký tự khác không thay đổi. |
text-transform-example
<h4 class="mb-3">Origin Text:</h4>
<p>bootSTrap teXt</p>
<hr>
<h5>.text-lowercase</h5>
<p class="text-lowercase">bootSTrap teXt</p>
<h5>.text-uppercase</h5>
<p class="text-uppercase">bootSTrap teXt</p>
<h5>.text-capitalize</h5>
<p class="text-capitalize">bootSTrap teXt</p>
Để thiết lập trọng lượng (weight) và kiểu dáng nghiêng (italic style) cho văn bản trong CSS bạn sử dụng các cách dưới đây:
font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-style: normal;
font-style: italic;
font-style:oblique;
Thay vì sử dụng các Css property nói trên, bạn có thể sử dụng các lớp được xây dựng sẵn của Bootstrap:
- .font-weight-bold
- .font-weight-normal
- .font-weight-light
- .font-italic
font-weight-italic-example
<h4 class="mb-3">Font weight, italic</h4>
<p class="font-weight-bold">(.font-weight-bold) Bold text.</p>
<p class="font-weight-normal">(.font-weight-normal) Normal weight text.</p>
<p class="font-weight-light">(.font-weight-light) Light weight text.</p>
<p class="font-italic">(.font-italic) Italic text.</p>
Monospaced Font: Là font chữ mà mỗi ký tự (character) đều có chiều dài theo phương nằm ngang như nhau. Nó giống với hình minh họa dưới đây:
Sử dụng Monospace Font với CSS:
font-family: monospace;
Sử dụng Monospace Font với Bootstrap:
text-monospace-example.html
<div style="font-size:32px;">Default Font</div>
<div class="text-monospace" style="font-size:32px;">Monospace Font</div>
*
