laravel bootstrap navbar active - PHP (1)

📌 相关文章

📜 laravel bootstrap navbar active - PHP (1)

📅 最后修改于: 2023-12-03 15:32:32.951000 🧑 作者: Mango

Laravel Bootstrap Navbar Active - PHP

Bootstrap Navbar is a great way to create a navigation bar for a website. Laravel, being one of the most popular PHP frameworks, provides an easy way to integrate Bootstrap Navbar into a project.

One of the useful features of Bootstrap Navbar is the ability to highlight the active page in the navigation bar. This means that when a user visits a certain page, the corresponding link in the navigation bar will be highlighted as active. In this tutorial, we will learn how to implement this feature in a Laravel project.

Step 1: Install Laravel

Before we begin, we need to have Laravel installed on our system. If you haven't installed it yet, you can follow the steps given in the official Laravel documentation to install it.

Step 2: Install Bootstrap

Next, we need to install Bootstrap. We can do this using one of the many ways available, such as downloading it from the official website, including it via CDN, or installing it using a package manager like npm. For the purpose of this tutorial, we will use a CDN to include Bootstrap in our project.

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Navbar Active - Laravel</title>
	<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>

</body>
</html>

Step 3: Create Navbar

We can create Bootstrap Navbar by wrapping the appropriate HTML code around our links. We can also add the "active" class to the appropriate link using PHP.

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNav">
		<ul class="navbar-nav">
			<li class="nav-item <?= Request::path() == '/' ? 'active' : ''; ?>">
				<a class="nav-link" href="/">Home</a>
			</li>
			<li class="nav-item <?= Request::path() == 'about' ? 'active' : ''; ?>">
				<a class="nav-link" href="/about">About</a>
			</li>
			<li class="nav-item <?= Request::path() == 'contact' ? 'active' : ''; ?>">
				<a class="nav-link" href="/contact">Contact</a>
			</li>
		</ul>
	</div>
</nav>

Step 4: Testing

We can now test our code by creating the routes for our pages in Laravel and visiting them in the browser.

Route::get('/', function () {
    return view('home');
});

Route::get('/about', function () {
    return view('about');
});

Route::get('/contact', function () {
    return view('contact');
});

When we visit each page, the corresponding link in the navigation bar will be highlighted as active.

Conclusion

Bootstrap Navbar is a great way to create a navigation bar for a website. Laravel provides an easy way to integrate Bootstrap Navbar into a project. Implementing the "active" class in the navigation bar makes it easy for users to know which page they are on.