Laravel 5.6: Thiết kế giao diện Blade Master với BootStrap


Trong hướng dẫn này, các bạn sẽ được làm quen và phát triển giao diện website trên nền tảng của Laravel 5.6 với Framework Bootstrap. Ở đây, trước mắt chúng ta chỉ sử dụng Route và View.

Click vào đây hoặc ảnh trên để xem hướng dẫn chi tiết

Nội dung của Route:

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

Trang Layout Master:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo Laravel 5.6</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">	
	<h1>Hello World</h1>
	<nav class="navbar navbar-default" role="navigation">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Trang chủ</a>
			</div>
	
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav">
					<li><a href="#">Giới thiệu</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tin tức <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</li>
					<li><a href="#">Trợ giúp</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Đăng ký</a></li>
					<li><a href="#">Đăng nhập</a></li>
					
				</ul>
			</div><!-- /.navbar-collapse -->
		</div>
	</nav>
	
	<div class="row">
		<div class="col-md-8">
			@yield('content')
		</div>
		<div class="col-md-4">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Menu phải</h3>
				</div>
				<div class="panel-body">
					<p>
						Phần nội dung
					</p>
				</div>
			</div>
		</div>
	</div>
</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Trang Index:

@extends('layout.master')
@section('content')
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">Nội dung</h3>
		</div>
		<div class="panel-body">
			<p>
				Phần nội dung
			</p>
		</div>
	</div>
@endsection


Bình luận

Đăng ký là thành viên để tham gia bình luận

Đỗ Hữu Nhật
Đỗ Hữu Nhật 2 tháng trước

Em cảm ơn thầy nhiều ạ