apkm-search

[HTML/CSS] Giới thiệu và hướng dẫn cách sử dụng Bootstrap

Những hướng dẩn cơ bản để làm quen với Bootstrap.

Twitter-Bootstrap-Tutorials

 

Có bao giờ bạn phải viết HTML/CSS rùi ngồi suy nghỉ “Tại sao mình phải viết đi viết lại nhưng class giống nhau như thế này ?” hay “Mình sẽ làm 1 css framework để về sau sử dụng lại haha :haha: “.Rồi chợt nhận ra là mọi chuyện không đơn giản như vậy class bạn viết ra ở web này rùi lại hì hục sửa ở web khác  :pudency: nhiều lúc ngồi sửa còn lâu hơn là viết mới.

Hôm nay mình sẽ giới thiệu cho các bạn cách để giải quyết vấn đề trên.Đó là sử dụng Twitter Bootstrap.

A- Giới thiệu về Twitter Bootstrap

Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website.

Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 12 cột. Tất nhiên là cũng có giải pháp cho việc dùng layout dạng động (fluid).

Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh lịch. Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thị cảnh báo, tabs, phân trang…

B- Tại sao lại sử dụng Twitter Bootstrap

Như mình đã giới thiệu ở trên , Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css.Twitter Bootstrap định nghĩa sẳn  các class css công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình.Twitter Bootstrap còn hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây

C- Cách sử dụng Twitter Bootstrap

Đây là 1 cấu trúc mẩu để Twitter Bootstrap hoạt động.

Để enable Responsive design thì chúng ta thêm đoạn này vào file html

Twitter Bootstrap đã viết sẳn rất nhiều components để chúng ta có thể sử dụng.ví dụ như nava,dropdown,Breadcrumbs….Chúng ta chỉ việc copy đoạn HTML đó và chèn vào vị trí mong muốn và chỉnh sửa lại là xong.Còn nhiều component nữa ở đây http://twitter.github.io/bootstrap/components.html bạn có thể vào để tham khảo

Chèn đoạn code trên vào là bạn đã có 1 top menu hổ trợ responsive rùi.

Ngoài ra nó còn hổ trợ 1 số hiệu ứng jQuery như dropdown menu , tab,modal,…Bạn có thể tìm hiểu thêm ở đây http://twitter.github.io/bootstrap/javascript.html

D- Lời kết

Qua bài viết này chúng ta thấy rằng việc làm giao diện bằng html+ css không còn vất vả như trước nhưng cũng như các css framework khác chúng ta cần tìm hiểu để có thể tuỳ biến giao diện theo ý muốn của mình.Mọi ý kiến thắc mắc các bạn cứ mạnh dạn comment ở dưới mình sẽ tranh thủ trả lời tất cả.

Chúc các bạn thành công !

BÌNH LUẬN BÀI VIẾT

Leave a Reply

12 Comments on "[HTML/CSS] Giới thiệu và hướng dẫn cách sử dụng Bootstrap"

Notify of
avatar
Sort by:   newest | oldest
Đêm Vắng3 năm gắn bó cùng NQDung.COMLevel 1
Đêm Vắng
2 comments

Cho mình hỏi nếu mình muốn viết css cho khung máy tính một kiểu và cho mobile một kiểu thì viết thế nào

Nguyễn Quốc Dũng4 năm gắn bó cùng NQDung.COMLevel 1
Nguyễn Quốc Dũng
15 comments

Nếu 2 giao diện không khác nhau nhiều thì có thể dùng nhưng nếu khác nhau nhiều hoặc bạn muốn giảm dung lượng trên bản mobile thì nên tách ra làm 2 giao diện.
Vì responsive chỉ là ẩn đi các thành phần bạn muốn thôi.còn dung lượng thì bằng nhau

Đêm Vắng3 năm gắn bó cùng NQDung.COMLevel 1
Đêm Vắng
2 comments

phần này thì mình làm dc rồi.mình viết là @media screen and (max-width: 768px) { …}.nhân tiện đây cho mình hỏi luôn. mình có một bảng sản phẩm và một bảng giá.mình muốn lưu dữ liệu vào 2 bảng đó khi thêm một sản phẩm mới thì lưu kiểu gì.

Bán nhà4 năm gắn bó cùng NQDung.COMLevel 1
1 comment

Ban oi cho hoi .nguoi dung dang o mobile ma muon chuen sang dang desktop cho day du thong tin thi sao

Nguyễn Quốc Dũng4 năm gắn bó cùng NQDung.COMLevel 1
Nguyễn Quốc Dũng
15 comments

Bootstrap dựa vào kích thước màn hình bạn ơi !

Liên4 năm gắn bó cùng NQDung.COMLevel 1
Liên
1 comment

Tớ ko biết tính cái column ý nếu muốn thay đổi cái width 1000px chẳng hạn thì làm thế nào các bác, vì gà nên các bác đừng chém nhé.

Căn hộ Green Hills4 năm gắn bó cùng NQDung.COMLevel 1

Tại cậu viết sai thôi chứ không phải dân miền Tây nên hay viết sai chính tả chứ :gun:

Minh Nhựt4 năm gắn bó cùng NQDung.COMLevel 1
2 comments

Framework css này rất hay, giao diện đẹp khỏi phải bàn. Tiếc là chưa có tài liệu đầy đủ về Bootstrap này bằng tiếng việt. Tớ đang định việt hóa toàn bộ document của bootstrap thành một quyển ebook dành cho người lười đọc tiếng anh.

P/s: Mà cậu viết sai chính tả cái tiêu đề kìa.

wpDiscuz