Bootstrap 4 là một khung phổ biến để phát triển trang web đầu cuối.
Chủ yếu, nó là một thiết kế đầu tiên trên thiết bị di động CSS và bao gồm cả các mẫu CSS và JavaScript cho những thứ như biểu mẫu, nút, điều hướng, kiểu chữ, thả xuống, cửa sổ bật lên, phương thức và băng chuyền, cùng với các yếu tố giao diện khác. Nhưng don không đánh giá sai về nó: Bootstrap cũng cung cấp nhiều chỗ để tùy chỉnh và bạn có thể sử dụng nó để mã hóa bất kỳ loại trang web nào.
Đây là gói Bootstrap cơ bản mà bạn sẽ cần Tải xuống. CSS là ngôn ngữ biểu định kiểu cho thông tin tĩnh.
Bootstrap.js
Thư viện JavaScript / jQuery là thứ tăng sức mạnh cho các thành phần nhất định của Bootstrap như hoạt hình, cuộn và tương tác.
Glyphicons
Glyphs là các ký hiệu nguyên tố có kiểu chữ, chẳng hạn như ký hiệu Bảng Anh (£). Bootstrap có một danh sách lớn các biểu tượng glyph nhúng có sẵn miễn phí.
Các yếu tố mã nguồn Bootstrap
Tải xuống mã nguồn Bootstrap bao gồm các tài sản CSS, JavaScript và phông chữ được biên dịch sẵn, cùng với nguồn Ít hơn, JavaScript và tài liệu.
ít hơn/ – biểu định kiểu tiền xử lý cho CSS loại bỏ các tác vụ mã hóa lặp đi lặp lại
sass / – phiên bản mới hơn của bộ tiền xử lý phổ biến hơn
js / – chỉ cần tham khảo mã JavaScript, cho phép các thành phần Bootstrap hoạt động
phông chữ / – đây là các phông chữ biểu tượng đi kèm với tải xuống
quận/ – một thư mục chứa các tệp được biên dịch sẵn để sử dụng trong quá trình phát triển trang web
Ghi chú: Bootstrap cũng yêu cầu cài đặt jQuery cho các plugin JavaScript Bootstrap. jQuery là một thành phần giàu tính năng của thư viện JavaScript và nó sẽ loại bỏ rất nhiều mã JavaScript và kết hợp chúng thành các hành động bạn có thể thực hiện với một dòng.
Cảnh báo là tin nhắn cho người dùng khi có sự cố. Ví dụ: nếu người dùng nhập địa chỉ email hoặc số thẻ tín dụng không chính xác, họ sẽ nhận được thông báo cảnh báo lỗi, nhắc họ sửa lỗi.
.cảnh báo chính
Bạn có thể tạo cảnh báo đầy màu sắc cho bất kỳ văn bản. Cảnh báo chính (thông điệp quan trọng hơn) có màu xanh lam nhạt.
Cảnh báo chính
.cảnh báo trung học
Thêm một cảnh báo thứ cấp (thông điệp ít quan trọng hơn) bằng màu xám nhạt.
Tôi là một cảnh báo thứ cấp
.cảnh giác
Điều này sẽ cảnh báo người dùng rằng hành động của họ đã thành công.
Thông báo thành công!
.cảnh báo
Điều này sẽ gửi một thông điệp về hành động sắp tới.
Cảnh báo! Cảnh báo!
.cảnh báo nguy hiểm
Cảnh báo nguy hiểm tương tự như cảnh báo cảnh báo, nhưng đối với các hành động tiêu cực hơn (ví dụ: bị khóa sau quá nhiều mật khẩu không thành công).
Bạn đang gặp nguy hiểm, bạn của tôi!
.liên kết cảnh báo
Vì vậy, bạn muốn thêm một tin nhắn và một liên kết đến tin nhắn đó trong cảnh báo ban đầu? Bạn có thể nhúng tin nhắn đó và cùng màu.
Sự thành công! Bạn nên đọc tin nhắn tuyệt vời này.
.cảnh báo
Nó cung cấp một tùy chọn để đóng cảnh báo sau khi đọc nó.
×Sự thành công! Bạn đã làm tốt.
.cảnh báo
Thêm một tiêu đề nhanh để cảnh báo của bạn. (ví dụ: địa chỉ giao hàng của hoàng cung Nó có thể liên quan đến toàn bộ trang hoặc chỉ một phần nội dung trong trang đó.
.đèn báo và .cảnh báo tối
Thay đổi kiểu cảnh báo thành màu sáng hoặc xám đậm.
Tôi cảnh báo ánh sáng
Và tôi đánh dấu cảnh báo (bên) tối!
danh hiệu
Sử dụng huy hiệu để hiển thị thêm thông tin bên cạnh danh mục, nút hoặc các yếu tố khác. Bạn có thể tạo và định kiểu chúng bằng các yếu tố ngữ cảnh khác (ví dụ: cảnh báo .badge). Ngoài ra, huy hiệu sẽ chia tỷ lệ để phù hợp với kích thước của phần tử cha (ví dụ: tiêu đề). Cuối cùng, bạn có thể sử dụng huy hiệu như một phần của nút hoặc liên kết để cung cấp bộ đếm.
Ví dụ: Tiêu đề
Giả sử bạn có một số tiêu đề và bạn đang thêm một huy hiệu. Huy hiệu đó sẽ điều chỉnh kích thước để phù hợp với tiêu đề.
Ví dụ tiêu đề Mới
Ví dụ tiêu đề Mới
.huy hiệu
Sử dụng lệnh này để sửa đổi hình dạng phù hiệu của bạn, làm cho chúng tròn hơn.
Ánh sáng
.huy hiệu chính + .huy hiệu phụ
Bạn có thể muốn thêm một huy hiệu cho các tin nhắn chính (quan trọng hơn) và phụ (ít quan trọng hơn).
Sơ cấpThứ hai
.huy hiệu trong suốt
Giả sử bạn muốn làm cho một nút trong suốt để làm cho nó nổi bật so với phần còn lại. Với Bootcamp 4, bạn không phải sử dụng kiểu dáng nội tuyến. Thay vào đó, sử dụng lệnh sau:
.cảnh báo huy hiệu, .huy hiệu thành công, .huy hiệu-thông tin, hoặc là .huy hiệu nguy hiểm
Thêm một huy hiệu để cảnh báo, thành công, thông tin hoặc cảnh báo nguy hiểm.
Cảnh báoSự thành côngNguy hiểmThông tin
Tạo huy hiệu có thể thao tác với Hover và Focus States
Khi người dùng di chuyển con trỏ của họ sang một nút nhưng chưa kích hoạt nó, bạn có thể cung cấp các yếu tố di chuột và tiêu điểm để khuyến khích hành động.
Để làm điều này, hãy sử dụng các lớp .badge- * theo ngữ cảnh trên một thành phần.
Đây là vài ví dụ:
Sơ cấp Thứ hai Sự thành công Nguy hiểm Cảnh báo
.vụn bánh mì
Breadcrumbs là các thành phần điều hướng sẽ giúp người dùng di chuyển từ trang này sang trang khác mà không bị mất và cung cấp cho họ cách để quay trở lại trang trước.
Trang Chủ
Trang Chủ
Thư viện
Trang Chủ
Thư viện
Dữ liệu
.nút
Như gợi ý về tên, lệnh .button cho phép bạn tạo và tạo kiểu cho nút.
.nút chính + .nút phụ
Một nút chính thường được sử dụng cho hành động của người dùng; một nút phụ sau đó có thể được sử dụng để đóng.
Thiết kế các nút của bạn bằng cách sử dụng các tùy chọn kiểu dáng được xác định trước tiêu chuẩn:
.btn-phác thảo
Chọn một phác thảo nút theo các mẫu đoạn trích sau:
.btn-lg + .btn-sm
Thay đổi kích thước các nút của bạn.
.khối btn
Nhóm các nút của bạn thành một khối. Tất cả các nút được nhóm sẽ trải rộng toàn bộ chiều rộng của cha mẹ.
.hoạt động
Theo mặc định, tất cả các nút sẽ được hiển thị dưới dạng nhấn - với viền tối, nền tối hơn và bóng trong - khi hoạt động.
Ghi chú: Bạn không cần phải thêm một lớp
Nhưng, nếu vì một lý do nào đó, bạn cần buộc giao diện hoạt động tương tự, hãy sử dụng đoạn mã sau:
Liên kết chính
Ghi chú: Bạn cũng có thể thêm thuộc tính Boolean bị vô hiệu hóa vào bất kỳ nút nào để làm cho nó trông không hoạt động.
Nhóm nút
Sử dụng phần tử này để tạo một nhóm các nút có kích thước tương tự nhau mà không cần mã hóa từng nút riêng biệt.
.nhóm btn
.btn-nhóm-dọc
Tạo kiểu cho một nhóm nút dọc:
.nhóm btn (Lồng nhau)
Bạn cũng có thể tạo các nút lồng nhau với menu thả xuống.
Liên kết thả xuống Liên kết thả xuống
.btn-thanh công cụ
Sắp xếp các nhóm nút vào một thanh công cụ để tạo ra các thành phần phức tạp hơn. Bạn có thể áp dụng các lớp tiện ích khác nhau để tạo kiểu bổ sung.
.btn-nhóm-chuyển đổi
Tải về Bootstrap Toggle plugin để sửa đổi các hộp kiểm tra thành toggles. Sau đó, bạn có thể thêm các nút chuyển đổi dữ liệu = nút Nút thành một nhóm nút có các nút được sửa đổi để cho phép hành vi chuyển đổi của chúng thông qua JavaScrip. Sau đó, sử dụng .btn-nhóm-chuyển đổi để tạo kiểu đầu vào khác nhau trong các nút của bạn.
thẻ
Thẻ là các thùng chứa linh hoạt với các tùy chọn cho tiêu đề / chân trang, màu sắc và tùy chọn hiển thị, v.v. Họ đã thay thế một số thành phần trước đó (bảng, giếng và hình thu nhỏ) từ Bootstrap 3.
.thân thẻ
Yếu tố chính của thẻ. Sử dụng nó để thêm một phần đệm trong thẻ của bạn.
Văn bản tuyệt vời của bạn
.tiêu đề thẻ
Mã một tiêu đề cho thẻ của bạn. Thêm cái này vào nhãn.
Tiêu đề lớn
.phụ đề thẻ
Bạn cũng có thể thêm phụ đề vào mỗi thẻ để thêm phần huyền ảo.
Phụ đề thẻ ưa thích
.liên kết thẻ
Nhúng một liên kết bên trong thẻ của bạn. Thêm lớp này vào một nhãn.
Liên kết đến một cái gì đó vui vẻ
.văn bản thẻ
Thêm một số từ vào thẻ của bạn. Nhiều hay ít như bạn muốn.
Hoa hồng có màu đỏ, hoa violet có màu xanh, Tôi học Bootstrap, Thế còn bạn?
.thẻ-img-top
Bạn cũng có thể gửi kèm một hình ảnh trên thẻ của bạn. Đoạn mã này sẽ thêm một đỉnh của nó.
Thật là một hình ảnh hoành tráng!
.thẻ-img-bottom
Hoặc bạn có thể có hình ảnh hiển thị dưới cùng của thẻ. Cuộc gọi của bạn.
Nhìn vào bức ảnh đó!
.thẻ-img-lớp phủ
Sử dụng một hình ảnh làm nền và phủ lên tất cả các văn bản.
Tôi là văn bản có hình nền!
.tiêu đề thẻ
Đặt một tiêu đề tùy chỉnh ở đầu thẻ của bạn. Nó sẽ được hiển thị trên tất cả các tiêu đề và phụ đề.
Một số tiêu đề lớn!
.chân thẻ
Ngoài ra, bạn có thể mã chân trang cho thẻ của mình để truyền đạt một số thông tin bổ sung. Nó sẽ đi ngay sau .thân thẻ.
Một số nội dung thẻ khác
.nhóm thẻ
Chơi xung quanh với bố trí thẻ và xây dựng một nhóm thẻ. Một nhóm sẽ hoạt động như một yếu tố duy nhất, được đính kèm, với mỗi thẻ có cùng chiều rộng và chiều cao. Bạn cũng có thể áp dụng hiển thị: flex; để cải thiện kích thước.
Ghi chú: Bố trí thẻ nhóm không đáp ứng!
Thẻ số một
Tôi là thẻ đầu tiên trong nhóm, hiển thị một số thông tin thú vị.
Thẻ số hai
Tôi là người có thẻ giữa trong nhóm và có lẽ tôi cung cấp ưu đãi tốt nhất
Thẻ ba
Tôi làm thẻ thứ ba cố tỏ ra ngầu như thẻ thứ nhất.
.cột thẻ
Bạn có thể sắp xếp các thẻ của bạn vào các cột giống như Masonry. Điều này cho phép bạn xây dựng một số mẫu sáng tạo chỉ bằng CSS.
Ghi chú: Nếu thẻ của bạn vượt qua các cột, hãy đặt chúng thành hiển thị: khối nội tuyến.
.cỗ bài
Lắp ráp một bộ thẻ không gắn với chiều cao và chiều rộng bằng nhau.
Một số tiêu đề
Văn bản của bạn
Thẻ khác
Thậm chí nhiều văn bản mà ai đó sẽ cần phải viết.
Tôi cũng là một thẻ!
Một số từ để thêm và sắp xếp
Băng chuyền
Thiết lập trình chiếu để xoay vòng qua một loạt các slide, văn bản hoặc hình ảnh. Được xây dựng với CSS 3D và một số JS. Bạn có thể thêm hình ảnh, văn bản hoặc đánh dấu tùy chỉnh, cũng như thêm hoặc xóa các điều khiển trước đó / tiếp theo.
Carousel Slide - Tạo một Slide
TrướcKế tiếp
.băng chuyền
Thêm hiệu ứng làm mờ tuyệt vời này cho một slide trước cái tiếp theo.
TrướcKế tiếp
.băng chuyền
Thêm kiểm soát và hỗ trợ cho tiếp theo / trước và các chỉ số như số trang chiếu.
TrướcKế tiếp
.chú thích
Thêm chú thích thú vị cho mỗi hoặc một vài slide.
Nhãn trượt tuyệt vời
Tôi rất tự hào về bản thân mình khi viết mã slide này.
Ngay cả nhãn làm mát
Đúng, làm rung chuyển toàn bộ điều mã hóa này.
TrướcKế tiếp
Thu gọn & Accordion
Thu gọn là một plugin JavaScript mà bạn có thể sử dụng để ẩn nội dung trong menu Thu gọn vụn vụn. Phần tử được thu gọn sẽ làm động nó chiều cao từ 0 đến giá trị bình thường khi được kích hoạt và ngược lại.
.sự sụp đổ
Ẩn nội dung của bạn.
Hoạt hình pariatur cliche repigenderit, enim eiusmod cuộc sống cao accusamus terry richardson quảng cáo mực. Nihil hoạt hình keffiyeh helvetica, bia thủ công labore wes anderson uy tín nesciunt sapiente e proident.
.chương trình sụp đổ
Hiển thị nội dung bị sập.
Một số văn bản bạn đã quyết định ẩn
.sụp đổ
Kích hoạt nội dung như một yếu tố thu gọn; chấp nhận các đối tượng tùy chọn.
$ ('# myCollapsible'). sụp đổ ({ chuyển đổi: sai })
.đàn accordion
Một phần mở rộng của hành vi thu gọn vào thẻ. Bạn có thể sử dụng tính năng này để tạo ra một cây đàn.
Ghi chú: Bạn phải sử dụng .accordion như một trình bao bọc
Ví dụ đoạn trích Accordion với 2 mục nhóm
Mục nhóm có thể thu gọn # 1
Đây là điều đầu tiên tôi muốn giấu trong thẻ này.
Mục nhóm có thể thu gọn # 2
Và đây là một số văn bản khác tôi tạo kiểu với accordion.
Thả xuống
Sử dụng plugin này để tạo lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết người dùng. Nó là một tùy chọn tiện dụng để tạo menu. Dropdowns được xây dựng thông qua Popper.js, một phần của thư viện bên thứ ba. Vì vậy, hãy chắc chắn rằng bạn bao gồm popper.min.js trước JavaScript của Bootstrap. Hoặc bạn chỉ có thể sử dụng bootstrap.bundle.min.js/ bootstrap.bundle.js. Cả hai đều chứa Popper.js.
Mẹo tạo kiểu nhanh: tất cả các danh sách thả xuống trong Bootstrap đều được bật bằng cách nhấp, không di chuột.
.thả xuống
Thêm một menu thả xuống đơn giản với các nút.
Hoạt động Một hành động khác
.thả xuống-chuyển đổi-chia
Tạo danh sách thả xuống của nút chia với khoảng cách phù hợp xung quanh dấu mũ thả xuống.
Hoạt động Một hành động khác
.bỏ học
Bạn có biết rằng bạn có thể tạo kiểu cho một menu sắp tới thay vì xuống không? Bây giờ bạn làm!
.lơ mơ
Cung cấp menu ở bên phải của nút.
.rủ xuống
Và bạn cũng có thể hiển thị menu bên trái.
.thả xuống-mục-văn bản
Thêm các mục thả xuống không tương tác vào menu của bạn.
Văn bản thô Hành động có thể nhấp Một hành động khác Bất cứ điều gì bạn cần
.mục thả xuống bị vô hiệu hóa
Bạn cũng có thể chọn tắt bất kỳ mục menu nào.
Liên kết hoạt động Liên kết bị vô hiệu hóa Thêm một liên kết
.dải phân cách
Thêm một dải phân cách đơn giản giữa các thành phần menu để thu hút thêm sự chú ý.
.menu thả xuống
Căn chỉnh toàn bộ menu bên phải.
Các hình thức
Bạn có thể dễ dàng xây dựng các biểu mẫu hấp dẫn và mã tùy chỉnh kiểu, bố cục và các yếu tố bổ sung. Trong Bootstrap 4, các biểu mẫu cũng nhận được một số điều khiển đầu vào mới như bầu chọn số, xác minh email và các thứ khác, cùng với một loạt các lớp đáp ứng mới.
Ví dụ của .nhóm hình thức
.kiểm soát hình thức
Sử dụng lớp này để định kiểu tất cả các điều khiển dạng văn bản như đầu vào của người dùng, tiêu đề, v.v..
.hình thức kiểm soát tập tin
Thêm lớp này bất cứ khi nào bạn cần cung cấp cho người dùng tùy chọn để tải tệp lên biểu mẫu.
.hình thức kiểm soát-lg và .hình thức kiểm soát-sm
Tạo một hệ thống phân cấp trực quan trong biểu mẫu của bạn bằng cách thêm .hình thức kiểm soát-lg để làm cho các khu vực đầu vào lớn hơn và .hình thức kiểm soát-sm để làm cho những cái nhỏ hơn.
.hình thức kiểm soát-bản rõ
Sử dụng lớp này để hiển thị chính xác các yếu tố trong hình thức của bạn. Nó sẽ thay thế kiểu dáng trường biểu mẫu mặc định bằng văn bản thuần trong khi vẫn giữ đúng lề và phần đệm.
.hình thức kiểm soát phạm vi
Đặt đầu vào phạm vi có thể cuộn theo chiều ngang cho biểu mẫu của bạn.
.kiểm tra mẫu
Thêm hộp kiểm vào biểu mẫu của bạn.
Ghi chú: Bạn cũng có thể thêm các nút radio thay vì các hộp kiểm bằng hình thức kiểm tra đầu vàoloại = "đài".
.hình thức kiểm tra nội tuyến
Tạo một danh sách các hộp kiểm theo chiều ngang.
.chỉ đọc thuộc tính boolean
Chỉ định rằng một hình thức đầu vào nhất định là chỉ đọc. Điều này sẽ ngăn việc sửa đổi giá trị đầu vào.
Biểu mẫu tùy chỉnh
Bootstrap 4 có một số thành phần biểu mẫu tùy chỉnh thay thế mặc định của trình duyệt.
.hộp kiểm tùy chỉnh
Như tên ngụ ý, bạn có thể tạo hộp kiểm tùy chỉnh cho biểu mẫu của mình.
.đài phát thanh tùy chỉnh
Khoan và bạn cũng có thể tạo kiểu cho một đài phát thanh tùy chỉnh!
.chuyển đổi tùy chỉnh
Cuối cùng, bạn cũng có thể tạo một công tắc tùy chỉnh thời trang.
.chọn tùy chỉnh
Sử dụng lệnh này để thêm một menu chọn tùy chỉnh.
.tập tin tùy chỉnh
Tùy chỉnh tải lên tập tin người dùng. Để làm như vậy, thêm .tập tin tùy chỉnh lớp học xung quanh đầu vào với gõ = "tập tin". Sau đó thêm .tùy chỉnh tập tin đầu vào với nó.
.phạm vi tùy chỉnh
Thiết kế một menu phạm vi tùy chỉnh.
Nhóm đầu vào
Phần tử nhóm đầu vào cho phép bạn tạo các điều khiển biểu mẫu tương tác và hấp dẫn hơn. Sử dụng nó để thêm văn bản, biểu tượng hoặc nút ở cả hai bên của trường nhập liệu.
.đầu vào - Ví dụ cơ bản
Họ và tên
.đầu vào nhóm đầu vào
Cung cấp thêm văn bản trước đầu vào.
.đầu vào nhóm-nối
Hoặc liệt kê chúng phía sau đầu vào.
.đầu vào nhóm văn bản
Sử dụng lớp này để định kiểu văn bản được chỉ định.
.00
Jumbotron
Một thành phần linh hoạt sẽ giúp bạn tạo các hộp lớn để thu hút sự chú ý nhiều hơn đến nội dung hoặc thông điệp nổi bật. Trong Bootstrap, jumbotron trông giống như một hộp màu xám với các góc tròn tự động phóng to tất cả các kích thước phông chữ và văn bản bên trong nó.
Bạn có thể thêm bất kỳ HTML và các lớp Bootstrap khác trong một jumbotron.
.jumbotron
Này, tuyệt vời bạn!
Đây là một đơn vị anh hùng đơn giản, cho thấy rằng bất cứ ai cũng có thể là một anh hùng thực sự!.
Sử dụng các lớp tiện ích cho kiểu chữ và khoảng cách
Sẵn sàng hành động
.chất lỏng jumbotron
Thay đổi một chút về giao diện của jumbotron và làm cho nó rộng toàn trang mà không có các góc tròn.
Chất lỏng jumbotron
Tôi đã chiếm toàn bộ không gian ngang trên trang.
Danh sách nhóm
Sử dụng các nhóm danh sách để hiển thị một loạt nội dung, với nhiều tùy chọn để tạo kiểu và bố cục.
.danh sách nhóm - Thí dụ
Tạo một nhóm danh sách cơ bản với một số mục.
Sữa
Trà
Cà phê
.danh sách nhóm-mục hoạt động
Thêm lớp .active để làm nổi bật lựa chọn hoạt động hiện tại trong danh sách.
Tôi muốn cái này
Không phải cái này
Hoặc cái này
.danh sách nhóm bị vô hiệu hóa
Cho thấy rằng một trong các mục danh sách không có sẵn / bị vô hiệu hóa. Một số yếu tố hoạt động (ví dụ: liên kết) sẽ yêu cầu JavaScript tùy chỉnh ở đầu .disable để không hoạt động hoàn toàn.
Sản phẩm này được ra khỏi cổ phiếu
Nhưng chúng ta có cái này!
Và điều tuyệt vời này
.danh sách nhóm-mục-hành động
Thêm nhiều tương tác hơn vào danh sách của bạn bằng cách thêm các hiệu ứng kiểu dáng (bị vô hiệu hóa, di chuột, hoạt động, v.v.) vào các mục riêng lẻ.
Sự lựa chọn chính của chúng tôi dành cho bạn! Một số đề nghị tốt Cũng là một lựa chọn Một cái gì đó khác trong danh sách Và cái này không có sẵn
.danh sách nhóm
Thay đổi giao diện của danh sách của chúng tôi bằng cách loại bỏ các đường viền và các góc tròn. Tất cả các mục sẽ được đặt cạnh nhau.
Chai Latte
Matcha Latte
Trà Earl Grey
Vanilla Rooibos
Người bạn đời
.danh sách nhóm ngang
Bạn cũng có thể thiết lập danh sách của mình theo chiều ngang thay vì theo chiều dọc. Ngoài ra, bạn có thể mã hóa nhóm danh sách để trở thành ngang bắt đầu tại một điểm dừng tối thiểu nhất định chiều rộng tối thiểu bằng cách sử dụng .danh sách nhóm-ngang- {sm | md | lg | xl}.
Ghi chú: Bạn có thể sử dụng các nhóm danh sách ngang với các nhóm danh sách tuôn ra cùng một lúc.
Xe lửa
Máy bay
Tên lửa
.danh sách nhóm (ánh sáng, tiểu học tối, thứ hai, trong suốt, trắng, cảnh báo, sự thành công, thông tin, nguy hiểm)
Áp dụng các kiểu tiêu chuẩn cho các mục danh sách riêng lẻ.
Tất cả các màu mà tôi có
Màu xanh nhạt
Xám nhạt
màu xanh lá
Màu đỏ
Màu vàng
Teal
trắng
Xám
Đối tượng truyền thông
Bootstrap 4 cho phép bạn xây dựng các thành phần phức tạp, lặp đi lặp lại có các văn bản và một số phương tiện truyền thông. Các đối tượng truyền thông là một công cụ tuyệt vời để xây dựng các yếu tố giống như tweet và các hộp đặc trưng. Ngoài ra, chúng rất dễ sử dụng vì chúng chỉ cần hai lớp.
.phương tiện truyền thông
Sử dụng .phương tiện truyền thông gói và .cơ quan truyền thông xung quanh nội dung để tạo một đối tượng truyền thông duy nhất. Đây là một mẫu cho một tiêu đề.
Tiêu đề của bạn
Một thông điệp chính bạn muốn chia sẻ với thế giới!
.cơ quan truyền thông
Một lớp chỉ định những gì sẽ có bên trong đối tượng của bạn. Bạn có thể mã các sắp xếp khác nhau cho nội dung của bạn. Mặc định là hàng đầu, nhưng bạn có thể căn chỉnh ở giữa hoặc cuối.
Phương tiện truyền thông hàng đầu
Đọc các văn bản mô tả hình ảnh trên
Truyền thông lồng nhau
Bạn cũng có tùy chọn để bao gồm nhiều hơn một đối tượng phương tiện. Các đối tượng được lồng nhau bằng cách bắt đầu ở lề trái và lập bảng cho từng đối tượng mới trong.
Đây là một đoạn để làm tổ.
Tiêu đề truyền thông
Đây là một số văn bản.
Một tiêu đề truyền thông khác
Một số văn bản giải thích những gì diễn ra ở đây.
Hải quân
.hải quân là một lớp cơ sở giúp bạn xây dựng tất cả các loại thành phần điều hướng, ngay cả với các phần ghi đè kiểu. Bạn có nhiều tùy chọn để tùy chỉnh.
.hải quân thí dụ
Bạn có thể nhấp vào liên kết bị vô hiệu hóa này
Nhấn vào đây để thay thế
.vật phẩm hải quân
Một lớp để chỉ định một mục mới trong menu điều hướng.
Một số mặt hàng
.nav justify-content-centre
Căn chỉnh điều hướng của bạn theo chiều ngang ở trung tâm.
Hoạt động
Liên kết
.nav justify-content-end
Hoặc biện minh cho nội dung của bạn ở bên phải.
Hoạt động
Liên kết
.tab điều hướng
Thêm một số tab thú vị vào menu điều hướng của bạn.
Thay vì biện minh, bạn cũng có thể buộc các mục trong menu của mình điền vào tất cả các không gian có sẵn bằng lệnh này. Tuy nhiên, tất cả các mục sẽ không có cùng chiều rộng.
Hoạt động
Liên kết này là looooong
Liên kết ngắn
Thanh cái
Navbar là một tiêu đề điều hướng đáp ứng với rất nhiều tính linh hoạt và hỗ trợ cho việc xây dựng thương hiệu, biểu mẫu, liên kết và hơn thế nữa.
NavBar - Tiêu đề điều hướng cơ bản ở đầu trang
Thanh điều hướng đầu tiên của tôi
Trang Chủ (hiện hành)
Liên kết 1
Liên kết bị vô hiệu hóa
.nhãn hiệu
Navbars được trang bị sẵn với sự hỗ trợ cho một số thành phần phụ. Yếu tố này sẽ làm cho văn bản của bạn nổi bật hơn. Nó được thiết kế sẵn để chứa một sản phẩm hoặc tên công ty.
Tên công ty của bạn
.thanh điều hướng
Sử dụng lớp này để thêm các chuỗi văn bản trung tâm theo chiều dọc và khoảng cách ngang.
Tôi là một văn bản thanh điều hướng với một yếu tố nội tuyến
.điều hướng mở rộng (-sml -mdl -lgl -xl)
Cho phép thu gọn đáp ứng.
Thanh cái
Trang Chủ (hiện hành)
Liên kết
.thanh điều hướng
Lập trình các hành vi chuyển hướng khác nhau (ví dụ: giữ các mục hoạt động hoặc thu gọn chúng).
Thanh cái
Trang Chủ (hiện hành)
Liên kết
.mẫu đơn
Đặt một biểu mẫu (ví dụ: thanh tìm kiếm) trong tiêu đề điều hướng.
.sụp đổ.navbar-sụp đổ
Nhóm và thu gọn nội dung thanh điều hướng bởi một điểm dừng chính.
Thanh cái
Trang Chủ (hiện hành)
Liên kết
.thanh cố định trên cùng
Đặt thanh điều hướng cố định làm chính và có màu tối.
Đầu cố định
Phương thức Bootstrap (Plugin)
Đây là một plugin JavaScript được sử dụng để thêm các hộp thoại vào một trang web, chẳng hạn như thông báo người dùng, nội dung tùy chỉnh và cửa sổ bật lên hộp đèn.
Các phương thức bao gồm HTML, CSS và JavaScript. Và bạn chỉ có thể hiển thị một cửa sổ phương thức, vì những người tạo Bootstrap coi các mô hình lồng nhau là một thực hành UX kém.
Ví dụ phương thức
Cho nó một tiêu đề
Thêm một số văn bản cơ thể phương thức ở đây.
.phương thức-hộp thoại làm trung tâm
Bạn có thể chọn tập trung tất cả nội dung theo chiều dọc.
Tiêu đề phương thức
Liệt kê một số văn bản.
.phương thức-hộp thoại-cuộn
Khi bạn cần đóng gói thêm nội dung vào một phương thức (ví dụ: chính sách bảo mật dài), bạn có thể thêm lớp này để làm cho nó cuộn độc lập khỏi trang.
Tiêu đề phương thức
Đây là một thỏa thuận điều khoản và điều kiện siêu dài mà bạn sẽ đồng ý mà không thực sự đọc nó.
.phương thức phai
Cho phép mờ dần cho nội dung.
Tiêu đề phương thức
Phải ít nhất một cái gì đó ở đây.
.phương thức-lg, .phương thức-sm, .phương thức-xl
Bạn cũng có thể điều chỉnh kích thước của phương thức của bạn.
Tôi là một phương thức lớn!
Tôi là một phương thức nhỏ và dễ thương.
Tôi là một phương thức kích thước khổng lồ!
Ghi chú: Bootstrap cung cấp một bản demo của tất cả các thành phần này tại Trang phương thức. Họ đáng xem.
Máy chiếu
Nếu bạn biết HTML, paginators không có gì mới đối với bạn. Với Bootstrap, bạn có một số tùy chọn để tạo kiểu cho chúng.
.phân trang - ví dụ phân trang cơ bản
«Trước
1
2
3
»Kế tiếp
.mục bị vô hiệu hóa
Bạn có thể chọn tắt một trong các thành phần phân trang hoặc một số yếu tố phân trang.
Trước
1
2 (hiện hành)
3
Kế tiếp
.mục trang hoạt động
Hoạt động cho biết giai đoạn hiện tại bằng cách làm nổi bật nó bằng màu xanh.
Trước
1
2 (hiện hành)
3
Kế tiếp
.phân trang-lg
Làm cho phân trang của bạn lớn hơn và táo bạo hơn.
Trước
1
2
3
Kế tiếp
.phân trang-sm
Hoặc làm cho nó nhỏ nhắn và ít nhìn thấy kích thước.
Trước
1
2
3
Kế tiếp
Popovers
Plugin Popover cho phép bạn tạo một hộp bật lên với nội dung và các yếu tố khác, được kích hoạt bất cứ khi nào người dùng nhấp vào yếu tố đó. Popovers tương tự như chú giải công cụ nhưng phù hợp với nhiều nội dung hơn.
Những điều cần biết trước khi bạn bắt đầu
Bạn phải thêm thuộc tính, data-toggle = "popover" đến một yếu tố để tạo ra một popover.
Bạn phải sử dụng thuộc tính tiêu đề để chỉ định văn bản tiêu đề.
Sử dụng nội dung dữ liệu thuộc tính để chỉ định nội dung nào sẽ được hiển thị trong phần thân của cửa sổ bật lên.
Chuyển đổi popover
Bạn phải sử dụng jQuery để khởi tạo popovers - popover ().
Popover
Tại đây, mã sẽ cho phép bật lên trên trang của bạn:
Định vị Popovers của bạn - Trên cùng, Dưới cùng, Trái hoặc Phải
Chỉ định một trong bốn vị trí cho cửa sổ bật lên của bạn.
Popover trên đầu trang
Popover bên phải
Popover trên dưới
Popover bên trái
Tạo một Popover Container
Mã hóa một thùng chứa tùy chỉnh bất cứ khi nào bạn cảm thấy rằng một số kiểu trên phần tử cha có thể làm rối giao diện của nó. Thêm một thuộc tính bộ chứa sẽ gói gọn trong HTML của Popover trong phần tử cha.
Cung cấp cho người dùng tùy chọn để đóng cửa sổ bật lên khi họ nhấp vào phần tử lần thứ hai. Bạn có thể sắp xếp để popover loại bỏ khi người dùng cũng nhấp vào bên ngoài phần tử: Sử dụng data-trigger = "tập trung" thuộc tính.
Theo mặc định, cửa sổ bật lên được đóng lại khi bạn nhấp vào phần tử một lần nữa. Tuy nhiên, bạn có thể sử dụng data-trigger = "tập trung" thuộc tính sẽ đóng cửa sổ bật lên khi nhấp vào bên ngoài phần tử:
Nhấp vào đây
Phát triển
Phát triển thanh tiến trình tùy chỉnh và thêm các yếu tố kiểu dáng bổ sung như hình động và nhãn văn bản nếu bạn muốn.
.phát triển
Lớp để thiết lập một thanh tiến trình cơ bản. Nó hoạt động như một trình bao bọc, biểu thị giá trị tối đa của thanh tiến trình của bạn.
.thanh tiến trình
Sử dụng lệnh này để chỉ định tiến trình hiện tại.
.thanh tiến
Thêm một số sọc vào phần thanh tiến trình.
.tiến bộ-hoạt hình
Bây giờ có được những sọc di chuyển, phong cách cực cắt tóc.
Thêm nhiều thanh tiến trình
Bạn có thể đồng thời thêm một số thanh để chỉ ra tiến trình cho các yếu tố khác nhau. Điều chỉnh phân bổ cho từng cái theo ý thích của bạn.
Cuộn
Một plugin tiện dụng bạn có thể sử dụng để làm nổi bật các liên kết điều hướng hoặc các mục trong nhóm danh sách để cho người dùng biết vị trí hiện tại của họ trên một trang.
Ví dụ về Scrollstrap cuộn cơ bản
Mục một Mục hai Vâng, nó Ba Ba
Mục một
Và một số nội dung về nó..
Mục hai
Và một lời giải thích khác.
Vâng, nó Ba Ba
Ai có thể đoán được? :).
Hãy để giải nén điều này thêm một chút nữa.
data-spy = "scroll" + mục tiêu dữ liệu
Để bật scrollspy trong điều hướng thanh trên cùng, thêm data-spy = "scroll" thuộc tính cho yếu tố bạn muốn để mắt đến. (trong hầu hết các trường hợp, mục tiêu của bạn là ).
Chỉ định mục tiêu dữ liệu thuộc tính cho phần tử cha trong .hải quân thành phần, để các liên kết điều hướng được nhắm mục tiêu để làm nổi bật.
...
...
...
bù dữ liệu
Điều này chỉ định một số vị trí của cuộn và có thể được điều chỉnh. Mặc định là 10 pixel.
@mập
...
@mdo
...
một
...
hai
...
số ba
...
Gọi Scrollspy qua JavaScript
Bạn cũng có một số phương pháp để bật ScrollSpy bằng JavaScript. Để làm điều đó, hãy thêm lệnh sau vào CSS của bạn, sau vị trí: tương đối;
Khi bạn thêm hoặc xóa các phần tử khỏi DOM DOM và cố gắng sử dụng scrollspy, bạn sẽ phải gọi phương thức refresh bằng lệnh tiếp theo:
.cuộn giấy ('vứt bỏ')
Sử dụng phương pháp này để loại bỏ phần tử cuộn cuộn.
kích hoạt.bs.scrollspy
Sự kiện này kích hoạt phần tử cuộn bất cứ khi nào scrollspy kích hoạt một mục mới.
$ ('[data-spy = "scroll"]'). on ('activ.bs.scrollspy', function () { // Làm thôi nào… })
Spinner
Sử dụng plugin này để thêm spinner hoạt hình đó. Spinners được xây dựng chỉ với HTML và CSS, không có bất kỳ JS. Nhưng bạn có thể cần JavaScript cho một số tùy chọn kiểu dáng, ví dụ: để chuyển đổi tầm nhìn của họ. Ngoài ra, bạn có một số tùy chọn tốt đẹp để lựa chọn.
Một plugin cho phép bạn thêm các thông báo đẩy của Wikipedia với Flexbox - rất dễ dàng để định vị và căn chỉnh. sử dụng chúng như là một thay thế cho cảnh báo.
.bánh mì nướng - thí dụ
Bootstrap 11 phút trước
Kudos, tôi là một tin nhắn bánh mì nướng!
Chú giải công cụ
Chú giải công cụ là các cửa sổ bật lên văn bản nhỏ cung cấp cho người dùng một số ngữ cảnh bổ sung trên nút hoặc một yếu tố trang web khác. Trong Bootstrap 4, chú giải công cụ sử dụng thư viện Popper.js để định vị. Đó là lý do tại sao để sử dụng chúng, bạn phải bao gồm popper.min.js trước bootstrap.js hoặc dùng bootstrap.bundle.min.js/bootstrap.bundle.js.
Đối với hầu hết các thành phần, bố cục và hệ thống lưới Bootstrap sử dụng các giá trị điểm dừng sau:
Rất nhỏ < 544px
Nhỏ ≥ 544px
Trung bình ≥ 768px
Lớn ≥ 992px
Cực lớn ≥ 1200px
Lưới và cột
Dễ dàng bố trí và căn chỉnh nội dung thông qua Flexbox; hoàn toàn đáp ứng. Bạn nhận được một hệ thống 12 cột, 5 tầng theo mặc định, các lớp được xác định trước và rất nhiều biến.
Tùy chọn kích thước lưới
col-xs-: chiều rộng container - tự động / không có; chiều rộng cột - tự động.
Tạo 3 cột bằng nhau với các lớp lưới được xác định trước.
Một trong ba cột
Một trong ba cột
Một trong ba cột
.chất lỏng chứa
Chia tỷ lệ container của bạn để trải rộng trên toàn bộ quan điểm.
Kích thước cột
Chọn trong số xs, sm, md, lg. Một lần nữa, khi bạn thêm các cột, chúng phải phù hợp với kích thước màn hình của tất cả các thiết bị hoặc người dùng sẽ bị thất vọng.
Tại đây, đoạn mã này - chỉ cần thay đổi thành phần kích thước:
.không có máng xối
Không gian tiêu chuẩn giữa các cột là 15px ở mỗi bên. Nhưng bạn có thể loại bỏ nó.
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
Kiểu chữ
Tất cả mọi thứ bạn cần cho các tiêu đề, văn bản cơ thể, danh sách, và nhiều hơn nữa.
Căn chỉnh văn bản - Trái, Phải, Căn giữa, Chính đáng
dotnetfunda là một hướng dẫn trực tuyến
dotnetfunda là một hướng dẫn trực tuyến
dotnetfunda là một hướng dẫn trực tuyến
Danh sách nội tuyến - Hiển thị danh sách trong một dòng
Trà
Đường
Sữa
List-Unstyled - Xóa kiểu danh sách mặc định
Cà phê
Trà
Trà đen
Trà xanh
Sữa
.chữ thường
văn bản hạ cấp.
.chữ hoa
văn bản viết hoa.
.viết hoa
viết hoa.
.cắt văn bản
văn bản cắt ngắn.
.văn bản-nowrap
Không có văn bản bọc.
.văn bản đơn sắc
Đây là trong không gian vũ trụ
.ẩn văn bản
Tiêu đề tùy chỉnh
.trang trí văn bản-không
văn bản này không được trang trí
.khởi tạo
Thêm cỡ chữ nhỏ hơn để viết tắt kiểu.
Chì
Khi bạn muốn thêm điểm nhấn vào một đoạn nội dung cụ thể, bạn có thể làm cho phông chữ lớn hơn một chút và thậm chí mỏng hơn, để đoạn văn nổi bật một cách trực quan.
Đây là thông tin bạn thực sự cần chú ý!
Blockquote
Nếu bạn đang chèn một trích dẫn dài một chút, lớp này sẽ cho phép bạn tắt nó khỏi phần còn lại của văn bản.
Một số trích dẫn hay mà bạn đã tìm thấy.
Footquote Footer
Thêm nguồn trích dẫn bằng cách thêm phần tử chân trang.
Lorem ipsum dolor ngồi amet, consectetur adipiscing elit.
.ngắt văn bản
Điều này ngăn các văn bản siêu dài phá vỡ giao diện của các yếu tố thiết kế khác của bạn.
.phao trái - Mặt hàng nổi còn lại - tất cả các kích cỡ
Nổi trái trên tất cả các kích thước khung nhìn
Phao trái trên khung nhìn cỡ SM (nhỏ) hoặc rộng hơn
Phao trái trên khung nhìn có kích thước MD (trung bình) hoặc rộng hơn
Phao trái trên khung nhìn cỡ LG (lớn) hoặc rộng hơn
Phao trái trên khung nhìn cỡ XL (cực lớn) hoặc rộng hơn
.phao phải - Mặt hàng phao đúng - tất cả các kích cỡ
Nổi ngay trên tất cả các kích thước khung nhìn
Nổi ngay trên khung nhìn cỡ SM (nhỏ) hoặc rộng hơn
Nổi ngay trên khung nhìn có kích thước MD (trung bình) hoặc rộng hơn
Nổi ngay trên khung nhìn cỡ LG (lớn) hoặc rộng hơn
Nổi ngay trên khung nhìn cỡ XL (cực lớn) hoặc rộng hơn
.phao-không - Loại bỏ float - tất cả các kích cỡ
Không nổi trên tất cả các kích thước khung nhìn
Không nổi trên các khung nhìn có kích thước SM (nhỏ) hoặc rộng hơn
Không nổi trên các khung nhìn có kích thước MD (trung bình) hoặc rộng hơn
Không nổi trên các khung nhìn cỡ LG (lớn) hoặc rộng hơn
Không nổi trên các khung nhìn cỡ XL (cực lớn) hoặc rộng hơn
.xóa - Loại bỏ float từ phần tử cha
...
Linh hoạt
Bạn có thể dễ dàng và nhanh chóng quản lý bố cục, sắp xếp, sizings, điều hướng, hiển thị, màu sắc, căn chỉnh và nhiều hơn nữa với công cụ tiện ích Bootstrap duy nhất này.
Flex - sm-lg-md-xl
Kích thước tất cả các yếu tố của bạn bằng các kích thước được xác định trước và hoàn toàn đáp ứng.
...
...
...
...
.hàng uốn và .flex-row-Reverse
Đặt hướng ngang hoặc đảo ngược để bắt đầu từ phía đối diện.
Mục linh hoạt 1
Mục Flex 2
Mục Flex 3
Mục linh hoạt 1
Mục Flex 2
Mục Flex 3
.cột flex và .flex-cột-đảo ngược
Đặt hướng của cột hoặc đảo ngược để đặt từ hướng ngược lại.
Mục linh hoạt 1
Mục Flex 2
Mục Flex 3
Mục linh hoạt 1
Mục Flex 2
Mục Flex 3
.flex-điền
Tiện ích này buộc tất cả các yếu tố chiếm một chiều rộng bằng nhau trong khi chiếm tất cả không gian ngang có sẵn.
Mặt hàng linh hoạt
Mặt hàng linh hoạt
Mặt hàng linh hoạt
.flex-grow- *
Một trong các mục flex sẽ lấp đầy tất cả không gian có sẵn trong khi đảm bảo rằng các mục khác cũng có đủ không gian tối thiểu.
Mặt hàng linh hoạt
Mặt hàng linh hoạt
Mục flex thứ ba
.uốn cong- *
Kích hoạt vật phẩm Khả năng thu nhỏ đến kích thước tối thiểu nhất để điền vào chỗ trống.
Mặt hàng linh hoạt
Mặt hàng linh hoạt
.flex-nowrap, .flex-quấn-đảo ngược và .flex-quấn
Sử dụng các lớp này khi bạn muốn các mục hoặc bọc đến dòng tiếp theo hoặc để khớp với một dòng duy nhất (nowrap) hoặc thực hiện hành động gói ngược lại. (quấn ngược).
...
...
...
.flex justify-nội dung
Thêm lớp này khi bạn muốn chứng minh văn bản ở bên phải hoặc bên trái và khi bạn muốn biện minh đó bắt đầu và kết thúc.
Mục linh hoạt 1
Mục Flex 2
Mục Flex 3
Mục linh hoạt 1
Mục Flex 2
Mục Flex 3
.flex align-item
Chỉ định thời điểm căn chỉnh bắt đầu và khi nào kết thúc cho danh sách các mục.
Mục linh hoạt 1
Mục Flex 2
Mục Flex 3
Mục linh hoạt 1
Mục Flex 2
Mục Flex 3
.flex align-self-start
Bạn cũng có thể ghi đè căn chỉnh vùng chứa cho một mục được chọn trong vùng chứa đó.
Mục flex
Sắp xếp
Làm thế nào và ở đâu bạn muốn căn chỉnh nội dung, các nút, v.v. - phải, trái, giữa?
.căn chỉnh
Mục flex
.hàng đầu, .căn giữa, .căn chỉnh đáy: đặt nút nơi bạn muốn.
đường cơ sởhàng đầuở giữadưới cùng
.align-text-top, .align-text-bottom: đặt văn bản nơi bạn muốn.
đầu văn bảndưới cùng văn bản
Biên giới
Biên giới thêm sang trọng cho một trang web. Sử dụng chúng để nhấn mạnh hoặc thẩm mỹ.
07.06.2020
Bootstrap Cheat Sheet
Jeffrey Wilson Không có thể loại
Nếu bạn có kế hoạch để nhận một số kỹ năng mã hóa, Bootstrap 4 là một lựa chọn vững chắc!
Tại sao?
Bởi vì nó là tiêu chuẩn vàng của sự phát triển front-end:
Nếu bạn đã sẵn sàng, hãy tải xuống bảng cheat bootstrap miễn phí của chúng tôi trong PDF.
Contents
Phiên bản PDF của Bootstrap Cheat Sheet
Bootstrap Cheat Sheet (Tải xuống PDF)
Phiên bản Infographic của Bootstrap Cheat Sheet (PNG)
Bootstrap Cheat Sheet (Tải xuống PNG)
Bootstrap Cheat Sheet
Bootstrap là gì?
Bootstrap 4 là một khung phổ biến để phát triển trang web đầu cuối.
Chủ yếu, nó là một thiết kế đầu tiên trên thiết bị di động CSS và bao gồm cả các mẫu CSS và JavaScript cho những thứ như biểu mẫu, nút, điều hướng, kiểu chữ, thả xuống, cửa sổ bật lên, phương thức và băng chuyền, cùng với các yếu tố giao diện khác. Nhưng don không đánh giá sai về nó: Bootstrap cũng cung cấp nhiều chỗ để tùy chỉnh và bạn có thể sử dụng nó để mã hóa bất kỳ loại trang web nào.
Bạn có thể kiểm tra các tài liệu đầy đủ về trang web chính thức của Bootstrap.
Các thành phần chính của Bootstrap
Bootstrap.css
Đây là gói Bootstrap cơ bản mà bạn sẽ cần Tải xuống. CSS là ngôn ngữ biểu định kiểu cho thông tin tĩnh.
Bootstrap.js
Thư viện JavaScript / jQuery là thứ tăng sức mạnh cho các thành phần nhất định của Bootstrap như hoạt hình, cuộn và tương tác.
Glyphicons
Glyphs là các ký hiệu nguyên tố có kiểu chữ, chẳng hạn như ký hiệu Bảng Anh (£). Bootstrap có một danh sách lớn các biểu tượng glyph nhúng có sẵn miễn phí.
Các yếu tố mã nguồn Bootstrap
Tải xuống mã nguồn Bootstrap bao gồm các tài sản CSS, JavaScript và phông chữ được biên dịch sẵn, cùng với nguồn Ít hơn, JavaScript và tài liệu.
ít hơn/
– biểu định kiểu tiền xử lý cho CSS loại bỏ các tác vụ mã hóa lặp đi lặp lạisass /
– phiên bản mới hơn của bộ tiền xử lý phổ biến hơnjs /
– chỉ cần tham khảo mã JavaScript, cho phép các thành phần Bootstrap hoạt độngphông chữ /
– đây là các phông chữ biểu tượng đi kèm với tải xuốngquận/
– một thư mục chứa các tệp được biên dịch sẵn để sử dụng trong quá trình phát triển trang webGhi chú: Bootstrap cũng yêu cầu cài đặt jQuery cho các plugin JavaScript Bootstrap. jQuery là một thành phần giàu tính năng của thư viện JavaScript và nó sẽ loại bỏ rất nhiều mã JavaScript và kết hợp chúng thành các hành động bạn có thể thực hiện với một dòng.
Để cài đặt trình cắm:
Kích thước màn hình Bootstrap
Bootstrap 4 là một khung phản hồi đầu tiên trên thiết bị di động. Tuy nhiên, bạn vẫn cần cung cấp hướng dẫn kích thước màn hình khi bạn đang tạo lưới bố cục trang. Dưới đây là các kích thước màn hình tiêu chuẩn để tham khảo:
Tối thiểu
Tối đa:
Các thành phần chính của Bootstrap
Các thành phần chính của Bootstrap (Mở rộng)
Cảnh báo
Cảnh báo là tin nhắn cho người dùng khi có sự cố. Ví dụ: nếu người dùng nhập địa chỉ email hoặc số thẻ tín dụng không chính xác, họ sẽ nhận được thông báo cảnh báo lỗi, nhắc họ sửa lỗi.
.cảnh báo chính
Bạn có thể tạo cảnh báo đầy màu sắc cho bất kỳ văn bản. Cảnh báo chính (thông điệp quan trọng hơn) có màu xanh lam nhạt.
.cảnh báo trung học
Thêm một cảnh báo thứ cấp (thông điệp ít quan trọng hơn) bằng màu xám nhạt.
.cảnh giác
Điều này sẽ cảnh báo người dùng rằng hành động của họ đã thành công.
.cảnh báo
Điều này sẽ gửi một thông điệp về hành động sắp tới.
.cảnh báo nguy hiểm
Cảnh báo nguy hiểm tương tự như cảnh báo cảnh báo, nhưng đối với các hành động tiêu cực hơn (ví dụ: bị khóa sau quá nhiều mật khẩu không thành công).
.liên kết cảnh báo
Vì vậy, bạn muốn thêm một tin nhắn và một liên kết đến tin nhắn đó trong cảnh báo ban đầu? Bạn có thể nhúng tin nhắn đó và cùng màu.
.cảnh báo
Nó cung cấp một tùy chọn để đóng cảnh báo sau khi đọc nó.
.cảnh báo
Thêm một tiêu đề nhanh để cảnh báo của bạn. (ví dụ: địa chỉ giao hàng của hoàng cung Nó có thể liên quan đến toàn bộ trang hoặc chỉ một phần nội dung trong trang đó.
.đèn báo
và.cảnh báo tối
Thay đổi kiểu cảnh báo thành màu sáng hoặc xám đậm.
danh hiệu
Sử dụng huy hiệu để hiển thị thêm thông tin bên cạnh danh mục, nút hoặc các yếu tố khác. Bạn có thể tạo và định kiểu chúng bằng các yếu tố ngữ cảnh khác (ví dụ: cảnh báo .badge). Ngoài ra, huy hiệu sẽ chia tỷ lệ để phù hợp với kích thước của phần tử cha (ví dụ: tiêu đề). Cuối cùng, bạn có thể sử dụng huy hiệu như một phần của nút hoặc liên kết để cung cấp bộ đếm.
Ví dụ: Tiêu đề
Giả sử bạn có một số tiêu đề và bạn đang thêm một huy hiệu. Huy hiệu đó sẽ điều chỉnh kích thước để phù hợp với tiêu đề.
.huy hiệu
Sử dụng lệnh này để sửa đổi hình dạng phù hiệu của bạn, làm cho chúng tròn hơn.
Ánh sáng
.huy hiệu chính
+.huy hiệu phụ
Bạn có thể muốn thêm một huy hiệu cho các tin nhắn chính (quan trọng hơn) và phụ (ít quan trọng hơn).
.huy hiệu trong suốt
Giả sử bạn muốn làm cho một nút trong suốt để làm cho nó nổi bật so với phần còn lại. Với Bootcamp 4, bạn không phải sử dụng kiểu dáng nội tuyến. Thay vào đó, sử dụng lệnh sau:
.cảnh báo huy hiệu
,.huy hiệu thành công
,.huy hiệu-thông tin
, hoặc là.huy hiệu nguy hiểm
Thêm một huy hiệu để cảnh báo, thành công, thông tin hoặc cảnh báo nguy hiểm.
Tạo huy hiệu có thể thao tác với Hover và Focus States
Khi người dùng di chuyển con trỏ của họ sang một nút nhưng chưa kích hoạt nó, bạn có thể cung cấp các yếu tố di chuột và tiêu điểm để khuyến khích hành động.
Để làm điều này, hãy sử dụng các lớp .badge- * theo ngữ cảnh trên một thành phần.
Đây là vài ví dụ:
.vụn bánh mì
Breadcrumbs là các thành phần điều hướng sẽ giúp người dùng di chuyển từ trang này sang trang khác mà không bị mất và cung cấp cho họ cách để quay trở lại trang trước.
.nút
Như gợi ý về tên, lệnh .button cho phép bạn tạo và tạo kiểu cho nút.
.nút chính
+.nút phụ
Một nút chính thường được sử dụng cho hành động của người dùng; một nút phụ sau đó có thể được sử dụng để đóng.
.đèn btn
,.btn-tối
,.btn-chính
,.btn-trung học
,.btn-minh bạch
,.btn trắng
,.cảnh báo btn
,.btn-thành công
,.thông tin btn
,.nguy hiểm
Thiết kế các nút của bạn bằng cách sử dụng các tùy chọn kiểu dáng được xác định trước tiêu chuẩn:
.btn-phác thảo
Chọn một phác thảo nút theo các mẫu đoạn trích sau:
.btn-lg
+.btn-sm
Thay đổi kích thước các nút của bạn.
.khối btn
Nhóm các nút của bạn thành một khối. Tất cả các nút được nhóm sẽ trải rộng toàn bộ chiều rộng của cha mẹ.
.hoạt động
Theo mặc định, tất cả các nút sẽ được hiển thị dưới dạng nhấn - với viền tối, nền tối hơn và bóng trong - khi hoạt động.
Ghi chú: Bạn không cần phải thêm một lớp
Nhưng, nếu vì một lý do nào đó, bạn cần buộc giao diện hoạt động tương tự, hãy sử dụng đoạn mã sau:
Ghi chú: Bạn cũng có thể thêm thuộc tính Boolean bị vô hiệu hóa vào bất kỳ nút nào để làm cho nó trông không hoạt động.
Nhóm nút
Sử dụng phần tử này để tạo một nhóm các nút có kích thước tương tự nhau mà không cần mã hóa từng nút riêng biệt.
.nhóm btn
.btn-nhóm-dọc
Tạo kiểu cho một nhóm nút dọc:
.nhóm btn
(Lồng nhau)Bạn cũng có thể tạo các nút lồng nhau với menu thả xuống.
.btn-thanh công cụ
Sắp xếp các nhóm nút vào một thanh công cụ để tạo ra các thành phần phức tạp hơn. Bạn có thể áp dụng các lớp tiện ích khác nhau để tạo kiểu bổ sung.
.btn-nhóm-chuyển đổi
Tải về Bootstrap Toggle plugin để sửa đổi các hộp kiểm tra thành toggles. Sau đó, bạn có thể thêm các nút chuyển đổi dữ liệu = nút Nút thành một nhóm nút có các nút được sửa đổi để cho phép hành vi chuyển đổi của chúng thông qua JavaScrip. Sau đó, sử dụng
.btn-nhóm-chuyển đổi
để tạo kiểu đầu vào khác nhau trong các nút của bạn.thẻ
Thẻ là các thùng chứa linh hoạt với các tùy chọn cho tiêu đề / chân trang, màu sắc và tùy chọn hiển thị, v.v. Họ đã thay thế một số thành phần trước đó (bảng, giếng và hình thu nhỏ) từ Bootstrap 3.
.thân thẻ
Yếu tố chính của thẻ. Sử dụng nó để thêm một phần đệm trong thẻ của bạn.
.tiêu đề thẻ
Mã một tiêu đề cho thẻ của bạn. Thêm cái này vào nhãn.
.phụ đề thẻ
Bạn cũng có thể thêm phụ đề vào mỗi thẻ để thêm phần huyền ảo.
.liên kết thẻ
Nhúng một liên kết bên trong thẻ của bạn. Thêm lớp này vào một nhãn.
.văn bản thẻ
Thêm một số từ vào thẻ của bạn. Nhiều hay ít như bạn muốn.
.thẻ-img-top
Bạn cũng có thể gửi kèm một hình ảnh trên thẻ của bạn. Đoạn mã này sẽ thêm một đỉnh của nó.
.thẻ-img-bottom
Hoặc bạn có thể có hình ảnh hiển thị dưới cùng của thẻ. Cuộc gọi của bạn.
.thẻ-img-lớp phủ
Sử dụng một hình ảnh làm nền và phủ lên tất cả các văn bản.
.tiêu đề thẻ
Đặt một tiêu đề tùy chỉnh ở đầu thẻ của bạn. Nó sẽ được hiển thị trên tất cả các tiêu đề và phụ đề.
.chân thẻ
Ngoài ra, bạn có thể mã chân trang cho thẻ của mình để truyền đạt một số thông tin bổ sung. Nó sẽ đi ngay sau
.thân thẻ
..nhóm thẻ
Chơi xung quanh với bố trí thẻ và xây dựng một nhóm thẻ. Một nhóm sẽ hoạt động như một yếu tố duy nhất, được đính kèm, với mỗi thẻ có cùng chiều rộng và chiều cao. Bạn cũng có thể áp dụng
hiển thị: flex;
để cải thiện kích thước.Ghi chú: Bố trí thẻ nhóm không đáp ứng!
.cột thẻ
Bạn có thể sắp xếp các thẻ của bạn vào các cột giống như Masonry. Điều này cho phép bạn xây dựng một số mẫu sáng tạo chỉ bằng CSS.
Ghi chú: Nếu thẻ của bạn vượt qua các cột, hãy đặt chúng thành
hiển thị: khối nội tuyến
..cỗ bài
Lắp ráp một bộ thẻ không gắn với chiều cao và chiều rộng bằng nhau.
Băng chuyền
Thiết lập trình chiếu để xoay vòng qua một loạt các slide, văn bản hoặc hình ảnh. Được xây dựng với CSS 3D và một số JS. Bạn có thể thêm hình ảnh, văn bản hoặc đánh dấu tùy chỉnh, cũng như thêm hoặc xóa các điều khiển trước đó / tiếp theo.
Carousel Slide - Tạo một Slide
.băng chuyền
Thêm hiệu ứng làm mờ tuyệt vời này cho một slide trước cái tiếp theo.
.băng chuyền
Thêm kiểm soát và hỗ trợ cho tiếp theo / trước và các chỉ số như số trang chiếu.
.chú thích
Thêm chú thích thú vị cho mỗi hoặc một vài slide.
Thu gọn & Accordion
Thu gọn là một plugin JavaScript mà bạn có thể sử dụng để ẩn nội dung trong menu Thu gọn vụn vụn. Phần tử được thu gọn sẽ làm động nó chiều cao từ 0 đến giá trị bình thường khi được kích hoạt và ngược lại.
.sự sụp đổ
Ẩn nội dung của bạn.
.chương trình sụp đổ
Hiển thị nội dung bị sập.
.sụp đổ
Kích hoạt nội dung như một yếu tố thu gọn; chấp nhận các đối tượng tùy chọn.
.đàn accordion
Một phần mở rộng của hành vi thu gọn vào thẻ. Bạn có thể sử dụng tính năng này để tạo ra một cây đàn.
Ghi chú: Bạn phải sử dụng .accordion như một trình bao bọc
Ví dụ đoạn trích Accordion với 2 mục nhóm
Thả xuống
Sử dụng plugin này để tạo lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết người dùng. Nó là một tùy chọn tiện dụng để tạo menu. Dropdowns được xây dựng thông qua Popper.js, một phần của thư viện bên thứ ba. Vì vậy, hãy chắc chắn rằng bạn bao gồm popper.min.js trước JavaScript của Bootstrap. Hoặc bạn chỉ có thể sử dụng
bootstrap.bundle.min.js
/bootstrap.bundle.js
. Cả hai đều chứaPopper.js
.Mẹo tạo kiểu nhanh: tất cả các danh sách thả xuống trong Bootstrap đều được bật bằng cách nhấp, không di chuột.
.thả xuống
Thêm một menu thả xuống đơn giản với các nút.
.thả xuống-chuyển đổi-chia
Tạo danh sách thả xuống của nút chia với khoảng cách phù hợp xung quanh dấu mũ thả xuống.
.bỏ học
Bạn có biết rằng bạn có thể tạo kiểu cho một menu sắp tới thay vì xuống không? Bây giờ bạn làm!
.lơ mơ
Cung cấp menu ở bên phải của nút.
.rủ xuống
Và bạn cũng có thể hiển thị menu bên trái.
.thả xuống-mục-văn bản
Thêm các mục thả xuống không tương tác vào menu của bạn.
.mục thả xuống bị vô hiệu hóa
Bạn cũng có thể chọn tắt bất kỳ mục menu nào.
.dải phân cách
Thêm một dải phân cách đơn giản giữa các thành phần menu để thu hút thêm sự chú ý.
.menu thả xuống
Căn chỉnh toàn bộ menu bên phải.
Các hình thức
Bạn có thể dễ dàng xây dựng các biểu mẫu hấp dẫn và mã tùy chỉnh kiểu, bố cục và các yếu tố bổ sung. Trong Bootstrap 4, các biểu mẫu cũng nhận được một số điều khiển đầu vào mới như bầu chọn số, xác minh email và các thứ khác, cùng với một loạt các lớp đáp ứng mới.
Ví dụ của
.nhóm hình thức
.kiểm soát hình thức
Sử dụng lớp này để định kiểu tất cả các điều khiển dạng văn bản như đầu vào của người dùng, tiêu đề, v.v..
.hình thức kiểm soát tập tin
Thêm lớp này bất cứ khi nào bạn cần cung cấp cho người dùng tùy chọn để tải tệp lên biểu mẫu.
.hình thức kiểm soát-lg
và.hình thức kiểm soát-sm
Tạo một hệ thống phân cấp trực quan trong biểu mẫu của bạn bằng cách thêm
.hình thức kiểm soát-lg
để làm cho các khu vực đầu vào lớn hơn và.hình thức kiểm soát-sm
để làm cho những cái nhỏ hơn..hình thức kiểm soát-bản rõ
Sử dụng lớp này để hiển thị chính xác
các yếu tố trong hình thức của bạn. Nó sẽ thay thế kiểu dáng trường biểu mẫu mặc định bằng văn bản thuần trong khi vẫn giữ đúng lề và phần đệm.
.hình thức kiểm soát phạm vi
Đặt đầu vào phạm vi có thể cuộn theo chiều ngang cho biểu mẫu của bạn.
.kiểm tra mẫu
Thêm hộp kiểm vào biểu mẫu của bạn.
Ghi chú: Bạn cũng có thể thêm các nút radio thay vì các hộp kiểm bằng
hình thức kiểm tra đầu vào
loại = "đài"
..hình thức kiểm tra nội tuyến
Tạo một danh sách các hộp kiểm theo chiều ngang.
.chỉ đọc
thuộc tính booleanChỉ định rằng một hình thức đầu vào nhất định là chỉ đọc. Điều này sẽ ngăn việc sửa đổi giá trị đầu vào.
Biểu mẫu tùy chỉnh
Bootstrap 4 có một số thành phần biểu mẫu tùy chỉnh thay thế mặc định của trình duyệt.
.hộp kiểm tùy chỉnh
Như tên ngụ ý, bạn có thể tạo hộp kiểm tùy chỉnh cho biểu mẫu của mình.
.đài phát thanh tùy chỉnh
Khoan và bạn cũng có thể tạo kiểu cho một đài phát thanh tùy chỉnh!
.chuyển đổi tùy chỉnh
Cuối cùng, bạn cũng có thể tạo một công tắc tùy chỉnh thời trang.
.chọn tùy chỉnh
Sử dụng lệnh này để thêm một menu chọn tùy chỉnh.
.tập tin tùy chỉnh
Tùy chỉnh tải lên tập tin người dùng. Để làm như vậy, thêm
.tập tin tùy chỉnh
lớp học xung quanhđầu vào
vớigõ = "tập tin"
. Sau đó thêm.tùy chỉnh tập tin đầu vào
với nó..phạm vi tùy chỉnh
Thiết kế một menu phạm vi tùy chỉnh.
Nhóm đầu vào
Phần tử nhóm đầu vào cho phép bạn tạo các điều khiển biểu mẫu tương tác và hấp dẫn hơn. Sử dụng nó để thêm văn bản, biểu tượng hoặc nút ở cả hai bên của trường nhập liệu.
.đầu vào
- Ví dụ cơ bản.đầu vào nhóm đầu vào
Cung cấp thêm văn bản trước đầu vào.
.đầu vào nhóm-nối
Hoặc liệt kê chúng phía sau đầu vào.
.đầu vào nhóm văn bản
Sử dụng lớp này để định kiểu văn bản được chỉ định.
Jumbotron
Một thành phần linh hoạt sẽ giúp bạn tạo các hộp lớn để thu hút sự chú ý nhiều hơn đến nội dung hoặc thông điệp nổi bật. Trong Bootstrap, jumbotron trông giống như một hộp màu xám với các góc tròn tự động phóng to tất cả các kích thước phông chữ và văn bản bên trong nó.
Bạn có thể thêm bất kỳ HTML và các lớp Bootstrap khác trong một jumbotron.
.jumbotron
.chất lỏng jumbotron
Thay đổi một chút về giao diện của jumbotron và làm cho nó rộng toàn trang mà không có các góc tròn.
Danh sách nhóm
Sử dụng các nhóm danh sách để hiển thị một loạt nội dung, với nhiều tùy chọn để tạo kiểu và bố cục.
.danh sách nhóm
- Thí dụTạo một nhóm danh sách cơ bản với một số mục.
.danh sách nhóm-mục hoạt động
Thêm lớp .active để làm nổi bật lựa chọn hoạt động hiện tại trong danh sách.
.danh sách nhóm bị vô hiệu hóa
Cho thấy rằng một trong các mục danh sách không có sẵn / bị vô hiệu hóa. Một số yếu tố hoạt động (ví dụ: liên kết) sẽ yêu cầu JavaScript tùy chỉnh ở đầu .disable để không hoạt động hoàn toàn.
.danh sách nhóm-mục-hành động
Thêm nhiều tương tác hơn vào danh sách của bạn bằng cách thêm các hiệu ứng kiểu dáng (bị vô hiệu hóa, di chuột, hoạt động, v.v.) vào các mục riêng lẻ.
.danh sách nhóm
Thay đổi giao diện của danh sách của chúng tôi bằng cách loại bỏ các đường viền và các góc tròn. Tất cả các mục sẽ được đặt cạnh nhau.
.danh sách nhóm ngang
Bạn cũng có thể thiết lập danh sách của mình theo chiều ngang thay vì theo chiều dọc. Ngoài ra, bạn có thể mã hóa nhóm danh sách để trở thành ngang bắt đầu tại một điểm dừng tối thiểu nhất định chiều rộng tối thiểu bằng cách sử dụng
.danh sách nhóm-ngang- {sm | md | lg | xl}
.Ghi chú: Bạn có thể sử dụng các nhóm danh sách ngang với các nhóm danh sách tuôn ra cùng một lúc.
.danh sách nhóm
(ánh sáng
,tiểu học tối
,thứ hai
,trong suốt
,trắng
,cảnh báo
,sự thành công
,thông tin
,nguy hiểm
)Áp dụng các kiểu tiêu chuẩn cho các mục danh sách riêng lẻ.
Đối tượng truyền thông
Bootstrap 4 cho phép bạn xây dựng các thành phần phức tạp, lặp đi lặp lại có các văn bản và một số phương tiện truyền thông. Các đối tượng truyền thông là một công cụ tuyệt vời để xây dựng các yếu tố giống như tweet và các hộp đặc trưng. Ngoài ra, chúng rất dễ sử dụng vì chúng chỉ cần hai lớp.
.phương tiện truyền thông
Sử dụng
.phương tiện truyền thông
gói và.cơ quan truyền thông
xung quanh nội dung để tạo một đối tượng truyền thông duy nhất. Đây là một mẫu cho một tiêu đề..cơ quan truyền thông
Một lớp chỉ định những gì sẽ có bên trong đối tượng của bạn. Bạn có thể mã các sắp xếp khác nhau cho nội dung của bạn. Mặc định là hàng đầu, nhưng bạn có thể căn chỉnh ở giữa hoặc cuối.
Truyền thông lồng nhau
Bạn cũng có tùy chọn để bao gồm nhiều hơn một đối tượng phương tiện. Các đối tượng được lồng nhau bằng cách bắt đầu ở lề trái và lập bảng cho từng đối tượng mới trong.
Đây là một đoạn để làm tổ.
Hải quân
.hải quân
là một lớp cơ sở giúp bạn xây dựng tất cả các loại thành phần điều hướng, ngay cả với các phần ghi đè kiểu. Bạn có nhiều tùy chọn để tùy chỉnh..hải quân
thí dụ.vật phẩm hải quân
Một lớp để chỉ định một mục mới trong menu điều hướng.
.nav justify-content-centre
Căn chỉnh điều hướng của bạn theo chiều ngang ở trung tâm.
.nav justify-content-end
Hoặc biện minh cho nội dung của bạn ở bên phải.
.tab điều hướng
Thêm một số tab thú vị vào menu điều hướng của bạn.
Ghi chú: Có thể bạn sẽ cần tab plugin JavaScript Cài đặt.
.thuốc hải quân
Ngoài ra, bạn có thể phong cách các thành phần menu như thuốc.
.Nav-justified
Cân bằng độ rộng của tất cả các tab / thuốc bằng cách thêm
.hải quân
đến.hải quân
,.tab điều hướng
, hoặc là.thuốc hải quân
.Ví dụ về các yếu tố Nav
.điều hướng
Thay vì biện minh, bạn cũng có thể buộc các mục trong menu của mình điền vào tất cả các không gian có sẵn bằng lệnh này. Tuy nhiên, tất cả các mục sẽ không có cùng chiều rộng.
Thanh cái
Navbar là một tiêu đề điều hướng đáp ứng với rất nhiều tính linh hoạt và hỗ trợ cho việc xây dựng thương hiệu, biểu mẫu, liên kết và hơn thế nữa.
NavBar - Tiêu đề điều hướng cơ bản ở đầu trang
.nhãn hiệu
Navbars được trang bị sẵn với sự hỗ trợ cho một số thành phần phụ. Yếu tố này sẽ làm cho văn bản của bạn nổi bật hơn. Nó được thiết kế sẵn để chứa một sản phẩm hoặc tên công ty.
.thanh điều hướng
Sử dụng lớp này để thêm các chuỗi văn bản trung tâm theo chiều dọc và khoảng cách ngang.
Tôi là một văn bản thanh điều hướng với một yếu tố nội tuyến
.điều hướng mở rộng
(-sml -mdl -lgl -xl)Cho phép thu gọn đáp ứng.
.thanh điều hướng
Lập trình các hành vi chuyển hướng khác nhau (ví dụ: giữ các mục hoạt động hoặc thu gọn chúng).
.mẫu đơn
Đặt một biểu mẫu (ví dụ: thanh tìm kiếm) trong tiêu đề điều hướng.
.sụp đổ.navbar-sụp đổ
Nhóm và thu gọn nội dung thanh điều hướng bởi một điểm dừng chính.
.thanh cố định trên cùng
Đặt thanh điều hướng cố định làm chính và có màu tối.
Phương thức Bootstrap (Plugin)
Đây là một plugin JavaScript được sử dụng để thêm các hộp thoại vào một trang web, chẳng hạn như thông báo người dùng, nội dung tùy chỉnh và cửa sổ bật lên hộp đèn.
Các phương thức bao gồm HTML, CSS và JavaScript. Và bạn chỉ có thể hiển thị một cửa sổ phương thức, vì những người tạo Bootstrap coi các mô hình lồng nhau là một thực hành UX kém.
Ví dụ phương thức
.phương thức-hộp thoại làm trung tâm
Bạn có thể chọn tập trung tất cả nội dung theo chiều dọc.
.phương thức-hộp thoại-cuộn
Khi bạn cần đóng gói thêm nội dung vào một phương thức (ví dụ: chính sách bảo mật dài), bạn có thể thêm lớp này để làm cho nó cuộn độc lập khỏi trang.
.phương thức phai
Cho phép mờ dần cho nội dung.
.phương thức-lg
,.phương thức-sm
,.phương thức-xl
Bạn cũng có thể điều chỉnh kích thước của phương thức của bạn.
Ghi chú: Bootstrap cung cấp một bản demo của tất cả các thành phần này tại Trang phương thức. Họ đáng xem.
Máy chiếu
Nếu bạn biết HTML, paginators không có gì mới đối với bạn. Với Bootstrap, bạn có một số tùy chọn để tạo kiểu cho chúng.
.phân trang
- ví dụ phân trang cơ bản.mục bị vô hiệu hóa
Bạn có thể chọn tắt một trong các thành phần phân trang hoặc một số yếu tố phân trang.
.mục trang hoạt động
Hoạt động cho biết giai đoạn hiện tại bằng cách làm nổi bật nó bằng màu xanh.
.phân trang-lg
Làm cho phân trang của bạn lớn hơn và táo bạo hơn.
.phân trang-sm
Hoặc làm cho nó nhỏ nhắn và ít nhìn thấy kích thước.
Popovers
Plugin Popover cho phép bạn tạo một hộp bật lên với nội dung và các yếu tố khác, được kích hoạt bất cứ khi nào người dùng nhấp vào yếu tố đó. Popovers tương tự như chú giải công cụ nhưng phù hợp với nhiều nội dung hơn.
Những điều cần biết trước khi bạn bắt đầu
data-toggle = "popover"
đến một yếu tố để tạo ra một popover.nội dung dữ liệu
thuộc tính để chỉ định nội dung nào sẽ được hiển thị trong phần thân của cửa sổ bật lên.popover ()
.Popover
Tại đây, mã sẽ cho phép bật lên trên trang của bạn:
Định vị Popovers của bạn - Trên cùng, Dưới cùng, Trái hoặc Phải
Chỉ định một trong bốn vị trí cho cửa sổ bật lên của bạn.
Popover trên đầu trang
Popover bên phải
Popover trên dưới
Popover bên trái
Tạo một Popover Container
Mã hóa một thùng chứa tùy chỉnh bất cứ khi nào bạn cảm thấy rằng một số kiểu trên phần tử cha có thể làm rối giao diện của nó. Thêm một thuộc tính bộ chứa sẽ gói gọn trong HTML của Popover trong phần tử cha.
.bỏ qua
Cung cấp cho người dùng tùy chọn để đóng cửa sổ bật lên khi họ nhấp vào phần tử lần thứ hai. Bạn có thể sắp xếp để popover loại bỏ khi người dùng cũng nhấp vào bên ngoài phần tử: Sử dụng
data-trigger = "tập trung"
thuộc tính.Theo mặc định, cửa sổ bật lên được đóng lại khi bạn nhấp vào phần tử một lần nữa. Tuy nhiên, bạn có thể sử dụng
data-trigger = "tập trung"
thuộc tính sẽ đóng cửa sổ bật lên khi nhấp vào bên ngoài phần tử:Phát triển
Phát triển thanh tiến trình tùy chỉnh và thêm các yếu tố kiểu dáng bổ sung như hình động và nhãn văn bản nếu bạn muốn.
.phát triển
Lớp để thiết lập một thanh tiến trình cơ bản. Nó hoạt động như một trình bao bọc, biểu thị giá trị tối đa của thanh tiến trình của bạn.
.thanh tiến trình
Sử dụng lệnh này để chỉ định tiến trình hiện tại.
.thanh tiến
Thêm một số sọc vào phần thanh tiến trình.
.tiến bộ-hoạt hình
Bây giờ có được những sọc di chuyển, phong cách cực cắt tóc.
Thêm nhiều thanh tiến trình
Bạn có thể đồng thời thêm một số thanh để chỉ ra tiến trình cho các yếu tố khác nhau. Điều chỉnh phân bổ cho từng cái theo ý thích của bạn.
Cuộn
Một plugin tiện dụng bạn có thể sử dụng để làm nổi bật các liên kết điều hướng hoặc các mục trong nhóm danh sách để cho người dùng biết vị trí hiện tại của họ trên một trang.
Ví dụ về Scrollstrap cuộn cơ bản
Hãy để giải nén điều này thêm một chút nữa.
data-spy = "scroll"
+mục tiêu dữ liệu
Để bật scrollspy trong điều hướng thanh trên cùng, thêm
data-spy = "scroll"
thuộc tính cho yếu tố bạn muốn để mắt đến. (trong hầu hết các trường hợp, mục tiêu của bạn là).
Chỉ định
mục tiêu dữ liệu
thuộc tính cho phần tử cha trong.hải quân
thành phần, để các liên kết điều hướng được nhắm mục tiêu để làm nổi bật.bù dữ liệu
Điều này chỉ định một số vị trí của cuộn và có thể được điều chỉnh. Mặc định là 10 pixel.
Gọi Scrollspy qua JavaScript
Bạn cũng có một số phương pháp để bật ScrollSpy bằng JavaScript. Để làm điều đó, hãy thêm lệnh sau vào CSS của bạn, sau
vị trí: tương đối;
.cuộn giấy ('làm mới')
Khi bạn thêm hoặc xóa các phần tử khỏi DOM DOM và cố gắng sử dụng scrollspy, bạn sẽ phải gọi phương thức refresh bằng lệnh tiếp theo:
.cuộn giấy ('vứt bỏ')
Sử dụng phương pháp này để loại bỏ phần tử cuộn cuộn.
kích hoạt.bs.scrollspy
Sự kiện này kích hoạt phần tử cuộn bất cứ khi nào scrollspy kích hoạt một mục mới.
Spinner
Sử dụng plugin này để thêm spinner hoạt hình đó. Spinners được xây dựng chỉ với HTML và CSS, không có bất kỳ JS. Nhưng bạn có thể cần JavaScript cho một số tùy chọn kiểu dáng, ví dụ: để chuyển đổi tầm nhìn của họ. Ngoài ra, bạn có một số tùy chọn tốt đẹp để lựa chọn.
.biên giới spinner
Xây dựng một chỉ số tải màu đen và trắng.
.spinner-Border-sơ cấp
(-thứ hai, ánh sáng, -dark, -warning, -success, -info, -danger)Hoặc thêm đường viền đầy màu sắc, sử dụng các thuộc tính kiểu dáng Bootstrap tiêu chuẩn.
Phát triển Spinner
Tạo một spinner xung làm tăng và giảm kích thước. Một thay thế sôi nổi cho spinner quay. Một lần nữa, nó có thể được thiết kế trong một số màu sắc.
Bàn
Bootstrap cung cấp một cách dễ dàng để tạo bảng. Thêm lớp cơ sở
.bàn
đến mộtGhi chú: Tất cả các kiểu bảng được kế thừa trong Bootstrap 4. Mỗi bảng lồng nhau sẽ được tạo kiểu giống như cha mẹ.
.bàn
- thí dụ.bàn tối
Tạo một bảng với nền tối và văn bản sáng.
.ánh sáng
và.sợi chỉ tối
Bạn cũng có thể chọn chỉ tô sáng một trong các mục trong bảng bằng thuộc tính dark / light.
.sọc bàn
Thêm lớp này vào trong
để làm cho bảng của bạn ngựa vằn..viền bàn
Kiểu viền cho tất cả các ô và mặt bảng.
.không biên giới
Bỏ các đường viền để tạo cho bàn của bạn một sự tinh tế tối giản.
.bảng di chuột
Thêm trạng thái di chuột trên các hàng của bảng.
.bàn-sm
Thu nhỏ bảng của bạn. Lớp này sẽ cắt một nửa phần đệm.
.hoạt động bảng
(-primary, -default, -secondary, -success, -danger, -warning, -info, -light, -dark)Vẽ các hàng bảng riêng lẻ bằng các màu khác nhau.
Bánh mì nướng
Một plugin cho phép bạn thêm các thông báo đẩy của Wikipedia với Flexbox - rất dễ dàng để định vị và căn chỉnh. sử dụng chúng như là một thay thế cho cảnh báo.
.bánh mì nướng
- thí dụChú giải công cụ
Chú giải công cụ là các cửa sổ bật lên văn bản nhỏ cung cấp cho người dùng một số ngữ cảnh bổ sung trên nút hoặc một yếu tố trang web khác. Trong Bootstrap 4, chú giải công cụ sử dụng thư viện Popper.js để định vị. Đó là lý do tại sao để sử dụng chúng, bạn phải bao gồm
popper.min.js
trướcbootstrap.js
hoặc dùngbootstrap.bundle.min.js
/bootstrap.bundle.js
.Kích hoạt chú giải công cụ
Căn chỉnh công cụ
Tooltip trên đầu trang
Chú giải công cụ bên phải
Chú giải công cụ ở phía dưới
Chú giải công cụ bên trái
Để biết các tùy chỉnh nâng cao và phương thức JavaScript, hãy kiểm tra tài liệu chính thức của Tooltip.
Tinh chất tạo kiểu Bootstrap
Bootstrap Styling Essentials (Mở rộng)
Điểm dừng
Đối với hầu hết các thành phần, bố cục và hệ thống lưới Bootstrap sử dụng các giá trị điểm dừng sau:
Lưới và cột
Dễ dàng bố trí và căn chỉnh nội dung thông qua Flexbox; hoàn toàn đáp ứng. Bạn nhận được một hệ thống 12 cột, 5 tầng theo mặc định, các lớp được xác định trước và rất nhiều biến.
Tùy chọn kích thước lưới
col-xs-
: chiều rộng container - tự động / không có; chiều rộng cột - tự động..col-sm-
: chiều rộng vùng chứa - 750px; chiều rộng cột - ~ 62px.col-md-
: chiều rộng vùng chứa - 970px; chiều rộng cột - ~ 81px.col-lg-
: chiều rộng vùng chứa - 1170px; chiều rộng cột - ~ 97pxCăn bản
.thùng đựng hàng
Lưới cha mẹTạo 3 cột bằng nhau với các lớp lưới được xác định trước.
.chất lỏng chứa
Chia tỷ lệ container của bạn để trải rộng trên toàn bộ quan điểm.
Kích thước cột
Chọn trong số xs, sm, md, lg. Một lần nữa, khi bạn thêm các cột, chúng phải phù hợp với kích thước màn hình của tất cả các thiết bị hoặc người dùng sẽ bị thất vọng.
Tại đây, đoạn mã này - chỉ cần thay đổi thành phần kích thước:
.không có máng xối
Không gian tiêu chuẩn giữa các cột là 15px ở mỗi bên. Nhưng bạn có thể loại bỏ nó.
Kiểu chữ
Tất cả mọi thứ bạn cần cho các tiêu đề, văn bản cơ thể, danh sách, và nhiều hơn nữa.
Căn chỉnh văn bản - Trái, Phải, Căn giữa, Chính đáng
Danh sách nội tuyến - Hiển thị danh sách trong một dòng
List-Unstyled - Xóa kiểu danh sách mặc định
.chữ thường
.chữ hoa
.viết hoa
.cắt văn bản
.văn bản-nowrap
.văn bản đơn sắc
.ẩn văn bản
.trang trí văn bản-không
.khởi tạo
Thêm cỡ chữ nhỏ hơn để viết tắt kiểu.
Chì
Khi bạn muốn thêm điểm nhấn vào một đoạn nội dung cụ thể, bạn có thể làm cho phông chữ lớn hơn một chút và thậm chí mỏng hơn, để đoạn văn nổi bật một cách trực quan.
Blockquote
Nếu bạn đang chèn một trích dẫn dài một chút, lớp này sẽ cho phép bạn tắt nó khỏi phần còn lại của văn bản.
Footquote Footer
Thêm nguồn trích dẫn bằng cách thêm phần tử chân trang.
.ngắt văn bản
Điều này ngăn các văn bản siêu dài phá vỡ giao diện của các yếu tố thiết kế khác của bạn.
Phao
.phao trái
- Mặt hàng nổi còn lại - tất cả các kích cỡ.phao phải
- Mặt hàng phao đúng - tất cả các kích cỡ.phao-không
- Loại bỏ float - tất cả các kích cỡ.xóa
- Loại bỏ float từ phần tử chaLinh hoạt
Bạn có thể dễ dàng và nhanh chóng quản lý bố cục, sắp xếp, sizings, điều hướng, hiển thị, màu sắc, căn chỉnh và nhiều hơn nữa với công cụ tiện ích Bootstrap duy nhất này.
Flex - sm-lg-md-xl
Kích thước tất cả các yếu tố của bạn bằng các kích thước được xác định trước và hoàn toàn đáp ứng.
.hàng uốn
và.flex-row-Reverse
Đặt hướng ngang hoặc đảo ngược để bắt đầu từ phía đối diện.
.cột flex
và.flex-cột-đảo ngược
Đặt hướng của cột hoặc đảo ngược để đặt từ hướng ngược lại.
.flex-điền
Tiện ích này buộc tất cả các yếu tố chiếm một chiều rộng bằng nhau trong khi chiếm tất cả không gian ngang có sẵn.
.flex-grow- *
Một trong các mục flex sẽ lấp đầy tất cả không gian có sẵn trong khi đảm bảo rằng các mục khác cũng có đủ không gian tối thiểu.
.uốn cong- *
Kích hoạt vật phẩm Khả năng thu nhỏ đến kích thước tối thiểu nhất để điền vào chỗ trống.
.flex-nowrap
,.flex-quấn-đảo ngược
và.flex-quấn
Sử dụng các lớp này khi bạn muốn các mục hoặc bọc đến dòng tiếp theo hoặc để khớp với một dòng duy nhất (nowrap) hoặc thực hiện hành động gói ngược lại. (quấn ngược).
.flex justify-nội dung
Thêm lớp này khi bạn muốn chứng minh văn bản ở bên phải hoặc bên trái và khi bạn muốn biện minh đó bắt đầu và kết thúc.
.flex align-item
Chỉ định thời điểm căn chỉnh bắt đầu và khi nào kết thúc cho danh sách các mục.
.flex align-self-start
Bạn cũng có thể ghi đè căn chỉnh vùng chứa cho một mục được chọn trong vùng chứa đó.
Sắp xếp
Làm thế nào và ở đâu bạn muốn căn chỉnh nội dung, các nút, v.v. - phải, trái, giữa?
.căn chỉnh
.hàng đầu
,.căn giữa
,.căn chỉnh đáy
: đặt nút nơi bạn muốn..align-text-top
,.align-text-bottom
: đặt văn bản nơi bạn muốn.Biên giới
Biên giới thêm sang trọng cho một trang web. Sử dụng chúng để nhấn mạnh hoặc thẩm mỹ.
.biên giới
Chào thế giới
.ánh sáng biên giới
,-tối
,-sơ cấp
,-thứ hai
,-cảnh báo
,-sự thành công
,-nguy hiểm
,-thông tin
,-trắng
.biên giới-
(hàng đầu
,đúng
,dưới cùng
,trái
)Tùy chọn kiểu dáng góc biên giới
(
.tròn
,.đầu tròn
,.tròn bên phải
,.đáy tròn
,.tròn trái
,.vòng tròn
)Chức vụ
Cấu hình vị trí của các phần tử.
.đầu dính
Định vị một phần tử ở đầu chế độ xem, đi từ cạnh này sang cạnh khác.
.đầu cố định
,.đáy cố định
Đặt một phần tử ở trên cùng hoặc dưới cùng của chế độ xem, từ cạnh này sang cạnh khác.
Bóng
Thêm sự tương phản trang trí cho thêm hấp dẫn.
.bóng
.không bóng
.bóng-sm
.bóng-lg
Hiển thị
Điều chỉnh mức độ hiển thị của bất kỳ yếu tố nào.
.có thể nhìn thấy
.vô hình
Случайные статьи
Back to Top
detector