search

Tiêu đề bootstrap

Ngày đăng: 30/12/2022
Trả lời: 0
Lượt xem: 110

Trong bài viết này, chúng ta sẽ cùng xem tổng quan về 2 hạng mục 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
4 nội dung và 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
5 dàn trang trong tài liệu của Bootstrap. Trước hết thì chúng ta sẽ nói về 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
4 bởi vì hiển thị các nội dung chi tiết là công việc quan trọng thứ 2 sau khi thiết lập các thành phần chính như thanh điều hướng hay slide ảnh. Rồi sau đó chúng ta mới có chất liệu để thực hiện dàn trang và canh chỉnh vị trí tạo ra bố cục hoàn chỉnh của một trang web

Show

Hạng mục Nội dung

Tiêu đề bootstrap

Bán phát triển @thinhtranhnvn

Theo dõi

3. 9K 184 206

Đã đăng vào ngày 3 tháng 12 năm 2. 30 CH 8 phút đọc

1. 0K

0

1

[Bootstrap] Bài 3 - Nội dung và Bố cục

  • Report
  • Add to series of me

Trong bài viết này, chúng ta sẽ cùng xem tổng quan về 2 hạng mục 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
4 nội dung và 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
5 dàn trang trong tài liệu của Bootstrap. Trước hết thì chúng ta sẽ nói về 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
4 bởi vì hiển thị các nội dung chi tiết là công việc quan trọng thứ 2 sau khi thiết lập các thành phần chính như thanh điều hướng hay slide ảnh. Rồi sau đó chúng ta mới có chất liệu để thực hiện dàn trang và canh chỉnh vị trí tạo ra bố cục hoàn chỉnh của một trang web

Hạng mục Nội dung

Hạng mục Nội dung cung cấp các hạng tiện ích giúp tùy chỉnh cách hiển thị cho các loại nội dung phổ biến có mặt trong một trang web. Dễ thấy nhất là hạng mục 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
7 dành cho nội dung văn bản và 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
8 dành cho nội dung ảnh

Mặc dù Bootstrap có thiết lập sẵn có cách hiển thị cho các thẻ nội dung phổ biến như các thẻ tiêu đề 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
9, các thẻ văn bản 

<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
0, v. v. Tuy nhiên, thông thường thì chúng ta sẽ muốn tùy biến kích thước chữ linh hoạt hơn theo thiết kế của từng trang web. Do đó Bootstrap cung cấp thêm các lớp tiện ích để đáp ứng cho tác vụ tùy chỉnh này. Ví dụ như bộ lớp 

<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
1 với 6 tùy chọn cấp độ có thể giúp chúng tôi điều chỉnh kích thước chữ của bất kỳ cấp tiêu đề nào theo ý muốn

Hãy thử kiến ​​trúc phần tiếp theo của giao diện trang chủ với một tiêu đề chính, một câu mô tả rút gọn và một nút nhấn

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
1

Ở đây chúng ta sử dụng 


<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
2 để tăng kích thước chữ cho tiêu đề và 

<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
3 để tăng kích thước chữ cho văn bản mô tả ngắn. Các lớp tiện ích còn lại hầu hết đều có sẵn trong 

<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
4. Ở phần này, chúng ta cần thêm một khoảng 

<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
5 khá lớn ở phía trên và bên dưới nội dung chính để tạo ra một vùng đủ rộng để có thể hiển thị nền. Cấp độ ________ 95 theo chiều dọc lớn nhất của Bootstrap là 

<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
7 dường như không trả lời được yêu cầu nên mình định nghĩa thêm 

<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
8

Hình nền của khối được thiết lập thông qua 


<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
9 để thuận tiện sử dụng lại ở bất kỳ phần nào khác nếu cần thiết

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}

Layout item

Dàn trang tác vụ được Bootstrap định nghĩa gói gọn trong 2 bước

  • Tạo vùng chứa chính để hiển thị tập tin nội dung trung giữa trang hoặc trải rộng toàn trang
  • Sử dụng lưới 12 cột để bố trí cục bộ cho các hàng nội dung

Gần như bất kỳ thành phần nào của trang web cũng đều có một phần tử 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
10 đóng bao trò bao quanh nội dung chính để cung cấp cho 

<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
5 cơ bản giúp các nội dung không được hiển thị sát viền màn hình. Nhiều thiết kế web cũng cố gắng tạo vùng nội dung tập tin trung với chiều rộng không quá lớn để người đọc dễ theo dõi nội dung khi đọc xuống dòng. Do đó Bootstrap có cung cấp các 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
12 cho 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
10 để chúng ta thực hiện nhiệm vụ này

Kế đến là các nội dung trong trang web của chúng ta thường được hiển thị theo các hàng ngang. Do đó Bootstrap có nghĩa là 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
14 để tạo hàng hiển thị với các phần tử con 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
15 với tổng của 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
16 của mỗi hàng là cột 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
17. Trong trường hợp chúng ta không chỉ định 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
16 thì Bootstrap sẽ tự động chia đều các cột cho số phần tử con của hàng 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
14

Phương thức này đủ linh hoạt để giúp chúng ta thực hiện dàn trang cho hầu hết các thiết kế web. Ví dụ chúng ta có ở đây cũng chính là phần tiếp theo của giao diện trang chủ mà chúng ta đang xây dựng với 1 hàng nội dung bao gồm 3 cột cho phần 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
10 và 3 hàng nội dung với 2 cột cho phần 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
11


<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
1

Ở phần 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
10 bạn để ý thấy chúng ta có 3 phần tử con của hàng 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
14 không cần chỉ định số cột chiều rộng và Bootstrap đã tự động chia đều 12 cột chiều rộng cho 3 cột nội dung. Nếu như chúng ta sử dụng 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
14 thay cho 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
15 thì kết quả hiển thị thu vẫn sẽ tương tự

Ở phần tiếp theo 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
11 chúng ta chỉ định rõ 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
17 cho mỗi cột nội dung và còn lại 2 chiều rộng cột. Lúc này lớp 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
18 được sử dụng để sử dụng 2 cột độ rộng còn lại chia đều làm 

<section class="py-5">
   <div class="container-fluid px-4">
      <h2 class="display-4 text-center">We speak _h2>

      <div class="row my-4">
         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">HTMLh3>
               <p class="lead">A simplified version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">CSSh3>
               <p class="lead">Another version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>

         <div class="col-md py-3">
            <section class="py-5 text-center bg-light">
               <h3 class="h2">JavaScripth3>
               <p class="lead">The next version of Englishp>
               <a class="btn btn-primary rounded-0" href="#">Learn morea>
            section>
         div>
      div>
   div>
section>
5 xung quanh 2 cột nội dung. Các phần tử con 3, 4, 5, 6 của 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
14 tự động được xuống dòng vì tối đa trong lưới 12 cột chỉ có thể hiển thị tối đa 2 cột của 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
17

Trong 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
52 chúng ta có thể ghi đè lên 
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
53 để có màu nền chính xác như mong muốn

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
1

Như vậy là giao diện trang chủ của chúng ta cũng gần như đã hoàn chỉnh rồi. Mình tin là tới đây thì bạn đã có đủ tự tin để hoàn thành 2 phần còn lại là 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
54 và phần chân trang web. Bạn có thể lưu lại mã đầy đủ ở dưới đây để tham khảo và hoàn thiện trang chủ của bạn

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
5
/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
0

Như vậy là chúng ta đã thực hiện phương thức áp dụng Bootstrap đơn giản nhất để xây dựng một giao diện trang chủ đơn giản. Tuy nhiên, để có thể sử dụng Bootstrap ở mức tối ưu nhất và xây dựng các trang web có thiết kế phong phú hơn thì sẽ yêu cầu chúng ta học thêm JavaScript. Đây là 1 trong 3 ngôn ngữ bắt buộc phải biết đối với bất kỳ ai muốn học lập trình web

Nếu như HTML cho phép chúng ta cấu trúc nội dung của trang web, CSS cho phép chúng ta thiết lập phong cách hiển thị của các nội dung, thì JavaScript ở gần bên lại cho phép chúng ta viết kịch bản đáp ứng cho các thành viên . Hay nói cách khác, với HTML và CSS thì chúng ta có thể vẽ ra một giao diện người dùng, giao diện web hay giao diện phần mềm thì cũng chỉ là gọi tên nhau mà thôi, còn với JavaScript thì chúng ta có thể

Và tới đây thì mình hy vọng rằng bạn sẽ tiếp tục tham gia cùng với mình trong quá trình tự học thêm JavaScript nữa. Hẹn gặp lại bạn trong bài viết đầu tiên về JavaScript của 

/* .. */

.bg-trees {
  background-image: url(https://s19.postimg.cc/bd31cyn6r/road.jpg);
  background-size: cover;
  background-position: center;
}

.py-7 {
  padding-top: 150px;
  padding-bottom: 150px;
}
55

programming bootstrap

Bài Viết Liên Quan

Phát chính niệm pháp luân công là gì năm 2024
Phát chính niệm pháp luân công là gì năm 2024

là ai Hỏi Đáp Là gì
Hàng hóa gì cần giấy phép nhập khẩu năm 2024
Hàng hóa gì cần giấy phép nhập khẩu năm 2024

mẹo hay
Asus fonepad 7 me372cg lỗi ko có menu trở về năm 2024
Asus fonepad 7 me372cg lỗi ko có menu trở về năm 2024

mẹo hay
Top 20 ngươi giau nhât thê giơi 2023 năm 2024
Top 20 ngươi giau nhât thê giơi 2023 năm 2024

mẹo hay Top List Top
Tiền hung hậu kiết có nghĩa là gì năm 2024
Tiền hung hậu kiết có nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì Hậu kiết
Bài tập điền ch hay tr lớp 4 năm 2024
Bài tập điền ch hay tr lớp 4 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Hoa vàng mấy độ là hoa gì năm 2024
Hoa vàng mấy độ là hoa gì năm 2024

là ai
Bảo vệ di sản văn hóa lịch sử năm 2024
Bảo vệ di sản văn hóa lịch sử năm 2024

mẹo hay
Đề thi tuyển sinh chuyên hóa lớp 10 năm 2024
Đề thi tuyển sinh chuyên hóa lớp 10 năm 2024

mẹo hay
Khăn rằn tiếng anh là gì năm 2024
Khăn rằn tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Bandana Vietnamese turban Checkered scarf
Đại học văn hiến học phí 2023-2023 năm 2024
Đại học văn hiến học phí 2023-2023 năm 2024

mẹo hay Học Tốt Học Đại học
Hóa đơn điện tử chuyển đổi là gì năm 2024
Hóa đơn điện tử chuyển đổi là gì năm 2024

mẹo hay Hỏi Đáp Là gì
Cách mạng tháng mười nga diễn ra như thế nào năm 2024
Cách mạng tháng mười nga diễn ra như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào Mẹo Hay Cách
Bảng so sánh apple to apple là gì năm 2024
Bảng so sánh apple to apple là gì năm 2024

là ai Hỏi Đáp Là gì Công Nghệ Apple So Sánh So sánh So sánh iPad
Dạ cổ hoài lang là gì năm 2024
Dạ cổ hoài lang là gì năm 2024

là ai Hỏi Đáp Là gì
Chuyển lap top sang mic tai nghe phone năm 2024
Chuyển lap top sang mic tai nghe phone năm 2024

mẹo hay Top List Top Test mic
Cpu xeon l5420 4 nhân 2 5ghz mạnh cở nào năm 2024
Cpu xeon l5420 4 nhân 2 5ghz mạnh cở nào năm 2024

mẹo hay Công Nghệ Cpu CPU Xeon E5 E5 2686 v4
Văn biểu cảm về mẹ lớp 7 hay nhất năm 2024
Văn biểu cảm về mẹ lớp 7 hay nhất năm 2024

mẹo hay
Yolk sac dương tính là gì năm 2024
Yolk sac dương tính là gì năm 2024

là ai Hỏi Đáp Là gì
Cách tạo khung cho văn bản trong word năm 2024
Cách tạo khung cho văn bản trong word năm 2024

mẹo hay Mẹo Hay Cách

Quảng Cáo

Có thể bạn quan tâm

Giải toán lớp 3 trong sách giáo khoa trang 28 năm 2024
1 ngày trước . bởi QuantitativeCompleteness
Sửa lỗi reallocated sector count site forum.bkav.com.vn năm 2024
1 ngày trước . bởi Rear-viewConduit
Sửa lỗi máy tính bị chèn ip động năm 2024
1 ngày trước . bởi PositivePneumonia
Lá chắn dữ liệu nhảy cảm của avast là gì năm 2024
1 ngày trước . bởi UpbeatPlateau
Password hint windows 10 là gì năm 2024
1 ngày trước . bởi IncomingFriendliness
Cách phân biệt bài tập hóa 12 chương 5 năm 2024
1 ngày trước . bởi IndecentTelephony
Các công thức hóa học lớp 8 cần nhớ năm 2024
1 ngày trước . bởi PedagogicalBurglary
Quyết định thi hành án hình sự là gì năm 2024
1 ngày trước . bởi DamagedAmmonia
Em có biết anh đang thế nào không năm 2024
1 ngày trước . bởi PurplishTossing
Vở bài tập toán lớp 5 bài 17 năm 2024
1 ngày trước . bởi CoarseMusician

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Văn phòng hà sơn hải vân ở hà nội năm 2024
1 tuần trước . bởi RestoredEmbroidery
Lỗi khi cài win 7 require cd từ usb năm 2024
4 ngày trước . bởi ImprisonedMishap
31 10 11 đến chơi nào eunhyuk donghae full năm 2024
3 ngày trước . bởi AbdominalHegemony
Lỗi alt click to define trên photoshop có nghĩa gì năm 2024
5 ngày trước . bởi SurroundingDoorway
Trưởng ban dân vận tỉnh ủy tiếng anh là gì năm 2024
2 ngày trước . bởi ReluctantRegularity
Bài tập trắc nghiệm amino axit có đáp án năm 2024
6 ngày trước . bởi EnthusiasticRodeo
Chữ c trên công tơ điện là gì năm 2024
13 giờ trước . bởi AshenRecipe
Cua sốt trứng muối tiếng anh là gì năm 2024
14 giờ trước . bởi AssociatedContractor
Thư giãn đầu óc tiếng anh là gì năm 2024
1 tuần trước . bởi DivingTwenties
Bài tập powerpoint cơ bản cho tiểu học năm 2024
4 ngày trước . bởi OmnipresentAltercation

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 boxhoidap.com Inc.