Sử dụng bootstrap framework thiết kế giao diện website cực nhanh và dễ dàng [Bootstrap - Phần 1]

Chào các bạn chắc hẳn ai đã học về lập trình web đều đang tìm kiếm cho mình những phương pháp thiết kế giao diện website một cách nhanh nhất đúng không. Vậy thì mình sẽ giới thiệu cho các bạn một css framework cực kỳ mạnh mẽ và chuyên nghiệp, đó bootstrap framework. Với bootstrap mạnh mẽ có thể giúp bạn thiết kếgiao diện dễ dàng, cơ chế code linh hoạt cho mọi kích thước màn hình hiển thị đó là màn hình pc  screen 1200px, màn hình máy tính thông thường screen 970px hay màn hình tabs screen 768px trở lên và màn hình mobile thông dụng 480px trở xuống.

Để bắt đầu tạo giao diện website về bootstrap đòi hỏi bạn phải có một nền tảng về vững chắc về html và css khoảng 80% là đủ để chiến rồi. Ở bài này mình chỉ giới thiệu sơ lược về bootstrap và một số hướng dẫn cơ bản. So với phiên bản 2.0 trước đó thì phiển bản hiện tại của bootstrap đang là bootstrap 3.3.7.

Nào bây giờ chúng ta cùng bắt đầu. Chúng ta sẽ kết hợp giữa html 5 và bootstrap để làm việc tức trong phần code html của bạn nên sử dụng các thẻ html5 (header, section, footer). Mục đich làm vậy để làm gì. Vì có ban hỏi tôi là tôi chả cần cái html 5 mà tôi cũng làm được cái giao diện website như html5. Xin trả lời rằng nếu bạn làm về công nghệ thì bạn nên nắm bắt cải tiến để đi theo công nghệ không bạn sẽ thụt lùi lại phía sau. Thôi không nói dài dòng nữa bây giờ bạn cần vào http://getbootstrap.com/getting-started/ sau đó tải Bootstrap về.

sử dụng bootstrap thiết kế giao diện website phần 1

Sau đó bạn click vào phần Download Bootstrap ở ô đầu tiên như phần trên và ban đừng quan tâm phần bên dưới làm gì. Bây giờ bạn cần tạo một thư mục có thể đặt tên tùy ý theo dự án của bạn ở đây mình đặt tên thư mục là bootstrap trong httpdocs của máy chủ ảo xampp nếu bạn chưa biết về xampp hãy tìm hiểu về nó tại đây 

Sau đó bạn giải nèn tệp tin bootstrap vừa tài về copy toàn bộ file css, fonts, js vào trong thư mục bạn vừa tạo.

sử dung bootstrap để thiết kế giao diện website phần 1 -

 

Giờ bạn sẽ tạo thêm 1 file có tên index.html và copy toàn bộ định dạng code sau vào nhé.

 

Giới thiệu qua một chút về các thẻ để bạn hiểu hơn.

<meta utf-8 > – thẻ này giúp bạn hiển thị tiếng việt có dấu khi ta gõ tiếng việt.

<meta viewport > – thẻ này cần có thể website của bạn có thể zoom trên mobile hay tabs.

<link href=”dườn dẫn tới file css”>

<script src = “dường dẫn tới file js” >

Như vậy bạn đã hoàn thành xong bước nhúng bootstrap vào theme. vậy mình coi đây là bước khởi động.

Tiếp đế mình sẽ tạo một menu đơn giản bằng bootstrap để bạn hiểu hơn và bạn thấy và mình sẽ chứng mình cho bạn thấy được rằng bootstrap là một sự lựa chọn không hề tồi so với các frame work khác.

1/ Tạo menu bằng bootstrap

Thông thường bạn sẽ phải viết các thẻ rồi tự thêm class hoặc id và css cho nó . Con khi bạn sử dụng bootstrap thì bạn chỉ cần nhớ các component của nó và sử dụng lại từ file thư viện bootstrap.css mà thôi.

Như ở trên mình tạo 12 col cho màn hình lớn nhất  tưc col-lg-3 và col-lg-9 . Đặc tính của bootstrap là sử dụng col để tạo các độ rộng cách đều nhau rất thoáng và đẹp mắt. Nếu bạn sử dụng cho màn hình máy tình thông thường thì bạn nên chọn là col-md-số cột. Màn hình nhỏ hơn như tabs hay mobile thì bạn đặt là col-sm-số cột hoặc col-xs-* .

 

Tóm lại: Với việc sử dụng bootstrap giúp bạn xây dựng website nhanh, tùy biến code html linh hoạt hơn rất nhiều  và bootstrap chính là một sự lựa chọn hoàn hảo cho bạn.  Nếu bán có thắc mắc bất cứ vấn đề gì vui lòng để lại comment phái dưới và mình sẽ giải đáp. Bài viết tiếp theo về bootstrap mình sẽ giới thiêu thêm về các components và cách sử dụng các component này.


 

Để lại một trả lời

Hãy trở thành người đầu tiên bình luận về bài viết này!

avatar
wpDiscuz