03/08/2018, 09:51

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

DOWNLOAD DEMO ...

DOWNLOAD DEMO

Sau khi kết thúc series bootstrap 3 lý thuyết thì ở bài này tôi sẽ hướng dẫn các bạn xây dựng layout blog cơ bản, với những kiến thức đã được học qua thì tôi tin rằng layout blog này sẽ chẳng làm khó được các bạn một chút nào cả. 

Trong bài không giải thích ý nghĩa các class nữa nên nếu chưa hiểu thì bạn quay lại những bài trước để tham khảo trước nhé.

1. Những kiến thức cần để xây dựng layout blog trong serie

Để có thể theo kịp bài viết này thì các bạn cần phải nắm vững các kiến thức sau đây:

  • Bài 3: Grid System trong bootstrap 3
  • Bài 5: Breadcrumbs & Images trong bootstrap 3
  • Bài 6: Pagination trong bootstrap 3
  • Bài 7: Panel & Labels trong bootstrap 3
  • Bài 10: Tạo button trong bootstrap 3
  • Bài 13: Glyphicons trong bootstrap 3
  • Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3
  • Bài 15: Navigation trong bootstrap 3
  • Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Đây sẽ là những kiến thức được áp dụng vào bài thực hành này, vì thế nếu ban nào cảm thấy chưa đủ tự tin để xem bài này thì vui lòng xem kỹ lại các bài mà tôi vừa liệt kê ở phía trên. Vì để xây dựng layout blog thì tôi sẽ áp dụng một số kiến thức trong các bài trên. 

2. Cấu trúc html của layout blog

Trước tiên bạn cần download thư viện bootstrap tại trang chủ của nó, sau đó giải nén vào một folder bất kì, giả sử tôi giải nén vào foder blog. Sau đó bạn tạo thêm folder images để chứa hình ảnh , tạo file index.html dùng để code HTML cho layout và cuối cùng là file css/style.css dùng để style cho layout. Lúc này cấu trúc sơ đồ folder của chúng ta như sau (màu đỏ là những file mà chúng ta tạo thêm):

blog/ 
├── /css/ 
│ ├── style.css 
│ ├── bootstrap.css 
│ ├── bootstrap.min.css 
│ ├── bootstrap-theme.css 
│ └── bootstrap-theme.min.css 
├── /js/ 
│ ├── bootstrap.js 
│ └── bootstrap.min.js 
├── /fonts/ 
│ ├── glyphicons-halflings-regular.eot 
│ ├── glyphicons-halflings-regular.svg 
│ ├── glyphicons-halflings-regular.ttf 
│ └── glyphicons-halflings-regular.woff
├── /images/ 
└── /index.html 

Bây giờ bạn mở file index.html lên và dán nội dung sau đây vào, đây chính là bổ cục bên ngoài của layout.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="awidth=device-awidth, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Layout Blog - Freetuts.net</title>

         
        <link href="css/bootstrap.min.css" rel="stylesheet">

         
        <link href="css/style.css" rel="stylesheet">

    </head>

    <body>

         
        <script src="js/jquery.js"></script>

         
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Trong đó:

  • Trên header mình có import hai file là thư viện bootstrap và style.css:
     
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
     
    <link href="css/style.css" rel="stylesheet">
  • Dưới footer có thêm hai file js đó là jquery và thư viện js của bootstrap:
     
    <script src="js/jquery.js"></script>
    
     
    <script src="js/bootstrap.min.js"></script><br><br><br>

Ok, cấu trúc thì quá quen thuộc rồi nên tôi không giải thích nửa, tiếp theo chúng ta sẽ xây dựng phần Navigation trước tiên.

3. Xây dựng phần Navigation trong layout blog

Bước đầu tiên khi thiết kế css cho một website đều bắt đầu từ phần header và navigation (thanh ngang menu). Bạn mở file index.html lên và thêm nội dung HTML vào trong thẻ body.

 
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
         
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Freetuts.net</a>
        </div>
         
        <div class="collapse navbar-collapse" id="menu">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">Giới Thiệu</a>
                </li>
                <li>
                    <a href="#">Tin Tức</a>
                </li>
                <li>
                    <a href="#">Liên Hệ</a>
                </li>
            </ul>

            <div class="navbar-right">
                <button class="btn btn-danger navbar-btn">Register</button>
                <button class="btn btn-info navbar-btn">Login</button>
            </div>
        </div>
         
    </div>
     
</nav>
 

Và đây là giao diện:


Hình ảnh navigation

Các bạn chạy thử và xem kết quả sẽ thấy nó bị rất bình thường như trong hình vẽ. Vậy các bạn có thắc mắc tại sao ta lại có kết quả như vậy không? Nếu có thì hãy đọc lại những bài lý thuyết nhé vì tôi không giải thích ý nghĩa của từng class nữa.

Nhưng vấn đề sẽ xảy ra nếu ta thêm một dòng chữ bất kì ở cuối file thì nó sẽ bị phần Menu che đi mất một phần nhỏ ở phía trên, lý do là chúng ta cho Menu hiển thị ở dạng fixed (navbar-fixed-top). Mà menu này có chiều cao là 70px nên chúng ta chỉ cần cho thẻ body padding-top:70px là ok. Bạn mở file css/style.css lên và thêm vào nội dung sau:

body {
    padding-top: 70px; 
}

Tôi bọc div.container bao quanh lại mục đích là  để nó hiển thị full màn hình và phần brand sẽ nằm ngang hàng với các thành phần menu  trong blog.

Xem như chúng ta vừa hoàn thành bước đầu tiên trong quá trình lên layout cho blog, tôi sẽ không giải thích code quá nhiều, bởi vì ở các bài lý thuyết tôi đã trình bày khá chi tiết và rõ ràng, nếu các bạn không hiểu thì xem lại dàn bài nhé.

4. Xây dựng phần jumbotron và page header trong layout blog

Trước tiên bạn cần tạo một thẻ div.container bên dưới phần Navigation top và tất cả những phần còn lại sẽ được đặt trong này:

<div class="container">
    // Noi dung con lai code trong nay
</div>
Xây dựng phần header:

Bây giờ chúng ta sẽ xây dựng phần header, với kiểu header như vậy thì tôi sẽ chọn jumbotron. Bạn thêm đoạn mã HTML sau vào bên trong div.container vừa tạo lúc nãy:

<div class="jumbotron">
    <h1>Khóa học bootstrap 3</h1>
    <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p>
    <p><a href="https://code24h.com" target="_blank" class="btn btn-primary btn-lg">Học Ngay</a></p>
</div>

Và đây là giao diện:


Hình ảnh jumbotron

Xây dựng phần Slogan:

Ở phần này thì sẽ bắt đầu thiết lập số cột cho nó là full 12 cột, vì đang làm việc với dạng layout fullawidth nên phần hiển thị text muốn nó hỗ trợ responsive thì phải cố định cột cho nó. Bạn thêm đoạn code sau phía dưới  phần header:

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Freetuts.net - Học lập trình online miễn phí</h1>
    </div>
</div>

Và đây là giao diện của Slogan:


Hình ảnh jumbotron & page header

5. Xây dựng page content trong layout blog

Tới phần quan trọng nhất là phần xây dựng  page content cho layout, phần này sẽ hiển thị các bài viết, bao gồm hình ảnh đại diện, tiêu đề bài viết và button click để xem tiếp bài viết.

Với page content thì chúng ta sẽ chia chúng ra thành 2 khối . Do phần hình đại diên khá lớn nên tôi cho chia cho nó 7 cột, phần hiển thị tiêu đề bài và mô tả ngắn của bài thì tôi cho nó 5 cột để nó khớp với 12 cột mà grid system hỗ trợ.

Bọc cả 2 thành phần hình ảnh và thông tin của tin  trong class row, để nó hỗ trợ canh đều với phần jumbotron.  col-md-x  là độ phân giải hay dùng nhất trong quá trình làm việc với bootstrap 3. 

Và đây là đoạn CODE cho phần item content (bạn đặt cuối kế phần slogan):

<div class="row">
    <div class="col-md-7">
        <a href="#">
            <img class="img-responsive" src="images/700x300.gif" alt="">
        </a>
    </div>
    <div class="col-md-5">
        <h3>Bài học 1</h3>
        <h4>Navigation trong bootstrap 3</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
        <a class="btn btn-primary" href="#">Xem Bài <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>

Hình ảnh khi chạy lên:


Hình ảnh page content

Để có thêm ITEM thì bạn chỉ việc copy và nhân bản nó ra, đồng thơi dùng thẻ hr để ngăn cách giữa các item.

6. Xây dựng pagination và footer trong layout blog

Xây dựng Pagination:

Khi nội dung trên một page quá nhiều thì chúng ta cần phải có giải pháp phân trang, và trong layout này cũng không ngoại lệ, tôi sẽ hướng dẫn các bạn tạo ra một danh sách phân trang như sau.

 
<div class="row text-center">
    <div class="col-lg-12">
        <ul class="pagination">
            <li>
                <a href="#">&laquo;</a>
            </li>
            <li class="active">
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">5</a>
            </li>
            <li>
                <a href="#">&raquo;</a>
            </li>
        </ul>
    </div>
</div>
 

Các bạn thêm vào phần cuối của các ITEM mà phần 5 đã làm nhé (trong thẻ div.container). Và đây là giao diện lúc chạy lên:


Hình ảnh pagination

Nhìn code là hiểu rồi hen, khỏi giải thích nha vì cái này được học hết rồi :). Nếu không thêm vào thuộc tính text-center thì phần hiển thị nó sẽ nằm mặc định bên trái.

Xây dựng Footer:

Tiếp theo tới phần dễ nhất chính là footer, set cho nó full cột là 12, độ phân giải được ưu tiên gọi đầu tiên và tự co giãn khi thu nhỏ trình duyệt là col-lg-x. Bạn thêm đoạn code sau vào kế phần Pagination:

<footer>
<div class="row">
    <div class="col-lg-12 text-center">
        <p>Layout Blog - Freetuts.net</p>
    </div>
</div>
 
</footer>

Và đây là giao diện lúc chạy lên:


Hình ảnh footer

Và tới đây là hết bạn, bạn đã có một giao diện rồi đấy wink

Sau đây là toàn bộ file index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="awidth=device-awidth, initial-scale=1" />
        <meta name="description" content="" />
        <meta name="author" content="" />

        <title>Layout Blog - Freetuts.net</title>

         
        <link href="css/bootstrap.min.css" rel="stylesheet">

         
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
         
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                 
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Freetuts.net</a>
                </div>
                 
                <div class="collapse navbar-collapse" id="menu">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">Giới Thiệu</a>
                        </li>
                        <li>
                            <a href="#">Tin Tức</a>
                        </li>
                        <li>
                            <a href="#">Liên Hệ</a>
                        </li>
                    </ul>

                    <div class="navbar-right">
                        <button class="btn btn-danger navbar-btn">Register</button>
                        <button class="btn btn-info navbar-btn">Login</button>
                    </div>
                </div>
                 
            </div>
             
        </nav>
         

         
        <div class="container">
            <div class="jumbotron">
                <h1>Khóa học bootstrap 3</h1>
                <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p>
                <p><a href="https://code24h.com" target="_blank" class="btn btn-primary btn-lg">Học Ngay</a></p>
            </div>
             
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Freetuts.net - Học lập trình online miễn phí</h1>
                </div>
            </div>
             

             
            <div class="row">
                <div class="col-md-7">
                    <a href="#">
                        <img class="img-responsive" src="images/700x300.gif" alt="">
                    </a>
                </div>
                <div class="col-md-5">
                    <h3>Bài học 1</h3>
                    <h4>Navigation trong bootstrap 3</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">Xem Bài <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
             

            <hr>

             
            <div class="row">
                <div class="col-md-7">
                    <a href="#">
                        <img class="img-responsive" src="images/700x300.gif" alt="">
                    </a>
                </div>
                <div class="col-md-5">
                    <h3>Bài học 1</h3>
                    <h4>Navigation trong bootstrap 3</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">Xem Bài <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
             

            <hr>

             
            <div class="row">
                <div class="col-md-7">
                    <a href="#">
                        <img class="img-responsive" src="images/700x300.gif" alt="">
                    </a>
                </div>
                <div class="col-md-5">
                    <h3>Bài học 1</h3>
                    <h4>Navigation trong bootstrap 3</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">Xem Bài <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
             

            <hr>

             
            <div class="row">

                <div class="col-md-7">
                    <a href="#">
                        <img class="img-responsive" src="images/700x300.gif" alt="">
                    </a>
                </div>
                <div class="col-md-5">
                    <h3>Bài học 1</h3>
                    <h4>Navigation trong bootstrap 3</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">Xem Bài <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
             

            <hr>

             
            <div class="row">
                <div class="col-md-7">
                    <a href="#">
                        <img class="img-responsive" src="images/700x300.gif" alt="">
                    </a>
                </div>
                <div class="col-md-5">
                    <h3>Bài học 1</h3>
                    <h4>Navigation trong bootstrap 3</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">Xem Bài <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
             

            <hr>
            <div class="jumbotron">
                <h1>Khóa học bootstrap 3</h1>
                <p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p>
                <p><a href="https://code24h.com" target="_blank" class="btn btn-primary btn-lg">Học Ngay</a></p>
            </div>
             
            <div class="row text-center">
                <div class="col-lg-12">
                    <ul class="pagination">
                        <li>
                            <a href="#">&laquo;</a>
                        </li>
                        <li class="active">
                            <a href="#">1</a>
                        </li>
                        <li>
                            <a href="#">2</a>
                        </li>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">4</a>
                        </li>
                        <li>
                            <a href="#">5</a>
                        </li>
                        <li>
                            <a href="#">&raquo;</a>
                        </li>
                    </ul>
                </div>
            </div>
             

            <hr>

             
            <footer>
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <p>Layout Blog - Freetuts.net</p>
                    </div>
                </div>
                 
            </footer>

        </div>
         

         
        <script src="js/jquery.js"></script>

         
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Kết Bài:

Như vậy, tôi vừa hướng dẫn các bạn xây dựng layout blog cơ bản trong bootstrap 3, layout này có cấu trúc một cột và khá là đơn giản, ở bài tiếp theo tôi sẽ hướng dẫn các bạn xây dựng layout 2 cột và cấu trúc sẽ phức tạp hơn, chào tạm biệt và chúc các bạn học tốt.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Những bước cơ bản để xây dựng lên một cơ sở dữ liệu

Xây dựng cơ sở dữ liệu là một trong những bước vô cùng quan trọng khi bạn xây dựng bất cứ một chương trình nào. Đây là điều kiện tiên quyết để quyết định cho sự thuận lợi cũng như chuẩn xác mà chương trình bạn sẽ viết hay sự phát triển, mở rộng của hệ thống sau này. Để xây dựng một cơ sở dữ liệu ...

Bùi Văn Nam viết 18:18 ngày 12/08/2018

Xây dựng môt API cơ bản với grape và grape-entity

Chào các bạn, trong các dự án gần đây, hầu hết mình làm việc với API trong rails chứ không còn là rails thuần như hồi mới làm nữa. Bởi vậy việc hiểu về grape và grape-entity, 2 gem được sử dụng ở khá nhiều project rails API là rất quan trọng. Trong bài viết này mình sẽ hướng dẫn các bạn cách sử ...

Trịnh Tiến Mạnh viết 18:10 ngày 12/08/2018

[Step by step] Tự xây dựng Ruby Gem của bạn

Các Rubyist chắc không còn xa lạ gì với khái niệm Gem. Khi cần tìm một Gem nào đó, chúng ta thường truy cập RubyGems. Ở đây, gần như mọi Gem cần thiết cho việc phát triển đều có thể tìm thấy, thật tiện phải không. Nhưng với tư cách là một Rubyist chân chính muốn đóng góp cho cộng đồng Ruby, đã khi ...

Trịnh Tiến Mạnh viết 15:21 ngày 12/08/2018

Xây dựng web crawler cơ bản với mechanize

Web crawler có chức năng lấy thông tin từ website , trích xuất ra những thông tin người sử dụng cần, đồng thời cũng tìm những link có trong trang web đó và tự động truy cập vào những link đó. Các tên gọi khác của crawler là robot, bot, spider, worm, ant. Nhưng gần đây tên gọi crawler là thông dụng ...

Tạ Quốc Bảo viết 15:00 ngày 12/08/2018

Xây dựng layout linh hoạt với FlexBoxLayout

Tại Google I/O năm ngoái chúng tôi đã ra mắt ConstraintLayout cho phép bạn xây dựng những layout phức tạp trong khi vẫn giữ được độ đơn giản của tầng view. Nó cũng đã được hỗ trợ hoàn toàn trong Visual Layout Editor của Android Studio. Cùng lúc đó chúng tôi cũng đã open source FlexboxLayout để ...

Trịnh Tiến Mạnh viết 14:50 ngày 12/08/2018
0