Tutoriel Installation et utilisation de BOOTSTRAP sur son site !

Statut
N'est pas ouverte pour d'autres réponses.
D

deleted34147

    Réponse de deleted34147 Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #1
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 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
C'est 3 fichiers doivent être glisser dans votre FTP.

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 :
  • Un outils de codage :
Je vais vous montrer comment configurer les premières choses de bootstrap, et une navbar ;)

Rendez 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
Descendons un peu et HO :o DU CODE PRE-CREE :o ! Y'a que c/c et mettre dans l'index.php

Oubliez 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>
Rien qu'avec ce code, vous avez une navbar, et une structure web, à vous de trouvez les éléments que vous voulez dans le compenents et les ajoutés ! :)

Mon index ressemble donc à ça :

You must be registered for see images attach

Et mon site :
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 ! :

Une question? pose la.

Bye

 
Dernière édition par un modérateur:

AlphaDesign GTP

Shop Dofus [ON]
Contributeur
Inscription
21 Août 2012
Messages
2 607
Réactions
1 064
Points
9 691
    Réponse de AlphaDesign GTP Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #2
Les Louki le Bg :') Tu m'as tué ! En tout cas un grand GG' a toi :D First Linke and Comment :trollface:
 

Whyouuu

Ancien staff RG
Inscription
27 Septembre 2012
Messages
16 319
Réactions
6 902
Points
19 905
    Réponse de Whyouuu Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #4
Beau tutoriel :D

Pour info, sur ton site tu as écris Acceuil. Mais c'est Accueil :bzr:

ça du te prendre beaucoup de temps !
Sa ça m'étonnerais tu l'a fait sur monAlbumPhoto.fr !
#Facepalm
 
D

deleted37808

    Réponse de deleted37808 Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #5
Pas mal pour un Belge :o :trollface:
 
D

deleted32675

    Réponse de deleted32675 Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #6
La doc française de bootstrap
 

Grégory

Développeur
Ancien staff RG
Inscription
14 Novembre 2011
Messages
2 758
Réactions
2 175
Points
13 358
    Réponse de Grégory Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #7
La doc française de bootstrap
Pas aussi complète + pas toujours à jour :/

+

Maintenant on va avoir 50 kikoos "je sé fer un site" :d:
Sinon un exemple, voici mon site avec quelques modifications de bootstrap !
N'oubliez pas, vous pouvez modifier bootstrap, ça donne une touche perso, et c'est bow.
Bravo pour le tutoriel :)
 
D

deleted32675

    Réponse de deleted32675 Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #8
Pas aussi complète + pas toujours à jour :/

+

Maintenant on va avoir 50 kikoos "je sé fer un site" :d:
Sinon un exemple, voici mon site avec quelques modifications de bootstrap !
N'oubliez pas, vous pouvez modifier bootstrap, ça donne une touche perso, et c'est bow.
Bravo pour le tutoriel :)
Perso, utilise la version anglaise mais si ça peu servir au débutants.
 

DJ-PAP'S

Dj Producteur et Pronostiqueur Sportif
Contributeur
Inscription
28 Juin 2013
Messages
1 471
Réactions
510
Points
7 806
    Réponse de DJ-PAP'S Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #9
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 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
C'est 3 fichiers doivent être glisser dans votre FTP.

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 :
  • Un outils de codage :
Je vais vous montrer comment configurer les premières choses de bootstrap, et une navbar ;)

Rendez 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
Descendons un peu et HO :o DU CODE PRE-CREE :o ! Y'a que c/c et mettre dans l'index.php

Oubliez 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>
Rien qu'avec ce code, vous avez une navbar, et une structure web, à vous de trouvez les éléments que vous voulez dans le compenents et les ajoutés ! :)

Mon index ressemble donc à ça :

You must be registered for see images attach

Et mon site :
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 ! :

Une question? pose la.

Bye

Grand gg pour ton tuto !
 

CR3T0X

#4ThePlayers
Contributeur
Inscription
27 Janvier 2013
Messages
6 556
Réactions
2 164
Points
11 221
    Réponse de CR3T0X Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #11
Enorme tuto de ta part :cool:
 

Carl "Sauce" Drogo

La roue tourne donc on s'fera fourrer par la dinde
Contributeur
Inscription
23 Août 2013
Messages
1 841
Réactions
621
Points
6 291
    Réponse de Carl "Sauce" Drogo Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #12
Merci du tuto ! :D
 

Maxence ES

Guizou
Contributeur
Inscription
23 Janvier 2013
Messages
4 649
Réactions
2 943
Points
10 171
    Réponse de Maxence ES Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #13
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 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
C'est 3 fichiers doivent être glisser dans votre FTP.

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 :
  • Un outils de codage :
Je vais vous montrer comment configurer les premières choses de bootstrap, et une navbar ;)

Rendez 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
Descendons un peu et HO :o DU CODE PRE-CREE :o ! Y'a que c/c et mettre dans l'index.php

Oubliez 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>
Rien qu'avec ce code, vous avez une navbar, et une structure web, à vous de trouvez les éléments que vous voulez dans le compenents et les ajoutés ! :)

Mon index ressemble donc à ça :

You must be registered for see images attach

Et mon site :
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 ! :

Une question? pose la.

Bye

Pas mal :)
 

fr0d3v

Membre
Inscription
4 Juillet 2014
Messages
32
Réactions
12
Points
61
    Réponse de fr0d3v Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #14
Boostrap c'est bien, mais selon moi sa manque de "personnalisation". Mis à part les classes pré définis il est difficile dans ajouter ou même de les modifier.
 

Wazau

ʇûoɐ ǝznop
Contributeur
Inscription
12 Août 2012
Messages
1 246
Réactions
265
Points
7 718
    Réponse de Wazau Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #15
Sympa pour les personnes ne sachant pas réaliser de site internet ( je suppose qu'on ne peut pas réalisé de création de compte avec ces méthodes ? ).
Je vais allé faire un tour sur ta chaîne :o
 

Maxence ES

Guizou
Contributeur
Inscription
23 Janvier 2013
Messages
4 649
Réactions
2 943
Points
10 171
    Réponse de Maxence ES Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #16
Sympa pour les personnes ne sachant pas réaliser de site internet ( je suppose qu'on ne peut pas réalisé de création de compte avec ces méthodes ? ).
Je vais allé faire un tour sur ta chaîne :o
Ce n'est pas du tout ça, pour utiliser bootstrap, il te faut des nautions. :)
 

Wazau

ʇûoɐ ǝznop
Contributeur
Inscription
12 Août 2012
Messages
1 246
Réactions
265
Points
7 718
    Réponse de Wazau Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #17

Lio.nn

Contributeur
Inscription
2 Mai 2014
Messages
4 333
Réactions
1 519
Points
5 425
    Réponse de Lio.nn Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #18
" louki le bg " :trollface:
 

Wazau

ʇûoɐ ǝznop
Contributeur
Inscription
12 Août 2012
Messages
1 246
Réactions
265
Points
7 718
    Réponse de Wazau Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #19
Je me permet d'ajouter du contenu à ton tutoriel ( comme je l'ai déjà dit, très bon et bien expliquer ) avec cette vidéo de ~45minutes où l'auteur plonge un peu plus en profondeur que toi.
 

Yazk

Contributeur
Inscription
21 Avril 2013
Messages
3 178
Réactions
925
Points
8 601
    Réponse de Yazk Informatique ⌨️ Programmation : Installation et utilisation de BOOTSTRAP sur son site !
  • #20
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 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
C'est 3 fichiers doivent être glisser dans votre FTP.

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 :
  • Un outils de codage :
Je vais vous montrer comment configurer les premières choses de bootstrap, et une navbar ;)

Rendez 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
Descendons un peu et HO :o DU CODE PRE-CREE :o ! Y'a que c/c et mettre dans l'index.php

Oubliez 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>
Rien qu'avec ce code, vous avez une navbar, et une structure web, à vous de trouvez les éléments que vous voulez dans le compenents et les ajoutés ! :)

Mon index ressemble donc à ça :

You must be registered for see images attach

Et mon site :
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 ! :

Une question? pose la.

Bye

Thank's pour le tuto ! :love:
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut Bas