ブートストラップの面接でよくある質問 (概要)

この記事では、ブートストラップ面接でよくある質問をいくつかまとめています。困っている友人は参考にしていただければ幸いです。ブートストラップ関連のチュートリアルをさらに学習して入手したい場合は、ブートストラップ チュートリアル!

1. ブートストラップを使用する理由

#ブートストラップには、モバイル デバイスの優先順位、優れたブラウザーのサポート、使いやすさ、応答性の高いデザインという利点があります。など、Bootstrap が広く使われています。

2.head にビューポート メタ タグを追加します。

Bootstrap によって開発された Web サイトをモバイル対応にし、適切な描画とタッチ スクリーンを確保するために拡大縮小するには、ビューポート メタ タグを Web ページの先頭に追加する必要があります。

width 属性はデバイスの幅を制御します。 Web サイトがさまざまな画面解像度のデバイスで表示されることを想定して、Web サイトをデバイス幅に設定すると、さまざまなデバイスで正しくレンダリングされます。

i

initial-scale=1.0;Web ページが読み込まれるときに、スケーリングなしで 1:1 の比率でレンダリングされることを確認します。

モバイル ブラウザでは、

user-scalable=no を viewport メタ タグ に追加することでズーム機能を無効にできます。

通常、

maximum-scale=1.0 は user-scalable=no とともに使用されます。ズーム機能を無効にすると、ユーザーは画面をスクロールすることしかできなくなり、Web サイトがよりネイティブ アプリケーションのように見えるようになります。次のコードを追加します。

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

3 さまざまなサイズのデバイスの場合。クラスプレフィックスはブートストラップによって設定されますか? #超小型デバイスの携帯電話 (

小型デバイスのタブレット (>=768px): .col-sm-

中型デバイスのデスクトップ (>=992px): .col-md-

大型デバイスのデスクトップ (>=1200px): .col-lg-

4 .How to Bootstrap でレスポンシブ テーブルをセットアップしますか?

class="table-sensitive"

を追加します。Bootstrap を使用して縦型フォームを作成する基本的な手順は何ですか?

(1) role="form" を親

要素に追加します。

(2) ラベルとコントロールを class="form-

の group " (最適な間隔を取得するために必要です);

(3) すべてのテキスト要素 、、<select> に class=" を追加します。 」。 </p> <p></p>6. Bootstrap を使用して横型フォームを作成する基本的な手順は何ですか? <p><strong></strong>(1) class="form-horizo​​ntal" を親 </p> </form> <form> 要素に追加します。 <p>(2) class=" を使用してファイルにラベルとコントロールを配置します。 form -group"<p>; </p> <p> (3) ラベルにclass="control-label"を追加します。 </p> <p></p>7. ブートストラップを使用してフォーム コントロールのヘルプ テキストを作成するにはどうすればよいですか? <p><strong></strong>class="help-block" を使用して、span タグまたは p タグを追加します。 </p> <p></p>8. ブートストラップを使用してボタンを有効または無効にする方法は? <p><strong></strong>アクティブ化ボタン: .active クラスをボタンに追加します。</p> <p>無効化ボタン: ボタンに disabled="disabled" 属性を追加します。</p> <p></p>9、ブートストラップのクラス<img alt="ブートストラップの面接でよくある質問 (概要)" > はありますか? <p><strong></strong>(1).img-rounded 画像に丸い角を追加します</p> <p>(2).img-circle 画像を円にします</p> <p>(3) img-thumbnail サムネイル関数 </p>#(4).img-sensitive 画像の応答性 (親要素にも十分に拡張されます) <p></p>#10. Bootstrap Floating での関連要素のフローティングとクリアクラス？ <p></p> <p> (1) class="pull-left" 要素は左にフロートします <strong></strong> (2) class="pull-right" 要素は右にフロートします </p> <p> ( 3) class="clearfix" clear float </p> <p></p>11. スクリーン リーダーに加えて、他のデバイス上の隠し要素のクラスは何ですか? <p></p> <p>class="sr-only"<strong></strong></p>12. Bootstrap でドロップダウン メニューを作成するにはどうすればよいですか? <p></p> <p>(1) ドロップダウン メニューを class="dropdown" の <p> で囲みます。 <strong></strong>(2) をトリガーするボタンに class=" を追加します。ドロップダウン メニュー btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"</p> <p> (3) ドロップダウン メニューをラップする ul を追加します: class="dropdown-menu" role ="menu" aria-labelledby ="dropdownMenu1"</p> <p>(4) ドロップダウン メニューのリスト項目に role="プレゼンテーション" を追加します。このうち、ドロップダウンメニューのタイトルにclass="dropdown-header"、オプション部分にtabindex="-1"を追加する必要があります。 </p> <p></p>13. Bootstrap でボタン グループを作成するにはどうすればよいですか?また、横ボタングループと縦ボタングループの優先順位はどうなるのでしょうか？ <p></p> <p> (1) class="btn-group" <p> を使用してボタン グループをラップします。class="btn-group-vertical" を使用すると、垂直方向のボタン グループを設定できます。 <strong></strong>(2) btn-group の優先度は btn-group-vertical の優先度よりも高くなります。 </p> <p></p>14. ブートストラップでボタンのドロップダウン メニューを設定するにはどうすればよいですか? <p></p> <p> ボタンとドロップダウン メニューを .btn グループに配置するだけです。 </p> <p><strong>15. Bootstrap で入力ボックス グループを作成するにはどうすればよいですか? </strong></p> <p> (1) class="input-group" を使用して、プレフィックスまたはサフィックス要素を <p> に配置します。 class="input-group-addon" の <span> 内の追加コンテンツ </p> <p>(3) <input> の前後に <span> を配置します。 </p> <p></p>16. Bootstrap のナビゲーションとは何ですか? <p><strong></strong> (1) ナビゲーション要素: class="nav nav-tabs" を使用したタブ ナビゲーションと、class="nav nav-pills" を使用したカプセル タブ ナビゲーションがあります。 </p> <p> (2) ) ナビゲーション バー: class="navbar navbar-default" role="navigation"; </p> <p> (3) ブレッドクラム ナビゲーション: class="breadcrumb"</p> <p>##17 、ページング クラスを設定します。ブートストラップ？ </p> <p><strong>デフォルトのページング: class="pagination"</strong></p>デフォルトのページング: class="pager"<p></p> <p>18. Bootstrap クラスでラベルを表示しますか? </p> <p><strong>class="label"</strong></p> <p>19. Bootstrap でバッジを作成するにはどうすればよいですか? </p> <p><strong><span class="badge">26</span></strong></p> <p>20. Bootstrap における超大画面の役割は何ですか? </p> <p><strong>class="jumbotron" を設定すると、タイトルのサイズを大きくし、余白を増やすことができます。 </strong></p>要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。 <p></p> </form><p>以上がブートストラップの面接でよくある質問 (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</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>声明：</span><div>この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="ブートストラップ レイアウトのタイポグラフィ スタイル、リスト スタイル、テーブル スタイルの紹介" href="http://m.php.cn/ja/faq/411585.html">ブートストラップ レイアウトのタイポグラフィ スタイル、リスト スタイル、テーブル スタイルの紹介</a></span><span>次の記事：<a class="dBlack" title="ブートストラップ レイアウトのタイポグラフィ スタイル、リスト スタイル、テーブル スタイルの紹介" href="http://m.php.cn/ja/faq/411588.html">ブートストラップ レイアウトのタイポグラフィ スタイル、リスト スタイル、テーブル スタイルの紹介</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</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/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/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>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/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></html>