Đào tạo Tin học Trực tuyến

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


Cập nhật: 6 tháng trước
Bài viết ngẫu nhiên:

   Giới thiệu và hướng dẫn cài đặt công cụ Komodo Edit 9.0.1 và Aptana Studio 3.0 lập trình PHP và giao diện Website

   Cấu hình và gửi thư điện tử (Email) với Gmail trong Laravel

   Lập trình hướng đối tượng với PHP và MySql

   Bootstrap 4.0: Bài 2. Thiết lập hệ thống lưới Grid System

   Một số thẻ và Type quan trọng với HTML5 cần chú ý trong quá trình thiết kế website

   Giải pháp chuyển đổi Cơ sở Dữ liệu thông qua chuẩn XML


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

Xem thêm

   Bạn sẽ chọn ngành nào phù hợp với lĩnh vực Công nghệ Thông tin?

   Bạn hiểu thế nào là nghề lập trình? để bước vào nghề lập trình thì phải học những gì?

   Lập trình máy tính là gì? Các ngôn ngữ lập trình, phát triển phần mềm

   Tại sao bạn phải hiểu và có kỹ năng về lập trình hướng đối tượng?

   Xử lý hình ảnh (images) với Bootstrap CSS FrameWork phiên bản 4.x

   Để học lập trình bạn nên lựa chọn ngôn ngữ lập trình nào?

   Top 25 bài giảng có số lượt xem cao nhất thời điểm hiện tại

   Có gì khác biệt giữa HTML và HTML5?

   5 yếu tố quan trọng của định hướng thị giác trong thiết kế web

   Một số thẻ và Type quan trọng với HTML5 cần chú ý trong quá trình thiết kế website

   Xử lý text với Typography trong Bootstrap 4 CSS FrameWork

   Bootstrap 4.0: Bài 2. Thiết lập hệ thống lưới Grid System

   Bootstrap 4.0: Bài 1. Giới thiệu và các thiết lập cơ bản về công cụ, css, javascript

Xem nhiều nhất

   Giáo trình hướng dẫn Microsoft PowerPoint 2016 từ cơ bản đến nâng cao

   Hệ thống bài giảng e-Learning lớp Ứng dụng CNTT và các phần mềm vào đổi mới phương pháp dạy và học

   Thực hành biên tập, thiết kế, chỉnh sửa Videos bằng Adobe Premiere

   Thiết lập hiệu ứng trống đồng quay trong Microsoft PowerPoint

   Xây dựng Website tin tức bằng PHP và MySql theo phương pháp lập trình hướng đối tượng (mysqli Object Oriented)

   Thực hành sử dụng phần mềm thiết kế đồ họa Adobe Illustrator

   Trọn bộ Giáo trình Microsoft Word 2016 từ cơ bản đến nâng cao

   Cài đặt và sử dụng tính năng mới của Office 365 trên Office 2016

   Tạo câu hỏi trắc nghiệm với siêu liên kết (hyperlink) và Trigger với PowerPoint 2016

   Hướng dẫn thu âm, chỉnh sửa âm thanh, tăng giảm tone nhạc bằng phần mềm Adobe Audition CC

   Bài giảng Microsoft PowerPoint 2013 và 2016 từ cơ bản đến nâng cao

   Thiết kế trò chơi ô chữ trong powerpoint (download miễn phí)

   Dòng chữ chạy liên tục từ trái qua phải và đồng hồ đếm ngược trong PowerPoint

   Thực hành sử dụng phần mềm thiết kế đồ họa Corel Draw

   Full Download phần mềm biên soạn bài giảng e-Learning iSpring Sute phiên bản 8.1

   Ghép ảnh đôi bàn tay nâng bong bóng có ghép hình ảnh với Adobe PhotoShop CC