Bootstrap lề dưới

Question

Delete class

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

2 and instead by

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

3 in the nav tag, ta cần đặt thẻ

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

4 padding-top. 0

mb-5 is class of bootstrap 4. viết tắt của

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

5

You will have the results after

At in backend you process to create the following list nhé

Ở phần Bài viết cũng vậy, viết nhiều bài càng hay, mục đích ở đây là demo cho nó xôm tụ

Sau khi đăng bài và tạo danh mục đầy đủ ra bên ngoài trang chủ sẽ như sau

There is a standard is full content for website

Mặc định để thêm menu cho wordpress ta cần phải khai báo trong các chức năng. php

Open functions. php add after

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' )); // đặt tên là Header Menu
}
add_action( 'init', 'register_my_menu' );

Menu có tên. header-menu
Nhãn là. Trình đơn tiêu đề

Sau đó bạn vào phần phụ trợ

Chọn Ngoại hình
Chọn Menu
Chọn danh mục muốn hiển thị menu
Add into menu, you can pull menu sang left to create a example. "Học đường khởi nghiệp"
Select Header Menu which mình has more register in function
Lưu lại

Để sử dụng menu thả xuống chuyên nghiệp ta cần đến 1 thư viện. wp-bootstrap-navwalker để hỗ trợ tạo menu thả xuống

Tải wp-bootstrap-navwalker

Giải nén và sao chép tập tin. lớp-wp-bootstrap-navwalker. php to the theme directory. Ke to add command after to functions. php

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

Mở tiêu đề tệp. php ta thấy menu được bao bọc bởi

<ul class="navbar-nav ml-auto>Nội dung Menu</ul>

Xoá menu đi và thêm chức năng sau

<?php 
    wp_nav_menu( array(
        'theme_location'  => 'header-menu', // Gọi menu đã đăng ký trong function
        'depth'           => 2,     // Cấu hình dropdown 2 cấp
        'container'       => false, // Thẻ div bọc menu
        'menu_class'      => 'navbar-nav ml-auto', // Class của nav bootstrap
        'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
        'walker'          => new WP_Bootstrap_Navwalker()
    ));
?>

Hàm

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

6 dùng để gọi menu trong Wordpress, sử dụng class WP_Bootstrap_Navwalker để cấu hình menu bootstrap đơn giản

Tiếp theo phiên bản thứ 3 là Bootstrap 4, nó được bổ sung hệ thống lưới Grid để thiết kế trang web Responsive. Trong bài viết Bootstrap là thứ mà chúng tôi đã hướng dẫn cơ bản về cách cài đặt và cách sử dụng bạn có thể xem lại. Trong khuôn khổ bài viết này SONMAWEB sẽ hướng dẫn sử dụng Bootstrap 4 để xây dựng nên một trang web đẹp và tiết kiệm thời gian nhất

Cách sử dụng Bootstrap 4

Trước tiên, bạn cần chạy chương trình này bằng cách sử dụng Notepad++ hoặc Sublime Text để lưu lại với tên là chỉ mục. html

<!DOCTYPE html>
<html lang="en">
<head>
<title> Ví dụ về Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
<h1>Tiêu đề của website</h1>
<p>Đây là phần mô tả trang web</p>
</div>

<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p> Nội dung</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p> Nội dung</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p> Nội dung</p>
</div>
</div>
</div>

</body>
</html>

Trong Bootstrap, bạn cần lưu ý các lớp sau

Vùng chứa. is not space in fixed width with size min-width. 1200px sẽ là 1140px
bình chứa chất lỏng. is not time width of full màn hình
col-sm-4. Hệ thống lưới sẽ được chia thành 12 cột. Khi set col-sm-4, get 12/4 = 3. Do đó một cột sẽ chiếm 3 cột
jumbotron là một hộp màu xám màu chứa xám văn bản, được sử dụng để tăng thêm sự chú ý cho văn bản trong đó

Cũng với ví dụ trên giờ sẽ thay đổi thành

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

0

Thêm một chút CSS để dễ dàng phân biệt

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

1

Thêm Menu

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

2

Tiếp theo sẽ thêm một chút mã CSS để trang trí đẹp hơn

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

3

Cuối cùng là thêm 3 cột ở Footer

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

4

Và sau khi thêm nội dung vào chúng ta sẽ có một trang web thiết kế bằng Bootstrap 4 gần như hoàn chỉnh

Bootstrap 4 là một Framework khá tuyệt vời để xây dựng trang web Frontend tiện lợi. Sử dụng Bootstrap, bạn sẽ không cần phải viết quá nhiều mã CSS hoặc sợ bị vỡ khung bởi mọi thứ đã được thiết kế hoàn hảo

programming bootstrap