GRID_BOOTSTRAP.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BootStrap cơ bản</title>
  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
</head>
<body>
  
  <!-- <div class="container"> --> <!-- Full màn hình -->
  <!--
    .col-xs-*: màn hình điện thoại
    Dùng .col-sm-* đối với màn hình <= 991 px -- màn hình máy tính bảng
    Dùng .col-md-* đối với màn hình từ 992px tới 1199px -- màn hình desktop
    Dùng .col-lg-* đối với màn hình >1200px -- màn hình desktop lớn
  -->
  <div class="container"> <!-- Cách 2 mép màn hình 1 khoảng cách xác định -->
    <h1> Demo Bootstrap</h1>
    <p>Chào mừng đến với khoá học lập trình front-end của hệ thống học lập trình trực tuyến 
    Myclass.vn do Thầy Lê Quang Song giảng dạy và cũng là người sáng lập ra Myclass.vn<p>
    <p>Thay đổi kích thước màn hình để thấy được hiệu ứng</p>
    <div class="row">
      <div class="col-sm-4 col-md-3" style="background-color: pink;">
        Mặt trăng tròn vành vạnh từ từ nhô lên sau luỹ tre. Trăng đêm nay sáng quá! Bầu trời điểm xuyết một vài ngôi sao lấp lánh như những con đom đóm nhỏ. Ánh trăng tàng dịu mát tỏa xuống, chảy loang lổ trên mặt đất, trên các cành cây ngọn cỏ … Không gian mới yên tĩnh làm sao! Chỉ còn tiếng sương đêm rơi lốp bốp trên lá cây và tiếng côn trùng ra rả trong đất ẩm. Chị gió chuyên cần nhẹ nhàng bay làm rung mấy ngọn xà cừ ven đường. Thoang thoảng đâu đây mùi hoa thiên lí dịu dàng lan tỏa… Đêm trăng thật đẹp và êm đềm.
      </div>
      
      <div class="col-sm-4 col-md-3" style="background-color: yellow;">
        Mặt trăng tròn vành vạnh từ từ nhô lên sau luỹ tre. Trăng đêm nay sáng quá! Bầu trời điểm xuyết một vài ngôi sao lấp lánh như những con đom đóm nhỏ. Ánh trăng tàng dịu mát tỏa xuống, chảy loang lổ trên mặt đất, trên các cành cây ngọn cỏ … Không gian mới yên tĩnh làm sao! Chỉ còn tiếng sương đêm rơi lốp bốp trên lá cây và tiếng côn trùng ra rả trong đất ẩm. Chị gió chuyên cần nhẹ nhàng bay làm rung mấy ngọn xà cừ ven đường. Thoang thoảng đâu đây mùi hoa thiên lí dịu dàng lan tỏa… Đêm trăng thật đẹp và êm đềm.
      </div>
      
      <div class="col-sm-4 col-md-6" style="background-color: gray;">
        Mặt trăng tròn vành vạnh từ từ nhô lên sau luỹ tre. Trăng đêm nay sáng quá! Bầu trời điểm xuyết một vài ngôi sao lấp lánh như những con đom đóm nhỏ. Ánh trăng tàng dịu mát tỏa xuống, chảy loang lổ trên mặt đất, trên các cành cây ngọn cỏ … Không gian mới yên tĩnh làm sao! Chỉ còn tiếng sương đêm rơi lốp bốp trên lá cây và tiếng côn trùng ra rả trong đất ẩm. Chị gió chuyên cần nhẹ nhàng bay làm rung mấy ngọn xà cừ ven đường. Thoang thoảng đâu đây mùi hoa thiên lí dịu dàng lan tỏa… Đêm trăng thật đẹp và êm đềm.
      </div>
    </div>
  </div>
  
</body>
</html>