Giáo trình thiết kế layout web với CSS framework Bootstrap tại Cao đẳng Cơ điện Hà Nội

Hướng dẫn thiết kế layout web với css framework chi tiết. Tài liệu nội bộ cung cấp kiến thức nền tảng và kỹ thuật xây dựng giao diện website tối ưu.

• Trường học: Trường Cao đẳng Cơ điện Hà Nội
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Thiết kế layout web với CSS Framework
• Loại tài liệu: Giáo trình
• Năm xuất bản: 2025
• Địa điểm: Hà Nội

Tóm tắt

I. Tổng quan thiết kế layout web với CSS framework lưu hành nội bộ

Giáo trình thiết kế layout web với CSS framework lưu hành nội bộ cung cấp nền tảng kiến trúc giao diện bài bản. Tài liệu tập trung khai thác Bootstrap 4 nhằm tối ưu hóa quá trình xây dựng website hiện đại. Cấu trúc giáo trình phân bổ rõ ràng từ lý thuyết cốt lõi đến kỹ thuật thực hành chuyên sâu. Bootstrap kết hợp HTML, CSS và JavaScript giúp lập trình viên tạo lập các khối giao diện chuẩn mực. Mã nguồn mở cho phép can thiệp linh hoạt vào từng thông số hiển thị. Tính năng tải qua CDN hỗ trợ tiết kiệm băng thông và tài nguyên lưu trữ máy chủ. Hệ thống mô-đun hóa hỗ trợ tích hợp mượt mà với nhiều nền tảng quản trị nội dung phổ biến. Giao diện thành phẩm luôn đạt tiêu chuẩn hiển thị tối ưu trên màn hình máy tính lẫn thiết bị di động. Khả năng tự động co giãn kích thước giúp trải nghiệm người dùng luôn mượt mà. Việc tiếp cận tài liệu nội bộ tạo tiền đề vững chắc cho sinh viên ngành công nghệ thông tin. Các quy chuẩn kỹ thuật được kiểm định nghiêm ngặt trước khi áp dụng vào giảng dạy thực tế. Toàn bộ kiến thức đáp ứng sát sườn đòi hỏi thực tiễn từ doanh nghiệp phần mềm.

1.1. Lịch sử hình thành và cấu trúc cốt lõi của Bootstrap

Bootstrap ra đời từ bàn tay của Mark Otto cùng Jacob Thornton tại Twitter. Bộ công cụ nhanh chóng trở thành tiêu chuẩn vàng trong thiết kế web hiện đại. Cấu trúc Bootstrap gồm tập hợp các tập tin CSS, JavaScript và phông chữ nén gọn gàng. Các tệp tin được biên dịch sẵn nhằm giảm tải dung lượng xử lý cho trình duyệt. Lập trình viên dễ dàng nhập thư viện vào dự án qua liên kết mạng hoặc tải trực tiếp. Bộ khung cho phép tách biệt rõ ràng giữa logic giao diện và cấu trúc dữ liệu. Khả năng tương thích trình duyệt giúp loại bỏ hoàn toàn các lỗi hiển thị phổ biến. Cấu trúc linh hoạt này hỗ trợ đắc lực cho mục tiêu đào tạo chuẩn hóa.

1.2. Giá trị giáo dục của giáo trình lưu hành nội bộ

Giáo trình nội bộ tại các trường cao đẳng đóng vai trò định hướng học tập then chốt. Sinh viên ngành công nghệ thông tin tiếp cận phương pháp xây dựng giao diện khoa học. Nội dung bài giảng biên soạn cô đọng, bám sát các dự án thực tế. Người học nắm vững nguyên lý hoạt động của mã nguồn mở HTML, CSS và JavaScript. Môi trường thực hành chuẩn mực hạn chế tối đa các sai sót cú pháp ban đầu. Tài liệu định hình tư duy tổ chức bố cục logic cho kỹ thuật viên tương lai. Nhờ đó, người học tự tin làm chủ quy trình phát triển website thương mại điện tử chuyên nghiệp.

II. Phân tích thiết kế layout web với CSS framework lưu hành nội bộ

Xây dựng layout web thủ công bằng CSS thuần tiềm ẩn nhiều rủi ro về tính đồng bộ. Các lập trình viên thường mất nhiều thời gian căn chỉnh từng thuộc tính định dạng nhỏ lẻ. Tình trạng vỡ khung giao diện diễn ra thường xuyên khi hiển thị trên các màn hình khác biệt. Trình duyệt cũ và mới luôn có sự sai lệch nhất định về cơ chế hiển thị CSS. Việc thiếu hệ thống tiền định dạng dẫn đến mã nguồn bị phình to và khó bảo trì. Trong đào tạo nghề, sinh viên dễ gặp lúng túng khi xử lý các thành phần phức tạp. Các khối form biểu mẫu hoặc bảng dữ liệu lớn rất dễ gặp lỗi trình bày. Sự không nhất quán giữa các thẻ giao diện làm giảm tính thẩm mỹ tổng thể của trang web. Khung CSS framework giải quyết triệt để các hạn chế cố hữu này thông qua chuẩn hóa lớp. Các quy tắc ngữ cảnh được thiết lập sẵn nhằm truyền tải trạng thái thông tin chính xác. Việc nghiên cứu phân tích lỗi giao diện giúp nâng cao năng lực kiểm thử sản phẩm phần mềm. Quy trình phân tích này là bước đệm then chốt trong kỹ thuật lập trình web.

2.1. Thách thức về tính tương thích đa nền tảng và thiết bị

Sự bùng nổ của các thiết bị di động đặt ra bài toán khó cho thiết kế layout. Màn hình điện thoại, máy tính bảng và máy tính để bàn có độ phân giải rất khác nhau. Giao diện trang web nếu không co giãn linh hoạt sẽ gây khó khăn cho người thao tác. Lỗi tràn nội dung hay vỡ bố cục thường xuyên xuất hiện trên các màn hình nhỏ. Người lập trình viên phải viết hàng loạt truy vấn media query thủ công rất tốn thời gian. Khả năng tương thích chéo giữa trình duyệt Chrome, Safari hay Firefox cũng nảy sinh nhiều xung đột hiển thị. Hệ thống framework nội bộ cung cấp lời giải tối ưu thông qua hệ thống lưới phản hồi tự động.

2.2. Vấn đề đồng bộ hóa phần tử biểu mẫu và bảng biểu

Biểu mẫu và bảng số liệu là hai thành phần giao diện dễ phát sinh lỗi trình bày. Các trường nhập liệu thẻ input thường thiếu khoảng cách đệm đồng nhất nếu thiếu quy chuẩn. Thẻ select hoặc textarea hiển thị không đều tạo cảm giác thiếu chuyên nghiệp cho trang web. Dữ liệu bảng số liệu lớn rất dễ bị tràn khỏi khung nhìn màn hình điện thoại. Việc thiếu hiệu ứng tương tác dòng gây cản trở việc theo dõi thông tin hàng dọc. Giáo trình giải quyết vấn đề này qua việc áp dụng chuẩn lớp định sẵn. Lớp form-control tạo bề rộng tuyệt đối cùng độ bo góc hoàn mỹ. Các lớp ngữ cảnh bảng table-hover giúp dữ liệu trực quan và sinh động hơn.

III. Giải pháp thiết kế layout web với CSS framework lưu hành nội bộ

Giải pháp then chốt nằm ở việc ứng dụng triệt để hệ thống thành phần của framework. Giáo trình hướng dẫn thiết lập hệ thống lưới phân chia không gian màn hình chuẩn xác. Mọi khối nội dung được sắp xếp hài hòa theo cơ chế hàng và cột linh hoạt. Các thẻ biểu mẫu được cấu trúc lại với lớp form-group để tối ưu khoảng cách hiển thị. Thẻ input và select được gán lớp form-control nhằm thiết lập chiều rộng đạt mức tuyệt đối. Bảng biểu dữ liệu được bổ sung lớp table cùng các biến thể ngữ cảnh chuyên biệt. Kỹ thuật này giúp phân biệt rõ ràng thông tin cảnh báo, thành công hay thông báo chung. Thành phần khung panel hỗ trợ phân vùng nội dung khoa học bằng đường viền tinh tế. Lớp panel-heading kết hợp thẻ tiêu đề tạo điểm nhấn rõ nét cho bố cục trang. Khả năng nhúng responsive bảo đảm video hiển thị hoàn hảo trên mọi thiết bị duyệt web. Thao tác áp dụng lớp embed-responsive giữ nguyên tỷ lệ khung hình chuẩn mực ban đầu. Toàn bộ kỹ thuật giúp rút ngắn thời gian hoàn thiện sản phẩm phần mềm.

3.1. Kỹ thuật cấu hình form và bảng biểu theo ngữ cảnh

Quy trình xây dựng biểu mẫu chuyên nghiệp đòi hỏi phân cấp phần tử chuẩn xác. Thẻ nhãn label liên kết chặt chẽ với trường nhập liệu bằng định danh id tương ứng. Lớp form-check-input hỗ trợ định dạng hộp chọn checkbox ngay ngắn và cân đối. Bảng số liệu khai thác tối đa sức mạnh của các lớp trạng thái trực quan. Lớp table-hover kích hoạt hiệu ứng phản hồi chuyển động khi con trỏ chuột lướt qua. Các lớp ngữ cảnh như success, warning hay danger tô điểm màu sắc nổi bật cho hàng dữ liệu. Màu xanh thể hiện kết quả tích cực trong khi màu đỏ cảnh báo thao tác nguy hiểm. Cách thức phân màu giúp người quản trị hệ thống nắm bắt dữ liệu tức thì.

3.2. Triển khai cấu trúc Panel và nhúng đa phương tiện

Khung panel tạo ranh giới bao bọc thông tin rõ ràng nhờ đường viền và padding cân đối. Cấu trúc gồm ba khối độc lập gồm tiêu đề panel-heading, nội dung panel-body và chân trang. Thẻ tiêu đề h3 kết hợp lớp panel-title tạo điểm nhấn thị giác sắc nét cho phân đoạn. Biến thể màu sắc panel-primary hay panel-info giúp phân loại nội dung mạch lạc. Kỹ thuật nhúng đa phương tiện ứng dụng lớp embed-responsive giải quyết bài toán vỡ khung hình video. Lớp con embed-responsive-item áp dụng trực tiếp cho thẻ iframe giúp cố định tỷ lệ khung hình chuẩn xác. Trình duyệt tự động tính toán kích thước trình chiếu dựa theo độ rộng vùng chứa. Nhờ đó, trải nghiệm đa phương tiện luôn mượt mà trên mọi loại màn hình.

IV. Ứng dụng thiết kế layout web với CSS framework lưu hành nội bộ

Nắm vững giáo trình thiết kế layout mang lại lợi thế nghề nghiệp vượt trội cho sinh viên. Khả năng làm chủ CSS framework giúp xây dựng các cổng thông tin điện tử chuyên nghiệp. Kỹ thuật viên dễ dàng tùy biến giao diện phù hợp với yêu cầu thực tế của từng dự án. Các quy chuẩn nội bộ hình thành tác phong lập trình khoa học, ngăn nắp và sạch sẽ. Tốc độ xuất bản sản phẩm được đẩy nhanh nhờ việc tái sử dụng các mẫu khối có sẵn. Mã nguồn tối ưu giảm thiểu chi phí vận hành máy chủ và bảo trì hệ thống lâu dài. Khả năng tích hợp Javascript như hiệu ứng modal giúp tăng tính tương tác với khách hàng. Mọi tiêu chuẩn giao diện trong giáo trình đều bám sát quy trình làm việc thực tế tại doanh nghiệp. Sinh viên tốt nghiệp nhanh chóng bắt nhịp với môi trường phát triển phần mềm quy mô lớn. Việc áp dụng kiến thức từ giáo trình nội bộ là chìa khóa mở rộng cơ hội việc làm. Nền tảng kỹ thuật vững chắc bảo đảm năng lực thích ứng với các framework mới trong tương lai.

4.1. Thực hành phát triển hệ thống giao diện trong thực tế

Quy trình triển khai sản phẩm thực tế bắt đầu bằng bước phân tích cấu trúc trang web. Nhà phát triển kết hợp linh hoạt hệ thống lưới cùng các khối điều hướng thanh menu. Thành phần đa phương tiện và biểu mẫu liên hệ được bố trí hài hòa tại từng phân vùng. Các hiệu ứng thông báo ngữ cảnh giúp tương tác khách hàng trở nên thân thiện và chuẩn xác. Mã nguồn được kiểm thử đồng bộ trên cả trình duyệt máy tính lẫn điện thoại thông minh. Khả năng phản hồi tức thì giúp giảm thiểu tỷ lệ thoát trang của khách hàng tiềm năng. Kết quả tạo nên một trang web thương mại hoàn chỉnh với độ tin cậy và tốc độ tải ấn tượng.

4.2. Định hướng tối ưu hóa và làm chủ framework hiện đại

Làm chủ CSS framework từ giáo trình nội bộ là bước khởi đầu cho hành trình chuyên nghiệp. Kỹ thuật viên cần rèn luyện thói quen tái cấu trúc mã nguồn theo hướng tối giản. Việc lược bỏ các class dư thừa giúp tối ưu tốc độ phản hồi của trang web. Tiếp tục nghiên cứu sâu về Javascript và hiệu ứng modal để nâng cấp trải nghiệm tương tác. Hiểu rõ bản chất CSS nguyên bản giúp người học dễ dàng chuyển dịch sang các framework khác. Khả năng tự xây dựng thư viện mẫu dùng chung đem lại hiệu suất làm việc nhóm vượt trội. Tinh thần không ngừng cập nhật công nghệ mới sẽ tạo dựng sự nghiệp lập trình viên vững vàng.

Trích đoạn nội dung tài liệu

TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN GIÁO TRÌNH THIẾT KẾ LAYOUT WEB VỚI CSS FRAMEWORK (Lưu hành nội bộ) Hà Nội năm 2025 MỤC LỤC BÀI 1. TỔNG QUAN VỀ BOOTSTRAP FRAMEWORK. Giới thiệu Bootstrap Framework. Download và sử dụng Bootstrap.

4 BÀI 2: CSS TRONG BOOTSTRAP. Hệ thống lưới. Tạo bảng biểu. Sử dụng Form.

Sử dụng nút lệnh. Sử dụng ảnh. 32 BÀI 3: CÁC THÀNH PHẦN TRONG BOOTSTRAP. Các thành phần trong form.

Các thành phần điều hướng. Đối tượng đa phương tiện. Nhóm danh sách. Nhúng responsive.

Các thành phần khác. 50 BÀI 4: JAVASCRIPT TRONG BOOTSTRAP. Hiệu ứng Modal. TỔNG QUAN VỀ BOOTSTRAP FRAMEWORK 1.

Giới thiệu Bootstrap Framework Bootstrap 4 (viết tắt là BS4), là phiên bản mới nhất của Bootstrap. Bootstrap là framework HTML, CSS và Javascript phổ biến nhất hiện nay để thiết kế website có thể đáp ứng trên tất cả các nền tảng di động và các thiết bị khác như máy tính bảng, laptop,…. Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Bản bootstrap mới nhất bây giờ là bootstrap 4.

Tương tự như Bootstrap 3 phiên bản cũ, Bootstrap 4 hoàn toàn miễn phí và tự do sử dụng. Ví dụ: Muốn tạo 1 nút (Button) Kết quả: Sử dụng Bootstrap: 2 Kết quả: * Tại sao nên sử dụng Bootstrap: ➢ Dễ dàng thao tác: Cơ chế hoạt động của Bootstrap là dựa trên xu hướng mã nguồn mở HTML, CSS và Javascript. Người dùng cần trang bị kiến thức cơ bản 3 mã này mới có thể sử dụng Bootstrap hiệu quả. Bên cạnh đó, các mã nguồn này cũng có thể dễ dàng thay đổi và chỉnh sửa tùy ý.

➢ Tùy chỉnh dễ dàng: Bootstrap được tạo ra từ các mã nguồn mở cho phép designer linh hoạt hơn. Giờ đây có thể lựa chọn những thuộc tính, phần tử phù hợp với dự án họ đang theo đuổi. CDN Boostrap còn giúp bạn tiết kiệm dung lượng vì không cần tải mã nguồn về máy. ➢ Chất lượng sản phẩm đầu ra hoàn hảo: Bootstrap là sáng tạo của các lập trình viên giỏi trên khắp thế giới.

Bootstrap đã được nghiên cứu và thử nghiệm trên các thiết bị. Được kiểm tra nhiều lần trước khi đưa vào sử dụng. Do đó, khi chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên những sản phẩm với chất lượng tốt nhất. ➢ Độ tương thích cao: Bootstrap tương thích với mọi trình duyệt và nền tảng bởi Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện trên thiết bị di động hơn.

Bootstrap có khả năng tự động điều chỉnh kích thước trang website theo khung browser. Mục đích để phù hợp với màn hình của máy tính để bàn, tablet hay laptop. Cấu trúc và tính năng của Bootstrap: Bootstrap chứa các tập tin JavaScript, CSS và fonts đã được biên dịch và nén lại. Ngoài ra, Bootstrap được thiết kế dưới dạng các mô-đun.

Do đó, dễ dàng tích hợp với hầu hết các mã nguồn mở như WordPress, Joomla, Magento, …Trong đó, Bootstrap mang đến nhiều chức năng nổi bật. Bootstrap cho phép người dùng truy cập vào thư viện “khổng lồ” các thành tố dùng để tạo nên giao diện của một website hoàn chỉnh như font, typography, form, table, grid… Bootstrap cho phép bạn tùy chỉnh framework của website trước khi tải xuống và sử dụng nó tại trang web của khung. 3 Tái sử dụng các thành phần lặp đi lặp lại trên trang web. Bootstrap được tích hợp jQuery.

Bạn chỉ cần khai báo chính xác các tính năng trong quá trình lập trình web của bạn. Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình ảnh làm biểu tượng và tăng tốc độ tải trang. Download và sử dụng Bootstrap Có hai cách phổ biến để tải Bootstrap về web của bạn: Tải trực tiếp từ trang cung cấp Bootstrap: Sau khi tải và nhúng vào dự án web, không cần có kết nối internet để hiển thị trang web bình thường Thông qua CDN (Content Delivery Network) Bootstrap: Luôn cần kết nối đến CDN Cách 1: Tải trực tiếp từ trang cung cấp Bootstrap: Bước 1: Truy cập trang web https://getbootstrap.com/ Bước 2: Chọn Download 4 Bước 3: Chọn Download trong nhóm Compiled CSS and JS Bước 4: Giải nén file tải về, trong đó chứa 2 thư mục css và js 5 Bước 5: Tạo thư mục chứa dự án web rồi copy 2 thư mục css và js vào thư mục của dự án. duAnWeb css js index.

6 Bước 6: Tải thư viện jQuery: Truy cập https://jquery.com/download/ Click chuột phải vào link tải jQuery chọn Save link As Lưu file nhận được vào thư mục js của dự án web, khi đó trong thư mục js ta có: Bước 7: Nhúng css và js vào file index.html theo cú pháp: 7 Cách 2: Nhúng Bootstrap từ CDN: Để sử dụng Bootstrap 4, các bạn cần nhúng các file thư viện sau: o bootstrap.js Các link nhúng Boostrap từ CDN thường dùng <link rel="stylesheet" href="https://maxcdn.css"> <script src="https://ajax.com/ajax/libs/jquery/3.js"></script> <script src="https://cdnjs.com/ajax/libs/popper.js" ></script> <script src="https://maxcdn.js"></scr ipt> Định dạng file mẫu: 8 Lưu ý: Cài đặt plugin hỗ trợ viết code bootstrap trong sublime text: ➢ Bootstrap autocomplete ➢ Bootstrap Snipets Cách cài đặt: Preferences/Package Control/Install Package Lần lượt chọn Bootstrap autocomplete và Bootstrap Snipets để cài đặt 9 BÀI 2: CSS TRONG BOOTSTRAP 1. Hệ thống lưới Containers: Dễ dàng căn giữa nội dung của một trang bằng cách bọc nội dung của nó bên trong một. Container thiết lập thuộc tính width trên tất cả các kích thước được áp dụng vào media query để tương thích với hệ thống lưới của chúng tôi. Lưu ý rằng, do padding và chiều rộng cố định nên container mặc định không thể bị lồng.

Sử dụng class .container cho một container responsive có chiều rộng cố định. <div class="container">. </div> Sử dụng class .container-fluid cho container có chiều rộng tối đa, bằng chiều rộng khung nhìn của bạn. <div class="container-fluid">.

</div> Hệ thống lưới: Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa. Giới thiệu Các hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các chuỗi hàng và cột chứa nội dung của bạn.

Và dưới đây là cách hệ thống lưới của Bootstrap hoạt động: Các hàng được đặt bên trong một .container- fluid (full-width) để căn chỉnh và thiết lập padding một cách thích hợp. Sử dụng các hàng để tạo ra nhóm các cột theo hàng ngang. Nội dung cần phải được đặt trong các cột, và chỉ có duy nhất các cột là phần tử con trực tiếp của các hàng. 10 Các class được định nghĩa trước như .col-xs-4 luôn sẵn có để dựng lên các bố cục lưới một cách nhanh nhất.

Một số ít các mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa. Các cột tạo nên các gutter (khoảng trắng nằm giữa nội dung cột) bằng padding. Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong các hàng do giá trị margin âm trên các. Các cột của lưới được tạo ra bằng cách chỉ định số các cột mà bạn muốn sử dụng trong tổng số 12 cột.

Ví dụ, để tạo ra một bố cục với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class. Hãy xem các ví dụ để biết cách áp dụng các nguyên tắc này vào code của bạn. Media query: Chúng tôi sử dụng các media query sau trong các tập tin Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng tôi. Để tương thích với một số ít các thiết bị, thi thoảng chúng tôi mở rộng các media query này bằng cách thêm thuộc tính max-width.

11 Các tùy chọn của lưới: Hãy xem hệ thống lưới của Bootstrap hoạt động như thế nào trên các thiết bị trong bảng sau. Ví dụ: Chồng theo hàng ngang Sử dụng một tập hợp các class .col-md-*, bạn có thể tạo ra một hệ thống lưới cơ bản. Hệ thống này sẽ hiển thị chồng lên nhau trên các thiết bị di động và tablet (kích thước nhỏ) trước khi hiển thị dưới dạng hàng ngang trên màn hình máy tính (kích thước trung bình). Hãy đặt các cột của lưới vào bên trong các.

<div class="row"> 12 <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> Ví dụ: Fluid container 13 Chuyển đổi bất kỳ một bố cục lưới fixed-width nào thành một bố cục full-width bằng cách thay đổi .container ngoài cùng thành. <div class="container-fluid"> <div class="row">. </div> </div> Ví dụ: Điện thoại di động và máy tính để bàn Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm .col-md-* vào các cột của bạn. Hãy xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động.

<!-- Stack the columns on mobile by making one full-width and the other half- width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-md-8</div> <div class="col-xs-6 col-md-4">.col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-md-4</div> <div class="col-xs-6 col-md-4">.col-md-4</div> <div class="col-xs-6 col-md-4">.col-md-4</div> 14 </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> Ví dụ: Điện thoại, máy tính bảng, máy tính để bàn Bạn có thể tạo ra các bố cục cơ động hơn nữa bằng cách sử dụng các class dành cho máy tính bảng. <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-md- 8</div> <div class="col-xs-6 col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-sm-4</div> </div> Reset cột responsive Khi sử dụng 4 bậc (tương ứng với 4 mốc kích thước của màn hình) của hệ thống lưới, bạn sẽ gặp phải một vấn đề, đó là tại một mốc kích thước xác định, có thể sẽ 15 có một cột cao hơn các cột khác trong cùng một hàng. Để sửa lỗi này, hãy sử dụng một class .clearfix cùng với các class responsive tiện ích của chúng tôi. <div class="row"> <div class="col-xs-6 col-sm-3">.col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-sm-3</div> </div> Ngoài việc clear các cột tại các mốc Responsive, có thể bạn cần thực hiện reset offset, push, hooặc pull.

Hãy tham khảo the grid example để hiểu rõ hơn. <div class="row"> <div class="col-sm-5 col-md-6">.col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-offset-2 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-md-offset-2 .