Cách sử dụng bootstrap để thiết kế Web/blogspot Responsive

Bootstramp là nơi lưu trữ các CSS cần dùng để giúp chúng ta thiết kế web nhanh chóng hơn. Từ đó giúp chúng ta giảm thiểu các code dư thừa khi website chậm chạm hơn.

Đầy đủ hơn Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ dàng hơn
Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin Javascript trong nó. Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn.

Cách sử dụng bootstramp để thiết kế Web/blogspot Responsive

Vị trí các Framework bootstrap trong HTML

<!doctype html>
<html lang="vi">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Dưới đây mình sẽ hướng dẫn sử dụng bootstramp

Mặc định bootstramp sẽ chia độ rộng web thành 12 phần bằng nhau.

<div class="container">
<div class="row"
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hidden-sm hidden-xs">
Nội dung chiếm 1/4 màn hình
</div>
</div>
</div>

Chia cột dễ dàng mà không cần phải code css

Hoạt động

.col-md-1

.col-md-8

.col-md-4

.col-md-6

Ý nghĩa

col-lg- : sử dụng cho màn hình có độ phân giải ≥ 1200px (Large devices – Desktop)
col-md- : sử dụng cho màn hình có độ phân giải ≥ 992px (Medium devices – Desktop)
col-sm- : sử dụng cho màn hình có độ phân giải ≥ 768px (Small devices – Tablets)
col-xs- : sử dụng cho màn hình có độ phân giải < 768px (Extra small devices – Phones)

Giống như áo của bạn từ nhỏ đến lên có Size X, Size S, Size M, Size L vậy!

Sử dụng

<div class="col-lg-3 col-md-4 col-sm-3 col-xs-6 hidden-sm hidden-xs">

Nội dung

</div>

col-lg-3: Giao diện ≥ 1200px sử dụng col-lg-3{width:25%} tức là chia màn hình thành 4 cột (12 cột /3 = 4)
col-md-4: Giao diện ≥ 992px sử dụng col-md-4{width:33.33%} tức là chia màn hình thành 3 cột (12 cột /4 = 3)
col-sm-4: Giao diện ≥ 768px sử dụng .col-sm-4{width:33.33%} tức là chia màn hình thành 3 cột (12 cột /4 = 3)
col-xs-6 Giao diện < 768px sử dụng .col-xs-6{width:50%} tức là chia màn hình thành 2 cột (12 cột /4 = 3)
hidden-sm: Ẩn đối tượng này khi trên giao diện ≥ 768px
hidden-xs: Ẩn đối tượng này khi trên giao diện < 768px

Dùng như vậy ta sẽ rất dễ dàng phân cột cho các đối tượng khác nhau. Giúp thiết kế giao diện Web/blogspot Responsive nhanh chóng hơn.

Xem thêm: http://getbootstrap.com.vn/css/

Chúc bạn thành công!