Cách sử dụng thư viện Bootstrap

cach dung thu vien bootstrap

Thời gian qua mình bận quá nên không thể tiếp tục các bài Bootsrap liên tục được.   🙁

Sau một thời gian dài và cuối cùng mình cũng đã trở lại chia sẻ các kiến thức Bootstrap.

Mục đích cuối cùng của chuỗi series Bootstrap là các bạn có thể biết làm website giao diện đậm chất responsive.

Start!

Download Bootstrap

Có hai cách để sử dụng framework Bootstrap.

Cách 1: Download source từ trang getbootstrap.com

Theo như cách này, các bạn lấy code về máy để sử dụng thư viện Bootstrap. Các bạn nên tải về xem cấu trúc Bootstrap.

download bootstrap
Trang chủ Bootstrap

download bootstrap

Download Bootstrap

Bạn download phần đầu tiên nhá. Còn hai phần còn lại là custom nâng cao, liên quan đến Less và Sass. Mình sẽ dành thời gian giới thiệu sau.

Sau khi tải và giải nén, thư viện Bootstrap có các thư mục như sau:

  • CSS
  • Javascript
  • Font

cấu trúc bootstrap

Trong phần cấu trúc này mình nói sơ sơ qua ha:

Các bạn download gói này là đã build ra thẳng file css và js. Cấu trúc của nó rất logic rồi nên các bạn chỉ sử dụng và hiểu cách thiết kế ở tương lai.

Riêng thư mục fonts: Bootstrap sử dụng glyphicons – tức các icon này thiết kế giao diện phẳng và rất linh hoạt trong đổi size, đổi màu sắc icon thay vì phải chèn ảnh icon thời xa xưa :).

Cách 2: Link CDN

Với cách này, các bạn không cần tải thư viện về, sử dụng trực tiếp – link thẳng máy chủ chứa thư viện Bootstrap luôn.

cach them thu vien bootstrap

Ok, xong phần link đường dẫn thư viện Bootstrap.

Viết chương trình đầu tiên.

Các bạn chạy dòng code phía đưới để xem thử đã add thành công thư viện Bootstrap chưa nha.

 

<!Doctype html>
<html>
	<head>
		
		<meta charset="utf-8">
		
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

		<!-- jQuery library -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

		<!-- Latest compiled JavaScript -->
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		
	</head>
	
	<body>
		<div class="container-fluid">
			
			<button class="btn btn-primary"> Kiểm tra </button>
			
		</div>
	</body>

Kết quả là một button màu xanh dương đặc trưng của Bootstrap là bạn đã thành công rồi! 🙂

Video hướng dẫn các bạn

Done!

Hẹn gặp lại các bạn bài tiếp theo,

Leonard H,

 

Bạn có thể thích

Leave a Reply

Your email address will not be published. Required fields are marked *