Chargement...
Menu Groupes

Maquette x Bootstrap

Salut les 1403 autres fifous du g/dev,

Avec un ami, on a un projet web, un portfolio simple,
mais ça fait un peu de temps qu'on a pas fait de web et moi de Bootstrap,
on devait faire une maquette très rapidement (code sale),
maintenant on aimerai bien repartir de zéro et utiliser proprement Bootstrap pour être Responsive entre autres.

On galère pas mal avec la barre de navigation fixe et la vidéo Youtube pleine écran.

Code sale et début Boostrap :
https://pastebin.com/nkQ5wLRZ
https://pastebin.com/CAqpXPkg

Rendu 1 et 2 :
http://pickneat.fr/projetSecretBoot/
http://pickneat.fr/projetSecretBoot/indexBoot.html


Le schéma représente ce qu'on essaye de faire,
on ne cherche pas à déléguer notre travail, mais des bons conseils et bonnes pistes.
(autre que refaire tout le tuto openclassroom)

Peace
Maquette x Bootstrap
Bons Plans
Connectez-vous ou ouvrez un compte pour poster un commentaire.
Juste de manière général, vous voulez pas faire des codepen, jsfiddle, plunker ? Plutôt que mettre du code sur pastebin ...
Vinkey
op
@WZZz: si j'ai pris pastebin comme un post précédent mais je note ce conseil
@Vinkey: Mets pas de padding-top: 7.5%; (de manière général ne met mets pas de % à la verticale sinon quand tu rétrécies la page ça s'affiche mal)

Pas sur, mais je pense qu'Il faut du js pour resize la vidéo de manière a ce qu'elle prenne la taille de l'écran disponible (sinon le rendu celon la résolution de l'écran ne sera pas les mêmes). C'est possible de le faire en css je pense, mais je pense que c'est compliqué.
Vinkey
op
@WZZz: Noté pour les pourcentages et merci pour cette piste js.
Oublie pas de tester sur mobile et en full HD, j'ai l'impression que t'as testé ni l'un ni l'autre (rien n'est centré en mobile et j'ai une grosse bande blanche en full HD)
Vinkey
op
@Divi: oui on a pas testé beaucoup d'affichages, on sait que md et lg ça passe mais le reste c'est sale direct
https://www.w3schools.com/

Très bon tuto + framework css/js si ça peut aider
Jettes un oeil à la fonction calc en css, ça permet de faire des trucs complexes et sympas du genre height:calc(100vh - (50px * 2) + 10rem); . J'ai volontairement mis de la merde mais dans ton cas tu pourrais par exemple partir de 100vh et enlever l'équivalent de ton header, ton footer, ou à peu près ce que tu veux.
Le soucis de cette méthode c'est que si t'as des tailles qui changent et ne sont pas en % ça devient compliqué.

https://caniuse.com/#search=calc
https://caniuse.com/#search=vh
Une version avec un la navbar qui se bloque : https://paste2.org/f2NV3d8e

Y'a plus clean comme manière de faire mais ça te donne un aperçu "fonctionnel"
Autres
Chargement...
Chargement...
Chargement...
J'accepteCe site utilise des cookies pour vous assurer d'obtenir la meilleure expérience sur notre site. En savoir plus