Xây dựng Trang chủ (index)

Nền tảng Kiến thức - Hành trang tới Tương lai
Card image

Chương 3-Bài 4. Xây dựng Trang chủ (index)

Tác giả: Dương Nguyễn Phú Cường #2704
Ngày đăng: Hồi xưa đó
Lượt xem: 782

Thiết kế Trang chủ như hình sau:

Phân tích cấu trúc trang web như sau:

Step 1: Tạo cấu trúc thư mục dự án

Sử dụng cấu trúc thư mục dự án đã thực hiện ở bài trước.

Step 2: tạo trang chủ index.html

  • Nội dung file index.html
<!DOCTYPE html>
<html lang="vi" class="h-100">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Nền tảng - Kiến thức cơ bản về WEB | Bảng tin</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css" type="text/css">
    <!-- Font awesome -->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css" type="text/css">

    <!-- Custom css - Các file css do chúng ta tự viết -->
    <link rel="stylesheet" href="assets/css/app.css" type="text/css">
</head>

<body>
    <!-- header -->
    <nav class="navbar navbar-expand-md navbar-dark sticky-top bg-dark">
        <div class="container">
            <a class="navbar-brand" href="https://nentang.vn">Nền tảng</a>
            <div class="navbar-collapse collapse" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">Trang chủ <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://nentang.vn">Quản trị</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="pages/products.html">Sản phẩm</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="pages/about.html">Giới thiệu</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="pages/contact.html">Liên hệ</a>
                    </li>
                </ul>
                <form class="form-inline mt-2 mt-md-0" method="get" action="pages/search.html">
                    <input class="form-control mr-sm-2" type="text" placeholder="Tìm kiếm" aria-label="Search"
                        name="keyword_tensanpham">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Tìm kiếm</button>
                </form>
            </div>
            <ul class="navbar-nav px-3">
                <li class="nav-item text-nowrap">
                    <a class="nav-link" href="pages/cart.html">Giỏ hàng</a>
                </li>
                <li class="nav-item text-nowrap">
                    <!-- Nếu chưa đăng nhập thì hiển thị nút Đăng nhập -->
                    <a class="nav-link" href="pages/login.html">Đăng nhập</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- end header -->
    <main role="main">
        <!-- Block content - Đục lỗ trên giao diện bố cục chung, đặt tên là `content` -->
        <!-- Carousel - Slider -->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                <li data-target="#myCarousel" data-slide-to="2" class=""></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="assets/img/slider/slider-1.jpg">
                    <div class="container">
                        <div class="carousel-caption text-left">
                            <h1>Nền Tảng - Nơi mua sắm tuyệt vời</h1>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="assets/img/slider/slider-2.jpg">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1>Hàng triệu sản phẩm - Lựa chọn mỏi tay</h1>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="assets/img/slider/slider-3.jpg">
                    <div class="container">
                        <div class="carousel-caption text-right">
                            <h1>Chất lượng là Hàng đầu.</h1>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <!-- Tính năng Marketing -->
        <div class="container marketing">
            <!-- Three columns of text below the carousel -->
            <div class="row">
                <div class="col-lg-4">
                    <img class="bd-placeholder-img rounded-circle" width="140" height="140"
                        src="assets/img/icon/icon-1.png">
                    <h2>Đặt hàng</h2>
                    <p>Chọn sản phẩm bạn yêu thích, và Đặt hàng.</p>
                </div><!-- /.col-lg-4 -->
                <div class="col-lg-4">
                    <img class="bd-placeholder-img rounded-circle" width="140" height="140"
                        src="assets/img/icon/icon-2.png">
                    <h2>Tạo đơn hàng</h2>
                    <p>Theo dõi đơn hàng của bạn.</p>
                </div><!-- /.col-lg-4 -->
                <div class="col-lg-4">
                    <img class="bd-placeholder-img rounded-circle" width="140" height="140"
                        src="assets/img/icon/icon-3.png">
                    <h2>Giao hàng</h2>
                    <p>Giao hàng tận nơi.</p>
                </div><!-- /.col-lg-4 -->
            </div><!-- /.row -->


            <!-- START THE FEATURETTES -->
            <hr class="featurette-divider">
            <div class="row featurette">
                <div class="col-md-7">
                    <h2 class="featurette-heading">Đặt hàng, Tạo đơn hàng, Giao hàng <span class="text-muted">Nhanh
                            chóng</span>
                    </h2>
                    <p class="lead">Nơi mua sắm tuyệt vời cho mọi lứa tuổi.</p>
                </div>
                <div class="col-md-5">
                    <img src="assets/img/marketing/marketing-1.png">
                </div>
            </div>

            <hr class="featurette-divider">
            <div class="row featurette">
                <div class="col-md-7 order-md-2">
                    <h2 class="featurette-heading">Báo cáo Doanh thu tuyệt vời <span class="text-muted">Theo dõi đơn
                            hàng của
                            bạn.</span></h2>
                    <p class="lead">Hệ thống theo dõi đơn hàng chi tiết, thông tin mọi lúc mọi nơi.</p>
                </div>
                <div class="col-md-5 order-md-1">
                    <img src="assets/img/marketing/marketing-2.png">
                </div>
            </div>

            <hr class="featurette-divider">
            <!-- /END THE FEATURETTES -->
        </div>

        <!-- Danh sách sản phẩm -->
        <section class="jumbotron text-center">
            <div class="container">
                <h1 class="jumbotron-heading">Danh sách Sản phẩm</h1>
                <p class="lead text-muted">Các sản phẩm với chất lượng, uy tín, cam kết từ nhà Sản xuất, phân phối và
                    bảo hành
                    chính hãng.</p>
            </div>
        </section>

        <!-- Giải thuật duyệt và render Danh sách sản phẩm theo dòng, cột của Bootstrap -->
        <div class="danhsachsanpham py-5 bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm">
                            <a href="pages/product-detail.html">
                                <img class="bd-placeholder-img card-img-top" width="100%" height="350"
                                    src="assets/img/product/samsung-s3.webp">
                            </a>
                            <div class="card-body">
                                <a href="pages/product-detail.html">
                                    <h5>Samsung Galaxy S3</h5>
                                </a>
                                <h6>Điện thoại</h6>
                                <p class="card-text">Sản phẩm của Samsung năm 2013</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-outline-secondary"
                                            href="pages/product-detail.html">Xem chi tiết</a>
                                    </div>
                                    <small class="text-muted text-right">
                                        <s>12,600,000.00</s>
                                        <b>12,000,000.00 vnđ</b>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm">
                            <a href="pages/product-detail.html">
                                <img class="bd-placeholder-img card-img-top" width="100%" height="350"
                                    src="assets/img/product/ipad4.png">
                            </a>
                            <div class="card-body">
                                <a href="pages/product-detail.html">
                                    <h5>Apple Ipad 4 Wifi 16GB</h5>
                                </a>
                                <h6>Máy tính bảng</h6>
                                <p class="card-text">CPU Dual-core Cortex-A9 tốc độ 1GHz</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-outline-secondary"
                                            href="pages/product-detail.html">Xem chi tiết</a>
                                    </div>
                                    <small class="text-muted text-right">
                                        <s>12,000,000.00</s>
                                        <b>11,800,000.00 vnđ</b>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm">
                            <a href="pages/product-detail.html">
                                <img class="bd-placeholder-img card-img-top" width="100%" height="350"
                                    src="assets/img/product/iphone5.jpg">
                            </a>
                            <div class="card-body">
                                <a href="pages/product-detail.html">
                                    <h5>Apple iPhone 5 16GB</h5>
                                </a>
                                <h6>Điện thoại</h6>
                                <p class="card-text">CPU: Dual-core 1 GHz</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-outline-secondary"
                                            href="pages/product-detail.html">Xem chi tiết</a>
                                    </div>
                                    <small class="text-muted text-right">
                                        <s>0.00</s>
                                        <b>14,890,000.00 vnđ</b>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm">
                            <a href="pages/product-detail.html">
                                <img class="bd-placeholder-img card-img-top" width="100%" height="350"
                                    src="assets/img/product/iphone5-white.jpeg">
                            </a>
                            <div class="card-body">
                                <a href="pages/product-detail.html">
                                    <h5>Apple iPhone 5 16GB White</h5>
                                </a>
                                <h6>Điện thoại</h6>
                                <p class="card-text">CPU: Dual-core 1 GHz - Màu trắng</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-outline-secondary"
                                            href="pages/product-detail.html">Xem chi tiết</a>
                                    </div>
                                    <small class="text-muted text-right">
                                        <s>0.00</s>
                                        <b>14,990,000.00 vnđ</b>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm">
                            <a href="pages/product-detail.html">
                                <img class="bd-placeholder-img card-img-top" width="100%" height="350"
                                    src="assets/img/product/samsung-galaxy-tab-10.jpg">
                            </a>
                            <div class="card-body">
                                <a href="pages/product-detail.html">
                                    <h5>Samsung Galaxy Tab 10.1 3G 16G</h5>
                                </a>
                                <h6>Máy tính bảng</h6>
                                <p class="card-text">Màn hình 10.1 inch cảm ứng đa điểm</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-outline-secondary"
                                            href="pages/product-detail.html">Xem chi tiết</a>
                                    </div>
                                    <small class="text-muted text-right">
                                        <s>12,000,000.00</s>
                                        <b>10,990,000.00 vnđ</b>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm">
                            <a href="pages/product-detail.html">
                                <img class="bd-placeholder-img card-img-top" width="100%" height="350"
                                    src="assets/img/product/nokia-asha-311.jpg">
                            </a>
                            <div class="card-body">
                                <a href="pages/product-detail.html">
                                    <h5>Nokia Asha 311</h5>
                                </a>
                                <h6>Điện thoại</h6>
                                <p class="card-text">Điện thoại di động Nokia Asha 311</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-outline-secondary"
                                            href="pages/product-detail.html">Xem chi tiết</a>
                                    </div>
                                    <small class="text-muted text-right">
                                        <s>3,000,000.00</s>
                                        <b>2,699,000.00 vnđ</b>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-4">
                        <div class="card mb-4 shadow-sm">
                            <a href="pages/product-detail.html">
                                <img class="bd-placeholder-img card-img-top" width="100%" height="350"
                                    src="assets/img/product/samsung-galaxy-tab.jpg">
                            </a>
                            <div class="card-body">
                                <a href="pages/product-detail.html">
                                    <h5>Samsung Galaxy Tab 2 7.0</h5>
                                </a>
                                <h6>Máy tính bảng</h6>
                                <p class="card-text">Máy tính bảng Samsung Galaxy Tab 2 7.0 </p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-outline-secondary"
                                            href="pages/product-detail.html">Xem chi tiết</a>
                                    </div>
                                    <small class="text-muted text-right">
                                        <s>7,950,000.00</s>
                                        <b>7,500,000.00 vnđ</b>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- End block content -->
    </main>

    <!-- footer -->
    <footer class="footer mt-auto py-3">
        <div class="container">
            <span>Bản quyền © bởi <a href="https://nentang.vn">Nền Tảng</a> - <script>document.write(new Date().getFullYear());</script>.</span>
            <span class="text-muted">Hành trang tới Tương lai</span>

            <p class="float-right">
                <a href="#">Về đầu trang</a>
            </p>
        </div>
    </footer>
    <!-- end footer -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popperjs/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Custom script - Các file js do mình tự viết -->
    <script src="assets/js/app.js"></script>

</body>

</html>

Source code tham khảo

https://github.com/kellyfire611/learning.nentang.vn-frontend-basic/blob/master/course-bootstrap/project-trang-web-ban-hang/index.html
Về trang chủ Về Khóa học
Bài học trước Bài học tiếp theo

Mục lục

Chương trình học

  1. Tài liệu tham khảo 1
    1. Kho sách, nguồn tài liệu tham khảo Thiết kế Web với Bootstrap #8251
  2. Bootstrap là gì? Tìm hiểu cách hoạt động của Bootstrap 8
    1. Giới thiệu Bootstrap #2698
    2. Cách sử dụng Bootstrap trong dự án của bạn #2699
    3. Hệ thống Lưới (GRID) của Bootstrap #2700
    4. Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap #2701
    5. Ràng buộc dữ liệu (validation) bằng Bootstrap #8270
    6. Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty #8332
    7. Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive) #9805
    8. Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query #10114
  3. Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap 14
    1. Lộ trình (Roadmap) Thực hiện Đồ án #10356
    2. Khởi tạo thư mục dự án #2702
    3. Phân tích Bố cục (layout) #2703
    4. Xây dựng Trang chủ (index) #2704
    5. Xây dựng Trang Giới thiệu (about) #2705
    6. Xây dựng Trang Liên hệ (contact) #2706
    7. Xây dựng Trang Danh sách Sản phẩm (products) #2707
    8. Xây dựng Trang Chi tiết Sản phẩm (product_detail) #2708
    9. Xây dựng Trang Giỏ hàng (cart) #2709
    10. Xây dựng Trang Thanh toán (checkout) #2710
    11. Xây dựng Trang Đăng nhập (login) #2711
    12. Xây dựng Trang Đăng ký (register) #2712
    13. Xây dựng Trang Tìm kiếm (search) #2713
    14. Thưởng thức Kết quả (demo version) #2714
Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

  1. Tài liệu tham khảo 1
    1. Kho sách, nguồn tài liệu tham khảo Thiết kế Web với Bootstrap #8251
  2. Bootstrap là gì? Tìm hiểu cách hoạt động của Bootstrap 8
    1. Giới thiệu Bootstrap #2698
    2. Cách sử dụng Bootstrap trong dự án của bạn #2699
    3. Hệ thống Lưới (GRID) của Bootstrap #2700
    4. Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap #2701
    5. Ràng buộc dữ liệu (validation) bằng Bootstrap #8270
    6. Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty #8332
    7. Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive) #9805
    8. Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query #10114
  3. Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap 14
    1. Lộ trình (Roadmap) Thực hiện Đồ án #10356
    2. Khởi tạo thư mục dự án #2702
    3. Phân tích Bố cục (layout) #2703
    4. Xây dựng Trang chủ (index) #2704
    5. Xây dựng Trang Giới thiệu (about) #2705
    6. Xây dựng Trang Liên hệ (contact) #2706
    7. Xây dựng Trang Danh sách Sản phẩm (products) #2707
    8. Xây dựng Trang Chi tiết Sản phẩm (product_detail) #2708
    9. Xây dựng Trang Giỏ hàng (cart) #2709
    10. Xây dựng Trang Thanh toán (checkout) #2710
    11. Xây dựng Trang Đăng nhập (login) #2711
    12. Xây dựng Trang Đăng ký (register) #2712
    13. Xây dựng Trang Tìm kiếm (search) #2713
    14. Thưởng thức Kết quả (demo version) #2714
Bài học trước Bài học tiếp theo
Về trang chủ Về Khóa học