Formulaires Bootstrap que vous devez apprendre tous les jours_compétences Javascript

Cet article explique principalement le formulaire. Ce n'est en fait pas étranger aux personnes qui ont créé des sites Web, et on peut dire que c'est le formulaire de formulaire le plus couramment utilisé pour soumettre des données. Cet article explique principalement le contenu :

1. Cas de base
2. Formulaire en ligne
3. Formulaires disposés horizontalement
4.Contrôles pris en charge
5. Contrôles statiques
6. Statut de contrôle
7. Contrôler la taille
8. Texte d'aide

Cas de base
Les contrôles de formulaire individuels se verront automatiquement attribuer certains styles globaux. Tous les éléments , et <select> pour lesquels .form-control est défini seront définis sur width : 100 % ; Envelopper l'étiquette et les contrôles mentionnés précédemment dans un groupe .form peut fournir le meilleur arrangement. <br> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115326120.png?20151023115335" /></p> <p>La largeur des deux zones de texte est bien de 100 %. Et il existe trois groupes de formulaires. <br /> <strong>Formulaire en ligne</strong><br /> Définissez .form-inline pour les contrôles de niveau alignés à gauche et en ligne afin de les organiser de manière plus compacte. <br /> <strong><span style="color: #808080">Besoin de définir la largeur : dans Bootstrap, input, select et textarea sont définis sur 100 % de largeur par défaut. Pour utiliser des formulaires en ligne, vous devez définir la largeur spécifiquement pour le contrôle de formulaire que vous utilisez. <br /> </span></strong></p> <p><strong><span style="color: #808080"> Assurez-vous de définir une étiquette : si vous ne définissez pas d'étiquette pour chaque contrôle d'entrée, les lecteurs d'écran ne pourront pas la lire correctement. Pour ces formulaires en ligne, vous pouvez les masquer en définissant .sr uniquement pour l'étiquette. </span></strong><br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115429540.png?20151023115436" /></p> <p><strong>Formulaire disposé horizontalement</strong><br /> En ajoutant .form-horizontal au formulaire et en utilisant la classe de grille prédéfinie de Bootstrap, les étiquettes et les groupes de contrôle peuvent être disposés horizontalement côte à côte. Cela modifiera le comportement de .form-group afin qu'il se comporte comme des lignes dans un système de grille, il n'est donc plus nécessaire d'utiliser .row. <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115509519.png?20151023115517" /></p> <p><strong>Contrôles pris en charge</strong><br /> Les contrôles de formulaire standard pris en charge sont affichés dans le cas de mise en page du formulaire. <br /> <span style="color: #800000"><strong>Entrée</strong></span><br /> La plupart des contrôles de formulaire et des champs de saisie de texte. Inclut tous les types pris en charge par HTML5 : <span style="color: #800000">texte, mot de passe, datetime, datetime-local, date, mois, heure, semaine, numéro, email, url, recherche, tel<span style="color: #000000"> et </span>couleur. <br /> </span>Remarque : seuls les contrôles de saisie dont le type est correctement défini peuvent recevoir le style correct. <br /> Exemple de zone de texte<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="94121" class="copybut" id="copybut94121" onclick="doCopy('code94121')"><U>Copier le code</U></a></span> Le code est le suivant :</div><div class="codebody" id="code94121"><input type="text" class="form-control" placeholder="Saisie de texte"></div></p> <p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115647852.png?20151023115654" /></p> <p><span style="color: #3366ff"><strong>Zone de texte</strong></span><br /> Contrôles de formulaire prenant en charge le texte multiligne. L'attribut rows peut être modifié selon les besoins. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <h1>textarea</h1> <textarea class="form-control" rows="3"></textarea> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115709715.png?20151023115717" /></p> <p><span style="color: #3366ff"><strong>Box à cocher et radio</strong></span><br /> La case à cocher est utilisée pour sélectionner une ou plusieurs options dans une liste, tandis que la radio est utilisée pour sélectionner une seule option parmi plusieurs options. <br /> Apparence par défaut (empilée) </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that&mdash;be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"><span style="color: #3366ff"><strong><span id="1448251122076S" style="display: none"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115826545.png?20151023115833" /> </span></strong></span></p> <p><span style="color: #3366ff"><strong>Boxes à cocher en ligne</strong></span></p> <p>En appliquant .checkbox-inline ou .radio-inline à une série de cases à cocher ou de commandes radio, vous pouvez organiser ces commandes dans une rangée. <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"> <img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115906984.png?20151023115913" /></p> <p> 同理Radio是一样的，只需要添加一下样式即可。<br /> <span style="color: #3366ff"><strong>Select</strong></span><br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"><strong><span id="1448251197723S" style="display: none"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115943836.png?20151023115951" /> </span></strong></p> <p><strong>静态控件</strong><br /> 在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为<p>元素添加.form-control-static即可。<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"><strong><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123120025007.png?2015102312032" /></strong></p> <p><strong>控件状态</strong><br /> 　　通过为控件和label设置一些基本状态，可以为用户提供回馈。<br /> 　　<span style="color: #800000"><strong>输入焦点<br /> </strong></span>　　我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="85835" class="copybut" id="copybut85835" onclick="doCopy('code85835')"><U>复制代码</U></a></span> 代码如下:</div><div class="codebody" id="code85835"><input class="form-control" id="focusedInput" type="text" value="This is focused..."></div></p> <p>　　<span style="color: #800000"><strong>被禁用的输入框<br /> </strong></span> 　　为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观。<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="63809" class="copybut" id="copybut63809" onclick="doCopy('code63809')"><U>复制代码</U></a></span> 代码如下:</div><div class="codebody" id="code63809"><input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled></div></p> <p>　　<span style="color: #800000"><strong>被禁用的fieldset<br /> </strong></span>　　为<fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。<br /> <a>标签的链接功能不受影响</p> <p><span style="color: #808080"><strong>这个class只改变<a class="btn btn-default">按钮的外观，并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。<br /> </strong></span></p> <p><span style="color: #808080"><strong>跨浏览器兼容性</strong></span></p> <p><span style="color: #808080"><strong>虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的<fieldset>并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset<br /> </strong></span></p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <form role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div class="form-group"> <label for="disabledSelect">Disabled select menu</label> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </fieldset> </form> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123120226143.png?2015102312233" /></p> <p>　　可将鼠标移到各个控件上进行查看效果。<br /> <span style="color: #3366ff"><strong>校验状态</strong></span><br /> Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <input type="text" class="form-control" id="inputWarning"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> </div> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p style="text-align: center"><strong><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123120324131.png?2015102312333" /></strong></p> <p><strong>控件尺寸<br /> </strong>通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。<br /> <span style="color: #800000"><strong>高度尺寸</strong></span><br /> 创建大一些或小一些的表单控件以匹配按钮尺寸。<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> <select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123120521884.png?2015102312529" /><span style="max-width:90%"><strong><span id="1448251538119S" style="display: none"> </span></strong></span></p> <p><span style="color: #800000"><strong>调整列尺寸<br /> </strong></span>用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p><strong>Texte d'aide<br> </strong> Texte d'aide au niveau du bloc pour les contrôles de formulaire. <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="3330" class="copybut" id="copybut3330" onclick="doCopy('code3330')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code3330"><span class="help-block">Posséder un en exclusivité ou plusieurs lignes de texte d'aide au niveau du bloc. </span></div> <br> Cet article explique principalement le contrôle de style de divers contrôles du formulaire, y compris l'utilisation simple du style des boutons. Le prochain article se concentrera sur l'explication du style des boutons. <p>Pour plus de détails, veuillez vous référer à : </p> <p><a target="_blank" href="http://www.jb51.net/article/75326.htm"><strong>Analyse complète de la façon d'utiliser les formulaires Bootstrap (styles de formulaire) </strong></a></p> <p><a target="_blank" href="http://www.jb51.net/article/75328.htm"><strong>Analyse complète de la façon d'utiliser les formulaires Bootstrap (contrôles de formulaire) </strong></a></p> <p><a target="_blank" href="http://www.jb51.net/article/75332.htm"><strong>Analyse complète de la façon d'utiliser les formulaires Bootstrap (état du contrôle des formulaires) </strong></a></p> <p><a target="_blank" href="http://www.jb51.net/article/75333.htm"><strong>Analyse complète de la façon d'utiliser les formulaires Bootstrap (boutons de formulaire) </strong></a></p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Étiquettes associées：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/fr/search?word=bootstrap" target="_blank">bootstrap</a> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/fr/search?word=表单" target="_blank">表单</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/fr/faq/4126.html" title="jquery réalise le partage de code pour déplacer le contenu de la zone de sélection vers la gauche et la droite_jquery"> <span>Article précédent：jquery réalise le partage de code pour déplacer le contenu de la zone de sélection vers la gauche et la droite_jquery</span> </a> <a href="https://www.php.cn/fr/faq/4128.html" title="Implémentation de la fonction de téléchargement de fichiers basée sur nodejs express(4.x)_node.js"> <span>Article suivant：Implémentation de la fonction de téléchargement de fichiers basée sur nodejs express(4.x)_node.js</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Déclaration de ce site Web</div> <div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">Derniers articles par auteur</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796639331.html">Qu'est-ce qu'une NullPointerException et comment y remédier ?</a> </div> <div>2024-10-22 09:46:29</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796629482.html">De novice à codeur : votre voyage commence par les principes fondamentaux du C</a> </div> <div>2024-10-13 13:53:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796628545.html">Débloquer le développement Web avec PHP : guide du débutant</a> </div> <div>2024-10-12 12:15:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796627928.html">Démystifier C : un chemin clair et simple pour les nouveaux programmeurs</a> </div> <div>2024-10-11 22:47:31</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796627806.html">Libérez votre potentiel de codage : programmation C pour les débutants absolus</a> </div> <div>2024-10-11 19:36:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796627670.html">Libérez votre programmeur intérieur : C pour les débutants absolus</a> </div> <div>2024-10-11 15:50:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796627643.html">Automatisez votre vie avec C : scripts et outils pour les débutants</a> </div> <div>2024-10-11 15:07:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796627620.html">PHP Made Easy : vos premiers pas dans le développement Web</a> </div> <div>2024-10-11 14:21:21</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796627574.html">Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité</a> </div> <div>2024-10-11 12:59:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/1796627539.html">La clé du codage : libérer la puissance de Python pour les débutants</a> </div> <div>2024-10-11 12:17:31</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Derniers numéros</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176396.html" target="_blank" title="La page ne peut soudainement plus extraire le CSS ou le bootstrap" class="wdcdcTitle">La page ne peut soudainement plus extraire le CSS ou le bootstrap</a> <a href="https://www.php.cn/fr/wenda/176396.html" class="wdcdcCons">Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 21:58:04</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>800</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176386.html" target="_blank" title="Comment résoudre le mystérieux espace vide en bas de page en CSS" class="wdcdcTitle">Comment résoudre le mystérieux espace vide en bas de page en CSS</a> <a href="https://www.php.cn/fr/wenda/176386.html" class="wdcdcCons">J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 20:22:15</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>454</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176324.html" target="_blank" title="Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay" class="wdcdcTitle">Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay</a> <a href="https://www.php.cn/fr/wenda/176324.html" class="wdcdcCons">Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 12:53:11</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>376</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176246.html" target="_blank" title="Le commutateur Bootstrap ne fonctionne pas correctement lorsque la page Web est redimensionnée" class="wdcdcTitle">Le commutateur Bootstrap ne fonctionne pas correctement lorsque la page Web est redimensionnée</a> <a href="https://www.php.cn/fr/wenda/176246.html" class="wdcdcCons">Description :<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"c...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-05 08:45:39</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>3443</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176228.html" target="_blank" title="Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel" class="wdcdcTitle">Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel</a> <a href="https://www.php.cn/fr/wenda/176228.html" class="wdcdcCons">J'ai téléchargé l'URL AWS comme https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-04 22:16:18</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1450</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Rubriques connexes</div> <a href="https://www.php.cn/fr/faq/zt" target="_blank">Plus> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/xauthoritwjss"><img src="https://img.php.cn/upload/subject/202407/22/2024072214024455530.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Qu'est-ce qu'un fichier .Xauthority ?" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/xauthoritwjss" class="title-a-spanl" title="Qu'est-ce qu'un fichier .Xauthority ?"><span>Qu'est-ce qu'un fichier .Xauthority ?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/wordbgflydkjj"><img src="https://img.php.cn/upload/subject/202407/22/2024072212221640653.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Solution pour diviser le tableau de mots en deux pages" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/wordbgflydkjj" class="title-a-spanl" title="Solution pour diviser le tableau de mots en deux pages"><span>Solution pour diviser le tableau de mots en deux pages</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/excelbgxxyfwe"><img src="https://img.php.cn/upload/subject/202407/22/2024072214264258410.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Barre oblique du tableau Excel divisée en deux" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/excelbgxxyfwe" class="title-a-spanl" title="Barre oblique du tableau Excel divisée en deux"><span>Barre oblique du tableau Excel divisée en deux</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/gq"><img src="https://img.php.cn/upload/subject/202407/22/2024072214384374719.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Qu'est-ce qu'un lecteur optique" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/gq" class="title-a-spanl" title="Qu'est-ce qu'un lecteur optique"><span>Qu'est-ce qu'un lecteur optique</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/dnyycxfsycunk"><img src="https://img.php.cn/upload/subject/202407/22/2024072212244638004.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Solutions aux exceptions logicielles inconnues dans les applications informatiques" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/dnyycxfsycunk" class="title-a-spanl" title="Solutions aux exceptions logicielles inconnues dans les applications informatiques"><span>Solutions aux exceptions logicielles inconnues dans les applications informatiques</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/fxjssmpt"><img src="https://img.php.cn/upload/subject/202407/22/2024072214305863452.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Quelle plateforme est Fengxiangjia ?" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/fxjssmpt" class="title-a-spanl" title="Quelle plateforme est Fengxiangjia ?"><span>Quelle plateforme est Fengxiangjia ?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/ynxmlssyq"><img src="https://img.php.cn/upload/subject/202407/22/2024072213505727266.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Quels sont les moteurs de recherche d'annuaire ?" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/ynxmlssyq" class="title-a-spanl" title="Quels sont les moteurs de recherche d'annuaire ?"><span>Quels sont les moteurs de recherche d'annuaire ?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/qrssmrj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214160946974.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Quel logiciel est Penguin ?" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/qrssmrj" class="title-a-spanl" title="Quel logiciel est Penguin ?"><span>Quel logiciel est Penguin ?</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">Recommandations populaires</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="que signifie js" href="https://www.php.cn/fr/faq/482163.html">que signifie js</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment convertir une chaîne en tableau en js ?" href="https://www.php.cn/fr/faq/461802.html">Comment convertir une chaîne en tableau en js ?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment actualiser la page en utilisant javascript" href="https://www.php.cn/fr/faq/473330.html">Comment actualiser la page en utilisant javascript</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment utiliser la fonction sqrt" href="https://www.php.cn/fr/faq/415276.html">Comment utiliser la fonction sqrt</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment supprimer un élément dans le tableau js" href="https://www.php.cn/fr/faq/475790.html">Comment supprimer un élément dans le tableau js</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Tutoriels populaires</div> <a target="_blank" href="https://www.php.cn/fr/course.html">Plus> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Tutoriels associés <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Recommandations populaires<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Derniers cours<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="https://www.php.cn/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a> <div class="wzrthreerb"> <div>1421157 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/74.html" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" href="https://www.php.cn/fr/course/74.html">Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine</a> <div class="wzrthreerb"> <div>4264804 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="https://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a> <div class="wzrthreerb"> <div>2515484 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="https://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a> <div class="wzrthreerb"> <div>506144 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/2.html" title="Tutoriel d'introduction PHP base zéro" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="Tutoriel d'introduction PHP base zéro"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel d'introduction PHP base zéro" href="https://www.php.cn/fr/course/2.html">Tutoriel d'introduction PHP base zéro</a> <div class="wzrthreerb"> <div>861248 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="https://www.php.cn/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a> <div class="wzrthreerb"> <div >1421157 temps d'étude</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="https://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a> <div class="wzrthreerb"> <div >2515484 temps d'étude</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="https://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a> <div class="wzrthreerb"> <div >506144 temps d'étude</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/901.html" title="Introduction rapide au développement web front-end" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Introduction rapide au développement web front-end"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Introduction rapide au développement web front-end" href="https://www.php.cn/fr/course/901.html">Introduction rapide au développement web front-end</a> <div class="wzrthreerb"> <div >215610 temps d'étude</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/234.html" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Maîtrisez les didacticiels vidéo PS à partir de zéro"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" href="https://www.php.cn/fr/course/234.html">Maîtrisez les didacticiels vidéo PS à partir de zéro</a> <div class="wzrthreerb"> <div >885877 temps d'étude</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/fr/course/1648.html" title="[Web front-end] Démarrage rapide de Node.js" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Démarrage rapide de Node.js"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Démarrage rapide de Node.js" href="https://www.php.cn/fr/course/1648.html">[Web front-end] Démarrage rapide de Node.js</a> <div class="wzrthreerb"> <div >7193 temps d'étude</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/1647.html" title="Collection complète de cours full-stack de développement Web étranger" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Collection complète de cours full-stack de développement Web étranger"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Collection complète de cours full-stack de développement Web étranger" href="https://www.php.cn/fr/course/1647.html">Collection complète de cours full-stack de développement Web étranger</a> <div class="wzrthreerb"> <div >5577 temps d'étude</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/1646.html" title="Aller au langage pratique GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Aller au langage pratique GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Aller au langage pratique GraphQL" href="https://www.php.cn/fr/course/1646.html">Aller au langage pratique GraphQL</a> <div class="wzrthreerb"> <div >4695 temps d'étude</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/1645.html" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" href="https://www.php.cn/fr/course/1645.html">Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape</a> <div class="wzrthreerb"> <div >671 temps d'étude</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/1644.html" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" href="https://www.php.cn/fr/course/1644.html">Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures</a> <div class="wzrthreerb"> <div >23725 temps d'étude</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Derniers téléchargements</div> <a href="https://www.php.cn/fr/xiazai">Plus> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">effets Web <div></div></div> <div class="swiper-slide" data-id="twof">Code source du site Web<div></div></div> <div class="swiper-slide" data-id="threef">Matériel du site Web<div></div></div> <div class="swiper-slide" data-id="fourf">Modèle frontal<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code de contact du formulaire de message d'entreprise jQuery" href="https://www.php.cn/fr/toolset/js-special-effects/8071">[bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets de lecture de boîte à musique HTML5 MP3" href="https://www.php.cn/fr/toolset/js-special-effects/8070">[Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets spéciaux du menu de navigation d'animation de particules cool HTML5" href="https://www.php.cn/fr/toolset/js-special-effects/8069">[Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code d'édition par glisser-déposer du formulaire visuel jQuery" href="https://www.php.cn/fr/toolset/js-special-effects/8068">[bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code du lecteur de musique Kugou imitation VUE.JS" href="https://www.php.cn/fr/toolset/js-special-effects/8067">[Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Jeu de boîte de poussée HTML5 classique" href="https://www.php.cn/fr/toolset/js-special-effects/8066">[effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="défilement jQuery pour ajouter ou réduire des effets d'image" href="https://www.php.cn/fr/toolset/js-special-effects/8065">[Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effet de zoom de survol de la couverture de l'album personnel CSS3" href="https://www.php.cn/fr/toolset/js-special-effects/8064">[Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8328" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8327" title="Modèle de page de guide de CV personnel aux couleurs fraîches" target="_blank">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8326" title="Modèle Web de CV de travail créatif de concepteur" target="_blank">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8325" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8324" title="Modèle HTML5 réactif pour les établissements de services éducatifs" target="_blank">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8323" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne" target="_blank">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8322" title="La technologie informatique résout le modèle de site Web d'entreprise Internet" target="_blank">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8321" title="Modèle de site Web de service de trading de devises de style violet" target="_blank">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3078" target="_blank" title="Matériau vectoriel d'éléments d'été mignons (EPS+PNG)">[Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3077" target="_blank" title="Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)">[Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3076" target="_blank" title="Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)">[image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3075" target="_blank" title="Matériau vectoriel de chapeau de graduation doré (EPS+PNG)">[Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3074" target="_blank" title="Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)">[Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3073" target="_blank" title="Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes">[Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3072" target="_blank" title="Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)">[image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3071" target="_blank" title="Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)">[Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8328" target="_blank" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8327" target="_blank" title="Modèle de page de guide de CV personnel aux couleurs fraîches">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8326" target="_blank" title="Modèle Web de CV de travail créatif de concepteur">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8325" target="_blank" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8324" target="_blank" title="Modèle HTML5 réactif pour les établissements de services éducatifs">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8323" target="_blank" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8322" target="_blank" title="La technologie informatique résout le modèle de site Web d'entreprise Internet">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8321" target="_blank" title="Modèle de site Web de service de trading de devises de style violet">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p> </div> <div class="footermid"> <a href="https://www.php.cn/fr/about/us.html">À propos de nous</a> <a href="https://www.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a> <a href="https://www.php.cn/fr/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1732928318"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>