Ứng dụng Boostrap vào trong thiết kế website

Học boostrap giúp bạn thiết kế website một cách nhanh chóng và đơn giản hơn,đây là một CSS framework đầy đủ chi tiết và được nhiều người ưa chuộng

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

học boostrap

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

Bài viết liên quan

Để lại liên hệ cho chúng tôi

Để được tư vấn cũng như thắc mắc của khách hàng hãy liên hẹ với chúng tôi. Những trường gắn (*) là bắt buộc

Gọi ngay
Đăng ký seo
Đăng ký ngay