Thủ Thuật Website

Bootstrap là gì? Hướng dẫn dành cho người mới khởi đầu

pi network

access_time

hourglass_empty

Bạn với phải là front end developer, người đang mỏi mệt với việc viết đi viết lại cú pháp CSS ko? Đó là một lý do hết sức hợp lý để khởi đầu sử dụng Bootstrap! Bài viết này sẽ giảng giải Bootstrap là gì và nhắc tới lợi ích của việc sử dụng web framework, cũng như cách nhúng nó vào dự án của bạn hợp lý.

Bootstrap là gì?

bootstrap là gì

Bạn với thể đã thân thuộc với chức năng của frameworks là gì. Nó tập hợp những cú pháp dành riêng cho nhiệm nào đó trong một bộ sưu tập để giúp những web developer xây dựng website nhanh hơn nhiều, vì họ ko cần phải lo về những lệnh và chức năng cơ bản.

Mặc dù vậy, vẫn thiếu sự thống nhất do việc những thư viện được sử dụng quá nhiều, cần phải thay đổi liên tục. Bootstrap là câu trả lời cho vấn đề này.

Front-end framework là mã nguồn mở, ban sơ được xây dựng bởi Mark Otto và Jacob Thornton để lập trình web front-end nhanh hơn và tiện lợi hơn.

Nó chứa tất cả những mẫu thiết kế dựa trên HTML và CSS với nhiều chức năng và thành phần khác nhau, như điều hướng, hệ thống lưới, băng chuyền hình ảnh và những nút.

Mặc dù Bootstrap giúp tiết kiệm thời kì của nhà phát triển khỏi việc phải quản lý những template nhiều lần, nhưng mục tiêu chính của nó là tạo ra những responsive website. Nó cho phép giao diện người sử dụng của trang web với thể hoạt động tối ưu trên mọi kích thước màn hình, trên điện thoại màn hình nhỏ hoặc máy tính để bàn màn hình to.

Do đó, những nhà phát triển ko cần xây dựng những trang web dành riêng cho từng thiết bị và bị giới hạn phạm vi đối tượng nữa.

Do sự phổ biến của nó, ngày càng nhiều cùng đồng Bootstrap xuất hiện. Đó là một nơi tuyệt vời để những nhà phát triển và nhà thiết kế trao đổi kiến ​​thức và thảo luận về những bản vá framework mới nhất.

3 file chính của Bootstrap

Bootstrap bao gồm một tập hợp những cú pháp thực hiện những chức năng cụ thể, điều đó chỉ với lý lúc framework với những loại file khác nhau trong đó. Dưới đây là ba file chính quản lý giao diện người sử dụng và chức năng của trang web.

Bootstrap.css

Bootstrap.css là một framework CSS sắp xếp và quản lý bố cục của trang web. Trong lúc HTML quản lý nội dung và cấu trúc của trang web, CSS xử lý bố cục của trang web. Vì lý do đó, cả hai cấu trúc cần cùng tồn tại để thực hiện một hành động cụ thể.

Do những chức năng của nó, CSS cho phép bạn tạo giao diện thống nhất trên bao nhiêu trang web tùy thích. Giờ thì bạn với thể nói lời tạm biệt với việc phải ngồi hàng giờ để chỉnh sửa thủ công chỉ để thay đổi độ rộng của đường viền.

Với CSS, tất cả những gì bạn cần làm là giới thiệu những trang web tới file CSS. Bất kỳ thay đổi cần thiết với thể được thực hiện trong file đó một mình.

những hàm CSS ko chỉ giới hạn ở những kiểu văn bản vì chúng với thể được sử dụng để định dạng những khía cạnh khác của trang web như bảng và bố cục hình ảnh.

Vì CSS với rất nhiều khai báo và bộ chọn, việc ghi nhớ tất cả những chiếc đó với thể mất chút thời kì.

Bootstrap.js

File này là phần cốt lõi của Bootstrap. Nó bao gồm những file JavaScript chịu trách nhiệm cho việc tương tác của trang web.

Để tiết kiệm thời kì lúc viết cú pháp JavaScript nhiều lần, những nhà phát triển với xu hướng sử dụng jQuery. Nó với một thư viện JavaScript đa nền tảng, mã nguồn mở phổ biến cho phép bạn thêm những chức năng khác nhau vào một trang web.

Dưới đây là một vài ví dụ về những gì jQuery với thể làm:

  • Thực hiện những yêu cầu Ajax như loại trự dữ liệu từ một vị trí khác một cách linh hoạt
  • Tạo tiện ích bằng bộ sưu tập plugin JavaScript
  • Tạo hình động tùy chỉnh bằng những tính chất CSS
  • Thêm tính năng động cho nội dung trang web

Mặc dù Bootstrap với những tính chất CSS và element HTML với thể hoạt động tốt, nhưng nó cần jQuery để tạo ra thiết kế responsive. Nếu ko, bạn chỉ với thể sử dụng những phần tĩnh của CSS.

Bạn cần thêm thông tin? Hãy xembài viết này để biết thêm về jQuery.

Glyphicons

Icons là một phần ko thể thiếu của giao diện trang web. Chúng thường được liên kết với những hành động và dữ liệu nhất định trong giao diện người sử dụng. Bootstrap sử dụng Glyphicons để tạo ra nhu cầu đó.

Bootstrap bao gồm một bộ Halflings Glyphicons đã được mở khóa để sử dụng miễn phí. Phiên bản miễn phí với giao diện chuẩn nhưng thích hợp với những chức năng thiết yếu.

Nếu bạn muốn tìm icon với phong cách hơn, Glyphicons cũng bán những bộ icon premium khác nhau, vững chắc sẽ trông đẹp hơn trên từng trang web cụ thể.

Bạn cũng với thể tải những biểu tượng riêng biệt và theo chủ đề xuống miễn phí trên những trang web khác nhau như Flaticon, GlyphSearchIcons8.

Một số icon với thể bị tác động bởi CSS để thay đổi giao diện trong lúc những icon khác thì mặc định. Hãy sử dụng icons phù thống nhất với trang web bạn cần.

Cách sử dụng Bootstrap

Để hiểu được cách sử dụng bootstrap, hãy xem ví dụ dưới đây.

html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=một" /> 
<title>Bootstrap 101 Template</title>
<link href="https://www.hostinger.vn/huong-dan/bootstrap-la-gi/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/một.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

Mã hóa ký tự cho tài liệu HTML. Trong trường hợp này, UTF-8 nhắc tới Unicode.

meta charset="utf-8"

Cho biết bộ ký tự được sử dụng để viết trang web.

meta http-equiv="X-UA-Compatible"

Xác định phiên bản Internet Explorer sẽ hiển thị trang. Sử dụng chế độ Edge, nó được cài đặt để sử dụng chế độ cao nhất hiện với.

meta name="viewport"

Đảm bảo rằng trang với tỷ lệ một: một với kích thước sườn nhìn.

link href="https://www.hostinger.vn/huong-dan/bootstrap-la-gi/css/bootstrap.min.css" rel="stylesheet"

Đây là phần chúng tôi thêm Bootstrap core CSS.

src="https://ajax.googleapis.com/ajax/libs/jquery/một.11.3/jquery.min.js"

Tải jQuery thông qua Google CDN. Sẽ tốt hơn để bạn tải nó từ CDN qua HTTP vì file với thể được lưu trong bộ nhớ cache trong một năm.

src="https://www.hostinger.vn/huong-dan/bootstrap-la-gi/js/bootstrap.min.js

Thêm JavaScript lõi Bootstrap. Cú pháp này phải luôn nằm dưới cú pháp jQuery để hoạt động đúng. Quá trình bổ sung với thể được thực hiện thông qua URL của Google hoặc tải xuống thủ công.

Kết luận

Bootstrap là front-end framework miễn phí ngày càng phổ biến hơn trong số những nhà phát triển front-end. những nhà phát triển với thể tiện lợi sử dụng và tiết kiệm rất nhiều thời kì lúc  khỏi phải viết code thủ công.

Framework này cũng rất linh hoạt và với thể đáp ứng hầu hết mọi nhu cầu phát triển front end web. những khả năng tốt nhất của nó bao gồm, nhưng ko giới hạn tính năng responsive web tối ưu trên tất cả những kích thước màn hình.

Nếu bạn là nhà phát triển front end, bạn cần biết Bootstrap là gì và đây là thời khắc xuất sắc để bạn khởi đầu sử dụng Bootstrap.

pi network

Để lại bình luận