Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Bootstrap Inputs – bootstrap bài 2

5/5 - (7 bình chọn)

Bootstrap inputs, ở bài trước chúng ta đã cùng nhau tìm hiểu những thẻ đầu vào (input) nào được bootstrap hỗ trợ và cách những thẻ đầu vào hiển thị ra ngoài màn hình.

Xem thêm: Bootstrap Inputs bootstrap (phần 1)

Trong bài này chúng ta sẽ tìm hiểu nhiều hơn về các lớp (class) trong bootstrap input, những lớp này sẽ giúp bạn dễ dàng tùy chỉnh hơn các thành phần trong form mà không cần phải tốn nhiều công sức style cho nó.

  1. Bootstrap Input Groups
  • Lớp .input-group là một vùng chứa để tăng cường đầu vào bằng cách thêm một biểu tượng (icon), văn bản (text) hoặc một nút (button) ở phía trước hoặc sau nó như một văn bản trợ giúp.
  • Lớp .input-group-addon giúp thêm một biểu tượng hoặc văn bản trợ giúp bên cạnh trường nhập liệu.

Ví dụ khi chưa thêm các lớp .input-group và .input-group-addon

Bootstrap Inputs – bootstrap bài 2 01-1024x460

Ví dụ khi thêm các lớp .input-group và .input-group-addon

Bootstrap Inputs – bootstrap bài 2 2-1

Bạn có thể đặt biểu tượng, văn bản hay một nút ở bên phải của phần tử đầu vào

Bootstrap Inputs – bootstrap bài 2 03-1024x280

  • Lớp .input-group-btn giúp thêm một nút (button) bên cạnh phần tử đầu vào (input). Lớp này thường được sử dụng cùng với thanh tìm kiếm

Bootstrap Inputs – bootstrap bài 2 05

Bootstrap Inputs – bootstrap bài 2 06-1024x229

  1. Bootstrap Input Sizing
  • Chỉnh sửa nhanh chóng kích thước các yếu tố đầu vào bằng cách thêm lớp phù hợp: .input-group-lg và .input-group-sm

Bootstrap Inputs – bootstrap bài 2 04

  • Đặt chiều cao của các yếu tố đầu vào sử dụng các lớp như .input-lg và .input-sm

Bootstrap Inputs – bootstrap bài 2 07

  • Trong những bài đầu tiên về bootstrap chúng ta đã tìm hiểu về hệ thống lưới trong bootstrap (bootstrap grid). Đó là một trong những bài rất quan trọng, vì hệ thống lưới được sử dụng rất thường xuyên, bạn cần tìm hiểu kỹ về nó. Và trong bài này, hệ thống lưới được sử dụng để thiết lập chiều rộng của các phần tử: .col-lg-* , col-md-* , col-sm-* và col-xs-*

Xem thêm: Bootstrap Grid System: Hệ thống lưới trong bootstrap

Ví dụ dưới sử dụng các lớp khác nhau .col-md-* để điều chỉnh độ rộng của các phần tử:

Bootstrap Inputs – bootstrap bài 2 08

Tổng Kết

Qua bài này chúng ta đã biết thêm cách thêm các biểu tượng hoặc văn bản trợ giúp vào trước hoặc sau trường nhập liệu, chỉnh sửa kích thước trường nhập liệu một cách nhanh chóng và dễ dàng tùy chỉnh.

Xem thêm: Dịch vụ Tối ưu Website

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Tìm từ khóa không bao giờ là một nhiệm vụ dễ dàng ngay cả đối với các chuyên gia SEO! Nếu...
    19 giây trước
  2. Hầu hết các công cụ soạn thảo văn bản cho phép chúng ta lưu trữ và sử dụng lại các...
    1 giây trước
  3. Facebook Instant Articles là gì đó là câu hỏi đặt ra với mỗi blogger, chức năng của Facebook Instant Articles...
    24 giây trước
  4. Nếu bạn muốn biết cách xếp hạng trên Google, câu trả lời ngắn gọn đó là: "Tạo nội dung SEO...
    10 giây trước
  5. Hãy đi thẳng vào vấn đề muốn nói đến ở đây đó là: Chìa khóa để SEO thành công là...
    18 giây trước
  6. Cuối năm 2015 Google đã công bố dự án hỗ trợ tăng tốc load trang web trên thiết bị di...
    8 giây trước
  7. SEO Onpage là gì, Offpage là gì? Sau bài viết về khái niệm SEO là gì? chúng ta đã vô...
    10 giây trước
  8. Nếu bạn không quan tâm đến việc bán quảng cáo hoặc các bài đăng được tài trợ, có rất nhiều...
    12 giây trước
  9. Nếu ai đã thử phần mềm CamStudio thì chắc chắn rằng cũng đã nhận thấy sự bất ổn và không...
    10 giây trước
  10. Trong một thế giới mà Google cố gắng làm cho SERP (Bảng xếp hạng kết quả tìm kiếm (tự nhiên)...
    22 giây trước