387 lines
17 KiB
PHP
387 lines
17 KiB
PHP
|
@extends('layout.master')
|
|||
|
|
|
|||
|
|
@push('plugin-styles')
|
|||
|
|
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
|||
|
|
@endpush
|
|||
|
|
|
|||
|
|
@section('content')
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
|||
|
|
<h1 class="page-title">Navbar</h1>
|
|||
|
|
<p class="lead">Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. Read the <a href="https://getbootstrap.com/docs/5.3/components/navbar/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="default">Basic example</h4>
|
|||
|
|
<p class="mb-3">Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the <code>lg</code> (large) breakpoint.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|||
|
|
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
|||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
|
|||
|
|
<ul class="navbar-nav me-auto">
|
|||
|
|
<li class="nav-item active">
|
|||
|
|
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">Blog</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown">
|
|||
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|||
|
|
Dropdown
|
|||
|
|
</a>
|
|||
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|||
|
|
<a class="dropdown-item" href="javascript:;">Action</a>
|
|||
|
|
<a class="dropdown-item" href="javascript:;">Another action</a>
|
|||
|
|
<div class="dropdown-divider"></div>
|
|||
|
|
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<form class="d-flex">
|
|||
|
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|||
|
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="Default">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|||
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
|
|||
|
|
<ul class="navbar-nav me-auto">
|
|||
|
|
<li class="nav-item active">
|
|||
|
|
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#">Link</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown">
|
|||
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|||
|
|
Dropdown
|
|||
|
|
</a>
|
|||
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|||
|
|
<a class="dropdown-item" href="#">Action</a>
|
|||
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|||
|
|
<div class="dropdown-divider"></div>
|
|||
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<form class="d-flex">
|
|||
|
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|||
|
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</nav></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="brand">Brand</h4>
|
|||
|
|
<p class="mb-3">The <code>.navbar-brand</code> can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<!-- As a link -->
|
|||
|
|
<nav class="navbar navbar-light bg-light mb-3">
|
|||
|
|
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
|||
|
|
</nav>
|
|||
|
|
<!-- As a heading -->
|
|||
|
|
<nav class="navbar navbar-light bg-light">
|
|||
|
|
<span class="navbar-brand mb-0 h1">Navbar</span>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="Brand">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- As a link -->
|
|||
|
|
<nav class="navbar navbar-light bg-light">
|
|||
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|||
|
|
</nav>
|
|||
|
|
<!-- As a heading -->
|
|||
|
|
<nav class="navbar navbar-light bg-light">
|
|||
|
|
<span class="navbar-brand mb-0 h1">Navbar</span>
|
|||
|
|
</nav></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Brand">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
<p class="mb-3">Adding images to the <code>.navbar-brand</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<!-- Just an image -->
|
|||
|
|
<nav class="navbar navbar-light bg-light">
|
|||
|
|
<a class="navbar-brand" href="javascript:;">
|
|||
|
|
<img src="{{ url('assets/images/others/logo-placeholder.png') }}" width="30" height="30" alt="">
|
|||
|
|
</a>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="brandImage">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Just an image -->
|
|||
|
|
<nav class="navbar navbar-light bg-light">
|
|||
|
|
<a class="navbar-brand" href="#">
|
|||
|
|
<img src="..." width="30" height="30" alt="">
|
|||
|
|
</a>
|
|||
|
|
</nav></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#brandImage">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
<div class="example">
|
|||
|
|
<!-- Image and text -->
|
|||
|
|
<nav class="navbar navbar-light bg-light">
|
|||
|
|
<a class="navbar-brand" href="javascript:;">
|
|||
|
|
<img src="{{ url('assets/images/others/logo-placeholder.png') }}" width="30" height="30" class="d-inline-block align-top" alt="">
|
|||
|
|
Logo
|
|||
|
|
</a>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="brandImgText">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Image and text -->
|
|||
|
|
<nav class="navbar navbar-light bg-light">
|
|||
|
|
<a class="navbar-brand" href="#">
|
|||
|
|
<img src="..." width="30" height="30" class="d-inline-block align-top" alt="">
|
|||
|
|
Logo
|
|||
|
|
</a>
|
|||
|
|
</nav></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#brandImgText">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="forms1">Forms</h4>
|
|||
|
|
<p class="mb-3">Place various form controls and components within a navbar.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<nav class="navbar navbar-light bg-light">
|
|||
|
|
<form class="d-flex ms-auto">
|
|||
|
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|||
|
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
|||
|
|
</form>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="Forms1">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-light bg-light">
|
|||
|
|
<form class="d-flex ms-auto">
|
|||
|
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|||
|
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
|||
|
|
</form>
|
|||
|
|
</nav></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Forms1">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="text">Text</h4>
|
|||
|
|
<p class="mb-3">Navbars may contain bits of text with the help of <code>.navbar-text</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<nav class="navbar navbar-light bg-light">
|
|||
|
|
<span class="navbar-text">
|
|||
|
|
Navbar text with an inline element
|
|||
|
|
</span>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="Text">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-light bg-light">
|
|||
|
|
<span class="navbar-text">
|
|||
|
|
Navbar text with an inline element
|
|||
|
|
</span>
|
|||
|
|
</nav></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Text">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<h4 id="color-schemes">Color schemes</h4>
|
|||
|
|
<p class="mb-3">Theming the navbar has never been easier thanks to the combination of theming classes and <code>background-color</code> utilities. Choose from <code>.navbar-light</code> for use with light background colors, or <code>.navbar-dark</code> for dark background colors. Then, customize with <code>.bg-*</code> utilities.</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
|
|||
|
|
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
|||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="collapse navbar-collapse" id="navbarColor01">
|
|||
|
|
<ul class="navbar-nav me-auto">
|
|||
|
|
<li class="nav-item active">
|
|||
|
|
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">Features</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">Pricing</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">About</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<form class="d-flex">
|
|||
|
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|||
|
|
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
|
|||
|
|
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
|||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="collapse navbar-collapse" id="navbarColor02">
|
|||
|
|
<ul class="navbar-nav me-auto">
|
|||
|
|
<li class="nav-item active">
|
|||
|
|
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">Features</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">Pricing</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">About</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<form class="d-flex">
|
|||
|
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|||
|
|
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
|
|||
|
|
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
|||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="collapse navbar-collapse" id="navbarColor03">
|
|||
|
|
<ul class="navbar-nav me-auto">
|
|||
|
|
<li class="nav-item active">
|
|||
|
|
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">Features</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">Pricing</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">About</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<form class="d-flex">
|
|||
|
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|||
|
|
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="colorSchemes">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-dark bg-dark">
|
|||
|
|
<!-- Navbar content -->
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<nav class="navbar navbar-dark bg-primary">
|
|||
|
|
<!-- Navbar content -->
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<nav class="navbar navbar-light bg-danger">
|
|||
|
|
<!-- Navbar content -->
|
|||
|
|
</nav></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#colorSchemes">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h4 id="toggler">Toggler</h4>
|
|||
|
|
<p class="mb-3">Below the example of toggler</p>
|
|||
|
|
<div class="example">
|
|||
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|||
|
|
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
|||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
|||
|
|
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
|||
|
|
<li class="nav-item active">
|
|||
|
|
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="javascript:;">Link</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<form class="d-flex">
|
|||
|
|
<input class="form-control me-sm-2" type="search" placeholder="Search">
|
|||
|
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<figure class="highlight" id="Toggler">
|
|||
|
|
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|||
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
|||
|
|
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
|||
|
|
<li class="nav-item active">
|
|||
|
|
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#">Link</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<form class="d-flex">
|
|||
|
|
<input class="form-control me-sm-2" type="search" placeholder="Search">
|
|||
|
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</nav></script></code></pre>
|
|||
|
|
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Toggler">copy</button>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-2 content-nav-wrapper">
|
|||
|
|
<ul class="nav content-nav d-flex flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#default" class="nav-link">Default</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#brand" class="nav-link">Brand</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#forms" class="nav-link">Forms</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#text" class="nav-link">Text</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#color-schemes" class="nav-link">Color schemes</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#toggler" class="nav-link">Toggler</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
@endsection
|
|||
|
|
|
|||
|
|
@push('plugin-scripts')
|
|||
|
|
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
|||
|
|
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
|||
|
|
@endpush
|