Làm web (04) - Photoshop và Bootstrap (04)

Tiếp theo của: Làm web (03) - Photoshop và Bootstrap (03)
-----

8          Tạo hiệu ứng đếm số (counter up) bằng thư viện waypoints.js và counterup.js


– Vào trang Google, gõ từ khóa “counter up demo” hoặc vào trực tiếp trang: http://bfintal.github.io/Counter-Up/demo/demo.html

– Chuột phải vào trang web vừa mở, chọn View page source để xem mã nguồn

– Cuối trang mã nguồn sẽ có liên kết tới thư viện waypoints, và counterup

­– Lấy mã nguồn waypoints, và counterup về máy (ví dụ: lưu vào thư mục js)

– Liên kết vào trang web đang làm

<script src="js/waypoints.min.js"></script>
            <script src="js/counterup.min.js"></script>

– Dùng jQuery để gắn vào phần tử chứa số, ví dụ:

$(function(){
                                    $('.number').counterUp({
                                                delay: 10,
                                                time: 3000
                                    });
                        });

Một số lỗi và cách khắc phục,

– Lỗi do chưa nhúng thư viện jQuery và trang web, sẽ có thông báo lỗi như sau:
Uncaught ReferenceError: $ is not defined

Cách khắc phục: tải thư viện jQuery về máy và nhúng vào trang web

– Lỗi thư viện jQuery không tương thích với phiên bản đã được sử dụng để tạo ra thư viện waypoints và counterup. Thường có thông báo lỗi như sau:

Uncaught TypeError: a.indexOf is not a function” error.

Vì waypoints và counterup được tạo ra bằng jQuery phiên bản 2.x, nên cần tải đúng phiên bản này thì mới chạy được. Ví dụ tải phiên bản 2.2.5 tại đây:

9          Tạo vùng các giáo viên


[HTML]

<!-- begin the our team -->
                        <div class="our-team">
                                    <div class="container">
                                                <div class="row">
                                                            <div class="row courses-title text-center wow bounceInUp">
                                                                        <h2 class="line-over">Đội ngũ giảng viên</h2>
                                                            </div>
                                                </div>
                                                <div class="row">
                                                            <div class="col-sm-3 wow bounceInUp">
                                                                        <a href="" class="one-course our-team">
                                                                                    <img src="images/our-team.jpg" alt="">
                                                                                    <span class="course-info">
                                                                                                <h4 class="name">Văn Tèo</h4>
                                                                                                <div class="course-group">Front-end</div>
                                                                                    </span>
                                                                        </a>
                                                            </div>
                                                            <div class="col-sm-3 wow bounceInUp" data-wow-delay="0.3s">
                                                                        <a href="" class="one-course our-team">
                                                                                    <img src="images/our-team.jpg" alt="">
                                                                                    <span class="course-info">
                                                                                                <h4 class="name">Văn Tèo</h4>
                                                                                                <div class="course-group">Front-end</div>
                                                                                    </span>
                                                                        </a>
                                                            </div>

[CSS]

.our-team .line-over {
    display: inline-block;
    margin-bottom: 60px;
}
.our-team h4.name {
    font-size: 17px;
}

.our-team .course-group {
    font-size: 14px;
}
[Hình ảnh minh họa]




10          Vùng footer


[HTML]

<!-- begin footer -->
                        <footer class="footer">
                                    <div class="container">
                                                <div class="row text-center">
                                                            <a href="" class="logo-footer"><img src="images/logo.png" alt=""></a>
                                                                        <div class="copyright">
                                                                                    Copyright 2018 by <span class="green-color">ABC</span>
                                                                        </div>
                                                </div>
                                    </div>
                        </footer>
            <!-- end footer -->

[CSS]

Chèn ảnh nền cho footer:

footer.footer {
    min-height: 200px;
    padding: 66px;
    background: url(../images/bg_footer.jpg);
    color: white;
    position: relative;
   margin-top: 100px;
}

Phủ màu nền cho footer, làm màu sáng hai bên, tối màu ở giữa:

footer.footer:after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.21), rgba(3, 4, 4, 0.81), rgba(0, 0, 0, 0.04) 100%);
    position: absolute;
    top: 0;
    left: 0;
}

[Hình kết quả]



Đọc thêm về background-gradient: https://css-tricks.com/css3-gradients/

11          Responsive cho trang web


Tham khảo danh sách các kích thước màn hình dùng trong Bootstrap2, 3, 4:

Đây là các kích thước màn hình của Bootstrap 3:

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

Nên áp dụng theo kiểu mobile first và dùng min-width chứ không nên sử dụng cả max-widthmin-width. Tham khảo thêm tại đây: https://stackoverflow.com/questions/45772609/media-query-when-max-width-is-set-to-767px

Để ảnh nền phủ đầy phần tử, sử dụng thuộc tính background-size: cover.

Nên có luật *{} trong @media, để hiển thị vùng mã CSS tương ứng ra cửa sổ Developer Tools. Ví dụ:

@media (min-width: 768px){
*{}
.top-header {
    background: url(../images/bg02.jpg);
    background-size: cover;
}
}

Xử lý cho logo căn giữa:

– Sử dụng outline để quan sát vị trí của các phần tử

– Cho navbar-header không float, text-align căn giữa

– Bỏ chế độ float của navbar-brand

– Cho hình ảnh (img) hiển thị ở chế độ inline

/* tablet ipad*/
@media (min-width: 768px){
*{
    outline: 1px dashed red;
}

.container>.navbar-header {
    float: none;
    text-align: center;
}

.navbar>.container .navbar-brand {
    float: none;
}

.container>.navbar-header img {
    display: inline;
}

}
-----------
Cập nhật [02/10/2018]
-----------
Xem thêm: Tổng hợp các bài viết về Làm web
Xem thêm: Làm web (05) - Wordpress_cài đặt_Starter theme (01)