Trang chủBoostrap là một framework HTML CSS Javascripts cho phép các bạn thiết kế một website một cách dế dàng,đặc biệt là hỗ trợ thiết kế theo hướng responsive do có sử dụng Gird system giúp hiển thị website trên tất cả các mà hình thiết bị có kích thước khác nhau,nó như là bộ công vụ hỗ trợ các chức năng với giao diện có sẵn mà bạn có thể gọi nó ra để áp dụng vào website của mình giúp tiết kiệm thời gian một cách tối đa
Ưu điểm của boostrap
+ Hỗ trợ khả năng responsive: tức là trang web sẽ từ động co giãn để có thể hiển thị trên mọi kích thước thiết bị khác nhau và các trình duyệt khác nhau mà không cần thiết kế trang web cho riêng mobile
+ Ứng dụng các class có sẵn bạn chỉ việc gọi nó ra để ứng dụng vào thiết kế website
+ Được tích hợp sẵn với thư viện jquery và tương tác tốt với các chuẩn HTML5 và CSS3 hiện nay
+ Dễ học và dễ sử dụng
+ Ngoài ra bạn có thể tự phát triển thêm cho nó bằng cách thêm các class riêng của mình và viết css,có có thể ghi đè lên các css cũ để tạo ra cho mình những giao diện ưng ý nhất
Cách sử dụng được boostrap
Đầu tiên bạn lên website: http://getbootstrap.com/ để tiến hành download bộ source về
Sau đó giải nén ra và copy vào thư mục mình đang thiết kế web sau đó nhúng các css và js vào file index.html như sau
<link href="css/bootstrap.min.css" rel="stylesheet" <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>
Sau đó là chúng ta có thể tiến hành viết html,css bình thường
Để xem hướng dẫn cách sử dụng chi tiết về boostrap bạn sẽ lên trang vừa download để tìm hiểu ý nghĩa của từng phần một bao gồm Typograph, Buttons, Navigations, Dropdowns, Alerts, modals, Tabs… cùng các ví dụ demo dễ hiểu giúp bạn dễ dàng học được boostrap.Tuy nhiên đây là bản tiếng anh nên nếu bạn nào chưa nắm rõ tiếng anh,hoặc không biết thì khi đọc cũng sẽ rất khó khăn vào đầu
Mình cũng xin giới thiệu một trang hướng dẫn học boostrap bằng tiếng việt mà do những người việt dịch ra cho người việt nam đọc hiểu đó là trang : http://getbootstrap.com.vn/ nó giống hệt với trang tiếng anh,nhưng đã được việt hóa hoàn toàn các bạn có thể vào đó để tìm hiểu
Mình sẽ xin đưa ra một ví dụ nhỏ trong việc thiết kế web bằng boostrap như sau:
<div class="container"> <div class=”row” <div class="col-md-12"> <h2>Hàng 12 cột</h2></div> </div> <div class="row"> <div class="col-md-8"> <h3>Nội dung<h3> <P>Bạn đang học bootstrap 3</p> </div> <div class="col-md-4"> <p>Đây là sidebar</p> </div> </div> </div>
Giải thích:
Các thuộc tính class=” ” để định dạng cho website:
Container (fix-width): tên class bao ngoài trang web
Row: chia dòng cho mỗi khung hình: mỗi một dòng sẽ chứa tổng là 12 cột và độ rộng của mỗi cột được tính theo % hiển thị trên từng màn hình
Col-md-*: (* là số cột): sử dụng cho các thiết bị có mà hình medium( trung bình):
Ngoài ra còn có:
Col-sm-* : sử dụng cho các thiết bị kích thước nhỏ (small)
Col-lg-* : sử dụng cho các thiết bị kích thước lớn
Đây là bảng thông tin về kích thước các mà hình khác nhau
Trên đây là những giới thiệu sơ qua về boostrap,giúp bạn biết thêm về một css framework mới để học và ứng dụng vào phát triển website.Bài sau mình sẽ đi vào chi tiết từng phần một của boostrap để hướng dẫn các bạn
