Tìm hiểu về css trong bootstrap

Hướng dẫn bootstrap
Hướng dẫn bootstrap

 

Nối tiếp Series lập trình web responsive với bootstrap phần này aloweb.vn sẽ giới thiệu bạn các class css được bootstrap xây dựng sẵn. Mục đích của Series này mình muốn giúp các bạn ghép nối các thành phần của CSS trong Bootstrap lại với nhau để tạo được một giao diện web hoàn chỉnh, lý thuyết mình chỉ nói những phần quan trọng vì Bootstrap đã nói khá chi tiết trên trang chủ (có tiếng Việt)

Nội dung trong phần này:

  1. Giới thiệu
    1. Khai báo responsive với trình duyệt
    2. Container và fluid-container
    3. Reset CSS
  2. Hệ thống lưới
    1. Giới thiệu hệ thống lưới
    2. Sử dụng hệ thống lưới viết layout theo mobile first
    3. Các thao tác với cột
  3. Media Queries
  4. Sử dụng less/sass (phần nâng cao)
  5. Dựng giao diện cơ bản

 

1. Giới thiệu

Bootstrap sử dụng HTML 5 và CSS3 để xây dựng lên bộ khung của mình, vì vậy để sử dụng được bạn phải khai báo HTML5 :

<!DOCTYPE html>
<html lang="vi">
  ...
</html>

Khai báo Responsive với trình duyệt: để web có responsive bạn phải khai báo với trình duyệt bằng thẻ meta dưới đây.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

initial-scale: mức phóng to ban đầu.

maximun-scale: mức phóng tối đa, ngược lại là minimum: mức phóng tối thiểu.

user-scalable: cho phép phóng to, khi để chế độ “no” người dùng không thể phóng to.

Container và Container-fluid: Bootstrap xây dựng 2 class bao quanh toàn bộ nội dung website.

.container: cho chiều rộng cố định

<div class="container">
  ...
</div>

.container-fluid: cho chiều rộng toàn màn hình thay đổi theo độ rộng của thiết bị

<div class="container-fluid">
  ...
</div>


Reset CSS: trình duyệt web tự động thêm css vào các phần tử HTML và CSS, reset css là đưa tất cả các thành phần được tự động thêm đó về giá trị ban đầu hoặc một giá trị phu hợp với tất cả các trình duyệt. Các bạn có thể reset theo code đơn giản sau:

* {
padding: 0;
margin: 0;
border: none;
}
Hoặc dùng Normalize.css một bộ reset css đầy đủ và thông dụng nhất được thực hiện bởi Nicolas GallagherJonathan Neal. Các bạn tải file css tại đây

 

Hệ thống lưới

Bootstrap xây dựng sẵn cho chúng ta một hệ thống lưới gồm 12 cột và chia độ rộng thiết bị thành 4 khoảng kích thước với các class tương ứng

Hệ thống lưới Bootstrap
Hệ thống lưới Bootstrap

Hệ thống lưới của Bootstrap 3 chia các thiết bị thành 4 loại:

  • Màn hình cho điện thoại di động, điện thoại di động cỡ nhỏ có kích thước <768px, sử dụng class: .col-xs-
  • Màn hình cho máy tính bảng có kích thước ≥768px sử dụng class: .col-sm-
  • Màn hình cho desktop cỡ trung có kích thước ≥992px, sử dụng class: .col-md-
  • Màn hình desktop cỡ lớn có kích thước ≥1200px, sử dụng class: .col-lg-

Cách hoạt động của hệ thống lưới:

  • Class .comtainer hoặc .container-fluid bao quanh toàn bộ nội dung để thiết lập độ rộng và padding.
  • Layout được chia nhỏ thành các hàng (được định nghĩa bằng class .row) và các cột (được định nghĩa bằng class .col)
  • Các cột được tạo ra bằng cách chỉ định số cột mà bạn muốn sử dụng trong số 12 cột.

Ví dụ:

<div class="container">
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div></div>


Sử dụng hệ thống lưới viết layout theo mobile first

Ở ví dụ này chúng ta sẽ xây dựng một layout đơn giản theo hướng mobile first: hiển thị 2 cột khi duyệt trên màn hình có độ lớn bằng máy tính bảng trở lên và hiển thị 1 cột với các màn hình nhỏ hơn.

Trước tiên, chúng ta tạo thư mục web sử dụng bootstrap. Như hướng dẫn ở bài trước, bạn tải Bootstrap v3 giải nén và đổi tên thư mục thành bootstrap, tạo thêm 1 tệp index.html như hình dưới.

Thư mục bootstrap
Thư mục bootstrap

Để sử dụng được bootstrap.min.js bootstrap yêu cầu phải có Jquery, ở đây mình sử dụng jQuery Migrate 1.4.1 các bạn tải tại đây và copy tệp tin vào thư mục bootstrap/js. Tất cả mọi thứ cần chuẩn bị đã xong, giờ ta đi viết layout cho giao diện mobile first, các bạn mở tệp index.html và viết theo đoạn code dưới đây (ở đây mình tạo thêm một tệp style.css và nhúng vào tệp index.html để viết thêm css cho các phần tử):


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Sử dụng Bootstrap dựng giao diện moblie first</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<header class="container">Header</header>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-9 content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
</div>
<div class="col-xs-12 col-sm-3 sidebar">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div></div>
<footer class="container">Footer</footer>
</body>
</html>

 

Giải thích:

Trong đoạn code trên, mình chia giao diện thành 3 phần, phần header, containerfooter. Trong phần container mình lại chia ra làm 2 phần:

  • Phần content: có kích thước là 12 cột khi hiển thị trên điện thoại (col-xs-12) và hiển thị 9 cột trên máy tính bảng cỡ lớn và desktop (col-sm-9) gồm 2 đoạn văn trong thẻ <p>
  • Phần sidebar: có kích thước là 12 cột khi hiển thị trên điện thoại (col-xs-12) và hiển thị 3 cột trên máy tính bảng cỡ lớn và desktop (col-sm-3) gồm 1 đoạn văn trong thẻ <p>

Quy tắc:

CSS : trình duyệt sẽ đọc css từ trên xuống dưới, các phần từ sẽ áp dụng thuộc tính css cuối cùng mà nó đọc được. Trong ví dụ tệp css cuối cùng là style.css. Vì vậy bạn phản nhúng tệp css của bootstrap đầu tiên.

JavaScript : tương tự như với CSS, có thể nhúng trên đầu (trước thẻ /head) hoặc nhúng dưới cùng (trước thẻ /html) nhưng phải theo thứ tự

Class .col- : Chúng ta sẽ viết các class .col- theo thứ tự từ nhỏ tới lớn, class thích hợp nhất với kích thước màn hình sẽ được ưu tiên hiển thị

Các bạn lưu file lại mở file index.html bằng trình duyệt, co kéo kích thước để kiểm tra kết quả.

Tiếp tục cập nhật….

Tìm hiểu về css trong bootstrap
5 (100%) 2 votes

Be the first to comment

Leave a Reply

Your email address will not be published.


*