Installation et utilisation de BOOTSTRAP sur son site !

Statut
N'est pas ouverte pour d'autres réponses.
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 :

Capture d’écran 2014-07-04 à 14.50.54.png

1.png

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 :)

Capture d’écran 2014-07-04 à 14.55.55.png

3 téléchargements s'offrent à vous, cliquez sur le premier ! :)
Capture d’écran 2014-07-04 à 14.56.31.png

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.

Capture d’écran 2014-07-04 à 14.58.53.png

Installation terminé. :)



cc.png

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 :)

Capture d’écran 2014-07-04 à 15.05.08.png
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 :

Capture d’écran 2014-07-04 à 15.11.46.png

Et mon site :
Capture d’écran 2014-07-04 à 15.12.22.png


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]
Premium
Inscription
21 Août 2012
Messages
2 714
Réactions
1 141
Points
16 441
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
Inscription
27 Septembre 2012
Messages
16 783
Réactions
7 254
Points
24 155
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
 

Grégory

Développeur
Ancien staff
Inscription
14 Novembre 2011
Messages
2 798
Réactions
2 221
Points
25 358
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

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.
 

iM3PZx

Business Man
Premium
Inscription
28 Juin 2013
Messages
1 565
Réactions
517
Points
14 806
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 :

Voir la pièce jointe 26290
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 :)


3 téléchargements s'offrent à vous, cliquez sur le premier ! :)

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.


Installation terminé. :)



Voir la pièce jointe 26295
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 :)

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 :

Et mon site :
Voir la pièce jointe 26299

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 !
 

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 842
Réactions
3 146
Points
17 331
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 :

Voir la pièce jointe 26290
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 :)


3 téléchargements s'offrent à vous, cliquez sur le premier ! :)

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.


Installation terminé. :)



Voir la pièce jointe 26295
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 :)

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 :

Et mon site :
Voir la pièce jointe 26299

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
15
Points
61
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
Premium
Inscription
12 Août 2012
Messages
1 281
Réactions
283
Points
12 028
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
Premium
Inscription
23 Janvier 2013
Messages
4 842
Réactions
3 146
Points
17 331
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
Premium
Inscription
12 Août 2012
Messages
1 281
Réactions
283
Points
12 028
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

Premium
Inscription
21 Avril 2013
Messages
3 291
Réactions
1 125
Points
10 601
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 :

Voir la pièce jointe 26290
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 :)


3 téléchargements s'offrent à vous, cliquez sur le premier ! :)

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.


Installation terminé. :)



Voir la pièce jointe 26295
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 :)

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 :

Et mon site :
Voir la pièce jointe 26299

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