D
deleted34147
Tuto vidéo
Vous devez être inscrit pour voir les médias
Salut, je fais un petit tutoriel pour vous montrez comment installer BOOTSTRAP sur son site, pour avoir un site qui ressemble à ça rien qu'en copiant quelques ligne de code :
You must be registered for see images attach
You must be registered for see images attach
L'installation
Pour l'installation, je vais travaillé sur un site en LOCAL, mais c'est exactement la même démarche pour uploadé les fichiers sur votre FTP.
Rendez vous
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
vous arrivez sur une page avec écrit en gros "Download Bootstrap", cliquez dessus
You must be registered for see images attach
3 téléchargements s'offrent à vous, cliquez sur le premier !
You must be registered for see images attach
Vous voici avec une archive en ZIP sur votre bureau (ou ailleurs) dé-zippé la, et ouvrez le dossier.
3 fichiers sont disponible dans le dossier :
- CSS
- FONTS
- JS
You must be registered for see images attach
Installation terminé.
You must be registered for see images attach
Comment codé en bootstrap?
Pour codé en bootstrap, c'est très simple.. Matériel :
- Components bootstrap :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
- Un outils de codage :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Rendez
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
si on descend dans la page, ou que vous regardez à droite il y a une liste, et il est écrit NAVBAR si vous cherchez bien
You must be registered for see images attach
DU CODE PRE-CREE ! Y'a que c/c et mettre dans l'index.phpOubliez pas le début d'un code HTML et la structuration
Rappel :
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Ajoutez les scripts du gettind started, le code final est (POUR LE HEAD SEULEMENT le body pas besoin de script lol) :
HTML:
<!DOCTYPE html>
<html lang="FR">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TITRE DE LA PAGE</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>Mon index ressemble donc à ça :
You must be registered for see images attach
You must be registered for see images attach
Pas mal hein?
En gros, bootstrap a des classes pré-crée, et un css pré-crée pour que vous n'aillez qu'a copier le code, pour le modifier un peu ou le changer etc..Il existe un FLAT UI bootstrap, le flat design pure ! :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Une question? pose la.
Bye
Dernière édition par un modérateur:
