Nếu bạn là một nhà phát triển Web hay là một người đang tìm hiểu về Web, bạn đã không còn xa lạ với Bootstrap. Vậy Bootstrap là gì? Bootstrap dùng để làm gì? Và cách để sử dụng? Hôm nay chúng ta sẽ cùng tìm hiểu về Bootstrap.
Bootstrap là một framework HTML, CSS, và JS phổ biến nhất sử dụng trong các dự án đầu tiên trên thiết bị di động đa nhiệm trên Website. Thật sự tuyệt vời đúng không? Vậy làm cách nào để sử dụng Bootstrap?
Thật sự dễ dàng để bạn làm quen với Bootstrap bằng cách truy cập vào “Getting Started”. Hướng dẫn thiếp lập của họ thật sự là một loạt thông tin hữu ích – liên kết đến CDN, giải thích cách để cài đặt với Bower, npm, và Composer, thông tin về tích hợp với Autoprefixer và LESS, hàng loạt các mẫu, giấy phép cũng như bản dịch.
Bootstrap là gì?
Danh mục bài viết
Bootstrap có thể được rút gọn thành ba tệp chính:
- bootstrap.css – khung CSS
- bootstrap.js – khung JavaScript / jQuery
- glyphicons – một phông chữ (một bộ phông chữ biểu tượng)
Ngoài ra, Bootstrap yêu cầu jQuery hoạt động. jQuery là một thư viện JavaScript cực kỳ phổ biến và được sử dụng rộng rãi, vừa đơn giản hóa vừa bổ sung khả năng tương thích trình duyệt chéo với JavaScript.
Mọi thứ khác bạn có thể xảy ra trong khi nghiên cứu tài liệu Bootstrap – Grunt, Gulp, Sass, LESS, bower, npm, v.v. – không cần thiết để bắt đầu với Bootstrap. Đây là những người chạy tác vụ, tiền xử lý, hỗ trợ cài đặt và quản lý gói, vì vậy đừng nản lòng nếu bạn chưa biết cách sử dụng bất kỳ trong số đó.
Tại sao Bootstrap lại quan trọng? Chúng ta có cần phải sử dụng không?
Thật ra thì bạn không cần sử dụng framework này – Tuy nhiên, nếu bạn sử dụng thì nó sẽ giúp ít được cho bạn rất nhiều:
- Ngăn chặn sự lặp lại giữa các dự án.
- Sử dụng thiết kế đáp ứng để cho phép trang web của bạn thích ứng với các kích thước màn hình khác nhau – di động, máy tính để bàn và mọi thứ ở giữa
- Thêm tính nhất quán để thiết kế và mã giữa các dự án và giữa các nhà phát triển.
- Nguyên mẫu mới nhanh chóng và dễ dàng.
- Đảm bảo khả năng tương thích giữa nhiều trình duyệt.
Nói chung, tất cả các dự án Website mà bạn đang làm việc sẽ cần có đa nhiệm, và làm việc được trên tất cả mọi trình duyệt chính, và có thể có một số dự phòng cho trình duyệt cũ hơn. Bootstrap có một cộng đồng nguồn mở khổng lồ, ngoài ra, khi nhiều nhà phát triển đều biết cùng một hệ thống, họ có thể làm việc hài hòa hơn – và điều đó giúp những người mới tham gia có thể dễ dàng tiếp cận hơn.
Grid có lẽ là một trong những khía cạnh thiết yếu nhất của Bootstrap. Đó là cơ sở mà toàn bộ bố cục được tạo ra. Ngoài ra, CSS của Bootstrap cũng sẽ thêm kiểu dáng hữu ích cho các biểu mẫu, bảng, nút, danh sách và hình ảnh, cũng như các thanh điều hướng hoạt động đầy đủ, trong khi JavaScript sẽ thêm mã hữu ích để tạo phương thức, băng chuyền, cảnh báo, cửa sổ bật lên, thả xuống và sự sắp xếp.
Xây dựng mẫu đơn giản với Bootstrap
Bootstrap đi kèm với một vài ví dụ rất đơn giản để bắt đầu. Đầu tiên, tôi sẽ chỉ sử dụng Bootstrap để bố trí nền tảng, sau đó mình sẽ thêm phong cách tùy chỉnh của riêng mình lên trên để tạo ra thứ gì đó thú vị và đẹp hơn.
Bước một là tải Bootstrap. Tệp zip sẽ đi kèm với các thư mục css, phông chữ và js. Giải nén và lưu các tập tin trong một số thư mục. Bootstrap không đi kèm với bất kỳ HTML nào, nhưng họ có “Xin chào, Thế giới!” trang để bắt đầu trên tài liệu, vì vậy chúng tôi sẽ sử dụng trang đó làm index.html.
Hello, World!
<!DOCTYPE html>
<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=1" />
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>Chúng tôi có các thẻ doctype, html, head và body cơ bản. Thẻ meta name="viewport" đặc biệt quan trọng đối với thiết kế đáp ứng – nó đảm bảo rằng trang web của bạn có tỷ lệ 1: 1 với chế độ xem (kích thước màn hình).
Ngoài ra, chúng tôi chỉ thêm CSS lõi Bootstrap trong <head> …
<link href="css/bootstrap.min.css" rel="stylesheet" />jQuery theo Google CDN trước khi đóng thẻ </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>và Javacript.
<script src="js/bootstrap.min.js"></script>Ghi chú:Bootstrap JavaScript và JavaScript tùy chỉnh phải nằm bên dưới jQuery để hoạt động! Ngoài ra, chúng tôi có thể liên kết với jQuery thông qua URL của Google vì nó giảm tải trên máy chủ trực tiếp của chúng tôi, nhưng bạn có thể tải xuống nếu bạn muốn làm việc cục bộ.
Đó là tất cả những gì bạn cần để bắt đầu với Bootstrap!
Thanh điều hướng
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-expanded="false"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Balance Web Development</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li class="dropdown">
<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>Services<span class="caret"></span
></a>
<ul class="dropdown-menu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consulting</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Có vẻ như một mớ hỗn độn khó hiểu, nhưng nó không quá phức tạp. Trong dòng đầu tiên, tôi đang xác định toàn bộ thanh là navbar, chọn một bảng màu tối với navbar-inverse và chọn sử dụng navbar-static-top, trái ngược với tiêu đề cố định (sticky).
<nav class="navbar navbar-inverse navbar-static-top"></nav>Container đặt max-width trên nội dung trong điều hướng toàn bộ chiều rộng của trang Web.
<div class="container"></div>Lớp navbar-header chứa thông tin “thương hiệu”, nơi bạn có thể đặt logo hoặc tên công ty.
Button này được ẩn trên màn hình nền và trở thành menu hamburger thả xuống trên thiết bị di động (mỗi <span class="icon-bar"> là một dòng trong hamburger).
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-expanded="false"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Balance Web Development</a>
</div>Phần còn lại của mã là một danh sách không có thứ tự được sắp xếp phù hợp mà các máy chủ là cả máy tính và menu di động của chúng tôi.
Jumbotron Header
Tôi quyết định tôi muốn một trong những tiêu đề lớn nhằm thu hút sự chú ý, được gọi là Jumbotron theo thuật ngữ Bootstrap. Không có nhiều để xem ở đây, chỉ là một jumbotron với một container và một số bản sao.
<div class="jumbotron">
<div class="container">
<h1>Ready. Set. Code.</h1>
<p>
Are you ready to boilerstrap your cross-compatible buzzword? We're Sassy, flat and semantic,
so what are you waiting for?
</p>
<br />
<p>
<a class="btn btn-primary btn-lg" href="#" role="button">Download Free Trial »</a>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
</p>
</div>
</div>Như bạn có thể thấy, chúng tôi đã có một bố cục khá đẹp, dễ thích nghi mà không cần phải viết một dòng CSS.
Grid
Điều cuối cùng tôi sẽ làm là thêm vào một số nội dung chính, sẽ ở dạng lưới. Các Grid là các hàng có chứa các cột.
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>Bootstrap hoạt động trên hệ thống 12 cột, miễn là bạn thêm tối đa 12, bạn là vàng. Ví dụ trên sẽ chứa hai cột chiều rộng 50% (6/12), sẽ xếp chồng trên thiết bị di động và trở thành chiều rộng 100%.
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
<h3>Cloud Computable</h3>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo,
tortor mauris condimentum nibh.
</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
<h3>Backwards Compatible</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-console" aria-hidden="true"></span>
<h3>GUI Free</h3>
<p>
Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo,
tortor mauris condimentum nibh.
</p>
</div>
</div>
</div>Icons
Mình cũng đã thêm vào một vài glyphicons để trang trí. Glyphicons là bộ biểu tượng tích hợp đi kèm với Bootstrap. Nếu bạn không tải phông chữ của mình hoặc nếu bạn di chuyển chúng sang một thư mục khác, các biểu tượng này sẽ không hoạt động.
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>Sử dụng glyphicon sẽ luôn là cùng một mã và chỉ có lớp glyphicon-floppy-đĩa sẽ thay đổi.
Bây giờ tôi hài lòng với nền tảng của bố trí của tôi.
Thêm kiểu tùy chỉnh vào Bootstrap
Nếu bạn biết LESS hoặc Sass, bạn có thể sử dụng trong khu vực tùy chỉnh rộng rãi của Bootstrap và tải xuống phiên bản Bootstrap của riêng bạn. Chúng tôi tình cờ sử dụng “vanilla CSS”, đây là CSS không có bộ xử lý trước. May mắn thay, bạn chỉ có thể thêm một biểu định kiểu bổ sung bên dưới lõi của Bootstrap.
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet"
type="text/css"
/>Tôi đã thêm một liên kết đến một phông chữ Google được gọi là Montserrat. Nếu bạn chưa bao giờ sử dụng Google Font trước đây, tất cả những gì bạn phải làm là thêm biểu định kiểu phông chữ vào head và font-family của thành phần bạn muốn.
Bây giờ chúng tôi cuối cùng đã bắt đầu tạo kiểu. Chỉ trong vài phút, tôi sẽ có thể chuyển đổi bố cục Bootstrap nhàm chán, chung chung của mình thành một bố cục phẳng, vui nhộn. Đầu tiên, tôi sẽ thoát khỏi không gian phiền phức đó giữa thanh điều hướng và jumbotron.
.navbar {
margin-bottom: 0;
}Một vài phong cách đơn giản cho các thẻ chính. Tôi đang tải phông chữ Montserrat trên toàn bộ trang, tôi đã làm cho các tiêu đề được in đậm và tôi đã làm cho nền tối và văn bản sáng.
body {
background: #3e4649;
color: #f7f7f7;
font-family: 'Montserrat', sans-serif;
}
h1,
h2 {
font-weight: bold;
}
p {
font-size: 16px;
color: #cdcdcd;
}Tôi sẽ làm cho jumbotron xanh và trung tâm.
.jumbotron {
background: #27a967;
color: white;
text-align: center;
}
.jumbotron p {
color: white;
font-size: 26px;
}Tôi sẽ biến các nút thành “ghost buttons”, đó là các nút trong suốt có viền. Tôi cũng đang thêm một lề để họ sẽ xếp chồng đúng cách trên thiết bị di động.
.btn-primary {
color: #fff;
background-color: transparent;
border-color: white;
margin-bottom: 5px;
}
.btn-primary:hover {
color: #27a967;
background-color: white;
border-color: white;
}Tôi sẽ làm cho thanh điều hướng một màu tối khác, làm cho các liên kết sáng hơn và thay đổi màu nền khi di chuột.
.navbar-inverse {
background: #2e2f31;
border: 0;
}
.navbar-inverse .navbar-nav li a {
color: #f7f7f7;
font-size: 16px;
}
.navbar-inverse .navbar-nav li a:hover {
background: #27a967;
}Menu thả xuống có các lớp riêng, vì vậy tôi cũng sẽ thay đổi màu nền trên các lớp này và thêm một chút đệm.
.dropdown-menu {
background: #2e2f31;
border-radius: 0;
border: 0;
}
.dropdown-menu li a {
padding: 10px;
}
.navbar-inverse .navbar-nav .dropdown-menu li a:hover {
background: #2c463c;
}Quay lại HTML, tôi sẽ bọc một section quanh grid của mình và gọi nó là call-to-action. Tôi cũng sẽ tạo một lớp glyphicon-large và thêm nó vào từng span biểu tượng.
<section class="call-to-action">
<!-- .rows and .columns -->
<span class="glyphicon glyphicon-cloud glyphicon-large" aria-hidden="true"></span>
<!-- /.rows and .columns -->
</section>Lần chạm cuối cùng vào code của mình sẽ tập trung vào lệnh gọi dưới cùng, thêm margin-bottom vào thẻ p để chúng xếp chồng chính xác trên thiết bị di động và làm cho glyphicons của mình lớn hơn.
.call-to-action {
text-align: center;
}
.call-to-action p {
margin-bottom: 30px;
font-family: sans-serif;
}
.glyphicon-large {
font-size: 100px;
}
Kết luận
Hy vọng bạn đã học được một chút về Bootstrap và các framework từ các hướng dẫn này. Minh khuyến khích các bạn nên tạo một framework của riêng mình cho dự án các nhân để giúp bạn hiểu hơn về thiết kế đa nhiệm.