Häufige Interviewfragen für Bootstrap (Zusammenfassung)

Dieser Artikel fasst einige häufig gestellte Fragen zu Bootstrap-Interviews für Sie zusammen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie lernen und weitere Bootstrap-Tutorials erhalten möchten, können Sie auch Folgendes besuchen: Bootstrap-Tutorial!

1. Warum Bootstrap verwenden?

Bootstrap bietet die Vorteile der Priorität für mobile Geräte, einer guten Browserunterstützung, einer einfachen Bedienung und eines ansprechenden Designs. usw. Daher ist Bootstrap weit verbreitet.

2.Fügen Sie das Viewport-Meta-Tag in 2.head hinzu

Um die von Bootstrap entwickelte Website mobilfreundlich zu gestalten und eine ordnungsgemäße Zeichnung und Berührung sicherzustellen Bei der Bildschirmskalierung ist es erforderlich, das Ansichtsfenster-Meta-Tag zum Kopf der Webseite hinzuzufügen, und das Attribut

width steuert die Breite des Geräts. Unter der Annahme, dass Ihre Website auf Geräten mit unterschiedlichen Bildschirmauflösungen angezeigt wird, stellt die Einstellung auf Gerätebreite sicher, dass sie auf verschiedenen Geräten korrekt gerendert wird.

iinitial-scale=1.0;Stellen Sie sicher, dass die Webseite beim Laden im Verhältnis 1:1 ohne Skalierung gerendert wird.

In mobilen Browsern kann das Zoomen deaktiviert werden, indem user-scalable=no zum viewport-Meta-Tag hinzugefügt wird.

Normalerweise wird maximum-scale=1.0 zusammen mit user-scalable=no verwendet. Nach dem Deaktivieren der Zoomfunktion können Benutzer nur den Bildschirm scrollen, wodurch Ihre Website eher wie eine native Anwendung aussieht. Fügen Sie daher den folgenden Code hinzu:

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

3 Für verschiedene Größen Für Geräte, was sind die von Bootstrap festgelegten Klassenpräfixe?

Extra kleine Geräte für Mobiltelefone (<768px): .col-xs-

Kleine Geräte für Tablets (>=768px): .col-sm-

Desktop für mittlere Geräte (>=992px): .col-md-

Desktop für große Geräte (>=1200px): .col-lg-

4 .So geht's eine responsive Tabelle in Bootstrap einrichten?

Klasse hinzufügen="table-responsive"

5. Was sind die grundlegenden Schritte zum Erstellen eines vertikalen Formulars mit Bootstrap?

(1) Rolle="form" zum übergeordneten Element

hinzufügen (2) Beschriftung und Steuerelement in einer Gruppe mit class="form-" platzieren. Gruppe " in

, was notwendig ist, um einen optimalen Abstand zu erhalten;

(3) Fügen Sie class=" zu allen Textelementen , , <select> hinzu ". </p> <p><strong>6. Was sind die grundlegenden Schritte zum Erstellen eines horizontalen Formulars mit Bootstrap? </strong></p> <p> (1) Fügen Sie class="form-horizontal" zum übergeordneten Element <form> hinzu. (2) Platzieren Sie die Beschriftung und das Steuerelement in einem class="form"; -group"'s<p></p> <p> (3) Fügen Sie class="control-label" zur Bezeichnung hinzu. </p> <p></p>7. Wie erstelle ich Hilfetext für Formularsteuerelemente mit Bootstrap? <p><strong></strong>Span-Tag oder P-Tag mit class="help-block" hinzufügen. </p> <p></p>8. Wie aktiviere oder deaktiviere ich Schaltflächen mit Bootstrap? <p><strong></strong>Schaltfläche aktivieren: .active-Klasse zur Schaltfläche hinzufügen</p> <p>Schaltfläche deaktivieren: Attribut „disabled“ zur Schaltfläche hinzufügen</p> <p></p>9 Welche Klassen gibt es für <img>? <p><strong></strong> (1).img-rounded fügt dem Bild abgerundete Ecken hinzu </p> <p> (2).img-circle ändert das Bild in einen Kreis </p> <p> (3) . img-thumbnail-Miniaturansichtsfunktion </p> <p> (4). Klasse? </p> <p></p> (1) class="pull-left"-Elemente schweben nach links <p><strong> (2) class="pull-right"-Elemente schweben nach rechts </strong></p> (3) class="clearfix" clear float <p></p> <p> 11. Welche Klasse gibt es zusätzlich zu Screenreadern für versteckte Elemente auf anderen Geräten? </p> <p></p>class="sr-only"<p><strong></strong>12. Wie erstelle ich ein Dropdown-Menü in Bootstrap? </p> <p></p>(1) Schließen Sie das Dropdown-Menü in <p> von class="dropdown"; <p><strong>(2) Fügen Sie Folgendes hinzu: class=" zur Schaltfläche, die das auslöst Dropdown-Menü btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"</strong></p> (3) Fügen Sie die UL hinzu, die das Dropdown-Menü umschließt: class="dropdown-menu" Rolle ="menu" aria-labelledby ="dropdownMenu1"<p></p> (4) Fügen Sie: role="presentation" zum Listenelement des Dropdown-Menüs hinzu. Unter anderem sollte class="dropdown-header" zum Titel des Dropdown-Menüs und tabindex="-1" zum Optionsteil hinzugefügt werden. <p></p> <p>13. Wie erstelle ich eine Schaltflächengruppe in Bootstrap? Und die Priorität der horizontalen Tastengruppe und der vertikalen Tastengruppe? </p> <p></p> (1) Verwenden Sie class="btn-group" <p>, um die Schaltflächengruppe einzuschließen; class="btn-group-vertical" kann eine vertikale Schaltflächengruppe festlegen. <p><strong> (2) Die Priorität von btn-group ist höher als die Priorität von btn-group-vertikal. </strong></p> <p>14. Wie stelle ich das Dropdown-Menü der Schaltfläche in Bootstrap ein? </p> <p></p> <p>Platzieren Sie Schaltflächen und Dropdown-Menüs in einer .btn-Gruppe. </p> <p><strong>15. Wie erstelle ich die Eingabefeldgruppe in Bootstrap? </strong></p> <p> (1) Fügen Sie das Präfix- oder Suffixelement in ein <p> mit class="input-group" ein. (2) Im < Platzieren Sie zusätzlichen Inhalt im <span> von class="input-group-addon"; (3) Platzieren Sie <span> </p> <p></p>16. Was sind die Navigationen in Bootstrap? <p></p> <p> (1) Navigationselemente: Es gibt Tab-Navigation mit class="nav nav-tabs" und Kapsel-Tab-Navigation mit class="nav nav-pills" <strong></strong> (2 ) Navigationsleiste: class="navbar navbar-default" role="navigation"; </p> <p> (3) Breadcrumb-Navigation: class="breadcrumb"</p> <p></p>17 , Legen Sie die Paging-Klasse fest in Bootstrap? <p></p> <p>Standard-Paging: class="pagination"<strong></strong>Standard-Paging: class="pager"</p> <p></p> 18. Beschriftungen in der Bootstrap-Klasse anzeigen? <p></p> <p>class="label"<strong></strong></p>19. Wie erstelle ich ein Abzeichen in Bootstrap? <p></p> <p><span class="badge">26</span><strong></strong></p>20 Welche Rolle spielt der supergroße Bildschirm in Bootstrap? <p></p> <p>Setzen Sie class="jumbotron", um besonders große Bildschirme zu erstellen. Diese Komponente kann die Größe des Titels erhöhen und mehr Ränder hinzufügen. <strong></strong>Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. </p><p>Das obige ist der detaillierte Inhalt vonHäufige Interviewfragen für Bootstrap (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>Stellungnahme：</span><div>Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Einführung in den Typografiestil, den Listenstil und den Tabellenstil des Bootstrap-Layouts" href="http://m.php.cn/de/faq/411585.html">Einführung in den Typografiestil, den Listenstil und den Tabellenstil des Bootstrap-Layouts</a></span><span>Nächster Artikel：<a class="dBlack" title="Einführung in den Typografiestil, den Listenstil und den Tabellenstil des Bootstrap-Layouts" href="http://m.php.cn/de/faq/411588.html">Einführung in den Typografiestil, den Listenstil und den Tabellenstil des Bootstrap-Layouts</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</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="http://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</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><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><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></html>