Commencez avec Melvin

Modèle Bootstrap 4 Premium pour la création de sites réactifs, mobiles, avec un système de traduction.

Démarrage rapide

Melvin est livré avec trois répertoires différents. L’un est la version du code source gulp. L’autre est les fichiers HTML commentés avec tous les scripts JavaScript et CSS. Le dernier est la documentation.

CSS

Copiez-collez la feuille de style <link> dans votre <head> avant toutes les autres feuilles de style pour charger notre CSS.

    <!-- CSS -->
    <link rel="stylesheet" href="css/application.min.css" media="all">
    <link rel="stylesheet" href="css/inputmask.css" media="all">
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css" media="all">
    <link rel="stylesheet" href="css/tempusdominus-bootstrap-4.min.css">
    <link rel="stylesheet" href="css/fullcalendar.print.min.css" media="print">
    <link rel="stylesheet" href="css/jqvmap.min.css" media="all">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/ionicons.min.css" rel="stylesheet" type="text/css">

Copiez-collez le <link> de police dans votre <head> après toutes les autres feuilles de style pour charger la famille de polices.

POLICES 

    <!-- POLICES -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,400italic,700'>

JS

De nombreux de nos composants nécessitent l’utilisation de JavaScript pour fonctionner. Plus précisément, ils nécessitent jQuery, Popper.js et nos propres plugins JavaScript. Placez les <script>s suivants près de la fin de vos pages, juste avant la balise de fermeture </body>, pour les activer. jQuery doit venir en premier, puis Popper.js, et ensuite nos plugins JavaScript.

<!-- JAVASCRIPT DE MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/moment-timezone.min.js"></script>
<script src="js/moment-timezone-with-data-2012-2022.min.js"></script>
<!-- JAVASCRIPT DE JQUERY -->
<script src="js/jquery.min.js"></script>
<!-- BLOCAGE DE L'INTERFACE UTILISATEUR POUR RECHARGER L'ÉVÉNEMENT X-CARD -->
<script src="js/blockUI.min.js"></script>
<!-- SYSTÈME DE TRADUCTION I18NEXT JAVASCRIPT -->
<script src="js/i18next.min.js"></script>
<script src="js/jquery-i18next.min.js"></script>
<script src="js/i18nextXHRBackend.min.js"></script>
<script src="js/i18nextBrowserLanguageDetector.min.js"></script>
<!-- JAVASCRIPT DROPZONE -->
<script src="js/dropzone.js"></script>
<script>
  Dropzone.autoDiscover = false;
</script>
<!-- JAVASCRIPT DE GLISSER-DÉPOSER DE JQUERY -->
<script src="js/jquery-ui.min.js"></script>
<!-- JAVASCRIPT DU CALENDRIER -->
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.min.js"></script>
<script src="js/locale-all.js"></script>
<!-- JAVASCRIPT DU SÉLECTEUR DE DATE -->
<script src="js/tempusdominus-bootstrap-4.min.js"></script>
<!-- JAVASCRIPT DE MASQUE DE SAISIE -->
<script src="js/jquery.inputmask.bundle.js"></script>
<script src="inputmask/bindings/inputmask.binding.min.js"></script>
<!-- JAVASCRIPT DE COUVERTURE IE -->
<script src="js/modernizr-custom.min.js"></script>
<!-- JAVASCRIPT DE SPARKLINE -->
<script src="js/jquery.sparkline.min.js"></script>
<!-- BOOTSTRAP ET JAVASCRIPT DE L'APPLICATION -->
<script src="js/popper.min.js"></script>
<script src="js/application.min.js"></script>
<!-- JAVASCRIPT DE LA BARRE DE DÉFILEMENT PERSONNALISÉE -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- JAVASCRIPT DE CHART.JS -->
<script src="js/Chart.bundle.min.js"></script>
<!-- JAVASCRIPT DE FLOT CHART -->
<script src="js/jquery.flot.min.js"></script>
<script src="flotchartplugins/jquery.flot.time.min.js"></script>
<script src="flotchartplugins/jquery.flot.selection.min.js"></script>
<script src="flotchartplugins/jquery.flot.stack.min.js"></script>
<script src="flotchartplugins/jquery.flot.resize.min.js"></script>
<script src="flotchartplugins/jquery.flot.pie.min.js"></script>
<!-- JAVASCRIPT DE TOASTR FEEDBACK -->
<script src="js/toastr.min.js"></script>
<script src="js/promise.min.js"></script>
<!-- JAVASCRIPT DE SWEETALERT FEEDBACK -->
<script src="js/sweetalert2.min.js"></script>
<!-- JAVASCRIPT DES CARTES -->
<script src="js/jquery.vmap.min.js"></script>
<script src="js/gmaps.min.js"></script>

Curieux de savoir quels composants nécessitent explicitement jQuery, notre JS et Popper.js ? Cliquez sur le lien des composants ci-dessous. Si vous n’êtes pas sûr de la structure générale de la page, continuez à lire pour un exemple de modèle de page.

Modèle de démarrage

Assurez-vous que vos pages sont configurées avec les dernières normes de conception et de développement. Cela signifie utiliser une doctype HTML5 et inclure une balise meta viewport pour des comportements de réponse appropriés. Mettez tout cela ensemble et vos pages devraient ressembler à ceci :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <!-- META CHARSET -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- TITRE DE LA PAGE -->
    <title>Modèle pour le style d'administration avec barre latérale</title>
    <!-- SPÉCIFIQUE MOBILE -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- FAVICON -->
    <link rel="shortcut icon" href="http://www.them

acart.com/melvin/img/favicon.ico">
    <!-- CSS -->
    <link rel="stylesheet" href="css/application.min.css" media="all">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/ionicons.min.css" rel="stylesheet" type="text/css">
    <!-- CSS Optionnel -->
    <!-- POLICES -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,400italic,700'>
</head>
  <body>
    <h1>Bonjour, le monde !</h1>


<!-- JAVASCRIPT DE MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/moment-timezone.min.js"></script>
<script src="js/moment-timezone-with-data-2012-2022.min.js"></script>
<!-- JAVASCRIPT DE JQUERY -->
<script src="js/jquery.min.js"></script>
<!-- BLOCAGE DE L'INTERFACE UTILISATEUR POUR RECHARGER L'ÉVÉNEMENT X-CARD -->
<script src="js/blockUI.min.js"></script>
<!-- SYSTÈME DE TRADUCTION I18NEXT JAVASCRIPT -->
<script src="js/i18next.min.js"></script>
<script src="js/jquery-i18next.min.js"></script>
<script src="js/i18nextXHRBackend.min.js"></script>
<script src="js/i18nextBrowserLanguageDetector.min.js"></script>
<!-- JAVASCRIPT BOOTSTRAP ET DE L'APPLICATION -->
<script src="js/popper.min.js"></script>
<script src="js/application.min.js"></script>
<!-- JAVASCRIPT DE LA BARRE DE DÉFILEMENT PERSONNALISÉE -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- JAVASCRIPT DE TOASTR FEEDBACK -->
<script src="js/toastr.min.js"></script>
<script src="js/promise.min.js"></script>
<!-- JAVASCRIPT DE SWEETALERT FEEDBACK -->
<script src="js/sweetalert2.min.js"></script>
    <!-- JavaScript Optionnel -->
  </body>
</html>

C’est tout ce dont vous avez besoin pour les exigences générales de la page.

← Keoby.com: Votre Guide pour les Meilleurs Bons Plans!
Contenu de Melvin →