Questions d'entretien courantes pour le bootstrap (résumé)

Cet article résume pour vous quelques questions courantes d'entretien bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. Si vous souhaitez apprendre et obtenir plus de tutoriels sur le bootstrap, vous pouvez également visiter : tutoriel bootstrap !

1. Pourquoi utiliser bootstrap ?

Bootstrap présente les avantages de la priorité aux appareils mobiles, d'une bonne prise en charge du navigateur, d'une conception facile à utiliser et réactive, etc. Bootstrap est donc largement utilisé.

2.Ajoutez la balise méta viewport dans 2.head

Afin de rendre le site Web développé par Bootstrap adapté aux mobiles et d'assurer un dessin et un toucher corrects mise à l'échelle de l'écran, il est nécessaire d'ajouter la balise méta viewport à l'en-tête de la page Web, et l'attribut

width contrôle la largeur de l'appareil. En supposant que votre site Web sera affiché sur des appareils avec des résolutions d'écran différentes, le définir sur la largeur de l'appareil garantira qu'il s'affichera correctement sur différents appareils.

iinitial-scale=1.0;Assurez-vous que lorsque la page Web est chargée, elle sera rendue à un rapport 1:1 sans aucune mise à l'échelle.

Sur les navigateurs mobiles, le zoom peut être désactivé en ajoutant user-scalable=no à la balise méta viewport .

Normalement, maximum-scale=1.0 est utilisé avec user-scalable=no. Après avoir désactivé la fonction de zoom, les utilisateurs peuvent uniquement faire défiler l'écran, ce qui donne à votre site Web l'apparence d'une application native, alors ajoutez le code suivant :

<metaname="viewport" content="width=device-width,initial-scale=1">

3 Pour chaque Pour les appareils avec classe. tailles, quels sont les préfixes de classe définis par Bootstrap ?

Téléphones pour très petits appareils (<768px) : .col-xs-

Tablettes pour petits appareils (>=768px) : .col-sm-

Bureau d'appareil moyen (>=992px) : .col-md-

Bureau d'appareil grand format (>=1200px) : .col-lg-

4 .Comment configurer une table réactive dans Bootstrap ?

Ajouter une classe="table-responsive"

5. Quelles sont les étapes de base pour créer un formulaire vertical à l'aide de Bootstrap ?

(1) Ajoutez role="form" à l'élément parent

(2) Placez l'étiquette et le contrôle dans un groupe avec class="form- ; group " dans

, ce qui est nécessaire pour obtenir un espacement optimal ;

(3) Ajoutez class=" à tous les éléments de texte , , <select> ". </p> <p><strong>6. Quelles sont les étapes de base pour créer un formulaire horizontal à l'aide de Bootstrap ? </strong></p> <p> (1) Ajoutez class="form-horizontal" à l'élément parent <form> </p> <p> (2) Placez l'étiquette et le contrôle dans un class="form" ; -group"<p> in; </p> <p> (3) Ajoutez class="control-label" à l'étiquette. </p> <p><strong>7. Comment créer un texte d'aide pour les contrôles de formulaire à l'aide de Bootstrap ? </strong></p> <p>Ajoutez une balise span ou une balise p avec class="help-block". </p> <p><strong>8. Comment activer ou désactiver les boutons à l'aide de Bootstrap ? </strong></p> <p>Bouton Activer : ajoutez la classe .active au bouton</p> <p>Bouton Désactiver : ajoutez l'attribut désactivé="disabled" au bouton</p> <p><strong>9. Quelles classes existe-t-il pour <img> ? </strong></p> <p> (1).img-rounded ajoute des coins arrondis à l'image </p> <p> (2).img-circle transforme l'image en cercle </p> <p> (3) . Fonction de vignette img-thumbnail </p> <p> (4). Réactivité de l'image sensible à l'image (sera bien étendue aux éléments parents) </p> <p><strong> 10. Flottage et suppression des éléments pertinents dans Bootstrap Floating. classe? </strong></p> <p> (1) les éléments class="pull-left" flottent vers la gauche </p> <p> (2) les éléments class="pull-right" flottent vers la droite </p> <p> ( 3) class="clearfix" clear flottant </p> <p><strong> 11. En plus des lecteurs d'écran, quelle est la classe des éléments cachés sur les autres appareils ? </strong></p> <p>class="sr-only"</p> <p><strong>12. Comment créer un menu déroulant dans Bootstrap ? </strong></p> <p>(1) Enveloppez le menu déroulant dans <p> de class="dropdown" </p> <p>(2) Ajoutez : class=" au bouton qui déclenche le menu déroulant btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"</p> <p> (3) Ajoutez le ul qui enveloppe le menu déroulant : class="dropdown-menu" rôle ="menu" aria-labelledby ="dropdownMenu1"</p> <p> (4) Ajoutez : role="presentation" à l'élément de liste du menu déroulant. Parmi eux, class="dropdown-header" doit être ajouté au titre du menu déroulant, et tabindex="-1" doit être ajouté à la partie options. </p> <p><strong>13. Comment créer un groupe de boutons dans Bootstrap ? Et la priorité du groupe de boutons horizontal et du groupe de boutons vertical ? </strong></p> <p> (1) Utilisez class="btn-group" <p> pour envelopper le groupe de boutons ; class="btn-group-vertical" peut définir un groupe de boutons vertical. </p> <p> (2) La priorité de btn-group est supérieure à la priorité de btn-group-vertical. </p> <p><strong>14. Comment paramétrer le menu déroulant du bouton dans Bootstrap ? </strong></p> <p>Placez les boutons et les menus déroulants dans un groupe .btn. </p> <p><strong>15. Comment créer le groupe de zones de saisie dans Bootstrap ? </strong></p> <p> (1) Mettez l'élément préfixe ou suffixe dans un <p> avec class="input-group" </p> <p> (2) Dans le <p> placez du contenu supplémentaire à l'intérieur du <span> de class="input-group-addon" </p> <p> (3) Placez <span> avant ou après l'élément <input> </p> <p><strong>16. Quelles sont les navigations dans Bootstrap ? </strong></p> <p> (1) Éléments de navigation : il existe une navigation par onglets avec class="nav nav-tabs" et une navigation par onglets capsules avec class="nav nav-pills" </p> <p> (2) ) Barre de navigation : class="navbar navbar-default" role="navigation"; </p> <p> (3) Navigation dans le fil d'Ariane : class="breadcrumb"</p> <p><strong>17, Définir la classe de pagination dans Bootstrap? </strong></p> <p>Pagination par défaut : class="pagination"</p> <p>Pagination par défaut : class="pager"</p> <p><strong> 18. Afficher les étiquettes dans la classe Bootstrap ? </strong></p> <p>class="label"</p> <p><strong>19. Comment créer un badge dans Bootstrap ? </strong></p> <p><span class="badge">26</span></p> <p><strong>20. Quel est le rôle du super grand écran dans Bootstrap ? </strong></p> <p>Définissez class="jumbotron" pour créer des écrans extra grands. Ce composant peut augmenter la taille du titre et ajouter plus de marges. </p> <p>Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. </p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">bootstrap</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">外边距</a> <a href="javascript:void(0);">viewport</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">ul</a> <a href="javascript:void(0);">table</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Introduction au style de typographie, au style de liste et au style de tableau de la mise en page bootstrap" href="https://m.php.cn/fr/faq/411585.html">Introduction au style de typographie, au style de liste et au style de tableau de la mise en page bootstrap</a></span><span>Article suivant：<a class="dBlack" title="Introduction au style de typographie, au style de liste et au style de tableau de la mise en page bootstrap" href="https://m.php.cn/fr/faq/411588.html">Introduction au style de typographie, au style de liste et au style de tableau de la mise en page bootstrap</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/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://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' 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>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>