Hướng dẫn Bootstrap
Twitter Bootstrap là front end framework phổ biến nhất trong thời gian gần đây. Nó có kiểu dáng đẹp, trực quan và khung front-end di động mạnh mẽ để phát triển web nhanh hơn và dễ dàng hơn. Nó sử dụng HTML, CSS và Javascript. Hướng dẫn này sẽ dạy bạn những điều cơ bản về Bootstrap Framework bằng cách sử dụng nó để bạn có thể tạo các dự án web một cách dễ dàng. Hướng dẫn được chia thành các phần như Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components và Bootstrap Plugins. Mỗi phần này chứa các chủ đề liên quan với các ví dụ đơn giản và hữu ích.
Tại sao phải học Bootstrap?
Mobile first approach - Bootstrap 3, khung công tác bao gồm các kiểu di động đầu tiên trong toàn bộ thư viện thay vì chúng trong các tệp riêng biệt.
Browser Support - Nó được hỗ trợ bởi tất cả các trình duyệt phổ biến.
Easy to get started- Chỉ cần có kiến thức về HTML và CSS, bất kỳ ai cũng có thể bắt đầu với Bootstrap. Ngoài ra, trang web chính thức của Bootstrap có một tài liệu tốt.
Responsive design- CSS đáp ứng của Bootstrap điều chỉnh cho Máy tính để bàn, Máy tính bảng và Điện thoại di động. Thông tin thêm về thiết kế đáp ứng có trong chương Bootstrap Thiết kế đáp ứng.
Cung cấp giải pháp sạch sẽ và thống nhất để xây dựng giao diện cho các nhà phát triển.
Nó chứa các thành phần tích hợp đẹp mắt và chức năng dễ dàng tùy chỉnh.
Nó cũng cung cấp tùy chỉnh dựa trên web.
Và trên hết nó là một mã nguồn mở.
Hello World bằng Bootstrap.
Chỉ để cung cấp cho bạn một chút hứng thú về Bootstrap, tôi sẽ cung cấp cho bạn một chương trình Bootstrap Hello World thông thường nhỏ, Bạn có thể thử nó bằng liên kết Demo.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>Các ứng dụng của Bootstrap
Scaffolding- Bootstrap cung cấp một cấu trúc cơ bản với Hệ thống lưới, các kiểu liên kết và nền. Điều này được đề cập chi tiết trong phầnBootstrap Basic Structure
CSS- Bootstrap đi kèm với tính năng cài đặt CSS toàn cầu, các phần tử HTML cơ bản được tạo kiểu và nâng cao với các lớp có thể mở rộng và hệ thống lưới nâng cao. Điều này được đề cập chi tiết trong phầnBootstrap with CSS.
Components- Bootstrap chứa hơn một tá thành phần có thể tái sử dụng được xây dựng để cung cấp biểu tượng, danh sách thả xuống, điều hướng, cảnh báo, cửa sổ bật lên và hơn thế nữa. Điều này được đề cập chi tiết trong phầnLayout Components.
JavaScript Plugins- Bootstrap chứa hơn một chục plugin jQuery tùy chỉnh. Bạn có thể dễ dàng bao gồm tất cả hoặc từng cái một. Điều này được đề cập chi tiết trong phầnBootstrap Plugins.
Customize - Bạn có thể tùy chỉnh các thành phần của Bootstrap, biến LESS và các plugin jQuery để có được phiên bản của riêng bạn.
Khán giả
Hướng dẫn này được chuẩn bị cho bất kỳ ai có kiến thức cơ bản về HTML và CSS và muốn phát triển trang web. Sau khi hoàn thành hướng dẫn này, bạn sẽ thấy mình ở mức độ chuyên môn vừa phải trong việc phát triển các dự án web bằng Twitter Bootstrap.
Điều kiện tiên quyết
Trước khi bạn bắt đầu tiếp tục với hướng dẫn này, chúng tôi giả định rằng bạn đã biết về những điều cơ bản của HTML và CSS. Nếu bạn chưa biết rõ về những khái niệm này thì chúng tôi sẽ đề nghị bạn xem qua hướng dẫn ngắn của chúng tôi về Hướng dẫn HTML và Hướng dẫn CSS.