Ví dụ nho nhỏ: (Đọc đến đây chứng tỏ các bạn chưa ngủ rồi, cố gắng nhé mọi người vì tương lai lập trình).

Trên Iphone 5

Mình muốn quay dọc màn hình điện thoại hiển thị 1 sản phẩm

Quay ngang màn hình hiển thị 2 sản phẩm

Hướng giải quyết của các bạn thế nào nhỉ? Chắc là ghi đè css(override Cascading Style Sheets) rồi.

Tuy nhiên, Với người biết dùng css lâu đời thì làm thế nào cũng được,nhưng xét mặt bằng chung làm như vậy thì nhiều màn hình lắm, có mà code xuyên màn đêm rồi khi fix bugs mà đau đầu (css quá dài làm giảm hiệu năng lắm).

Giải pháp của bản thân mình đặt ra là chia nhỏ màn hình 0px – 767px ra làm các khoảng nhỏ như sau:

/*! Extension by Mr.Giang_Kithuat BICWEB.VN * Extension Mobile @screen 480px @screen 580px @screen 767px. *create extension Mobile by Mr.Giang-Ki thuat BicWeb.vn* *Begin: Extension Bootstrap version 01* //Developer in Mobile *0. Mobile @screen : min-width: 0px => col-xs0-* * *1. Mobile @screen : min-width: 250px => col-xs1-* * *2. Mobile @screen : min-width: 320px => col-xs2-* * *3. Mobile @screen : min-width: 480px => col-xs3-* * *4. Mobile @screen : min-width: 580px => col-xs4-* * *xs.Mobile @screen : width: 0-767px => col-xs-* * *Mobile @screen 768px if don't using 1,2,3,4 then go to this=> col-xs-* * //Developer in Ipad (768px-920px) no update (version 02 => update) *1. Ipad @screen : min-width: 800px => col-sm1-* * *2. Ipad @screen : min-width: 920px => col-sm2-* * *End: Extension Bootstrap version 01* */

Sau khi customize: Mình đặt tên là bootstrapExtends version 01,version 02 mình đang customize sẽ có trong thời gian tới chỉ có 1 file bootstrap.css.

Việc chia nhỏ màn hình này với 1 dự án thì không có gì đáng kể về thời gian css, tuy nhiên với dự án lớn or rất rất nhiều dự án khác mà bạn dùng nó sẽ thấy nó giảm được vô số thời gian.

Dẫn chứng: Thử nghiệm qua nhiều website mình đã code font-end.

Cách sử dụng chỉ dành cho những bạn đã biết cơ bản boostrap

Khi sử dụng bootstrap cơ bản

Nếu bạn viết thế này thì trên màn hình <768px chỉ hiên thị được 1 item trên 1 hàng mà thôi (Mình đang xét tình huống không chia nhỏ màn hình nhé).

Bootstrap là gì? Cách sử dụng Bootstrap như thế nào? Đây là một số câu hỏi được rất nhiều người quan tâm. Bootstrap được biết là một framework rất phổ biến và được sử dụng rộng rãi trong quá trình thiết kế website.

Trong bài viết hôm nay, hãy cùng SHost tìm hiểu chi tiết hơn về Framework này để có thể trả lời cho câu hỏi: Có nên sử dụng Bootstrap không.

Bootstrap là một framework CSS miễn phí sử dụng mã nguồn mở dùng cho mục đích phát triển website front-end cho thiết bị di động. Bên cạnh những mẫu thiết kế kiểu chữ, biểu mẫu, nút hay thanh điều hướng bằng ngôn ngữ HTML, CSS và JavaScript, framework này còn bao gồm một số thành phần giao diện khác.

Mặc dù Bootstrap giúp tiết kiệm thời gian cho nhà phát triển khỏi việc phải quản lý các nhiều mã nguồn template, nhưng mục tiêu chính của nó là tạo ra các responsive website (website trên thiết bị đi động). Nó cho phép giao diện người dùng của website có thể hoạt động tối ưu trên mọi kích thước màn hình, trên điện thoại màn hình nhỏ hoặc máy tính để bàn màn hình lớn.

Do đó, các nhà phát triển không cần xây dựng các website dành riêng cho từng thiết bị và bị giới hạn phạm vi đối tượng nữa.

Tìm hiểu mã nguồn Bootstrap

Mã nguồn Bootstrap bao gồm tập hợp file với các chức năng cụ thể. Dưới đây là ba file chính quản lý giao diện người dùng và chức năng của website.

1. Bootstrap.css

Bootstrap.css là một framework CSS sắp xếp có chức năng quản lý bố cục của website. Trong khi HTML quản lý nội dung và cấu trúc của website thì CSS xử lý bố cục của website. Vì lý do đó, cả hai cấu trúc cần cùng tồn tại để thực hiện một hành động cụ thể.

Do các chức năng của nó, CSS cho phép bạn tạo giao diện thống nhất trên bao nhiêu website tùy thích. Giờ thì bạn có thể nói lời tạm biệt với việc phải ngồi hàng giờ để chỉnh sửa thủ công chỉ để thay đổi độ rộng của đường viền.

Với CSS, tất cả những gì bạn cần làm là giới thiệu các website đến file CSS. Bất kỳ thay đổi cần thiết có thể được thực hiện trong duy nhất file CSS đó.

2. Bootstrap.js

Bootstrap.js là phần cốt lõi của Bootstrap. Nó bao gồm các file JavaScript chịu trách nhiệm cho việc tương tác của website.

Để tiết kiệm thời gian khi viết cú pháp JavaScript nhiều lần, các nhà phát triển có xu hướng sử dụng jQuery. Nó có một thư viện JavaScript đa nền tảng, mã nguồn mở phổ biến cho phép bạn thêm các chức năng khác nhau vào website.

Dưới đây là một vài ví dụ về những gì jQuery có thể làm:

• Thực hiện các yêu cầu Ajax như loại trự dữ liệu từ một vị trí khác một cách linh hoạt
• Tạo tiện ích bằng bộ sưu tập plugin JavaScript
• Tạo hình động tùy chỉnh bằng các thuộc tính CSS
• Thêm tính năng động cho nội dung website

Mặc dù Bootstrap với các thuộc tính CSS và element HTML có thể hoạt động tốt, nhưng nó cần jQuery để tạo ra thiết kế responsive. Nếu không, bạn chỉ có thể sử dụng các phần tĩnh của CSS.

3. Glyphicons

Icons là một phần không thể thiếu của giao diện website. Chúng thường được liên kết với các hành động và dữ liệu nhất định trong giao diện người dùng. Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu đó.

Bootstrap bao gồm một bộ Halflings Glyphicons đã được mở khóa để sử dụng miễn phí. Phiên bản miễn phí có giao diện chuẩn nhưng chỉ phù hợp với các chức năng thiết yếu.

Nếu bạn muốn tìm icon phong cách hơn, Glyphicons cũng bán các bộ icon premium, chắc chắn sẽ trông đẹp hơn và phong phú hơn.

Bạn cũng có thể tải các icon riêng biệt và theo chủ đề xuống miễn phí trên các website như:

• Flaticon
• GlyphSearch
• Icons8.

Một số icon có thể bị ảnh hưởng bởi CSS mặc định của nhà cung cấp cho nên hãy sử dụng icons phù hợp nhất với website của bạn.

Hướng dẫn sử dụng Bootstrap

Để hiểu được cách sử dụng Bootstrap, hãy xem ví dụ dưới đây.

 




Hello, world!

Giải thích nhiệm vụ của từng dòng khai báo:

meta charset="utf-8"  

Mã hóa ký tự cho tài liệu HTML. Trong trường hợp này, UTF-8 đề cập đến Unicode.

meta http-equiv="X-UA-Compatible"  

Cho biết bộ ký tự được sử dụng để viết website.

meta name="viewport"  

Xác định phiên bản Internet Explorer sẽ hiển thị trang. Sử dụng chế độ Edge, nó được cài đặt để sử dụng chế độ cao nhất hiện có.

link href="css/bootstrap.min.css" rel="stylesheet"  

Đảm bảo rằng trang có tỷ lệ 1:1 với kích thước khung nhìn.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"  

Đây là phần thêm Bootstrap core CSS.

src="js/bootstrap.min.js  

Tải jQuery thông qua Google CDN. Sẽ tốt hơn để bạn tải nó từ CDN qua HTTP vì file có thể được lưu trong bộ nhớ cache trong một năm.

Thêm JavaScript lõi Bootstrap. Cú pháp này phải luôn nằm dưới cú pháp jQuery để hoạt động đúng. Quá trình bổ sung có thể được thực hiện thông qua URL của Google hoặc tải xuống thủ công.

Tổng kết

Bootstrap là front-end framework miễn phí ngày càng phổ biến hơn trong số các nhà phát triển front-end. Các nhà phát triển có thể dễ dàng sử dụng và tiết kiệm rất nhiều thời gian khi không cần phải viết code thủ công. Framework này cũng rất linh hoạt và có thể đáp ứng hầu hết mọi nhu cầu phát triển giao diện website. Khả năng tốt nhất của nó là xây dựng responsive giúp tối ưu website trên tất cả các các thiết bị di động.

Nếu bạn là nhà phát triển front end, bạn cần phải biết Bootstrap là gì và đây là thời điểm hoàn hảo để bạn bắt đầu sử dụng Bootstrap.

Tôi có kinh nghiệm hơn 10 năm sử dụng WordPress, từng làm việc cho các công ty hàng đầu về công nghệ tin học. Ngoài đam mê WordPress ra, tôi còn rất hứng thú về hệ thống Cloud, Bảo mật máy tính và Internet of thing. Tôi thích viết lách và chia sẻ kiến thức tới mọi người.