jumbotron là một phần giao diện không thể thiếu của bootstrap.Chức năng chính của jumbotron là tạo vùng hiển thị cho nội dung quan trọng nhất của trang web. Tham gia blog getbootstrap để tìm hiểu về jumbotron.
tổng quan về jumbotron
jumbotron là một lớp được sử dụng để tạo nền màu xám với nội dung được bao bọc bên trong, thường được sử dụng để mô tả thông tin quan trọng, chẳng hạn như các chương trình khuyến mãi trên chính trang web, phần giới thiệu hoặc thông báo về cửa hàng hoặc thông báo kinh doanh quan trọng.
Ví dụ về mã html:
& lt;! doctype html & gt; & lt; html lang = “zh” & gt; & lt; header & gt; & lt; meta http-equiv = “content-type” content = “text / html; charset = utf-8 ″ & gt; & lt; title & gt; bootstrap 3 jumbotron & lt; / title & gt; & lt; link rel = ”stylesheet” href = ”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css” & gt; & lt; liên kết rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css” & gt; & lt; script src = “https://ajax.googleapis .com / ajax / libs / jquery / 1.11.1 / jquery.min.js “& gt; & lt; / script & gt; & lt; script src =” https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/ js/ bootstrap.min.js “& gt; & lt; / script & gt; & lt; style-type =” text / css ”& gt; .jumbotron {margin-top: 15px;} & lt; / styles & gt; & lt; / header & gt; & lt; body & gt; & lt; div class = “container” & gt; & lt; div class = “row” & gt; & lt; h2 class = “text-center” & gt; jumbotron & lt; / h2 & gt; & lt; div class = “col-md -12” & gt ; & lt; div class = “jumbotron” & gt; & lt; h1 & gt; bootstrap class 3 & lt; / h1 & gt; & lt; p & gt; bootstrap là thư viện css và js được sử dụng rộng rãi nhất hiện nay vì nhanh, đẹp và chính xác. Khi sử dụng bootstrap, bạn phải có kiến thức nền tảng về css và javascript để làm tốt. & lt; / p & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / body & gt; & lt; / html & gt;
Bạn có thể sử dụng jumbotron bằng cách khai báo thẻ div và gắn class vào cho nó như ví dụ trên, nội dung ở bên trong thẻ div bạn có thể sử dụng bất cứ components nào ở trong bootstrap cũng được, như button trong bootstrap, form hay dropdown menu …
Tốt trong Bootstrap 3
Lớp này cũng được sử dụng để tạo màu nền và bao bọc nội dung trong đó .
Ví dụ về mã html:
& lt;! doctype html & gt; & lt; html lang = “zh” & gt; & lt; header & gt; & lt; meta http-equiv = “content-type” content = “text / html; charset = utf-8 ″ & gt; & lt; title & gt; bootstrap 3 giếng & lt; / title & gt; & lt; link rel = ”stylesheet” href = ”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css” & gt; & lt; liên kết rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css” & gt; & lt; script src = “https: // ajax.googleapis .com / ajax / libs / jquery / 1.11.1 / jquery.min.js “& gt; & lt; / script & gt; & lt; script src =” https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/ bootstrap.min.js “& gt; & lt; / script & gt; & lt; style type =” text / css ”& gt; .well {margin top: 15px;} & lt; / style & gt; & lt; / header & gt; & lt; body & gt; & lt; div class = “container” & gt; & lt; div class = “row” & gt; & lt; h2 class = “text-center” & gt; good & lt; / h2 & gt; & lt; div class = “col-md-12” & gt; & lt ; div class = “good” & gt; Nội dung bên trong lớp tốt & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / body & gt; & lt; / html & gt;
Kết quả hình ảnh:
Nếu như bạn sử dụng class này thì bạn chỉ cần khai báo trong thẻ và bọc lấy nội dung bạn cần làm nổi bật là xong.
Thanh tiến trình
Thanh tiến trình tạo thanh tiến trình thông báo cho người dùng rằng công việc đang diễn ra ở giai đoạn này, có thể được sử dụng để tải, chuyển hướng hoặc hiển thị cho người dùng trạng thái của hoạt động.
Với 1 thanh tiến trình, % tối đa sẽ là 100% , trong ví dụ bên dưới, blog getbootstrap sẽ để nó khoảng 60% cho sự hiểu biết của bạn.
Ví dụ về mã html:
& lt;! doctype html & gt; & lt; html lang = “zh” & gt; & lt; header & gt; & lt; meta http-equiv = “content-type” content = “text / html; charset = utf-8 ″ & gt; Thanh tiến trình & lt; title & gt; bootstrap 3 & lt; / title & gt; & lt; link rel = ”stylesheet” href = ”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css” & gt; & lt ; link rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css” & gt; & lt; script src = “https: // ajax. googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> & lt; script src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js /bootstrap.min.js”></script> & lt; style type = ”text / css” & gt; .well {margin top: 15px;} & lt; / styles & gt; & lt; / header & gt; & lt; body & gt; & lt ; div class = “container” & gt; & lt; div class = “row” & gt; & lt; h2 class = “text-center” & gt; thanh tiến trình & lt; / h2 & gt; & lt; div class = “col-md-12” & gt; & lt; div class = “process” & gt; & lt; div class = “process-bar” style = “width: 60%;” & gt; & lt; span class = “sr-only” & gt; 60% hoàn thành & lt; / span & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / body & gt; & lt; / html & gt;
Kết quả hình ảnh:
Bạn chỉ cần tạo thẻ div và gán cho nó một lớp tiến trình ( lớp cha ) và một thẻ div thêm css trực tiếp vào thẻ div con với giá trị p rogress-bar theo cách bạn muốn Làm cho thẻ rộng hơn , đặt x% như sau:
& lt; div class = “process-bar” style = “width: 60%;” & gt; & lt; / div & gt;
bootstrap 3 được mặc định thành màu xanh lam đậm trong định dạng màu hoặc kiểu của thanh tiến trình, nhưng có nhiều màu khác mà bạn có thể sử dụng.
Lớp sr-only sẽ có tác dụng ẩn nội dung của nó
Một số lớp màu trong bootstrap 3 như sau:
- thanh tiến trình (sọc ngang xung quanh thanh tiến trình)
- thanh tiến trình-thành công (xanh lục)
- thanh tiến trình-thông tin (xanh lam nhạt)
- Cảnh báo trên thanh tiến trình (Màu cam)
- Nguy hiểm ở thanh tiến trình (Màu đỏ)
Hy vọng những chia sẻ trên đây về jumbotron hay lớp bootstrap process-bar sẽ giúp bạn có thêm nhiều kiến thức bổ ích về bootstrap. chúc bạn thành công.