Explication Bootsrap

Chooper01 Le 23 novembre 2016 à 21:28 (Édité le 25 janvier 2019 à 17:52)

Bonjour !
Je voudrais savoir comment modifier les paramètres de Bootsrap.. Car j'ai utilisé une barre de menu mais je voudrais changer la couleur mais le soucis je n'ai aucun fichier .css de ce dernier .. J'ai juste dû intégrer des liens dans mon <head> mais sinon rien j'ai beau chercher des tutos sur le web ils ont tous un fichier.css

Merci..

TheOldNoob Le 23 novembre 2016 à 21:52

Salut l'ami 😀

Tu crée un fichier style.css que tu ajoute après le lien de bootstrap(pour qu'il écrase les paramètres bootstrap en cas de doublon). Puis tu met les paramètres CSS comme habituellement 😀

Chooper01 Le 23 novembre 2016 à 21:58

Salut !
Merci de ta réponse mais sans te mentir je ne comprends rien au Bootstrap..
Car je veux bien crée un fichier ect que sa a fonctionner.
Mais je ne vais pas comprendre ...
Si possible add moi Skype; Hamza_bzh (image de gants de boxe)
Sa serait vraiment cool ..

TheOldNoob Le 23 novembre 2016 à 22:04

Alors, bootstrap, c'est un framework, qui a le même genre de fonctionnement que n'importe quel framework

Pour l'utilisé, tu a toute la doc bootstrap sur le site officiel et il faut commencer par cette page :
http://getbootstrap.com/getting-started/

Puis, tu a tout les composents sur cette page, avec leur mode d'utilisation :
http://getbootstrap.com/components/

Rien de bien compliquer, tu fait appel a des class, que tu ajoute dans ta balise class="" 😀

Chooper01 Le 23 novembre 2016 à 22:08

Salut oui j'ai tous checker ..
Mais prenons un exemple :

<a class="btn btn-lg btn-social-icon btn-facebook" href="" title="" rel="nofollow">
             <span class="fa fa-facebook"></span></a>
             <a class="btn btn-lg btn-social-icon btn-twitter" href="" title="" rel="nofollow">
             <span class="fa fa-twitter"></span> </a>
            <a class="btn btn-lg btn-social-icon btn-instagram" href="" title="" rel="nofollow">
             <span class="fa fa-instagram"></span></a>
            <a href="" class="btn btn-soundcloud"><i class="fa fa-soundcloud"></i></a>
            <a class="btn btn-lg btn-social-icon btn-youtube" href="" title="" rel="nofollow">
             <span class="fa fa-youtube"></span></a>

Voila j'ai ça et disons que je veux que lorsque je passe ma souris sur un lien je veux qu'ils deviennent blanc et non bleu foncé mais je vois vraiment pas comment faire... (excuse moi je suis looong à la détente mdr )

TheOldNoob Le 23 novembre 2016 à 22:12

Dans ton fichier css a toi, celui que tu ajoute après celui de bootstrap, tu créer une class qui a comme attribut un :hover avec la couleur de ton choix. Et dans ton html, tu ajoute ta classe après celle de bootstrap

Chooper01 Le 23 novembre 2016 à 22:22

Mais je n'ai pas de fichier .css de bootstrap ..

TheOldNoob Le 23 novembre 2016 à 22:28

tu a se link la dans ton head?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Si oui, juste après se link, tu crée un second link, mais qui va appelé ton fichier css a toi

Chooper01 Le 23 novembre 2016 à 22:35

Oui je l'ai voila ce que j'ai fais :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style/index.css">

Mais dans mon .css je fais un

body {
    background-color: red;
}

mais rien ne ce passe ..

TheOldNoob Le 23 novembre 2016 à 22:52

le fichier dans lequel tu a ton code, il est dans un répertoire ou a la racine de ton site?
car je vois que tu sort (../) d'un dossier avant de rentré dans un autre qui s'appel style puis d'aller cherché le fichier index.css (d'ailleurs on appel jamais un fichier css index, on peu le confondre avec l'index de ton site 😀

Ensuite, il faut utilisé la console de developpeur (f12) et regarder les attribu de ta balise body.

Mais il faut aussi regarder si tu a pas une class sur une balise enfant de ton body qui a l'attribut background et donc qui te cache ton background rouge

Chooper01 Le 23 novembre 2016 à 22:58

le fichier index.css ce trouve dans Style.
Le fichier Head.php ce trouve dans le dossier Include.
Le fichier index.php ce trouve à la racine.

Et non j'ai verifié aucun enfant n'a de bg pour le body

TheOldNoob Le 23 novembre 2016 à 23:11

ok, donc dans ton index, tu fait un include de ton head? Dans se cas, il est lu par ton navigateur comme étant dans ton index. Du coup pas besoin de mettre les ../ pour sortir d'un dossier puisqu'il se trouve a la racine.

Chooper01 Le 23 novembre 2016 à 23:28

Donc sa marche niquel pour le body !
Mais pour le a:hover non j'ai donner une 2ieme classe a chaque bouton

<a class="btn btn-lg btn-social-icon btn-facebook" class="b"  href="" title="" rel="nofollow">
             <span class="fa fa-facebook"></span></a>
             <a class="btn btn-lg btn-social-icon btn-twitter" class="b" href="" title="" rel="nofollow">
             <span class="fa fa-twitter"></span> </a>
            <a class="btn btn-lg btn-social-icon btn-instagram" class="b" href="" title="" rel="nofollow">
             <span class="fa fa-instagram"></span></a>
            <a href="" class="btn btn-soundcloud class="b""><i class="fa fa-soundcloud"></i></a>
            <a class="btn btn-lg btn-social-icon btn-youtube" class="b" href="" title="" rel="nofollow">
             <span class="fa fa-youtube"></span></a>

qui est class="b" (nom provisoire ^^)

et dans le index.css

.b a:hover{
   color: white;
}

Voila ..
Sa commence à me monter à la tête .. ^^

TheOldNoob Le 23 novembre 2016 à 23:31

Super ! On a donc trouver le problème !
Bon, par contre, si tu veux travailler correctement, tu lui donne un nom de class correcte maintenant pour pas être perdu plus tard. Les
convention veux que se soit explicite et en anglais ! Soit donc inventif 😀

Chooper01 Le 23 novembre 2016 à 23:33

oui je sais comme j'ai dis c'est provisoire juste pour le test ^^
Mais pour le a:hover comme j'ai montré mon code juste au dessus sa fonctionne pas alors que pour le body oui..

TheOldNoob Le 23 novembre 2016 à 23:40

tu a deux balise class sur chacun de tes <a> si tu veux rajouter une class tu fait simplement

<a class="btn btn-lg btn-social-icon btn-facebook a"   href="" title="" rel="nofollow">

ensuite sur ta ligne 7 il manque un " regarde ta coloration syntaxique

Chooper01 Le 23 novembre 2016 à 23:46

Voila j'ai trouvé la solution je suis passer par une div ^^ qui je trouve est plus simple ^^
Bon j'ai encore une question puis je parle plus mdrr..
Disons que je veux importer ceci : http://bootsnipp.com/snippets/6rnd
Comment faire sachant qu'il y a un css,js ?

(Je sais je suis chiant)....

TheOldNoob Le 24 novembre 2016 à 00:01

tu a reglé le problème de double attribut class et du " manquent?

Sinon, c'est pas trop compliquer (même si c'est codé assez dégueux, on met pas 28 <br> et non pas </br> même si ça fonctionne quand même)
Et tu n'a pas besoin de reprendre son css, c'est le style de son truc a lui, ça te sera pas utile

Tu a juste besoin d'avoir une id="footer" sur ton footer et non pas sur une section comme l'a fait le monsieur. Surtout qu'une section n'a de l’intérêt que lorsqu'il y en as plusieurs... sinon on met une div

Après, bien que pas expert du tout en js (on en reparle dans 4 mois !!!!), mais il serre a quoi son js? ça ressemble a un scrollToTop, mais je vois aucun bouton pour l'utilisé

Chooper01 Le 24 novembre 2016 à 21:33

Bon j'ai essayer dans ton les sens je n'y arrive pas mon css n'est pas pris en compte alors que j'ai use la même technique que tu m'as dis plus haut ..

TheOldNoob Le 24 novembre 2016 à 21:48

bah? ton css fonctionnait hier non?

Chooper01 Le 24 novembre 2016 à 22:28

Oui voila ! c'était le navigateur qui à buger ><
Bon je te gène la dernière des dernière fois mdr

Je voudrais mettre c'est bouton l'un à coté de l'autre dans le blanc juste au dessus :x
http://hpics.li/3a02089

voila le html et css :x

<div class="row contact row-first">
                                        <div class="col-md-6" style="height: 15px; width: 90px;">
                                            <a href="http://instagram.com/reapers" class="instagram"><i class="fa fa-instagram"></i>@Reapers</a>
                                        </div><!--end .col-md-6-->
                                    </div><!--end .row .contact .row-first-->
                                    <div class="row contact">
                                        <div class="col-md-6" style="height: 15px; width: 90px;">
                                            <a href="http://facebook.com/Reapers" class="facebook"><i class="fa fa-facebook"></i>@Reapers</a>
                                        </div><!--end .col-md-6-->
                                        <div class="col-md-6" style="height: 10px; width: 90px;">
                                            <a href="http://twitter.com/Reapers" class="twitter"><i class="fa fa-twitter"></i>@Reapers</a>
                                        </div><!--end .col-md-6-->

Merci :x

TheOldNoob Le 24 novembre 2016 à 22:54

ok, bon, je vais revenir encore et encore... mais fait moi une belle indentation s'il te plais, ton code est difficilement lisible.

Ensuite, je ne comprend pas ta demande, tu veux que la colonne avec twitter soit aussi haute que la colone FB?

Pour finir, si je met ton code dans bootsnipet, il manque pas mal de chose que j'ai que @Reapers qui apparait 3 fois

Ensuite, ton code est pas logique, tu défini une class col-md-6 sur ta 2eme, 7eme et 10eme lignes.
Donc tu souhaite que ton block fasse la moitié de sa div parent... Mais tu lui met un widht fixe de 90px (dans ton fichier css s'il te plais la prochaine fois) donc c'est tout le contraire du fonctionnement d'une colonne bootstrap

Chooper01 Le 24 novembre 2016 à 22:58

Oui deso pour l'indentation..
Bah je voudrais mettre les 3 colonne (Insyagramme, Twitter, Facebook ) l'un a coté de l'autre ..

TheOldNoob Le 24 novembre 2016 à 23:09 (Édité le 24 novembre 2016 à 23:09)

ok, alors la c'est juste que tu a loupé le fonctionnement des row bootstrap et aussi ton court de mathématique sur les multiplication.

Le systeme de row bootstrap est très simple. Il fonctionne sur un principe de 12 colonnes l'une a coté de l'autre.
Si tu souhaite n'avoir que 2 colonnes, alors tu dit a bootstrap via les classe col-..-... que tu souhaite 2 colonnes de 6, puisque 6 x 2 = 12
Si tu souhaite avoir 3 colonnes tu lui dit qu'il faut 3 colonnes de 4, puisque 3 x 4 = 12
Si tu veux 4 colonnes, tu lui dit qu'il faut 4 colonnes de 3, puisque 4 x 3 = 12
Etc...

voilà un tableau un peu plus claire

http://bumblebrice.fr/boot/rowboot.png

TheOldNoob Le 24 novembre 2016 à 23:10

Je me répond après relecture de ton code, tu va avoir un soucis quand tu aura déjà trouvé la solution pour celui que je t'es exposé au dessus

Échange

Articles / Vidéos

Ressources