Cách thêm tệp css trong CodeIgniter 4

CodeIgniter sử dụng kiến ​​trúc Model-View-Controller (MVC) hoạt động trên kiến ​​trúc ba lớp, tất cả các lớp đều tách biệt. Trong CodeIgniter  bạn nên. css và. js nên được đặt trong thư mục CSS và JS

Trong hướng dẫn này, chúng tôi sẽ giải thích cách chúng tôi có thể sử dụng css và js bên ngoài trong CodeIgniter

Để tích hợp tệp css và js bên ngoài trong CodeIgniter, hãy thực hiện các bước sau

1. Tải xuống CodeIgniter từ trang web đó và giải nén chúng trong máy chủ cục bộ của bạn
2. Bây giờ hãy tạo thư mục css và js trong thư mục gốc của dự án của bạn
3. Sao chép của bạn. css trong thư mục CSS và sao chép. js trong thư mục JS
4. Đối với hàm base_url(), bạn phải tải trình trợ giúp URL trong hàm tạo của bộ điều khiển

//Loading url helper
$this->load->helper('url');

Bây giờ bạn có thể sử dụng hàm base_url() trong chế độ xem

Ghi chú. hàm base_url() in url cơ sở dự án của bạn. Trong nguồn xem, nó sẽ tạo url hoàn chỉnh

http://www.aorank.com/tutorial/codeigniter_css_and_js/css/style.css
http://www.aorank.com/tutorial/codeigniter_css_and_js/js/jquery.min.js 

Bạn cũng có thể tham khảo bản demo trực tiếp của chúng tôi hoặc tải xuống tệp Script. Giải nén các tệp đã tải xuống, lưu nó vào máy chủ cục bộ của bạn và chạy nó bằng đường dẫn đã cho

http://localhost/codeigniter_css_and_js/index.php/css_js_load

Tải xuống tập lệnh

Hướng dẫn Script chi tiết

Dưới đây là chi tiết về mã được sử dụng trong hướng dẫn này với lời giải thích phù hợp

Tập tin điều khiển. css_js_load. php

Trong bộ điều khiển, chỉ cần tải trình trợ giúp Url trong chế độ xem tải hàm tạo và hàm chỉ mục nơi css và js bên ngoài sẽ sử dụng

load->helper('url');
}

public function index() {

// View "css_js_view" Page.
$this->load->view('css_js_view');
}
}
?>

Xem tài liệu. css_js_view. php

Trong chế độ xem, tải CSS và js bằng liên kết và thẻ script

This div is shown by style.css file, which you will found in your project's root css folder.


This div is perform by script.js and jquery.min.js file, which you will found in your project's root js folder.
Click For Javascript

Tệp CSS. Phong cách. css

Tạo kiểu các phần tử HTML

body {
font-family: 'Raleway', sans-serif;
}
.main{
margin:0,auto;
}
.css {
position: absolute;
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid black;
margin-top: 8%;
margin-left: 10%;
}
.js {
display:none;
position: absolute;
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid black;
margin-left: 38%;
margin-top: 8%;
}
button#click {
margin-left: 45%;
margin-top: 22%;
}
.fg-button{
position: relative;
top: 0;
border-radius: 4;
font-size: 18px;
padding: 8px 28px;
text-decoration: none;
border: 0px solid;
cursor: pointer;
border-bottom-width: 3px;
outline: none;
-webkit-transition: 0.3s background;
-moz-transition: 0.3s background;
transition: 0.3s background;
}
.fg-button:active{
top: 2px;
}
.fg-button.teal{
color: #fff;
border-color: #04A5A1;
background-color: #08BBB7;
}
.fg-button.teal:hover{
background: #0ACFCB;
}

Tệp Javascript. kịch bản. js

Javascript trong đó jQuery chức năng chuyển đổi được sử dụng trong sự kiện nhấp chuột.

$('#click').click(function()
{
$('div.js').toggle(1000);
});

Phần kết luận

Đây là tất cả về cách chúng ta có thể sử dụng tệp CSS và js bên ngoài trong CodeIgniter. Hy vọng bạn thích nó, tiếp tục đọc các blog khác của chúng tôi

Làm cách nào để tải tệp CSS trong CodeIgniter 4?

Làm cách nào để sử dụng Bootstrap trong CodeIgniter 4?