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

Xem: 5972    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: none

28 điểm   ( 11 đánh giá ) File đã được kiểm thử


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

 

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 “.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 , 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

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.

Sau khi tải về, bạn sẽ có một file Zip. Tiến hành giải nén ta có một thư mục có tên bootstrap, bên trong có 3 thư mục : css, img, js.


Bước 1: Chúng ta tạo 1 file html có tên là index.html ở trong thư mục bootstrap vừa giải nén phía trên.

Vậy là xong phần head. Giờ chúng ta viết tiếp phần body với 2 textbox và 2 button như sau:

 

Vậy là xong. Ví dụ chỉ đơn giản vậy thôi.

Bạn sẽ thắc mắc là sao chạy nút submit và reset lại không nằm xuống phía dưới???

Bạn hãy thu nhỏ trình duyệt và bạn sẽ thấy điều kỳ diệu, đó chính là phần mình muốn cho các bạn thấy để dễ hình dung hơn.

Còn nhiều điều thú vị nữa đang chờ bạn khám phá đấy. Chúc các bạn luôn thành công trong cuộc sống.

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

Giới thiệu và hướng dẫn cách sử dụng Bootstrap Đăng ngày 08-07-2013  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 “.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 , nhiều lúc ngồi sửa còn lâu hơn là viết mới. 2.5454545454545/10 5972

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn