Partage

Exercices du cours Bootstrap / Vos questions

21 juillet 2017 à 11:35:59

google traducteur

Pour les lacunes en anglais !

-
Edité par Jean-Yff 21 juillet 2017 à 12:02:42

Jean-Yff
21 juillet 2017 à 17:25:25

Salut bestmomo

bestmomo a écrit:

Bonjour webcode

Pour le sticky maintenant la majorité des navigateurs gèrent bien la règle native du CSS (bon... à part ceux de Microsoft comme d'habitude).

Je vais regarder de plus près pour le Sticky ;)

bestmomo a écrit:

Pour ceux qui nous lisent ici je voudrais préciser que Materialize n'est qu'un élément de la grande vague du Material Design avec de très nombreuses ressources. C'est une nouvelle vision de l'esthétique des sites plutôt intéressante qui connait un succès grandissant et pour les futurs (et actuel) web designer je conseille la lecture du site de référence, mais c'est en anglais :)

Merci pour ces informations très intéressantes, sur le lien de material design j'ai aperçu le menu de navigation est-ce qu'il est possible de faire cela avec materialize ? Si c'est possible comment ? Ou si vous avez un lien comment réaliser ce genre d'effet ça me ferait plaisir !

webcode a écrit:

ou aussi un autre exemple, j'imagine qu'il est possible de le faire avec les nombreuses fonctionnalités intégrées à materialize mais je n'ai pas trouvé !

Si vous savez me répondent comment faire l'effet dans le menu, comme je l'ai dit ci-dessus ça me ferait un grand plaisir merci d'avance.

bestmomo a écrit:

Bonjour webcode

Pour Bootstrap 4 je me suis replongé dedans maintenant qu'il semble plus stable mais je n'ai pas encore une vue suffisamment globale pour me faire une opinion tranchée. J'ai commencé la rédaction du futur cours en tenant compte de toutes les remarques souvent pertinentes que j'ai eues pour celui de la version 3...

Quand tu dis je n'ai pas encore une vue suffisamment globale pour me faire une opinion tranchée, tu parles entre Bootstrap et Materialize ? Donc comme je peux comprendre tu comptes faire un cours pour la version 4 ? Et est-ce que tu comptes faire un cours sur materialize ?


bestmomo a écrit:

Je ne connaissais pas la traduction du site de Sass mais personnellement l'anglais ne me dérange pas à force de lire des documentations techniques, mais ça peut aider pas mal de français allergiques à cette langue (et on peut les comprendre étant donné son inesthétique).

Apparemment ce n'est pas récent et on peut voir sur le site de traduction Sass que l'auteur a réalisée beaucoup de projets Sass ! Pour en revenir à l'anglais j'aimerais apprendre par ce que ça devient presque indispensable dans le domaine de webmaster ou encore dans la programmation.

Jean-Yff a écrit:

google traducteur

Pour les lacunes en anglais !

-
Edité par Jean-Yff il y a environ 4 heures


Oui c'est vrai je l'ai même utilisé, mais je trouve que la traduction n'est pas toujours correcte tout dépend du texte original merci à toi @jean

À bientôt sur le forum.



-
Edité par webcode 21 juillet 2017 à 17:37:10

Tester le code Premium Solo et gagner un mois gratuit sans engagement, Voici le code promotionnel : WEBCODE-9F7H
21 juillet 2017 à 17:43:27

Salut webcode

webcode a écrit:

Merci pour ces informations très intéressantes, sur le lien de material design j'ai aperçu le menu de navigation est-ce qu'il est possible de faire cela avec materialize ? Si c'est possible comment ? Ou si vous avez un lien comment réaliser ce genre d'effet ça me ferait plaisir !

La barre de navigation est celle des composants de Material Design, la documentation est sur leur site.

webcode a écrit:

Quand tu dis je n'ai pas encore une vue suffisamment globale pour me faire une opinion tranchée, tu parles entre Bootstrap et Materialize ? Donc comme je peux comprendre tu comptes faire un cours pour la version 4 ?

Je parle de Bootstrap et je compte bien faire un cours sur la version 4. J'ai d'ailleurs pratiquement achevé la partie qui concerne la grille. En fait j'en ai écrit un l'an dernier en pensant qu'ils iraient plus vite dans le développement mais je m'y suis pris finalement trop tôt et plein de choses ont bien changé entre temps. C'est le cas aussi pour les intrépides qui ont publié des bouquins (essentiellement en anglais) qui sont tous devenus obsolètes.

Il faut se méfier du traducteur de Google pour les documents technique, il vaut mieux faire l'effort de la langue.

22 juillet 2017 à 20:11:13

Bonjour a tous et toutes ,

je debute avec bootstrap et je souhaite savoir s'il vous plait comment on fait pour retrouver les bibliotheques des composant.

par exemple si je veux utiliser 

waitingDialog.show();

il va me generer une erreur du genre .

$dialog.modal is not a function

Merci d'avance

apres quelques recherche je me suis rendu compte qu'il fallait ajouter ces librairie.

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="build/bootstrap-waitingfor.js"></script>

bonjour a tous et toutes.

je sollicite votre soutient pour la resolution d'un probleme de librairie que je rencontre.

je souhaite utiliser un date time lorsque je l'implemente sur un ficher test il fonctionne normalement mais lorsque je l'integre au programme globale il s'affiche bien mais pas au bon endroit.

je pense avoir une collision entre les bilioteque je j'utilise et principalement celle-ci

<script  type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 

voici toutes les biblioteque que j'utilise

 <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

    
    <script  type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 

    <!-- configuration jquery et jquery ui en mode CDN -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href=" https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.css" />

si je deplace 

<script  type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 

pour la mettre ainsi

</html>


<script  type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

<script type="text/javascript">

function verification_chiffre(champb){
        var chiffresb = new RegExp("[0-9]");
        var verifb;
        for(x = 0; x < champb.value.length; x++){
        verifb = chiffresb.test(champb.value.charAt(x));
       if(verifb == false){
        champb.value = champb.value.substr(0,x) + champb.value.substr(x+1,champb.value.length-x+1);   
        x--;
        }
    }
}

tout se passe bien mais j'ai un message d'erreur concernant un autre composant.

une fois de plus merci de votre soutient


-
Edité par solo190 23 juillet 2017 à 11:30:53

le boiteux qui suit le chemin devance le coureur qui s'en ecarte . http://www.etech-keys.com
26 juillet 2017 à 0:16:58

bestmomo a écrit:

Salut webcode

webcode a écrit:

Merci pour ces informations très intéressantes, sur le lien de material design j'ai aperçu le menu de navigation est-ce qu'il est possible de faire cela avec materialize ? Si c'est possible comment ? Ou si vous avez un lien comment réaliser ce genre d'effet ça me ferait plaisir !

La barre de navigation est celle des composants de Material Design, la documentation est sur leur site.

webcode a écrit:

Quand tu dis je n'ai pas encore une vue suffisamment globale pour me faire une opinion tranchée, tu parles entre Bootstrap et Materialize ? Donc comme je peux comprendre tu comptes faire un cours pour la version 4 ?

Je parle de Bootstrap et je compte bien faire un cours sur la version 4. J'ai d'ailleurs pratiquement achevé la partie qui concerne la grille. En fait j'en ai écrit un l'an dernier en pensant qu'ils iraient plus vite dans le développement mais je m'y suis pris finalement trop tôt et plein de choses ont bien changé entre temps. C'est le cas aussi pour les intrépides qui ont publié des bouquins (essentiellement en anglais) qui sont tous devenus obsolètes.

Il faut se méfier du traducteur de Google pour les documents technique, il vaut mieux faire l'effort de la langue.


Bonsoir bestmomo,

Merci pour ta réponse, et oui c'est vrai qu'ils mettent du temps à sortir la version 4, d'ailleurs y a-t-il une date prévue ? Ou une fourchette de la date de sortie ? Je me réjouis de voir le cours sur la version 4, j'ai vraiment dévoré celui de Bootstrap 3 vous êtes très pédagogues et très précis dans ce que vous expliquez !

Pour les traducteurs Google etc. c'est bien ce que je disais ils ne sont pas toujours précis !

Pour revenir au alert de Bootstrap j'ai fini de les intégrer à materialize dans un fichier séparé, pour bien respecter la structure intégrée au framework, je pense que je vais partager sur mon compte Github.

J'ai aussi intégré quelques fonctionnalités de Bootstrap et de foundation pour mon besoin personnel, et j'avoue que je suis très content du résultat;)

@solo190 fait une petite recherche Google il doit avoir une fonction pour les conflits entre bibliothèques j'en ai eu recours dans le passé.

À bientôt sur le forum.

-
Edité par webcode 26 juillet 2017 à 0:45:48

Tester le code Premium Solo et gagner un mois gratuit sans engagement, Voici le code promotionnel : WEBCODE-9F7H
26 juillet 2017 à 9:44:10

@webcode

Salut !

Il n'y a pas encore de date prévue pour Bootstrap 4 mais la prochaine version sera une beta... on avance... C'est une grosse machine et donc ça prend du temps.

Ça a l'air bien sympa tes adaptations pour Materialize. Il faut les partager ! C'est quoi ton compte Github ?

Bonne journée.

26 juillet 2017 à 13:37:01

Bonjour,

Je bloque sur l'activite de la partie pour rendre la taille des boutons (facebook, google, ...) responsive.

J'ai ajouté un css btn-lg avec une taille fixe et un border-radius, j'ai donc bien des boutons ronds, mais je ne vois pas du tout comment faire pour modifier cette taille en fonction de la taille de la fenêtre écran. J'ai essayé de modifier les propriétés de la classe btn-lg à l'intérieur des media queries, mais cela ne fonctionne pas.

Dit autrement, j'aimerais rendre ces boutons responsive, mais étant donné que je leur ai donné une taille fixe (pour pouvoir utiliser un border-radius adapté à la taille), eh bien ils ne changent pas de taille.

Si vous avez une piste à me formuler, j'en serais heureux.

Au plaisir.

Vincent

-
Edité par vincent48 26 juillet 2017 à 13:40:43

26 juillet 2017 à 13:45:39

Salut,

Je suis impatient de pouvoir suivre le nouveau cour sur Bootstrap 4 surtout si il est aussi passionnant que l'actuel.

Il me semble que bootstrap 4  adopte les Flexbox, est ce vraiment le cas ?

26 juillet 2017 à 22:53:45

bestmomo a écrit:

@webcode

Salut !

Il n'y a pas encore de date prévue pour Bootstrap 4 mais la prochaine version sera une beta... on avance... C'est une grosse machine et donc ça prend du temps.

Ça a l'air bien sympa tes adaptations pour Materialize. Il faut les partager ! C'est quoi ton compte Github ?

Bonne journée.

Bonsoir Bestmomo je t'ai envoyé un message privé pour avoir une réponse bien précise ;)

vincent48 a écrit:

Bonjour,

Je bloque sur l'activite de la partie pour rendre la taille des boutons (facebook, google, ...) responsive.

J'ai ajouté un css btn-lg avec une taille fixe et un border-radius, j'ai donc bien des boutons ronds, mais je ne vois pas du tout comment faire pour modifier cette taille en fonction de la taille de la fenêtre écran. J'ai essayé de modifier les propriétés de la classe btn-lg à l'intérieur des media queries, mais cela ne fonctionne pas.

Dit autrement, j'aimerais rendre ces boutons responsive, mais étant donné que je leur ai donné une taille fixe (pour pouvoir utiliser un border-radius adapté à la taille), eh bien ils ne changent pas de taille.

Si vous avez une piste à me formuler, j'en serais heureux.

Au plaisir.

Vincent

-
Edité par vincent48 il y a environ 9 heures

Bonsoir @vincent48,


Je comprends bien ce que tu veux faire, mais j'ai du mal à comprendre pourquoi tu veux le faire sur des boutons ? Alors que quand la page rétrécit les boutons devienne aussi plus petits, il ne faut pas oublier qu'il faut un minimum de taille en petit écran pour pouvoir cliquer sur le bouton en question ! 

florianboy01 a écrit:

Salut,

Je suis impatient de pouvoir suivre le nouveau cour sur Bootstrap 4 surtout si il est aussi passionnant que l'actuel.

Il me semble que bootstrap 4  adopte les Flexbox, est ce vraiment le cas ?

Bonsoir @florianboy01

oui comme tu le dis les cours de bestmomo sont passionnants, précis, très complet, en effet Bootstrap 4 intégrera bien la partie FlexBox tu peux retrouver toutes les informations via ce lien sur leur site dans la partie documentation.

À bientôt sur le forum.

PS: Salut,

J'ai retravaillé la fonction alert qui ne comporte plus aucune class de Bootstrap elle les propres à materialize avec ses propres couleurs qui n'étaient pas le cas dans la capture d'écran ci-dessus, on sait l'intégrer à n'importe quel bloc vous pouvez l'apercevoir dans la capture d'écran ci-dessous.

Je vais prochainement partager ce que j'ai réalisé sur mon compte GitHub.

À bientôt sur le forum.



-
Edité par webcode 27 juillet 2017 à 7:10:30

Tester le code Premium Solo et gagner un mois gratuit sans engagement, Voici le code promotionnel : WEBCODE-9F7H
28 juillet 2017 à 12:56:02

Salut a tous

C'est par où les nouveaux ?

31 juillet 2017 à 14:23:22

Bonjour a tous et toutes,

cette zone peut prendre au maximum combien de caractere

<textarea class="form-control" rows="1" id="destinataire" onkeyup="compteur_destinataires(this)" required></textarea>

merci d'avance.

le boiteux qui suit le chemin devance le coureur qui s'en ecarte . http://www.etech-keys.com
31 juillet 2017 à 16:06:58

Bonjour,
citation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea?redirectlocale=en-US&redirectslug=Web%2FHTML%2FElements%2Ftextarea
maxlength HTML5
The maximum number of characters (Unicode code points) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.

En résumé: limitée par le nombre que vous spécifiez dans maxlength; sinon "illimité"

-
Edité par nanart 31 juillet 2017 à 16:10:40

31 juillet 2017 à 18:27:40

nanart a écrit:

Bonjour,
citation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea?redirectlocale=en-US&redirectslug=Web%2FHTML%2FElements%2Ftextarea

maxlength HTML5
The maximum number of characters (Unicode code points) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.

En résumé: limitée par le nombre que vous spécifiez dans maxlength; sinon "illimité"

-
Edité par nanart il y a environ 1 heure


Bonsoir,

Oui en effet c'est bien ce qui doit retourner de maxlength ! Et quelle est le problème ? ca ne fonctionne pas ?.

Voila l'intégration des alerts je vais bientôt le poster sur mon compte GitHub, j'ai aussi rajouter une class .green-border .border-lighten-4, je n'ai pas intégré l'étendue qui était donné dans ce code, il y avait une erreur avec le positionnement du bouton avec la petite croix, et aussi bien en responsive, qui est très bien gérer maintenant,  j'ai aussi rajouter l'option de générer des bordures dans materialize, et pour les couleurs que je n'ai pas @extend pour la simple et bonne raison il y a assez de couleur dans materialize j'arrive a un plus beaux résultat que l'image ci-dessous.

Voici une démo des boites alert 

Je suis entrain de regarder les conditions dans la licence MIT pour mettre la version complète que j'ai développée, j'ai rajouter beaucoup de fonctionnalités de Foundation par exemple tout les utilitaires  qui sont très utilise il en a qui était déjà intégrer a materialize  et qu'elle que fonction de bootstrap de Bootstrap ! comme les boites alert. Je regarde aussi a générer une bonne structure, je doit faire en sorte de faire les misse a jour sent écraser une class ou autre, Tout ca n'est pas si simple je tire mon chapeaux peut importe le framework creer il ce reconnaîtront c'est beaucoup de boulot. 

Pour la tester dans presque tout les recoins je suis entrain de réaliser un forum, que je mettrais en démo, si je publie la version que j'aurai réalisée , j'ai bien envie de le mettre sur le forum avec le code source sur GitHut pour avoir un retour des plus expérimenter !

Tout commentaire son le bienvenue ;)

A bientôt sur le forum.

-
Edité par webcode 1 août 2017 à 17:20:17

Tester le code Premium Solo et gagner un mois gratuit sans engagement, Voici le code promotionnel : WEBCODE-9F7H
9 août 2017 à 11:21:06

Bonjour,
Etant donné tout ce qui s'écrit dans ce forum ... ne serait-il pas judicieux de faire un cours "perfectionnement Bootstrap"  ? car pour ma part j'ai fini par  abandonner bootstrap ne réussisant pas à obtenir ce que je voulais... mais j'aimerais bien m'y remettre quitte à reviser le  cours déjà présent mais en sachant qu'un autre cours aidera mieux à personnaliser. Merci.

-
Edité par AJOOC 9 août 2017 à 11:22:51

10 août 2017 à 13:05:24

Salut

bestmomo a écrit:

Salut webcode

webcode a écrit:

Merci pour ces informations très intéressantes, sur le lien de material design j'ai aperçu le menu de navigation est-ce qu'il est possible de faire cela avec materialize ? Si c'est possible comment ? Ou si vous avez un lien comment réaliser ce genre d'effet ça me ferait plaisir !

La barre de navigation est celle des composants de Material Design, la documentation est sur leur site.

webcode a écrit:

Quand tu dis je n'ai pas encore une vue suffisamment globale pour me faire une opinion tranchée, tu parles entre Bootstrap et Materialize ? Donc comme je peux comprendre tu comptes faire un cours pour la version 4 ?

Je parle de Bootstrap et je compte bien faire un cours sur la version 4. J'ai d'ailleurs pratiquement achevé la partie qui concerne la grille. En fait j'en ai écrit un l'an dernier en pensant qu'ils iraient plus vite dans le développement mais je m'y suis pris finalement trop tôt et plein de choses ont bien changé entre temps. C'est le cas aussi pour les intrépides qui ont publié des bouquins (essentiellement en anglais) qui sont tous devenus obsolètes.

Il faut se méfier du traducteur de Google pour les documents technique, il vaut mieux faire l'effort de la langue.


Il aura la vesrion 4 que bestmomo va faire ;) Que veut tu dire 

AJOOC a écrit:

Bonjour,
Etant donné tout ce qui s'écrit dans ce forum ... ne serait-il pas judicieux de faire un cours "perfectionnement Bootstrap"  ? car pour ma part j'ai fini par  abandonner bootstrap ne réussisant pas à obtenir ce que je voulais...

-
Edité par AJOOC hier à 11:22


Pas arriver a faire quoi ?
Tester le code Premium Solo et gagner un mois gratuit sans engagement, Voici le code promotionnel : WEBCODE-9F7H
13 août 2017 à 12:03:33

Bonjour à tous,

M.BESTMOMO, est ce que la version 4 de Bootstrap qui devrait sortir en version final d'ici peu sera l'occasion d'une mise à jour du cours Bootstrap ?

Quand j'ai passé cette certification je n'avais pas conscience à quel point ce Framework est utile, pour tous les projets javascript sur lesquels je travaille maintenant impossible de m'en passer !! 

Merci

Edit : Je viens de voir la réponse au début de la page c'est une très bonne nouvelle !!!

-
Edité par Parad0xJ 13 août 2017 à 12:06:06

" Si vis pacem, para bellum "
15 août 2017 à 21:13:47

Bonjour, 

Merci de cette formation :-)

Après avoir soumis l'activité 2(réalisez une page simple)

je découvre la tâche de correcteur, télécharge mon premier .zip (de correction) et ...

une activité 3...(pas encore étudiée...) m'est proposée à l'évaluation...

Dois-je  attendre qu'une nouvelle correction me soit proposée ?

Merci

15 août 2017 à 22:53:41

Bonsoir marcjhvc,

Bizarre, car pour corriger... il faut avoir accès à la correction !

Si vous êtes dans l'exercice activité2, je ne vois pas comment, sauf erreur, vous auriez accès à la correction de l'activité 3.

Êtes-vous sûr qu'il s'agit de l'exercice 3 et non pas d'une troisième correction de l'exo 2 (en général, on a 3 corrections -voir plus, à faire)
Si c'est le cas (erreur) contacter OpenClassroom via hello@openclassrooms.com ou en cliquant sur le formulaire de contact (nous contacter) en bas de page.
Bernard

-
Edité par nanart 15 août 2017 à 22:54:19

16 août 2017 à 0:01:04

Merci pour la réponse nanart.

Bon, il y a manifestement erreur de soumission par le/la candidat(e), car le fichier a évaluer n'a rien à voir en structure, aspect et contenu avec l'exercice imposé tant pour activité partie 3 que pour  activité partie 2. C'est simplement surprenant quand on commence à corriger.

16 août 2017 à 1:26:02

Dans ce cas (erreur) le conseil apporté systématiquement est de noter 0
et d'indiquer à son auteur sa possibilité d'en informer Open Classrooms via l'e-mail fourni plus haut.

16 août 2017 à 23:43:27

Salut,

nanart a écrit:

Dans ce cas (erreur) le conseil apporté systématiquement est de noter 0
et d'indiquer à son auteur sa possibilité d'en informer Open Classrooms via l'e-mail fourni plus haut.


C'est ce que je ferait aussi, Parce que comme dit nanart, Tout cela parait bizarre !

RobinsonArchbold a écrit:

hi


Bonsoir RobinsonArchbold,
édit je comprend mieux après avoir consultée ton profil !

<!--Pour quoi mettre tout simplement Hi(Salut) ? J'ai du mal a comprendre ?-->

A bientôt sur le forum.

-
Edité par webcode 16 août 2017 à 23:45:19

Tester le code Premium Solo et gagner un mois gratuit sans engagement, Voici le code promotionnel : WEBCODE-9F7H
18 août 2017 à 18:08:18

Bonjour

Puisque le sujet a été évoqué de la mise à niveau vers la version 4 pour information il y a eu de nombreux changements entre la dernière version alpha et la première beta. Du coup tous les tutoriels et ouvrages existants sont presque totalement obsolètes et je vous mets en garde à ce sujet. Le plus sage est d'attendre encore un peu. La version beta devrait être nettement plus stable mais on n'est pas encore à l'abri de changements au niveau de certains composants.

Toujours est-il que cette version est une avancée majeure pour le framework avec entre autres :

  • le changement complet de la barre de navigation

  • l'utilisation de Flexbox avec une grille totalement remaniée (mais du coup abandon de la prise en charge de IE9)

  • l'utilisation de Sass à la place de Less

  • une réécriture presque complète du code CSS

  • un passage à ES6 pour l'écriture des plugins Javascript

  • l'ajout du composant Card

  • l'abandon des icônes de Glyphicon...

Exercices du cours Bootstrap / Vos questions

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown