Встроенные рамки php и mini.css?
Я начал разработку веб-проекта с использованием рамки mini.css : моя веб-страница
Я не могу сделать <header> меню или формы для работы со всеми устройствами. Они не реагируют при использовании некоторого встроенного PHP-кода.
Может кто-то подтвердить это и дать мне еще один CSS-фреймворк, который работает в таких условиях?
Вот мой код до сих пор:
<head>
<title>Apaguard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="include/highcharts/highstock.js"></script>
<script src="include/highcharts/highcharts-more.js"></script>
<script src="include/highcharts/exporting.js"></script>
<link rel="stylesheet" href="./css/mini-default.css">
<link rel="stylesheet" href="./css/apaguard.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<header class="sticky">
<div class="col-sm col-md-10 col-md-offset-1">
<a href="index.php" class="logo"><img src="./icons/bee-logo.png" height="40" width="40"></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.php" role="button">Home</a>
<?php
// if admin access to admin menu
if ( isset($_SESSION['admin']) && $_SESSION['admin']=='1' )
{
echo"<a href='apaguard_adminusers.php' role='button'>Gestion utilisateurs</a>";
echo"<a href='apaguard_adminapaguard.php' role='button'>Gestion Apaguards</a>";
echo"<a href='apaguard_adminruchers.php' role='button'>Gestion ruchers</a>";
echo"<a href='apaguard_adminruches.php' role='button'>Gestion ruches</a>";
}
// if logged, access to user menu
elseif ( isset($_SESSION['proprietaire_id']) )
{
echo"<a href='apaguard_edituser.php' role='button'>Mon compte</a>";
echo"<a href='change_password.php' role='button'>Password</a>";
echo"<a href='apaguard_editruche.php' role='button'>Ruches</a>";
echo"<a href='apaguard_editrucher.php' role='button'>Ruchers</a>";
echo"<a href='apaguard_editapaguard.php' role='button'>Apaguards</a>";
echo"<a href='apaguard_datas.php' role='button'>Données</a>";
}
else
{
echo"<a href='apaguard_graph.php' role='button'>Demo</a>
<a href='apaguard_tech_infos.php' role='button'>Techniques</a>
";
}
// dynamic login menu
if ( !isset($_SESSION['proprietaire_id']) )
{
echo"<a href='login.php' role='button'>Login</a>";
}
else
{
echo "<a href='logout.php' role='button'>Logout</a>";
}
// if not logged, display visitor menu
?>
</div>
</header>
<input type="checkbox" id="navigation-toggle">
<nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index.php"><h4 style="margin-left: 0;">Home</h4></a>
<a href="paguard_graph.php"><h4 style="margin-left: 0;">Demo</h4></a>
<a href="apaguard_tech_infos.php"><h4 style="margin-left: 0;">Techniques</h4></a>
<a href="login.php"><h4 style="margin-left: 0;">Login</h4></a>
</nav>
Спасибо,
Решение
Я разработчик mini.css, и это довольно ожидаемое поведение. Если вы хотите, чтобы ссылки на заголовки были скрыты на мобильном устройстве, добавьте .hidden-sm класс и повторно добавить их в <nav> элемент, применяя .hidden-md.hidden-lg классы. Таким образом, ссылки в шапке будут отображаться только на рабочем столе, а на мобильном они будут отображаться только в меню. Вот пример:
<head>
<title>Apaguard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="include/highcharts/highstock.js"></script>
<script src="include/highcharts/highcharts-more.js"></script>
<script src="include/highcharts/exporting.js"></script>
<link rel="stylesheet" href="./css/mini-default.css">
<link rel="stylesheet" href="./css/apaguard.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<header class="sticky">
<div class="col-sm col-md-10 col-md-offset-1">
<a href="index.php" class="logo"><img src="./icons/bee-logo.png" height="40" width="40"></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.php" role="button">Home</a>
<?php
// if admin access to admin menu
if ( isset($_SESSION['admin']) && $_SESSION['admin']=='1' )
{
echo"<a href='apaguard_adminusers.php' role='button' class="hidden-sm">Gestion utilisateurs</a>";
echo"<a href='apaguard_adminapaguard.php' role='button' class="hidden-sm">Gestion Apaguards</a>";
echo"<a href='apaguard_adminruchers.php' role='button' class="hidden-sm">Gestion ruchers</a>";
echo"<a href='apaguard_adminruches.php' role='button' class="hidden-sm">Gestion ruches</a>";
}
// if logged, access to user menu
elseif ( isset($_SESSION['proprietaire_id']) )
{
echo"<a href='apaguard_edituser.php' role='button' class="hidden-sm">Mon compte</a>";
echo"<a href='change_password.php' role='button' class="hidden-sm">Password</a>";
echo"<a href='apaguard_editruche.php' role='button' class="hidden-sm">Ruches</a>";
echo"<a href='apaguard_editrucher.php' role='button' class="hidden-sm">Ruchers</a>";
echo"<a href='apaguard_editapaguard.php' role='button' class="hidden-sm">Apaguards</a>";
echo"<a href='apaguard_datas.php' role='button' class="hidden-sm">Données</a>";
}
else
{
echo"<a href='apaguard_graph.php' role='button' class="hidden-sm">Demo</a>
<a href='apaguard_tech_infos.php' role='button' class="hidden-sm">Techniques</a>
";
}
// dynamic login menu
if ( !isset($_SESSION['proprietaire_id']) )
{
echo"<a href='login.php' role='button' class="hidden-sm">Login</a>";
}
else
{
echo "<a href='logout.php' role='button' class="hidden-sm">Logout</a>";
}
// if not logged, display visitor menu
?>
</div>
</header>
<input type="checkbox" id="navigation-toggle">
<nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index.php"><h4 style="margin-left: 0;">Home</h4></a>
<a href="paguard_graph.php"><h4 style="margin-left: 0;">Demo</h4></a>
<a href="apaguard_tech_infos.php"><h4 style="margin-left: 0;">Techniques</h4></a>
<a href="login.php"><h4 style="margin-left: 0;">Login</h4></a>
<?php
// if admin access to admin menu
if ( isset($_SESSION['admin']) && $_SESSION['admin']=='1' )
{
echo"<a href='apaguard_adminusers.php' role='button' class="hidden-md hidden-lg">Gestion utilisateurs</a>";
echo"<a href='apaguard_adminapaguard.php' role='button' class="hidden-md hidden-lg">Gestion Apaguards</a>";
echo"<a href='apaguard_adminruchers.php' role='button' class="hidden-md hidden-lg">Gestion ruchers</a>";
echo"<a href='apaguard_adminruches.php' role='button' class="hidden-md hidden-lg">Gestion ruches</a>";
}
// if logged, access to user menu
elseif ( isset($_SESSION['proprietaire_id']) )
{
echo"<a href='apaguard_edituser.php' role='button' class="hidden-md hidden-lg">Mon compte</a>";
echo"<a href='change_password.php' role='button' class="hidden-md hidden-lg">Password</a>";
echo"<a href='apaguard_editruche.php' role='button' class="hidden-md hidden-lg">Ruches</a>";
echo"<a href='apaguard_editrucher.php' role='button' class="hidden-md hidden-lg">Ruchers</a>";
echo"<a href='apaguard_editapaguard.php' role='button' class="hidden-md hidden-lg">Apaguards</a>";
echo"<a href='apaguard_datas.php' role='button' class="hidden-md hidden-lg">Données</a>";
}
else
{
echo"<a href='apaguard_graph.php' role='button' class="hidden-md hidden-lg">Demo</a>
<a href='apaguard_tech_infos.php' role='button' class="hidden-md hidden-lg">Techniques</a>
";
}
// dynamic login menu
if ( !isset($_SESSION['proprietaire_id']) )
{
echo"<a href='login.php' role='button' class="hidden-md hidden-lg">Login</a>";
}
else
{
echo "<a href='logout.php' role='button' class="hidden-md hidden-lg">Logout</a>";
}
// if not logged, display visitor menu
?>
</nav>
Другие решения
Других решений пока нет …