واگذاری مالیک دامنه
، محتوا و سورس
وب سایت
لیداوب
   در حال بارگزاری ...

آموزش ایجاد یک طرح پنل بوت استرپ

توسط الهه قنبری
آخرین به روز رسانی پنجشنبه 14 فروردین 1399

در این آموزش از لیداوب قصد داریم تا یک طرح پنل بوت استرپ را طراحی کرده و آموزش دهیم. در ادامه با ما همراه باشید.

پنل‌های بوت استرپ یک روش خوب برای ایجاد فضا و ارائه طرح‌های بصری زیبا برای کاربران هستند. در نسخه ۴ این فریم ورک، از Bootstrap Card استفاده می‌کنیم که یک عنصر طرح مناسب نیز است. در این آموزش به ساخت یک طرح پنل بوت استرپ برای برای طراحی بهتر صفحات وب خواهیم پرداخت، سپس به آن مرکزیت داده و عناصر navigation را به partial view خود منتقل می‌کنیم و همچنین لینکی برای لاگ کردن کاربران نیز ایجاد می‌کنیم که بتوانیم فعالیت‌های آن‌ها را مشاهده کنیم.

ساخت طرح پنل بوت استرپ

ما در برنامه خود از پنل‌های بوت استرپ استفاده می‌کنیم و همانطور که می‌دانید، پنل یک جعبه حاشیه گذاری شده است و دارای padding مشخصی از اطراف محتوا نیز است. در صفحه اصلی برنامه، فضای زیادی بین پنل‌ها وجود ندارد. می‌توانیم از مارک آپ زیر برای ایجاد طرح بصری بهتر و تاثیرگذارتر استفاده کنیم.

index.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
@foreach($threads as $thread)
<div class="panel panel-default">
<div class="panel-heading">
<div class="level">
<h4 class="flex">
<a href="{{ $thread->path() }}">{{ $thread->title }}</a>
</h4>
<a href="{{$thread->path()}}">
<strong>{{$thread->replies_count}} {{ str_plural('reply', $thread->replies_count) }}</strong>
</a>
</div>
</div>
<div class="panel-body">
<div class="body">
{{ $thread->body }}
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
@endsection

چگونه می‌توان به یک پنل بوت استرپ مرکزیت داد

در حال حاضر، صفحه اصلی برنامه ایجاد شده است. کاری که ما اکنون باید انجام دهیم، مرکزیت دادن به طرح پنل است. برای مرکزیت دادن به پنل بوت استرپ، می‌توانید آن را درون یک div قرار داده و از کلاس .offset در بوت استرپ استفاده کنید.

show.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="page-header">
<h1>
{{ $profileUser->name }}
<small>registered {{ $profileUser->created_at->diffForHumans() }}</small>
</h1>
</div>
@foreach($threads as $thread)
<div class="panel panel-default">
<div class="panel-heading">
<div class="level">
<span class="flex">
<a href="{{ route('profile', $thread->creator) }}">{{ $thread->creator->name }}</a> posted:
{{ $thread->title }}
</span>
<span>{{$thread->created_at->diffForHumans()}}</span>
</div>
</div>
<div class="panel-body">
{{ $thread->body }}
</div>
</div>
@endforeach
{{ $threads->links() }}
</div>
</div>
</div>

@endsection

ایجاد یک Navigation Partial View

می‌توانیم با انتقال عناصر navigation به فایل partial view خود، نمای طرح app.blade.php خود را ثابت کنیم. باید app.blade.php را به روز ‌کنیم تا بتوانیم یک فراخوانی ساده به @include(‘layout.nav’) انجام دهیم، سپس مارک آپ مربوط به عملیات navigation را در فایل nav.blade.php قرار ‌دهیم.

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<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="{{ asset('css/app.css') }}" rel="stylesheet">
 
    <!-- My Basic Styles -->
    <style>
        body {
            padding-bottom: 100px;
        }
 
        .level {
            display: flex;
            align-items: center;
        }
 
        .flex {
            flex: 1;
        }
    </style>
</head>
<body>
<div id="app">
    @include('layouts.nav')
 
    @yield('content')
</div>
 
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

nav.blade.php

<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" aria-expanded="false">
                <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('/threads') }}">
                {{ config('app.name', 'Laravel') }}
            </a>
        </div>
 
        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <!-- Left Side Of Navbar -->
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Browse <span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li><a href="/threads">All Threads</a></li>
                        @if(auth()->check())
                            <li><a href="/threads?by={{ auth()->user()->name }}">My Threads</a></li>
                        @endif
                        <li><a href="/threads?popular=1">Popular</a></li>
                    </ul>
                </li>
                <li><a href="/threads/create">New Thread</a></li>
                &nbsp;<li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Channels
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        @foreach($channels as $channel)
                            <li><a href="/threads/{{$channel->slug}}">{{$channel->name}}</a></li>
                        @endforeach
                    </ul>
                </li>
            </ul>
 
            <!-- Right Side Of Navbar -->
            <ul class="nav navbar-nav navbar-right">
                <!-- Authentication Links -->
                @guest
                    <li><a href="{{ route('login') }}">Login</a></li>
                    <li><a href="{{ route('register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>
 
                        <ul class="dropdown-menu">
                            <li>
                                <a href="{{ route('logout') }}"
                                   onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                    Logout
                                </a>
 
                                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                    {{ csrf_field() }}
                                </form>
                            </li>
                        </ul>
                    </li>
                @endguest
            </ul>
        </div>
    </div>
</nav>

ایجاد یک لینک پروفایل برای لاگ کردن کاربران

همچنین، می‌توانیم لینکی را به سمت راست منوی navigation خود اضافه کنیم. اکنون، برنامه بررسی می‌کند که کاربر وارد سیستم شده است یا خیر، در صورت ورود، یک لینک خروج نمایش داده می‌شود. یک لینک دیگر نیز برای کاربران وارد شده اضافه می‌کنیم که مستقیماً به پروفایل آن‌ها اشاره می‌کند تا از این طریق بتوان تمام فعالیت‌های مربوط به آن‌ها را مشاهده کرد. کد موجود در nav.blade.php را پیدا کرده و آن را مشخص می‌کنیم. در صورتی که از قبل تنظیم کنیم، می‌توانیم به یک مسیر نامگذاری شده لینک دهیم.

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

<ul class="dropdown-menu">
<li><a href="{{ route('profile', Auth::user()) }}">My Threads</a></li>

با روش‌ها و کدهایی که در این مقاله آموزشی ارائه شد، می‌توان پنل‌های بوت استرپ زیبا و کارآمد طراحی کرد. امیدوارم بتوانید از مطالب این آموزش در طراحی اپلیکیشن‌های تحت وب خود بهره ببرید. با سایر آموزش‌های طراحی سایت ما در لیداوب همراه باشید.

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
ثبت امتیاز
5 (1 رای)

   لطفا صبر کنید ...