Init HTML

Giới thiệu về Bootstrap

Bootstrap Framework là một thư viện CSS, HTML và JavaScript được phát triển bởi Mark Otto và Jacob Thornton tại Twitter được xuất bản vào năm 2011, framework này cho phép bạn thiết kế giao diện thân thiện với các thiết bị di động hay gọi là responsive design, Bootstrap thiết kế sẵn cho bạn nhiều biểu mẫu cơ bản bằng HTML CSS và JavaScript bạn chỉ việc sử dụng và tùy chỉnh lại theo ý của mình.

Vì sao bạn nên sử dụng Bootstrap

• Bootstrap sở dĩ được nhiều người sử dụng mặc dù mới ra đời trong thời gian vài năm trở lại đây bởi sự ổn định, dễ sử dụng, chạy tốt trên mọi kích cỡ màn hình phát triển mã nguồn mở nên được cộng đồng thế giới đóng góp và hoàn thiện hơn, bạn có thể tạo giao diện web nhanh hơn bình thường rất nhiều.
• Bootstrap cũng như các CSS Framework khác sử dụng đạng grid để định hình giao diện web nên bạn có thể tùy chỉnh dễ dàng. Grid Bootstrap phân ra 12 cột.
• Bootstrap có cả các tài liệu chi tiết rất dễ học, có ví dụ cho từng biểu mẫu nên bạn cứ canh chỉnh theo hướng dẫn và dùng.
• Sử dụng một thư viện JavaScript rất phong phú gần như hỗ trợ tất cả các biểu mẫu cần thiết cho một website.
• Cơ chế có thể tự phát triển theo ý mình dựa trên nền tảng Bootstrap, đây là một trong những điểm mạnh của Bootstrap mà ít có Framework nào hiện tại cạnh tranh được.

Mình đã có bài viết về Cấu trúc cơ bản cho một dự án Bootstrap, các bạn có thể xem lại và tải về.

Cần chuẩn bị

• Kiến thức cơ bản về HTML, CSS, JavaScript.
• Đã thực hiện xong 2 bài viết trước của Series Dự án Blog cá nhân.
• Thời gian và sự kiên nhẫn.

Bắt đầu

Đầu tiên, bạn hãy xem các ví dụ cơ bản mà Bootstrap cung cấp tại đây sau đó đọc sơ qua các tài liệu về CSS, Components và JavaScript để nắm cái khái niệm cơ bản.

Ví dụ bạn cần một icon trên website thì hãy tìm đến Glyphicons ở trang Components, hoặc bảng thì có thể tìm tại Tables ở trang CSS…

Grid System

Bài viết này mình chỉ tập trung vào Grid System, phần mình cho là quan trọng nhất của Bootstrap.

Grid systems là một hệ thống của Bootstrap, tạo ra với 12 cột trong một trang nội dung và tự động sắp xếp theo kích thước hiển thị của thiết bị (Desktop, Tablet, Phone…), từ đó chúng ta dễ dàng phân bố cục cho Bootsrap theo thiết kế Reponsive. Cách hoạt động của grid system:

• Mỗi một hàng, phải được bao bọc bởi class .container (cố định kích thước rộng là 768px) hoặc .container-fluid (không giới hạng chiều rộng) để canh giữa và cách khoảng cách lề.
• Mỗi một hàng gồm các nhóm cột.
• Nội dung nằm trong cột, mỗi cột có thể chứa 12 cột con khác.
• Giữa các cột sẽ có khoảng padding (đệm). Khoảng đệm của cột đầu và cuối sẽ được quy định bởi .rows.
• Nếu có nhiều hơn 12 cột trên một hàng thì mỗi nhóm 12 cột sẽ cố định và phần dư sẽ được chuyển sang hàng mới.
• Grid system được đinh nghĩa với các kích thước màn hình khác nhau mà hiển thi khác nhau. Ví dụ ta có lớp .col-md-* sẽ không hiển thị đúng cột nếu màn hình cỡ lớn và .col-lg-* sẽ không áp dụng nếu bạn đang xem bằng màn hình cỡ vừa.

Các lớp tùy chọn của Grib System được quy định bởi bảng sau:

Ví dụ:

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>

Kết quả:

Tạm thời các bạn chỉ cần dùng col-md-* để chia cột, khi đến bài viết về Responsive ở các Series sau, chúng ta sẽ sử dụng các cột khác trên các thiết bị nhỏ hơn và theo từng mục đích cụ thể, mình sẽ dẫn tới nội dung tham khảo tương ứng.

Ứng dụng nhanh

Ứng dụng Bootstrap để làm trang hướng dẫn tập thể dục, tại sao không?

<!doctype html>
<html class="no-js" lang="vi">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Workout v1.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
    .container{max-width:800px}.mb15px{margin-bottom:15px}.p15px{padding:15px}body{position:relative;padding-top:45px}
</style>
</head>
<body data-spy="scroll" data-target="#scroll-nav">
<nav id="scroll-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#top">Workout v1.0</a> </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#warm-up">Khởi Động</a></li>
                <li><a href="#abs">Bụng</a></li>
                <li><a href="#legs">Đùi</a></li>
                <li><a href="#lower-back">Lưng Dưới</a></li>
                <li><a href="#hiit">HIIT (Tham Khảo)</a></li>
            </ul>
        </div>
        <!--/.navbar-collapse --> 
    </div>
</nav>
<div id="top" class="container"> 
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-lg-12">
            <div id="warm-up" class="page-header">
                <h2>Khởi động <small class="text-danger">(bắt buộc)</small></h2>
            </div>
            <div>
                <h3>Thực hiện các động tác của video:</h3>
                <div class="embed-responsive embed-responsive-16by9 mb15px">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ERdZqyorGfk" frameborder="0" allowfullscreen></iframe>
                </div>
                <div>
                    <p class="bg-info text-info p15px"><span class="glyphicon glyphicon-info-sign"></span> Khởi động rất cần thiết trước khi tập luyện, khởi động giúp cơ thể thích ứng với vận động!</p>
                </div>
            </div>
            <div id="abs" class="page-header">
                <h2>Bụng <small class="text-success">(thứ Ba)</small></h2>
            </div>
            <div>
                <h3>1. Crunches</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/GWIEON0VSaY" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>1 hiệp - 10 lần</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Hít vào khi lên, thở ra khi xuống.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>2. Russian Twists</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4wNNCQj2mV4" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>1 hiệp - 10 lần mỗi bên</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Thở đều.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>3. Bicycle Crunches</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/iAb1qlJvD9c" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>1 hiệp - 10 lần mỗi bên</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Hít vào khi bắt đầu, thở ra khi trở về vị trí cũ.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>4. Leg Lifts</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dHSIerbp-CE" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>1 hiệp - 10 lần</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Hít vào khi lên, thở ra khi xuống.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>5. Lying Knee Tucks</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/0UWqqa4b40E" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>1 hiệp - 10 lần</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Hít vào khi lên, thở ra khi xuống.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>6. Single Leg Lifts</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/MnesVI6GJHA" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>1 hiệp - 10 lần mỗi chân</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Hít vào khi xuống, thở ra khi lên.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>7. Flutter Kicks</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/eEG9uXjx4vQ" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>1 hiệp - 30 giây</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Thở đều.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>8. Plank</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/TWpbe9nRySc" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>1 hiệp - lâu nhất có thể</code>.</li>
                    <li class="text-danger">Thở đều.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>9. Side Plank</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/K2VljzCC16g" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>1 hiệp - lâu nhất có thể</code>, thực hiện cho 2 bên (tổng cộng 2 hiệp).</li>
                    <li class="text-danger">Thở đều.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
            </div>
            <div id="legs" class="page-header">
                <h2>Đùi <small class="text-success">(thứ Năm)</small></h2>
            </div>
            <div>
                <h3>1. Squats</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jGQ8_IMPQOY" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>3 hiệp</code>, mỗi hiệp <code>10 lần</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Hít vào khi xuống, thở ra khi lên.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>2. Narrow Squats</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/SpY4UFrUkf4" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>3 hiệp</code>, mỗi hiệp <code>10 lần</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Hít vào khi xuống, thở ra khi lên.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>3. Lunges</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/QF0BQS2W80k" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>4 hiệp</code>, <code>2 hiệp</code> <strong>Step Up Lunge</strong>, <code>2 hiệp</code> <strong>Step Back Lunge</strong>, mỗi hiệp <code>10 lần</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Hít vào khi xuống, thở ra khi lên.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>4. Wall Sit</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XULOKw4E4P4" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>3 hiệp</code>, mỗi hiệp <code>30 giây</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Thở đều.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>5. Squat Jumps</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/0LGJZqKfpXs" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>3 hiệp</code>, mỗi hiệp <code>10 lần</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Hít vào khi bắt đầu.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>6. Lateral Jumps</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wPZP8Bwxplo" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>3 hiệp</code>, mỗi hiệp <code>20 lần</code> (10 lần mỗi bên), tăng dần theo thời gian.</li>
                    <li class="text-danger">Thở đều.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
                <h3>7. Jumping Jack</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/UpH7rm0cYbM" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Thực hiện:</h4>
                <ul>
                    <li><code>3 hiệp</code>, mỗi hiệp <code>30 giây</code>, tăng dần theo thời gian.</li>
                    <li class="text-danger">Thở đều.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Cố gắng thực đúng kỹ thuật động tác (đã hướng dẫn trong video).</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
            </div>
            <div id="lower-back" class="page-header">
                <h2>Lưng Dưới <small class="text-success">(thứ Bảy)</small></h2>
            </div>
            <div>
                <h3>Thực hiện các động tác của video:</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/p1GERX3lf3Y" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Các động tác:</h4>
                <ol>
                    <li>Pilates Breaststroke <code>(0:25)</code></li>
                    <li>Swimmers <code>(1:15)</code></li>
                    <li>Windmill Toe Touches <code>(2:15)</code></li>
                    <li>Straight Leg Deadlift <code>(3:10)</code></li>
                    <li>Rotational Toe Touches <code>(4:00)</code></li>
                    <li>Back Bows <code>(4:55)</code></li>
                    <li>Bird Dogs <code>(5:50)</code></li>
                    <li>Cobra to Child's Pose <code>(6:45)</code></li>
                </ol>
                <p>Tổng cộng: <code>8 động tác</code>, <code>8 hiệp</code>.</p>
                <h4>Lưu ý tập lưng dưới:</h4>
                <ul>
                    <li>Hít vào khi bắt đầu thực hiện động tác, thở ra khi hoàn thành.</li>
                    <li>Khi mới bắt đầu chỉ cần thực hiện mỗi hiệp <code>10 lần</code> hoặc <code>15 giây</code>, tăng lên theo thời gian.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực hiện đủ số bài, đúng kỹ thuật động tác.</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
            </div>
            <div id="hiit" class="page-header">
                <h2>Tabata HIIT <small class="text-success">(Chủ Nhật)</small></h2>
            </div>
            <div>
                <h3>Thực hiện các động tác của video:</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/MHNetvBqoMI" frameborder="0" allowfullscreen></iframe>
                </div>
                <h4>Các động tác:</h4>
                <ol>
                    <li>Warm Up <code>(1:38)</code>, có thể sử dụng <a href="#warm-up">mục đầu tiên →</a></li>
                    <li>Burpees <code>(1:59)</code></li>
                    <li>Mountain Climber <code>(2:40)</code>, <code>thở đều</code></li>
                    <li>Squat Jumps <code>(2:58)</code></li>
                    <li>Bicycle Crunches <code>(3:15)</code>, <code>thở đều</code></li>
                    <li>KettleBell Swings <code>(3:33)</code></li>
                    <li>High Knee <code>(3:53)</code>, <code>thở đều</code></li>
                    <li>Lateral Jumps <code>(4:18)</code></li>
                    <li>Plank <code>(4:35)</code>, <code>thở đều</code></li>
                </ol>
                <p>Tổng cộng: <code>8 động tác</code>, <code>24 hiệp</code>.</p>
                <h4>Lưu ý tập HIIT:</h4>
                <ul>
                    <li>Mỗi động tác tập <code>3 hiệp</code>.</li>
                    <li>Hít vào khi bắt đầu thực hiện động tác, thở ra khi hoàn thành, trừ những bài có ghi chú <code>thở đều</code>.</li>
                    <li>Khi mới bắt đầu chỉ cần thực hiện mỗi hiệp <code>10 lần</code> hoặc <code>15 giây</code>, tăng lên theo thời gian.</li>
                    <li>Thời gian nghỉ giữa hiệp từ <code>30 giây</code> đến <code>60 giây</code>, giảm dần theo thời gian.</li>
                    <li>Thực hiện chậm, không quá nhanh.</li>
                    <li>Cố gắng thực hiện đủ số bài, đúng kỹ thuật động tác.</li>
                    <li>Nên uống nước trong quá trình tập luyện, chú ý uống từng ngụm nhỏ.</li>
                </ul>
            </div>
        </div>
    </div>
    <hr>
    <footer>
        <p>© 2017 Workout v1.0 - Made with <span class="glyphicon glyphicon-heart text-danger"></span> in HCMC.</p>
    </footer>
</div>
<!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function() {
        $('a[href*="#"]:not([href="#"])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 700);
                    return false;
                }
            }
        });
    });
</script>
</body>
</html>

Bạn chỉ cần sao chép nội dung trên, dán vào tập tin .html, mở lên và xem kết quả.

Tải về Xem demo

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