Trong hướng dẫn lớn này, bạn sẽ hướng dẫn bạn cách tạo một mẫu quản trị đáp ứng bằng Light Bootstrap Dashboard(LBD) trên Bootstrap 4 Show
Tất cả các tệp nguồn đều có sẵn trên Github và trang web của chúng tôi để bạn có thể bắt đầu sử dụng chúng ngay lập tức và miễn phí Điều đầu tiên bạn nên làm là tải xuống LBD Chúng tôi sẽ sử dụng tệp mẫu làm ví dụ cho quản trị viên WordPress. Ở phần cuối của hướng dẫn này, bạn sẽ nhận được một bản sao cho
Ồ. và mọi thứ sẽ được đáp ứng, tất nhiên rồi 😁 Điều đó đang được nói. hãy bắt đầu nào 
Thêm biểu tượng điều hướng vào bảng điều khiểnTại thời điểm này, trang mẫu của chúng tôi trông như thế này Điểm bắt đầu với mẫu. html
Bước 1. Thay đổi tên trangChuyển đến trình soạn thảo văn bản và mở mẫu. html. Nhân tiện, tôi đang sử dụng Atom làm trình soạn thảo văn bản Tôi đã đổi tên trang thành Creative Tim’s Blog <div class=”logo”>
<a href=”https://www.creative-tim.com" class=”simple-text”>
Creative Tim’s Blog
</a>
</div>Bước 2. Hãy thêm biểu tượng làm mới
Hãy chuyển đến Font Awesome và nhận biểu tượng làm mới Đối với biểu tượng làm mới, tôi sẽ chỉ thay thế biểu tượng bảng điều khiển Thay thế biểu tượng bảng điều khiển
WordPress có trang nằm bên trong nội dung. Trong bảng điều khiển của chúng tôi, chúng tôi có vị trí bên trong thanh điều hướng Tôi sẽ lấy nó ra khỏi điều hướng của chúng tôi và chúng tôi sẽ thêm nó sau vào bên trong nội dung để nó trông giống như WP Vì vậy, hiện tại, tôi sẽ chỉ xóa Xóa hàng đã chọn
Bước 4. Thêm biểu tượng bình luậnTôi sẽ sử dụng biểu tượng sau đây <ul class=”nav navbar-nav navbar-left”> <li> <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”> <i class=”fa fa-refresh”></i> 10 </a> </li>0 To add additional icons, duplicate the refresh icon area within <li> <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”> <i class=”fa fa-refresh”></i> 10 </a> </li>
Bước 5. Thêm nhiều biểu tượng ❤Biểu tượng tôi sẽ sử dụng. <ul class=”nav navbar-nav navbar-left”> <li> <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”> <i class=”fa fa-refresh”></i> 10 </a> </li>0
Bước 6. Thêm nút SEOỞ đây chúng tôi chỉ sử dụng văn bản <li> <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”> SEO </a> </li> Thanh điều hướng bên trái sẽ trông như thế này Mã cho biểu tượng thanh điều hướng
Tạo lại Menu thả xuống từ Thanh điều hướngGodaddy, Godaddy. Chúng tôi nhận được cái này Bước 7. Trình đơn thả xuốngChúng tôi đã có một menu thả xuống đẹp mắt trong bảng điều khiển của mình. html để chúng tôi có thể sử dụng nó trong mẫu của mình sao chép cái này từ bảng điều khiển. html và dán nó vào mẫu. html Thanh điều hướng trong mẫu của chúng tôi. html Bạn có thể tùy chỉnh điều này theo cách bạn muốn. Công việc Navbar của chúng ta hiện đã xong Trình đơn thả xuống
Bước 8. Nghỉ giải lao
Khu vực nội dung bảng điều khiểnChúng tôi có các phần như Bản nháp nhanh, Sơ lược hoặc Hoạt động Bản nháp nhanh có một thẻ chứa một đầu vào, một vùng văn bản và một nút Lưu bản nháp Chúng tôi có cái này trong hồ sơ người dùng của mình và chúng tôi có thể sử dụng thẻ bên trái Thẻ hồ sơ người dùng
Bước 9. Sao chép thẻ từ người dùng. html vào mẫu của bạn. html
Mẫu của bạn sẽ trông như thế này Lưu ý rằng chúng tôi đã sử dụng cho ví dụ này một “col-md-6”
Bước 10. Hãy xóa một số biểu mẫu quá tải 😈Đối với thẻ này, chúng tôi cần tiêu đề, vùng văn bản và nút. Mã cuối cùng cho việc này
Nó sẽ giống như thế này
Bước 11. Tạo lại trong nháy mắt Khu vực
Đối với điều này, chúng tôi sẽ sử dụng một số biểu tượng đột quỵ. Tôi thích chúng và chúng có sẵn trong trang tổng quan này. Bạn có thể chọn các biểu tượng từ các biểu tượng. html
Mật mã
Bước 12. Hãy thêm một số liên kết vào văn bảnBước 13. CSS cho các biểu tượng lớn hơn và tốt hơnĐiều đầu tiên ở đây là tạo một tệp CSS mới. Của tôi được gọi là phong cách của tôi. css Sau khi bạn tạo tệp này, hãy thêm nó vào mẫu của bạn. html
Thêm một lớp mới trong phần thẻ lướt qua Và bây giờ có vẻ tốt hơn. 😀
Bước 14. Thêm phần footer cho phiên bản WordPressĐây là phần đầu tiên của chúng tôi trong hướng dẫn. Chúng tôi rất vui khi biết phản hồi của bạn và nếu bạn có bất kỳ ý tưởng nào về cách cải thiện điều này, vui lòng cho chúng tôi biết Quản trị viên bootstrap là gì?Mẫu dành cho quản trị viên chỉ đơn giản là Phần đánh dấu HTML của các thiết kế phù hợp với các ứng dụng phía quản trị viên . Các mẫu quản trị được trang bị các thành phần UI, widget, biểu mẫu, bảng, biểu đồ, trang và ứng dụng mạnh mẽ.
Công dụng của bảng quản trị trong website là gì?Bảng quản trị cho phép quản trị viên của ứng dụng, trang web hoặc hệ thống CNTT quản lý cấu hình, cài đặt, nội dung và tính năng của ứng dụng, đồng thời thực hiện các chức năng giám sát quan trọng đối với doanh nghiệp. It allows them to view the state of the platform and take any action in the performance of their duties.
Làm cách nào để tạo bảng quản trị PHP?Làm theo các bước để tạo trang đăng nhập quản trị bằng PHP Tiếp cận. Đảm bảo bạn đã cài đặt XAMPP hoặc WAMP trên máy Windows của mình. . Tạo nên cơ sở dữ liệu. Đầu tiên, chúng tôi sẽ tạo một cơ sở dữ liệu có tên 'geeksforgeeks' (bạn có thể đặt bất kỳ tên nào cho cơ sở dữ liệu của mình) Làm cách nào để tạo bảng điều khiển quản trị viên trong JSP?Tạo trang tổng quan mới
. use /{context_root}/dashboard/app/entry/run. jsp . Ví dụ: chạy URL http. //máy chủ cục bộ. 8888/bảng điều khiển/ứng dụng/mục nhập/chạy. jsp và JDashboard sẽ được mở với một bảng điều khiển trống mới trong đó. Sau đó, bạn có thể bắt đầu xây dựng trang tổng quan của mình. |
