• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

GhazaliTajuddin.com

Another Kuantan Blogger

  • Home
  • Blog
    • Kuantan
    • Foods
    • Technology
    • Health
  • Stock Photography
    • Senarai Microstock Agency
    • Membuka akaun contributor Shutterstock.com
    • Tips untuk 10 keping gambar pertama Shutterstock.com
    • Mengapa Shutterstock.com reject gambar / submission
    • Model Release
    • Bagaimana withdraw earning daripada Fotolia
    • Bagaimana untuk mengisi keyword kepada imej dengan menggunakan Adobe Photoshop
You are here: Home / General / Laravel 5.3 Bootstraps Installation

Laravel 5.3 Bootstraps Installation

November 21, 2016 by ghazalitajuddin Leave a Comment

Sebenarnya tiada beza nak install Bootstrap dalam Laravel dengan dalam applikasi web html yang biasa kita buat. Begitu juga Laravel versi lain.

Apa yang penting kedudukan file berkenaan hendaklah betul.

Laravel menggunakan sistem template blade yang memudahkan kita untuk menguruskan coding templating applikasi.

Dalam sistem template blade biasanya kita akan create master layout. Master layout ni umpama blueprint layout kita la. Dimana kedudukan header, footer, sidebar, menu etc.

So biasanya kita akan ubah layout seperti berikut:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<!-- Latest compiled and minified JavaScript -->

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Contoh diatas menggunakan cdn Bootstrap dan jQuery.

Apa yang penting:

jQuery hendaklah dinyatakan terlebih dahulu berbanding bootstrap js. Mesti ikut susunan!

Contoh code penuh seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Styles 
<link href="/css/app.css" rel="stylesheet">

-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css">


<!-- Latest compiled and minified JavaScript -->

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">

<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>

<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
&nbsp;

</ul>

<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">

<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ url('/login') }}">Login</a></li>
<li><a href="{{ url('/register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>

<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>

<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>

</ul>
</li>
@endif

</ul>
</div>
</div>
</nav>

@yield('content')
</div>

<!-- Scripts

<script src="/js/app.js"></script>-->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>

 

Filed Under: General, Kuantan Web Developer, Technology Tagged With: 5.3, bootstrap, JQUERY, laravel

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

“Solat. Sabar. Syukur. Senyum. Sedekah.”

For Collaboration, Events & Review, kindly contact me at +6016[-]9212092 or click Whatsapp button on this page.

Sponsor

Recent Posts

BadMethodCallException Method Illuminate\Database\Eloquent\Collection::roles does not exist.

User Roles And Permissions Without Package Laravel 10

Laravel Many To Many Relationship

Makan malam bersama keluarga di Awangan Palace

Sarapan pagi di Warung Gulai Kawah

Recent Comments

  • helmi on Personal Tips Berhenti Merokok
  • ghazalitajuddin on Personal Tips Berhenti Merokok
  • helmi on Personal Tips Berhenti Merokok
  • ghazalitajuddin on Nasi Lemak Kukus Restoran Zaman. Otai masih berbisa.
  • ghazalitajuddin on Air tangki radiator Proton Exora cepat kering? Cuba tukar penutup radiator!
  • Mal on Nasi Lemak Kukus Restoran Zaman. Otai masih berbisa.
  • Firdaus on Air tangki radiator Proton Exora cepat kering? Cuba tukar penutup radiator!

My Link

  • Takaful Insurance Web

JJCM

Roti Canai Pulau Gerai Mat Zam-Zam

Diet snack untuk abang-abang kacak

Patin Tempoyak Frozen Resepi Temerloh

Aneka Kuih Tradisional

I Am Donut

Tags

bebas rokok berhenti merokok breakfast Controller Framework Gezzeg Photography & Design health jalan-jalan cari makan jalan-jalan cari makan kuantan jjcm jjcm kuantan Jurufoto Kuantan Kuantan Kuantan Photographer kuantan programmer kuantan web developer kuantan webmaster laravel merokok merbahayakan kesihatan model MVC nikmat rokok OOP Pahang Pahangtourism pahang tourism Photo Manipulation PHP rajalanun retired smoking revisit pahang 2018 shutterstock stop smoking stop smoking tips stop smoking withdrawal symptom tips tips berhenti merokok View visit malaysia 2020 visit pahang visitpahang white wordpress yii Yii Framework

Recent Posts

  • BadMethodCallException Method Illuminate\Database\Eloquent\Collection::roles does not exist.
  • User Roles And Permissions Without Package Laravel 10
  • Laravel Many To Many Relationship
  • Makan malam bersama keluarga di Awangan Palace
  • Sarapan pagi di Warung Gulai Kawah

Copyright © 2025 — Ghazali Tajuddin • All rights reserved. •