Trong bài đăng này, chúng ta sẽ thấy bố cục của một trang Bootstrap để giới thiệu những khả năng tuyệt vời của khung mã nguồn mở này. Trong bài viết trước chúng tôi đã cài đặt một môi trường phát triển và các plugin cần thiết để tạo điều kiện thuận lợi cho công việc của chúng tôi.
Hãy nhớ rằng với tư cách là người quản lý nội dung của Linux Adictos Nó không cho phép tôi chèn mã của các ví dụ tôi đã tải lên GitHub. Để tải chúng xuống, bạn phải cài đặt gói Git trên bản phân phối của mình và sau đó viết các lệnh sau:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Bạn sẽ cần chạy hai lệnh này theo định kỳ để tải xuống các tệp mới.
Phân tích mã
Bây giờ trong trình khám phá tệp, hãy mở example2.html bằng VSCodium. (Mở bằng nút bên phải) Chúng tôi thấy như sau:
- Trong dòng 1, chúng tôi cho trình duyệt biết loại tài liệu để trình duyệt biết cách hiển thị nó.
- Dòng 2 cho biết ngôn ngữ của trang web chỉ ra cho trình duyệt biết cách thể hiện các ký tự nhất định và cho các công cụ tìm kiếm ngôn ngữ của nội dung tạo điều kiện cho việc định vị. Trong mã của chúng tôi, nó được định nghĩa là es nhưng có các biến thể khu vực như es_ES cho tiếng Tây Ban Nha từ Tây Ban Nha hoặc es_AR cho tiếng Tây Ban Nha từ Argentina.
- Từ dòng 3, chúng tôi có một vùng chứa siêu dữ liệu nằm giữa các thẻ Y . Siêu dữ liệu cung cấp thông tin về tài liệu. Trong ví dụ của chúng tôi:
- Dòng 4 cho biết tiêu chuẩn được sử dụng để mã hóa ký tự. Có lẽ bạn đã từng thấy rằng thay vì các ký tự có dấu hoặc các ký hiệu đặc biệt, một dấu chấm hỏi bên trong một viên kim cương được hiển thị. Điều này là do trình duyệt sử dụng mã hóa không phù hợp. Câu lệnh ở dòng 8 tránh điều này bằng cách khai báo nó một cách rõ ràng.
- Trong dòng 5, chúng tôi cho trình duyệt biết cách nó thích ứng với các định dạng màn hình khác nhau.
- Tiêu đề chúng tôi đặt ở dòng 6 sẽ được hiển thị trên thanh trên cùng của trình duyệt và trong các công cụ tìm kiếm.
- Ở dòng 7, chúng tôi cho trình duyệt biết nơi tìm các phần tử khung Bootstrap liên quan đến kiểu dáng.
- Từ dòng 10, vùng chứa bắt đầu. Nội dung bao gồm nội dung của trang web và liên kết đến các tập lệnh Bootstrap sẽ cung cấp khả năng tương tác cho trang web của chúng tôi.
- Dòng 13 cho biết phần cuối của tài liệu.
Bố cục của một trang Bootstrap
Các khái niệm chính về bố cục của một trang Bootstrap
Như chúng tôi đã nói trong các bài viết trước, Bootstrap sử dụng cách tiếp cận đầu tiên trên thiết bị di động. Khi áp dụng cách tiếp cận này, thiết kế được thực hiện với thiết bị có kích thước màn hình nhỏ nhất, sau đó các lớp được thêm vào để điều chỉnh nó cho phù hợp với các kích thước tiếp theo.
Ở đây chúng ta phải tính đến hai khái niệm chính:
- Các điểm ngắt.
- Tư vấn phương tiện truyền thông.
Các điểm ngắt cho biết bố cục được sửa đổi từ chiều rộng màn hình nào., Truy vấn phương tiện áp dụng các tham số kiểu dựa trên các đặc điểm nhất định của trình duyệt và hệ điều hành. Nói cách khác, mỗi điểm ngắt sẽ có một kiểu tương ứng.
Bootstrap đi kèm với sáu điểm ngắt được xác định trước có thể được sửa đổi bởi các lập trình viên cao cấp hơn. Các điểm mặc định là:
- Cực nhỏ: Không có số nhận dạng đặt trước và áp dụng cho màn hình rộng dưới 576 pixel.
- Nhỏ: Nó được xác định bằng sm và được sử dụng cho màn hình từ 576 pixel.
- Trung bình: Nó được xác định bằng md và được sử dụng cho màn hình từ 768 pixel.
- Độ dài: Được xác định là lg được sử dụng cho màn hình từ 992 pixel.
- Cực dài: Nó có mã định danh lg và áp dụng các kiểu cho màn hình từ 1200 pixel.
- Cực dài: Được đánh dấu bằng số nhận dạng xxl, nó được sử dụng để áp dụng thiết kế cho màn hình từ 1400 pixel.
Những kích thước này không được chọn một cách ngẫu nhiên như mỗi điểm ngắt có thể chứa các vùng chứa có chiều rộng là bội số của 12. Chúng cũng không được nhắm mục tiêu đến một thiết bị cụ thể mà thay vào đó thích ứng với các loại thiết bị và kích thước màn hình khác nhau.
Trong các kích thước màn hình khác nhau, chúng tôi tìm thấy các vùng chứa. Chúng chịu trách nhiệm lưu trữ, điền và căn chỉnh nội dung của trang web trong một thiết bị hoặc cửa sổ đồ họa nhất định.
;