如何在 Laravel 网站中使用移动视图平板电脑视图和桌面视图

Question

I am newbie and i am working on laravel and want to convert my app to responsive websites.我是新手，我正在使用 laravel 并希望将我的应用程序转换为响应式网站。 Here is an example how to convert in laravel template view.这是一个如何在 Laravel 模板视图中转换的示例。

I am little bit confused about我有点困惑

Use below code as an example使用以下代码作为示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Answer 1

Create layouts folder and master.blade.php named file in layouts folder.在 layouts 文件夹中创建layouts文件夹和master.blade.php命名文件。

copy these code into master.blade.php将这些代码复制到 master.blade.php 中

<!DOCTYPE html>
<html>

<head>
    <!-- -------------- Meta and Title -------------- -->
    <meta charset="utf-8">
    <title> Bootstrap Example </title>
    <meta name="description" content="HRMS">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf_token" content="{{csrf_token()}}">

    <!-- -------------- Fonts -------------- -->
  


    <!-- -------------- Icomoon -------------- -->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/fonts/icomoon/icomoon.css') }}">

    @include('includes.header')     
    
        @yield('content')

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108812473-2"></script>
<script>
    // write you script here
</script>

<script src="{{ asset('assets/js/pages/allcp_forms-elements.js') }}"></script>
</body>
</html>

Create header.blade.php in includes folder and create your menu or header in file.在includes文件夹中创建header.blade.php在文件中创建菜单或标题。

Create home.blade.php in anywhere in your view folder and copy these code to them在视图文件夹中的任何位置创建home.blade.php并将这些代码复制到它们

@extends('layouts.master')
@section('content')
<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>
@endsection

Point your controller home or index method to home.blade.php .将您的控制器home或index方法指向home.blade.php 。 You are using bootstrap class or template so your website will be responsible.您正在使用引导程序类或模板，因此您的网站将负责。

如何在 Laravel 网站中使用移动视图平板电脑视图和桌面视图

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-11-01 00:09:15

如何在 Laravel 网站中使用移动视图平板电脑视图和桌面视图

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-11-01 00:09:15

解决方案1
2 已采纳 2021-11-01 00:09:15