让我简单介绍一下这个问题,一旦用户登录,我的网站上将有大约 20 个页面,我需要组织这些页面以使用相同的标题,所以我来到了决定在我使用 Laravel 框架时使用布局,将相同的标题分布在 20 页中似乎很愚蠢,如果我想进行更改,那将是地狱。
在 Bootstrap 中,我没有向任何选定的页面添加任何类型的活动类,它只是一个导航栏,我最近升级到 Bulma 框架,它需要在父选项卡上的活动类来显示孩子选项卡,一种父类和子类系统正在运行。
我不确定如何在布局中处理这个问题,我需要添加一个活动类,我还需要选择要显示的子导航。
我在下面添加了我的代码,我想知道是否有人可以告诉我如何解决这个问题?
下面的代码是我的整个页面,包括标题(<section class="hero is-danger inside-header">
)
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<title>{{ config('app.name') }} - Login</title>
<link rel="stylesheet" href="assets/public/1.0/frontend/css/bulma.css?id={{ time() }}" type="text/css">
<link rel="stylesheet" href="assets/public/1.0/frontend/css/override.css?id={{ time() }}" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="inside">
<section class="hero is-danger inside-header">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-5">
<p class="title header-title">Introducing {{ config('app.name') }}</p>
<p class="subtitle">Interacting with others...</p>
</div>
<div class="column is-3"></div>
<div class="column is-4">
<a class="button is-danger is-large is-disabled join-game-button">
<i class="fa fa-sign-in"></i> Join Game
</a>
<a class="button is-success is-large is-disabled users-online-button">
<i class="fa fa-users"></i> 10
</a>
<br><br>
<a class="button is-success is-large is-disabled platform-button">Platform: Closed Beta</a>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container">
<nav class="tabs is-boxed">
<ul>
<li class="is-active">
<a href="/documentation/overview/start/">
<i class="fa fa-user"></i> {{ Auth::user()->username }}
</a>
</li>
<li>
<a href="http://bulma.io/documentation/modifiers/syntax">
<i class="fa fa-university"></i> Business
</a>
</li>
<li>
<a href="http://bulma.io/documentation/columns/basics">
<i class="fa fa-user-secret"></i> Gangs
</a>
</li>
<li>
<a href="http://bulma.io/documentation/elements/box/">
<i class="fa fa-users"></i> Community
</a>
</li>
<li>
<a href="http://bulma.io/documentation/components/breadcrumb/">
<i class="fa fa-shopping-cart"></i> Store
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<nav class="navbar has-shadow">
<div class="container">
<div class="navbar-tabs">
<a class="navbar-item is-tab is-active" href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Security</a>
</div>
</div>
</nav>
<div class="container holorp-container-fixed">
<br>
<div class="columns is-desktop">
<div class="column is-8">
<div class="message is-danger">
<div class="message-body">
<p>not sure what can even go here...</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="message is-success">
<p class="message-header">Change Log <span class="is-pulled-right"><i class="fa fa-user"></i></span></p>
<div class="message-body">
<span class="tag is-dark">26/09/17</span> <code>Updates the platform with a fresh design</code><br>
<span class="tag is-dark">26/09/17</span> <code>Upgraded from Laravel 5.4 to 5.5</code><br>
<span class="tag is-dark">26/09/17</span> <code>Added core features to the admin panel</code><br>
<span class="tag is-dark">26/09/17</span> <code>Did something, can't even remember</code><br>
<br>
<p><a class="modal-button" data-target="#modal-forgotPassword" id="forgot-pw-modal">View all recent changes</a></p>
</div>
</div>
</div>
</div>
</div>
</body>