Khái niệm cơ bản về Bootstrap. Lưới lồng nhau trong Bootstrap. Bố cục thích ứng cho các tiện ích
Trong bài học này, bạn sẽ học cách kết nối nền tảng Twitter khởi động 3 vào trang web và tìm hiểu xem nó bao gồm những tập tin nào.
Biểu mẫu phân phối nền tảng Twitter BootstrapĐể tìm hiểu nền tảng Twitter Bootstrap, bạn cần có:
Phiên bản được biên dịch và rút gọn của khung Twitter Bootstrap 3 là hình thức phân phối chính của khung này mà hầu hết các nhà phát triển web lựa chọn. Mẫu này việc phân phối dễ dàng kết nối với trang web của bạn vì nó chứa các tệp CSS và JavaScript được chuẩn bị trước và rút gọn, cũng như các biểu tượng ở định dạng phông chữ.
Phiên bản nguồn của nền tảng bao gồm, ngoài các tệp CSS và JavaScript được biên dịch sẵn, còn có mã nguồn của nền tảng này (tệp Ít hơn và JavaScript), tài liệu bằng tiếng Anh, nhiều ví dụ khác nhau, thông tin giấy phép và nhiều hơn nữa.
Trong bài học này, chúng ta sẽ xem xét việc kết nối một phiên bản được biên dịch trước và rút gọn, có thể tải xuống từ liên kết ở trên. Trong hình thức phân phối nền tảng Twitter Bootstrap 3 này, chúng tôi quan tâm nhất đến các phiên bản rút gọn (nén) của các tệp đã biên dịch, vì chúng có kích thước nhỏ hơn và do đó, tăng tốc độ tải các trang web của trang web.
Nhưng trước khi chuyển sang kết nối nền tảng Twitter Bootstrap với một trang web, chúng ta cần xem xét cấu trúc của nó ở cấp độ tệp.
Cấu trúc tệp của nền tảng Bootstrap 3Sau khi tải phiên bản Bootstrap 3 được biên dịch sẵn và rút gọn xuống máy tính, bạn cần giải nén nó bằng bất kỳ trình lưu trữ nào vào thư mục dự án web của mình.
Nếu nhìn vào thư mục này, chúng ta sẽ thấy Twitter Bootstrap framework bao gồm 3 thư mục ("CSS", "FONTS" và "JS") và các tệp.
Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js / │ ├ ── bootstrap.js │ └── bootstrap.min.js └── phông chữ/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └ ── glyphicons-halflings-regular.woff
Tệp nền tảng được trình bày theo 2 loại:
- Loại thứ nhất là các tệp CSS và JavaScript được biên dịch sẵn (bootstrap.css, bootstrap-theme.css, bootstrap.js)
- Loại thứ 2 - đây là các tệp CSS và JavaScript được biên dịch trước và rút gọn (nén) (bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js)
Tệp loại 2 được ưu tiên sử dụng cho trang web vì chúng chứa mã giống hệt như tệp loại 1 nhưng ở trạng thái nén. Do đó, các trang web sử dụng tệp loại 2 của nền tảng Twitter Bootstrap 3 sẽ tải nhanh hơn.
Ngoài các tệp này, gói này còn bao gồm 4 tệp phông chữ "Glyphicons" khác (glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff), mà Chúng chỉ khác nhau ở định dạng lưu trữ phông chữ. Phông chữ "Glyphicons" bao gồm 200 biểu tượng từ bộ "Glyphicon Halflings".
Chú ý: để các tập lệnh nền tảng Twitter Bootstrap 3 (bootstrap.js và bootstrap.min.js) hoạt động, bạn phải có kết nối phiên bản mới nhất thư viện jQuery.
Tạo một trang web bằng HTML 5 và kết nối nền tảng Twitter Bootstrap 3 với nóVì vậy, chúng tôi đã xem xét cấu trúc và mục đích của các tệp nền tảng Twitter Bootstrap 3. Bây giờ là lúc kết nối nền tảng này bằng cách sử dụng các tệp được biên dịch và rút gọn với một trang web. Chúng ta hãy xem xét quá trình này từng bước một. Do hành động của chúng tôi, chúng tôi muốn có được một trang web bằng HTML 5, được kết nối với nền tảng Twitter Bootstrap 3. Để chứng minh rằng nền tảng này hoạt động, chúng tôi sẽ tạo một nút trên trang web này, khi được nhấp vào, một cửa sổ bật lên -up bảng với một thông báo sẽ được hiển thị.
Bước 1. Tạo một trang HTML
Mở trình soạn thảo mã yêu thích của bạn và tạo một tệp có tên là chỉ mục và phần mở rộng html. Nhập hoặc dán vào trình soạn thảo văn bản đoạn mã sau:
DOCTYPE html > Mẫu Bootstrap cơ bản Nhấp vào nút
Bước 2: Kết nối Bootstrap 3 Framework với trang Web
Để kết nối khung Twitter Bootstrap 3 với một trang web, bạn cần làm như sau:
Ghi chú: Tệp JavaScript tốt nhất nên kết nối trước khi kết thúc thẻ cơ thể(tức là trước ), vì điều này sẽ cải thiện tốc độ tải nội dung chính của trang web.
DOCTYPE html > Mẫu Bootstrap cơ bản Nhấp vào nút $(function() ( $("").popover()))Bước 3: Lưu trang web và kiểm tra xem thành phần Bootstrap có hoạt động không
Sau khi tạo một trang web được kết nối với nền tảng Twitter Bootstrap 3, nó phải được lưu vào một tệp có phần mở rộng html (Ví dụ: "index.html"). Sau này, bạn cần mở trang web đã tạo trong trình duyệt web và kiểm tra hoạt động của thành phần Bootstrap "Popovers".
Lưu ý: Khi lưu tệp trang web trong trình soạn thảo văn bản, hãy chú ý đến phần mở rộng của nó, phải là "html". Vì một số soạn thảo văn bản, chẳng hạn như notepad, tự động lưu tệp có phần mở rộng "txt".
Cấu trúc tệp của dự án dựa trên nền tảng Twitter Bootstrap 3:
Trình diễn thành phần Bootstrap "Popovers":
Nhấn nút
Ưu điểm của việc sử dụng khung CSS là người thiết kế bố cục không cần phải suy nghĩ về nhiều sắc thái bố cục mà những người tạo khung đã nghĩ ra cho anh ta. Những sắc thái như vậy bao gồm khả năng tương thích giữa nhiều trình duyệt, hỗ trợ các độ phân giải màn hình khác nhau và hơn thế nữa. Người thiết kế bố cục chỉ cho biết nội dung, cách thức và thời điểm hiển thị, phần còn lại do chính khung thực hiện. Cách tiếp cận này có thể tăng tốc độ bố cục trang web rất nhiều. Ưu điểm của Bootstrap bao gồm tính phổ biến của nó. Điều này có nghĩa là người thiết kế mã khác sẽ dễ dàng duy trì mã của bạn hơn.
Nhược điểm của việc sử dụng khung là trang sẽ phải mang toàn bộ kiểu bổ sung của khung, ngay cả khi nó chỉ sử dụng một phần nhỏ trong số đó. Khung này là một công cụ tuyệt vời để tạo nguyên mẫu và tạo các trang có thiết kế phụ, chẳng hạn như các trang quản trị. Nếu bạn có một thiết kế rất cụ thể thì việc bố trí nó bằng một khung có thể khó hơn so với việc sử dụng các công cụ gốc. Tuy nhiên, điều này cũng có thể.
Về cách sử dụng Bootstrap Hiện tại, có một số cách để làm việc với các kiểu Bootstrap.Không sử dụng LESS Đối với người mới bắt đầu, Bootstrap khuyến nghị cách tiếp cận sau: bạn cần tải xuống Bootstrap đã biên dịch từ trang web và đặt nó vào dự án của bạn mà không thay đổi bất cứ điều gì. Sau đó, bạn cần tạo tệp CSS trống của riêng mình và đưa nó vào sau bootstrap.css.
Sau đó, để thay đổi kiểu Bootstrap, bạn cần thay đổi chúng trong style.css của mình như thế này:
A ( màu: #beceda; )
Một nhược điểm rõ ràng cách tiếp cận này là bạn sẽ phải tìm kiếm thủ công các kiểu cần thiết mà bạn muốn làm gián đoạn và điều này không phải lúc nào cũng tầm thường, bởi vì Một số tùy chọn Bootstrap áp dụng cho nhiều bộ chọn ở dạng đã sửa đổi, chẳng hạn như thông qua các công thức. Công cụ Tùy chỉnh có thể giúp ích phần nào ở đây; nó sẽ giúp biên dịch các thay đổi của bạn một cách chính xác nhưng chỉ một lần. Nếu trong tương lai bạn muốn thay đổi một số tham số, bạn sẽ phải nhập lại các giá trị đã thay đổi cho tất cả các trường để biên dịch kiểu của mình.
tồn tại một số lượng lớn các cách để biên dịch tệp LESS và Bootstrap để điều này tùy theo quyết định của nhà phát triển. Bản thân Bootstrap sử dụng Grunt để biên dịch, bạn có thể thích một plugin dành cho các sản phẩm JetBrains và chúng tôi, vì bài viết hướng đến người mới bắt đầu nên sẽ hướng tới các giải pháp đơn giản hơn. Các giải pháp như vậy là WinLess cho Windows, SimpLESS cho Mac hoặc Koala cho Linux. Tất cả các chương trình này đều thực hiện gần như giống nhau: chúng nhận một thư mục chứa các tệp LESS làm đầu vào và lắng nghe những thay đổi trong đó. Ngay khi bạn thực hiện thay đổi đối với bất kỳ tệp nào, nó sẽ ngay lập tức được biên dịch thành tệp CSS được chỉ định. Bằng cách này, bạn không cần phải chạy biên dịch thủ công sau mỗi lần thay đổi. Bạn thay đổi tệp LESS, lưu nó và xem ngay các thay đổi trên trang web ở dạng đã được biên dịch, nén.
Tạo một dự án Bước đầu tiên, hãy tạo Cấu trúc đơn giản các tập tin cho dự án của chúng tôi.
Kiểm tra sơ bộ Sau khi tạo cấu trúc file, hãy mở tập tin psd trong Photoshop. Điều quan trọng là phải kiểm tra cẩn thận mẫu và đánh giá nó. Chúng ta cần hiểu rõ những điều sau: - Hình ảnh sẽ được cắt như thế nào?
- Những thành phần nào sẽ được sử dụng?
- Phong cách chính sẽ là gì?
- Chúng ta sẽ nhận được bố cục trang nào?
Lưu hình ảnh bản đồ:
Hãy lưu các logo như sau:
Hình ảnh/logo.png
hình ảnh/chân trang-logo.png
Lặp đi lặp lại hinh nên cần phải cắt ra một mảnh tối thiểu vừa đủ để tạo thành một hình ảnh hoàn chỉnh, lặp lại theo chiều dọc và chiều ngang.
/images/bg.png
/images/h1-bg.png
biểu tượng mạng xã hội với cùng kích thước Thật thuận tiện khi lưu nó vào một tệp và sử dụng nó làm họa tiết để tải nhanh hơn. Thông tin chi tiết hơn về cách dán hình ảnh được mô tả trong phần đầu tiên. Kết quả sẽ là hai tập tin:
/images/social.png
/images/social-small.png
Nếu bạn nhìn vào mẫu của chúng tôi, bạn có thể thấy rằng chúng tôi sẽ cần các thành phần sau:
Trước hết, bạn cần thêm các biến không có trong cài đặt Bootstrap để có thể sử dụng chúng trong tương lai. Đối với chúng tôi đây chỉ là một phông chữ thiết kế cụ thể.
@brand-font: "Oswald",sans-serif;
Nếu bạn muốn sử dụng mẫu cho các trang web của Nga, bạn có thể thử thay thế phông chữ Oswald bằng phông chữ Cuprum gần nhất, hỗ trợ chữ Cyrillic.
Bây giờ hãy thay thế cài đặt Bootstrap bằng cài đặt của chúng ta:
Bây giờ chúng ta đã hoàn tất các biến, hãy bắt đầu tạo kiểu cho thiết kế của chúng ta trong tệp styles.less. Trước tiên, hãy kết nối chính Bootstrap và các biến của chúng tôi:
@import "bootstrap/bootstrap.less"; @import "variables.less";
Không phải tất cả các kiểu mặc định của Bootstrap đều có thể được thay đổi bằng cách sử dụng các biến, vì vậy hãy thực hiện theo cách thủ công:
P ( lề: 20px 0; ) .form-control ( box-shadow: none; ) .btn ( font-family: @brand-font; )
Ở đây, chúng tôi đã loại bỏ bóng khỏi các thành phần của biểu mẫu và cung cấp cho văn bản trong các nút một phông chữ trang cụ thể.
Sau đó, chúng tôi mô tả nền trang và thanh trên cùng:
Nội dung ( border-top: 5px Solid #7e7e7e; hình nền: url(../images/bg.png); )
Hơn nữa, trong văn bản, nó sẽ không được chỉ ra trong tệp nào các kiểu được viết. Chỉ cần nhớ rằng chúng ta lưu tất cả các biến trong tệp Variables.less và Kiểu CSS Chúng tôi sẽ lưu trữ nó trong styles.less.
hình vuông màu trắng
Khối này tạo cấu trúc tài liệu HTML5. Trong tiêu đề, chúng tôi cho biết tên trang của chúng tôi – Whitesquare. Với thẻ meta khung nhìn, chúng tôi chỉ ra rằng chiều rộng trang trên thiết bị di động sẽ bằng chiều rộng màn hình và tỷ lệ ban đầu sẽ là 100%. Sau đó, tập tin kiểu được bao gồm. Và đối với các phiên bản trình duyệt web IE dưới chín, chúng tôi kết nối các tập lệnh cho phép chúng tôi hiển thị chính xác bố cục của mình.
Hãy thêm đoạn mã sau vào phần thân:
Ở đây chúng ta bắt gặp thành phần Bootstrap đầu tiên - cột. Đến phần tử cha các cột được cấp một lớp “hàng” và các lớp cột bắt đầu bằng tiền tố “col-”, sau đó là kích thước màn hình (xs, sm, md, lg) và kết thúc bằng chiều rộng tương đối của cột.
Một cột có thể được gán đồng thời các lớp khác nhau với các giá trị cho màn hình, ví dụ class="col-xs-12 col-md-8". Các lớp này chỉ cần đặt độ rộng cột theo tỷ lệ phần trăm cho kích thước màn hình cụ thể. Nếu cột không được cung cấp một lớp màn hình cụ thể thì lớp dành cho màn hình cụ thể tối thiểu sẽ được áp dụng và nếu nó không được chỉ định thì sẽ không có chiều rộng nào được áp dụng và khối sẽ chiếm chiều rộng tối đa có thể.
Các lớp “col-md-7” và “col-md-17” của chúng tôi chỉ ra rằng các khối là các cột có chiều rộng tương đối là 7 và 17 vùng chứa gốc. Theo mặc định, tổng độ rộng cột trong Bootstrap là 12, nhưng chúng tôi đã nhân đôi con số này để đạt được độ linh hoạt cần thiết.
Phần thân ( … .wrapper ( phần đệm: 0 0 50px 0; ) tiêu đề ( phần đệm: 20px 0; ) )
Chúng tôi đặt cấu trúc này bên trong cơ thể. Cú pháp LESS cho phép bạn lồng các quy tắc vào nhau, sau đó chúng được biên dịch thành các cấu trúc sau:
Phần thân .wrapper (…) tiêu đề phần thân (…)
Cách tiếp cận này cho phép bạn xem Cấu trúc HTML ngay bên trong CSS và đưa ra một số “phạm vi” cho các quy tắc.
Chèn logo vào thẻ tiêu đề:
Không cần thêm kiểu nào.
Tìm kiếmĐể tạo một tìm kiếm, chúng ta cần những điều sau đây Thành phần khởi động: biểu mẫu nội tuyến, các điều khiển và nút được nhóm.
Trong thẻ tiêu đề, chúng ta tạo một biểu mẫu nội tuyến, căn chỉnh sang phải. Các trường có dạng như vậy phải có lớp "kiểm soát biểu mẫu" và nhãn.
Chúng tôi đặt thành phần “điều khiển được nhóm” vào biểu mẫu. Các điều khiển nhóm cho phép bạn loại bỏ khoảng trắng giữa kiểu nhập văn bản và nút, đồng thời hợp nhất chúng thành một phần tử duy nhất.
Nó là một div có lớp và các trường “input-group”, đồng thời nút của thành phần đó được đặt trong một khối có lớp “input-group-btn”.
Vì chúng ta không cần hiển thị nhãn cho trường tìm kiếm nên chúng ta sẽ ẩn nó bằng lớp “sr-only”. Điều này là cần thiết cho các trình đọc màn hình chuyên dụng.
Lớp “btn-primary” được thêm vào nút, nghĩa là đây là nút chính của biểu mẫu này.
…Tìm kiếm ĐI
Tất cả những gì chúng ta còn lại là đặt độ rộng của biểu mẫu tìm kiếm trong styles.
Nội dung ( … .wrapper ( … tiêu đề ( … .form-search ( width: 200px; ) ) ) )
Thực đơnĐể hiển thị menu, hãy lấy thành phần “bảng điều hướng” và đặt vào thành phần “điều hướng”, đây là một danh sách có các liên kết. Để điều hướng, một lớp "navbar-nav" được thêm vào, áp dụng các kiểu điều hướng đặc biệt trong thanh điều hướng.
Để đưa menu này vào thiết kế của chúng tôi, chúng tôi sẽ đặt các giá trị sau cho các biến:
/*chiều cao thanh điều hướng*/ @navbar-height: 37px; /*đặt thêm khoảng đệm ngang*/ @nav-link-padding: 10px 30px; /*nền cho các mục menu*/ @navbar-default-bg: @panel-bg; /*màu văn bản trong các mục menu*/ @navbar-default-link-color: #b2b2b2; /*và khi di chuột - giống nhau*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*nền của mục menu đang hoạt động là màu xanh lam cụ thể của chúng tôi*/ @navbar-default-link-active-bg: @brand-primary; /*màu văn bản của mục menu đang hoạt động*/ @navbar-default-link-active-color: #fff;
Ngoài các tham số có thể tùy chỉnh, chúng tôi sẽ mô tả các tham số bổ sung theo kiểu - đây là văn bản viết hoa và phông chữ cụ thể của chúng tôi:
Nội dung ( … .wrapper ( … .navbar a ( chuyển đổi văn bản: chữ hoa; phông chữ: 14px @brand-font; ) ) )
Tiêu đề trangTiêu đề trang được đặt trong div có lớp "tiêu đề".
Về chúng tôi
Và có các phong cách sau:
Nội dung ( … .wrapper ( … .heading ( chiều cao: 40px; nền: url trong suốt(../images/h1-bg.png); lề: 30px 0; đệm-trái: 20px; h1 ( hiển thị: khối nội tuyến; màu: #7e7e7e; phông chữ: bình thường 40px/40px "Oswald", sans-serif; nền: url(../images/bg.png); lề: 0; đệm: 0 10px; chuyển đổi văn bản: chữ hoa; ) ) ) )
Ở đây chúng tôi vẽ sọc xám nền trên div và đặt h1 nội tuyến vào đó với trong phông chữ được yêu cầu và màu nền của trang để tạo ấn tượng nền trong suốt cho h1.
Khi tạo một menu con, chúng tôi sẽ không sử dụng thành phần "điều hướng", vì nó không phù hợp lắm về mặt phong cách với chúng tôi, thành phần "danh sách được nhóm" phù hợp hơn với chúng tôi. Mỗi phần tử của thành phần như vậy có một lớp “list-group-item”.
Menu con nên được đặt trong thẻ sang một bên. Chúng ta tạo danh sách liên kết tương tự như menu chính.
Trong cài đặt thành phần, chúng tôi chỉ ra rằng tất cả các danh sách được nhóm sẽ được hiển thị cùng với nền và khung của thành phần “bảng điều khiển”:
@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
Và áp dụng các kiểu sau cho menu con:
Nội dung ( … .wrapper ( … .submenu ( lề-dưới: 30px; li ( display: list-item; font: 300 14px @brand-font; list-style-position: Inside; list-style-type: hình vuông; đệm : 10px; chuyển đổi văn bản: chữ hoa; &.active ( color: @brand-primary; ) a ( color: @text-color; text-trang trí: none; &:hover ( color: @text-color; ) ) ) ) ) )
Đầu tiên, chúng ta trả về kiểu tiêu chuẩn cho các thành phần trong danh sách, vì Bootstrap đã thay thế chúng bằng kiểu của chính nó. Thêm phần đệm ở phía dưới. Menu con sử dụng phông chữ mỏng hơn và đánh dấu hình vuông. Và đối với các liên kết chúng ta đặt màu, chữ hoa và bỏ gạch chân. Ký hiệu và trong mã "&.active" sẽ được thay thế bằng bộ chọn gốc tại thời điểm biên dịch bằng cú pháp LESS: ".submenu li.active".
Để hiển thị nó, chúng tôi sẽ sử dụng thành phần “panel”, hay đúng hơn là biến thể “panel-primary” của nó để tô màu cho tiêu đề. Thành phần này chứa khối tiêu đề (panel-heading) và khối nội dung bảng điều khiển (panel-body). Chúng tôi thêm lớp “img- responsive” vào hình ảnh bản đồ, lớp này sẽ cho phép hình ảnh co lại khi chiều rộng màn hình nhỏ.
… Văn phòng của chúng tôi 
Trong các biến Bootstrap, chúng tôi đã đặt màu cho nền của bảng điều khiển (panel-bg) và bây giờ chúng tôi sẽ chỉ ra rằng bảng “chính” sẽ có viền màu xám của bảng mặc định, thay vì viền màu xanh lam mặc định:
@panel-primary-border: @panel-inner-border;
Bây giờ bạn cần thay đổi kiểu trang web cài đặt tiêu chuẩn các bảng không bị thay đổi thông qua các biến:
Bảng điều khiển ( box-shadow: none; .panel-heading ( font: 14px @brand-font; text-transform: chữ hoa; phần đệm: 10px; ) .panel-body ( phần đệm: 10px; ) )
Ở đây, chúng tôi đã loại bỏ bóng khỏi bảng điều khiển, thêm thụt lề của riêng mình và đặt phông chữ tiêu đề của riêng mình.
Phần tử trang này giống nhất với thành phần Jumbotron. Hãy thêm nó vào cột nội dung:
“Quisque in enim velit, at dignissim est.” nulla ul corper, dolor ac pellentesque placerat, justo Tellus gradida erat, vel porttitor libero erat.”
John Doe, Lorem IpsumSử dụng các biến cho thành phần jumbotron, chúng tôi sẽ đặt màu văn bản thành màu trắng và nền xanh có thương hiệu:
@jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
Và hãy mô tả phong cách của chúng tôi:
Nội dung ( … .wrapper ( … .jumbotron ( bán kính đường viền: 0; phần đệm: 0; lề: 0; blockquote ( border-left: none; p ( font: 300 italic 33px @brand-font; text-transform: chữ hoa; lề-dưới: 0; ) nhỏ ( text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:Before ( content: ""; ) ) ) ) )
Trong đó, chúng tôi loại bỏ phần làm tròn góc, phần đệm thành phần và trang trí trích dẫn được Bootstrap đặt theo mặc định. Chúng tôi cũng sẽ thêm kiểu cho phông chữ của mình.
Lorem ipsum dolor ngồi amet…
Donec vel nibh…
Donec vel nibh…
Bước tiếp theo là thêm hai hình ảnh ở cuối văn bản nội dung. Điều này được thực hiện bằng cách sử dụng hai cột:
Lớp "hình thu nhỏ" biến hình ảnh thành thành phần "hình thu nhỏ". Anh ấy sẽ làm tất cả công việc tạo kiểu cho hình ảnh cho chúng ta. Điều duy nhất còn lại đối với chúng ta là đặt màu đệm và màu đường viền trong các biến cho thành phần này:
@hình thu nhỏ-đệm: 1px; @thumbnail-border: #c9c9c9;
Chặn "Nhóm của chúng tôi"
Khi bố trí khối này, trước tiên hãy thêm tiêu đề:
Đội của chúng tôi
với phong cách:
Nội dung ( … .wrapper ( … h2 ( nền: không lặp lại cuộn 0 0 #29C5E6; màu: #fff; phông chữ: 300 30px @brand-font; phần đệm: 0 10px; chuyển đổi văn bản: chữ hoa; ) ) )
Và sau đó chúng ta sẽ thêm một khối có lớp “đội”, bao gồm hai dòng chứa thẻ nhân viên. Mỗi thẻ là một cột. Thẻ có chiều rộng bằng bốn cột trong lưới của chúng tôi. Tất cả các thẻ ngoại trừ thẻ đầu tiên trong dòng đều có thụt lề trái, được tạo bởi lớp “col-md-offset-1”. Nội dung thẻ bao gồm hình ảnh và mô tả (.caption)
John Doe 
Saundra Pittsley
trưởng nhóm
…
Ericka Nobriga Giám đốc nghệ thuật
Cody Rousselle nhà thiết kế giao diện người dùng cao cấp
…Sau khi tạo đánh dấu, hãy cung cấp cho các phần tử này các kiểu sau:
Nội dung ( … .wrapper ( … .team ( .row ( lề-top: 20px; .col ( khoảng trắng: nowrap; .thumbnail ( lề-bottom: 5px; ) ) .col-md-offset-1 ( lề- trái: 3,7%; ) .caption ( h3 ( font: 300 16px @brand-font; lề: 0; ) p ( font: 300 14px @brand-font; color: @brand-primary; lề: 0; ) ) ) ) )
Ngoài các kiểu thụt lề và phông chữ được đặt ở đây, chúng tôi đã thay đổi lớp “col-md-offset-1”. Anh ấy phải đặt mức thụt lề ở mức 3,7% vì... vết lõm tiêu chuẩn quá lớn.
Trước tiên, hãy tạo một vùng chứa chân trang với các khối sau:
Và áp dụng thiết kế cho nó:
Chân trang ( nền: #7e7e7e; màu: #dbdbdb; cỡ chữ: 11px; .container ( chiều cao: 110px; phần đệm: 10px 0; ) )
Thẻ chân trang xác định một vùng màu xám trên toàn bộ chiều rộng của màn hình và vùng chứa bên trong nó hiển thị vùng được căn giữa màn hình lớn và đặt chiều cao và mức thụt lề của chân trang. Chúng ta sử dụng các cột để căn chỉnh các khối bên trong footer.
Nguồn cấp dữ liệu Twitter 23 tháng 10
Trong ultricies pelentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. Trong eget mi dui, ngồi amet scelerisque ni cô. Aenean tháng tám
Phong cách:
Nội dung ( ... chân trang ( ... .container ( ... h3 ( border-bottom: 1px Solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand -font; lề: 0 0 10px; chuyển đổi văn bản: chữ hoa; ) p ( lề: 5px 0; ) .twitter ( p ( đệm-phải: 15px; ) lần a ( color: #b4aeae; text-trang trí: gạch chân; ) ) ) )
Đối với tất cả các tiêu đề chân trang, chúng tôi đặt phông chữ và thụt lề, đồng thời tạo gạch chân qua khung dưới cùng. Đối với đoạn văn, chỉ ra thụt lề. Đối với link hiển thị ngày tháng thì đặt màu và gạch chân.
Sơ đồ trang web Trang chủ
Về
Dịch vụ
Đối tác
Ủng hộ
Liên hệ
Chúng tôi đặt các liên kết theo màu sắc, phông chữ và khoảng cách giữa chúng.
Nội dung ( ... chân trang ( ... .container ( ... a ( color: #dbdbdb; ) .sitemap a ( display: block; font-size: 12px; Margin-bottom: 5px; ) ) ) )
Đường liên kết mạng xã hội
Chúng tôi chèn một tập hợp các liên kết vào một khối có lớp “xã hội”.
Mạng xã hội
Và hãy tạo kiểu cho chúng:
Nội dung ( … chân trang ( … .container ( … .social ( .social-icon ( width: 30px; chiều cao: 30px; nền: url(../images/social.png) không lặp lại; hiển thị: khối nội tuyến; lề -right: 10px; ) .social-icon-small ( chiều rộng: 16px; chiều cao: 16px; nền: url(../images/social-small.png) no-repeat; hiển thị: khối nội tuyến; lề: 5px 6px 0 0; ) .twitter ( vị trí nền: 0 0; ) .facebook ( vị trí nền: -30px 0; ) .google-plus ( vị trí nền: -60px 0; ) .vimeo ( vị trí nền: 0 0 ; ) .youtube ( vị trí nền: -16px 0; ) .flickr ( vị trí nền: -32px 0; ) .instagram ( vị trí nền: -48px 0; ) .rss ( vị trí nền: -64px 0; ) ) ) ) )
Ở đây chúng tôi sử dụng kỹ thuật sprite - khi một tệp hình ảnh được sử dụng cho các hình ảnh khác nhau. Tất cả các liên kết được chia thành các biểu tượng lớn(.social-icon) và nhỏ (.social-icon-small). Chúng tôi đặt các lớp này hiển thị dưới dạng khối nội tuyến với kích thước cố định và cùng một nền. Và sau đó với sử dụng CSS Chúng tôi đã di chuyển nền này để hình ảnh tương ứng được hiển thị trên mỗi liên kết.
![](https://viws.ru/wp-content/uploads/2019/04/" alt=)
Copyright 2012 Whitesquare. Một sáng tạo pcklab
Kiểu dáng được thực hiện tương tự như các khối trước, với điểm khác biệt duy nhất là khối được đóng đinh vào cạnh bên phải và căn chỉnh bên trong nó cũng ở bên phải:
Nội dung ( … .footer ( … .container ( … .footer-logo ( float: right; lề-top: 20px; cỡ chữ: 10px; căn chỉnh văn bản: đúng; a ( trang trí văn bản: gạch chân; ) ) ) ) )
Điều này hoàn thành việc bố trí. Dự án đã hoàn thành có thể được tải xuống
Nửa sau của bài viết đã được nhìn nhận đơn giản hơn, có nhiều ví dụ hơn bằng ảnh chụp màn hình.
Bootstrap - nó là gì?Vì vậy, hãy bắt đầu với một câu hỏi quan trọng. Bootstrap là một khung CSS và JS, về cơ bản là một tập hợp các tệp có mã viết sẵn. Mục tiêu của các nhà phát triển của hầu hết mọi framework là đơn giản hóa việc phát triển trang web cho chính họ và những người khác sẽ có quyền truy cập vào công cụ này. Trong trường hợp của Bootstrap, nó hoàn toàn miễn phí nên bạn có thể sử dụng nó theo bất kỳ cách nào, chỉnh sửa nguồn và làm lại framework cho phù hợp với bản thân theo ý muốn. Nó hoàn hảo.
Cài đặt BootstrapNếu bạn chỉ cần kết nối các tệp khung với một tài liệu HTML (ví dụ: để thực hành), chỉ cần tải xuống khung từ trang web chính thức getbootstrap.com, sao chép các tệp của nó vào dự án và kết nối những tệp bạn cần. Hãy để tôi cung cấp một cái nhìn tổng quan ngắn gọn về các tập tin này:
Cái này bộ tiêu chuẩn khuôn khổ. Trên thực tế, bạn có thể dễ dàng tùy chỉnh và thay đổi nó cho phù hợp với mình. Ví dụ: hoàn toàn không sử dụng tập lệnh hoặc chỉ kết nối một lưới. Nói chung, chúng ta cũng sẽ nói về điều này.
Tài liệu Bootstrap của NgaKhi truy cập getbootstrap, bạn có thể nhận thấy rằng mọi thứ ở đây đều bằng tiếng Anh. Chúng tôi có thể sử dụng sự trợ giúp của Nga về khuôn khổ. Thật dễ dàng để tìm thấy. Để thực hiện việc này, hãy đi từ trang chính đến phần Bắt đầu. Kéo xuống cuối cùng sẽ có link dịch. Hãy tìm tiếng Nga ở đó và nhấp vào nó. Thế là xong, bây giờ bạn đang sử dụng phiên bản tiếng Nga của trang web. Đúng, không phải mọi thứ đều được dịch ở đây, nhưng khoảng 70-80% là chính xác, vì vậy bạn sẽ hiểu mọi thứ.
Lưới khởi độngDù người ta có thể nói gì, yếu tố chính của Bootstrap là lưới đáp ứng. Nói chung, nếu không có nó, khung sẽ mất gần như toàn bộ giá trị vì nhờ có lưới, bạn có thể nhanh chóng tạo các mẫu thích ứng. Đồng thời, bạn có thể không quen với các truy vấn phương tiện; bạn không cần chúng, vì khung này đảm nhiệm việc triển khai khả năng thích ứng; bạn chỉ cần gán các lớp chính xác cho các khối.
Những lớp học này là gì? Hãy đi đến tài liệu, nó sẽ giúp chúng ta rất nhiều. Đi tới phần CSS - Hệ thống lưới. Các nguyên tắc chung để làm việc với lưới rất đơn giản; tôi sẽ liệt kê chúng ngay bây giờ.
Làm thế nào để làm việc với lưới?Hãy nghĩ về nó như một bảng html. Nếu bạn đã từng viết mã HTML cho bảng, bạn biết rằng tất cả nội dung được đặt trong thẻ bảng, một hàng được đặt trong thẻ tr và sau đó các ô được đặt trong đó - td .
Vì vậy, mọi thứ đều tương tự trong lưới. Lớp container đóng vai trò là nơi chứa chung cho lưới. Có 2 tùy chọn cho lưới bootstrap - hoàn toàn bằng cao su và vẫn có chiều rộng tối đa hữu hạn. Vì vậy, khi khối chung được cấp lớp container, trang web sẽ có chiều rộng tối đa là 1170 pixel. Nó sẽ không mở rộng thêm nữa. Đương nhiên, nội dung sẽ được căn giữa.
Nếu bạn đặt lớp chất lỏng chứa, thì lưới sẽ hoàn toàn bằng cao su, nghĩa là sẽ không có giới hạn về kích thước. Ví dụ: nếu một người mở trang web trên màn hình rộng 1920 pixel, anh ta sẽ nhìn thấy trang web đó ở chế độ toàn bộ chiều rộng.
Theo đó, điều đầu tiên khi phát triển một trang web là quyết định xem mẫu sẽ như thế nào - hoàn toàn bằng cao su, hoặc chiều rộng của nó vẫn cần phải hạn chế.
Tuyệt vời, khối container phải chứa một hàng lưới. Bạn cần đặt tất cả các khối trên một dòng trong đó. Nghĩa là, nếu chúng ta tận dụng tối đa mẫu điển hình: header, phần chính, cột bên phải và footer thì có 3 cột. Cái đầu tiên sẽ chỉ có tiêu đề, cái thứ hai sẽ có nội dung và thanh bên, cái cuối cùng sẽ có chân trang. Đánh dấu cho một trang web như vậy sẽ giống như thế này:
một chiếc mũ lưỡi trai
Nội dung... và thanh bên
Chân trang
Nhưng hiện tại đây là đánh dấu sai, vì nó thiếu... cái gì? Đúng vậy, tế bào! Trong trường hợp Bootstrap, chúng còn được gọi là cột. Lưới bootstrap bao gồm 12 cột. Nó có thể được nhúng vào bất kỳ khối nào có chiều rộng bất kỳ, ít nhất là 1200 pixel, ít nhất là 100. Tất cả điều này là do chiều rộng của các cột được chỉ định không phải bằng pixel mà bằng tỷ lệ phần trăm.
Hệ thống 12 cột này hoạt động như thế nào?Vì vậy, chúng ta đi đến vấn đề quan trọng nhất liên quan đến khuôn khổ. Hãy tin tôi, nếu bạn hiểu điều này, mọi thứ khác đều vô nghĩa. Điều chính là phải hiểu cách thức hoạt động của lưới và con đường dẫn đến bố cục thích ứng nhanh sẽ mở ra cho bạn.
Để thực hiện việc này, hãy cuộn qua tài liệu ngay bên dưới, ở đó bạn sẽ tìm thấy một bảng chứa tính chất quan trọng lưới
Nhân tiện, bản thân các cột được đánh dấu trong Bootstrap bằng lớp col-, nhưng đây là lớp tổng hợp, vì vậy chúng không bao giờ chỉ viết col-. Bootstrap có 4 lớp đặc biệt được thiết kế để kiểm soát kích thước của các khối ở các độ rộng khác nhau, đó là:
Đây là 4 lớp, nhưng để kiểm soát kích thước của các phần tử, các số từ 1 đến 12 được sử dụng, bởi vì, như bạn nhớ, có chính xác 12 cột trong lưới.
một chiếc mũ lưỡi trai
Nội dung
Cột bên
Chân trang
Nó khá dễ hiểu. Trước hết, chúng ta tạo một tiêu đề; nó hoàn toàn không cần phải được đặt trong lưới, vì trong mọi trường hợp, nó sẽ chiếm 100% chiều rộng (thông thường). Nhưng dù sao chúng tôi cũng sẽ đặt nó vào. Lớp col-md-12 này là gì? Như tôi đã nói với bạn, không ai viết đơn giản là col-, với lớp này về cơ bản chúng tôi nói với trình duyệt:
Đây là một tế bào | cột
Trên các thiết bị trung bình (lớp md), chiều rộng của nó phải là 12 cột trên 12 cột, nghĩa là 100% chiều rộng hàng.
Nhưng còn chiều rộng trên các thiết bị khác thì sao? Trên màn hình lớn (lg), nó cũng sẽ là 100%, vì các giá trị dành cho màn hình lớn được kế thừa, nhưng đối với màn hình nhỏ hơn thì không. Thật đơn giản: nếu bạn viết col-xs-4 thì chiều rộng cột sẽ là 33% trên tất cả các thiết bị và nếu col-lg-4 thì chỉ trên những thiết bị lớn. Đây là tính năng, hãy nhớ nó.
Chà, nếu giá trị chiều rộng không được lưu trên màn hình nhỏ hơn thì chuyện gì sẽ xảy ra? Nó đặt lại. Đây là cách nó xảy ra:
col-sm-4 - trên màn hình nhỏ, khối sẽ chiếm 33% chiều rộng, nó sẽ giống nhau trên màn hình md và lg, nhưng trên xs, tức là màn hình nhỏ nhất, chiều rộng sẽ được đặt lại về 100%. Vì vậy, hãy nhớ một quy tắc đơn giản hơn: Nếu không có gì được chỉ định cho màn hình nhỏ hơn, thì khối sẽ được hiển thị ở độ rộng 100% trên chúng.
Nội dung
Cột bên
Về cơ bản chúng tôi đang nói với trình duyệt:
Hãy để khối nội dung rộng 8 trên 12 cột và trường hợp này sẽ xảy ra trên màn hình nhỏ, vừa và lớn (chỉ cần chỉ định cho màn hình nhỏ, cho màn hình lớn, như bạn nhớ, giá trị được kế thừa là đủ). Nhưng trên màn hình nhỏ nhất, khối sẽ bị chiếm 100%. Điều này đúng; thông thường, trên thiết bị di động, các trang web xuất hiện trong 1 cột.
Đặt cột bên bằng một phần ba chiều rộng của hàng trên cùng một màn hình nhỏ, vừa và lớn... Chà, trên những màn hình nhỏ nhất, như bạn đã hiểu, chiều rộng của nó cũng được đặt lại về 100%. Nó đơn giản mà.
Chà, không có gì phải lo lắng về phần chân trang. Chà, chúng ta đã đề cập đến các nguyên tắc cơ bản về cách thức hoạt động của lưới, nhưng chúng ta vẫn cần xem nó hoạt động như thế nào...
Lồng nhau Lưới khởi độngThực tế là bây giờ chúng tôi chỉ chia mẫu thành các khối chính, nhưng bên trong chúng cũng có thể được chia thành các cột. Ví dụ: nội dung có thể hiển thị sản phẩm ở nhiều cột. Tôi nên làm gì? Rất đơn giản - chúng tôi tạo ra chính xác cùng một lưới bên trong. Nó sẽ được lồng vào nhau nhưng cũng chứa 12 cột. Nếu chúng ta tóm tắt tất cả những điều này, thì chúng ta sẽ đi đến kết luận này:
Có thể có số lượng lưới không giới hạn bên trong bất kỳ khối nào. Ví dụ: trong khối có các sản phẩm có một lưới để phân tách các sản phẩm; trong khối có chính một sản phẩm, bạn có thể tạo một lưới khác, chẳng hạn như để phân tách giá, thông tin về tình trạng còn hàng và thông tin bổ sung. thông tin.
Bây giờ chúng ta sẽ cố gắng tạo một lưới khác bên trong khối nội dung để sắp xếp các sản phẩm thành 3 cột. Vì vậy, hãy lấy khối mà chúng ta có nội dung:
Nội dung
Và chúng tôi viết trong đó:
Mục lục:
tên sản phẩm
Mô tả Sản phẩm
Như bạn có thể thấy, chúng tôi đã tạo một lưới mới bên trong nội dung - chúng tôi đặt một hàng bên trong và trong hàng đó sẽ có 3 khối chứa các sản phẩm. Chỉ cần copy khối col-sm-4 kèm theo thẻ sản phẩm và dán thêm 2 lần nữa là bạn sẽ được như thế này (bạn có thể chụp ảnh sản phẩm bất kỳ, mình chụp lớn):
Bỏ lỡ một cái khác tâm điểmĐể hình ảnh thích ứng với các khối mà chúng được đặt, mỗi khối trong số chúng cần phải được cấp lớp img- responsive. Nếu bạn, giống như tôi, nghĩ rằng làm điều này thật bất tiện, thì hãy viết theo style.css của riêng bạn như thế này:
Img( chiều rộng tối đa: 100%; chiều cao: tự động; hiển thị: khối; )
Thế là xong, hãy lưu mã này và kết nối tệp css của bạn với dự án. Bây giờ hình ảnh sẽ được thích ứng theo mặc định.
Chà, mọi chuyện diễn ra khá suôn sẻ phải không? Có, nhưng không có bootstrap bạn sẽ phải chịu đựng lâu hơn. Điều duy nhất là khi tạo lưới bên trong bất kỳ khối nào, bạn không cần phải tạo một khối có lớp container trong đó nữa. Tại sao điều này không cần thiết? Có, bởi vì khối trong đó lưới được tạo đóng vai trò là vùng chứa.
Do đó, bạn có thể tạo bao nhiêu cột tùy thích trong bất kỳ khối nào và tạo một mẫu có độ phức tạp bất kỳ. Và tất cả điều này nhanh hơn nhiều so với việc không có Bootstrap, vì bạn phải viết tất cả css từ đầu.
Tiện ích đáp ứngĐây là một tính năng tuyệt vời khác của bootstrap. Nó nằm ở chỗ bạn có thể ẩn hoặc hiển thị bất kỳ khối nào ở độ rộng bạn cần. Ví dụ: ẩn hoàn toàn cột bên trên màn hình hẹp, thêm một số thành phần mới trên thiết bị di động, thêm cột trên màn hình rộng, v.v.
Có rất nhiều tùy chọn ứng dụng, nhưng tôi chưa nói với bạn điều quan trọng nhất: làm thế nào để sử dụng những tiện ích này? Để làm điều này, chỉ cần thêm các lớp khối mong muốn. Nếu bạn cần ẩn nó, chỉ cần chỉ định lớp sau:
Chân trang
Lớp Hidden-xs sẽ làm gì trong trường hợp này? Nó sẽ ẩn chân trang trên các thiết bị cực nhỏ. Trên tất cả những thứ khác, khối sẽ hiển thị.
Ngược lại, nếu bạn chỉ cần hiển thị nó trên các màn hình nhỏ nhất, bạn cần sử dụng lớpvisible-xs-block. Trong trường hợp này, khối sẽ bị ẩn trên tất cả trừ màn hình hẹp nhất. Vì vậy, các lớp tiện ích thích ứng được viết như thế này:
Vâng, một vài ví dụ để làm rõ:
Đây là cách tất cả hoạt động. Chính xác là như vậy và không còn cách nào khác. Tôi hy vọng bạn hiểu điều này. Hãy đưa nó vào thực tế. Chúng tôi có một mẫu thử nghiệm, mặc dù nó rất thô sơ.
Nhiệm vụ: làm cho cột bên biến mất trên màn hình nhỏ và cả một sản phẩm trên màn hình nhỏ nhất. Và do đó, trên thiết bị xs, các sản phẩm đã có ở 2 cột chứ không phải 3.
Hãy thử tự làm, chỉ chỉnh sửa mã html. Những gì cần phải được thực hiện? Đầu tiên chúng ta nhìn vào cột, để ẩn nó trên màn hình sm, bạn chỉ cần thêm lớp Hidden-sm vào nó.
Tuyệt vời, bây giờ sản phẩm thứ ba cần thêm lớp Hidden-xs và nó sẽ biến mất trên các màn hình nhỏ nhất. Vâng, các loại của hai hàng hóa còn lại sẽ như sau:
Nghĩa là, trên các thiết bị trung bình, khối sẽ chiếm 4 trong số 12 cột, có thể dịch sang 33,33% chiều rộng và trên các thiết bị cực nhỏ - 50%. Và vì một khối có sản phẩm sẽ biến mất ở chiều rộng này nên cả hai khối có sản phẩm sẽ được sắp xếp gọn gàng thành 1 hàng, như sau: 
Tuyệt vời! Khi hiểu được điều này, bạn đã có thể thao tác các khối trên trang web theo hầu hết mọi cách bạn muốn. Hãy cố gắng đưa ra các nhiệm vụ cho bản thân và thực hiện chúng.
Tiếp theo tôi sẽ chỉ cho bạn một thủ thuật rất hay khác - khả năng di chuyển một khối sang phải hoặc trái. Giả sử chúng ta không có 3 sản phẩm liên tiếp mà là 1. Và nó không chiếm toàn bộ chiều rộng. Và nhiệm vụ của bạn là căn chỉnh nó vào giữa. Điều này rất dễ thực hiện nếu bạn luôn nhớ rằng bạn đang làm việc với hệ thống 12 cột.
Hãy để lại một khối với sản phẩm:
Chỉ cần thực hiện các phép tính đơn giản là đủ để hiểu bạn cần di chuyển khối bao nhiêu để căn giữa nó. Nó cần được di chuyển 4 cột sang trái trên màn hình vừa và lớn và 3 cột trên màn hình nhỏ. Đây là những gì nó trông giống như:
Lớp col-md-offset-4 cho biết: trên màn hình vừa và lớn, đặt khối sang trái bằng 33% chiều rộng của vùng chứa chính (1/3 offset bên trái, 1/3 chiều rộng khối, ⅓ offset bên phải, dẫn đến sự định tâm).
Lớp col-xs-offset-6: Trên màn hình cực nhỏ và nhỏ, dịch chuyển sang trái 25% (¼ phần đệm bên trái, ½ chiều rộng khối, ¼ phần đệm bên phải).
Tôi hy vọng bạn hiểu ý chính và sử dụng các lớp này nếu cần thiết.
Các thành phần Bootstrap và ví dụ về việc sử dụng chúngTôi chúc mừng bạn. Chúng tôi vừa đề cập đến chủ đề quan trọng nhất liên quan đến khuôn khổ này. Lưới và cách làm việc với nó mới là điều quan trọng. Làm việc với các thành phần có nghĩa là bạn chỉ cần truy cập tài liệu và sao chép mã ở đó thành phần bắt buộc và nếu cần, hãy thay đổi nó cho phù hợp với bạn. Nhưng tôi vẫn sẽ đưa ra dưới đây một số ví dụ về cách sử dụng các thành phần.
Hủy bỏ phao và quấn nhanhCác lớp pull-left và pull-right cho phép bạn nhanh chóng làm cho bất kỳ khối nào nổi lên bằng cách gửi nó sang trái hoặc phải. Đừng quên hủy bỏ dòng chảy. Bạn có thể sử dụng lớp Clearfix cho việc này.
Bootstrap: Menu đáp ứng theo chiều ngang (Di động)Chúng tôi sẽ thêm trực tiếp các thành phần sau vào mẫu, vì vậy nếu bạn muốn làm việc với mã chứ không chỉ đọc, hãy làm theo tất cả các bước sau tôi.
Trên thực tế, với Bootstrap, việc này rất dễ thực hiện, không chỉ thực đơn đáp ứng và cái gọi là thiết bị di động, được thu nhỏ hoàn toàn trên màn hình nhỏ và ẩn dưới một nút bấm. Kỹ thuật này có thể được nhìn thấy trong nhiều mẫu thích ứng và nó thực sự rất dễ thực hiện. Mã ví dụ thực đơn di động có trong tài liệu, tôi sẽ lấy nó từ đó và làm lại một chút.
Vì vậy, điều đầu tiên tôi sẽ làm là loại bỏ khối có tiêu đề, vì trên thực tế, menu của chúng tôi sẽ là tiêu đề trong trường hợp mẫu của tôi. Mã menu phải được đặt trước tất cả nội dung trang web, thậm chí trước khối vùng chứa. Tại sao? Có, bây giờ bạn sẽ tự mình thấy rằng lưới đã được tích hợp vào thanh điều hướng. Vì vậy, đây là mã:
Nút công tắc điện
Logo/tên
Tìm kiếm
Đừng lo lắng vì có rất nhiều mã. Đây là giao diện của trang web bây giờ: 
Nhưng nếu menu của bạn không chiếm toàn bộ chiều rộng của màn hình, bạn nên căn giữa nó. Để thực hiện việc này, bạn nên tạo một khối bao bọc bổ sung cho menu, khối này sẽ được đặt sau khối có lớp chất lỏng chứa. Đừng quên đóng khối này. Tôi đã gán cho nó lớp navbar-wrap. Dưới đây là các phong cách cho nó:
Nghĩa là, bạn có thể chỉ cần giới hạn chiều rộng và căn giữa nó. Hoặc ban đầu thay thế container-fluid bằng container . 
Như bạn có thể thấy, chúng tôi đã thêm logo, hai mục đơn giản, một mục thả xuống và biểu mẫu tìm kiếm vào menu. Tức là có rất nhiều yếu tố. Bạn có thể dễ dàng tùy chỉnh menu cho mình bằng cách thêm các lớp của riêng bạn vào đó. Nhưng bây giờ mục tiêu của tôi chỉ đơn giản là cho bạn thấy thành phần này.
Đây là giao diện menu trên các thiết bị có chiều rộng màn hình dưới 768 pixel: 
Như bạn có thể thấy, menu đã bị sập. Nó mở ra khi bạn nhấp vào nút bên phải góc trên cùng. Chỉ còn lại logo trên màn hình.
Đồng thời, từ ví dụ trên, bạn có thể hiểu cách tạo một mục menu thả xuống trong Bootstrap; hãy trích xuất mã này để có cái nhìn chi tiết hơn:
Thiết bị tập thể dục
Vì vậy, vùng chứa mục thả xuống là một mục danh sách thông thường có lớp thả xuống. Bên trong nó là liên kết chính, nhấp vào đó sẽ mở ra menu thả xuống. Điều rất quan trọng là gán cho nó một thuộc tính dữ liệu mà bạn thấy trong mã; không có nó, sẽ không có gì hoạt động. Bạn cũng nên đảm bảo rằng tệp bootstrap.js được kết nối với các trang web.
Một khoảng với lớp dấu mũ không gì khác hơn là một mũi tên, nhờ đó bạn có thể hiểu rằng mục này là một mục thả xuống và bên dưới menu được hình thành bằng cách sử dụng danh sách dấu đầu dòng tiêu chuẩn. Vậy là xong, mọi thứ khá đơn giản, bạn có thể sử dụng mã này để triển khai các mục thả xuống.
Thêm Breadcrumbs (Breadcrumbs) bằng BootstrapỞ nhiều cửa hàng, bạn có thể tìm thấy cái gọi là khối vụn bánh mì, chứa đường dẫn đầy đủ đến trang hiện tại. Điều này cũng dễ thực hiện bằng cách sử dụng khung, xem mã:
Trên thực tế, chỉ cần chỉ định lớp breadcrumb cho một danh sách được đánh số và nhập các mục danh sách thông thường vào đó là đủ. Nhân tiện, tôi sẽ căn giữa các tiêu đề cấp hai trong mẫu (điều này cần được viết bằng css):
H2( căn chỉnh văn bản: giữa; )
Nếu bạn muốn thay đổi hình thức của breadcrumb bằng cách nào đó, chỉ cần sử dụng bộ chọn .breadcrumb trong CSS. Ví dụ: theo cách này bạn có thể loại bỏ màu nền:
Breadcrumb(nền: trong suốt;)
Đây là giao diện của trang web bây giờ: 
Theo mặc định, bảng sẽ trải dài trên toàn bộ cửa sổ, vì vậy hãy bọc nó trong một hộp có chiều rộng giới hạn để giới hạn kích thước. Theo mặc định, nó trông rất tệ, nhưng nếu bạn thêm lớp bảng vào thẻ bảng, mọi thứ sẽ đẹp hơn nhiều:
Để đánh dấu một màu khác khi bạn di chuột qua một hàng trong bảng, hãy sử dụng lớp di chuột qua bảng.
