この記事では、ブートストラップ面接でよくある質問をいくつかまとめています。困っている友人は参考にしていただければ幸いです。ブートストラップ関連のチュートリアルをさらに学習して入手したい場合は、ブートストラップ チュートリアル !
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) ラベルにclass="control-label"を追加します。
7. ブートストラップを使用してフォーム コントロールのヘルプ テキストを作成するにはどうすればよいですか? class="help-block" を使用して、span タグまたは p タグを追加します。
8. ブートストラップを使用してボタンを有効または無効にする方法は? アクティブ化ボタン: .active クラスをボタンに追加します。
無効化ボタン: ボタンに disabled="disabled" 属性を追加します。
9、ブートストラップのクラス はありますか? (1).img-rounded 画像に丸い角を追加します
(2).img-circle 画像を円にします
(3) img-thumbnail サムネイル関数
#(4).img-sensitive 画像の応答性 (親要素にも十分に拡張されます)
#10. Bootstrap Floating での関連要素のフローティングとクリアクラス?
(1) class="pull-left" 要素は左にフロートします (2) class="pull-right" 要素は右にフロートします
( 3) class="clearfix" clear float
11. スクリーン リーダーに加えて、他のデバイス上の隠し要素のクラスは何ですか?
class="sr-only"
12. Bootstrap でドロップダウン メニューを作成するにはどうすればよいですか?
(1) ドロップダウン メニューを class="dropdown" の
で囲みます。 (2) をトリガーするボタンに class=" を追加します。ドロップダウン メニュー btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
(3) ドロップダウン メニューをラップする ul を追加します: class="dropdown-menu" role ="menu" aria-labelledby ="dropdownMenu1"
(4) ドロップダウン メニューのリスト項目に role="プレゼンテーション" を追加します。このうち、ドロップダウンメニューのタイトルにclass="dropdown-header"、オプション部分にtabindex="-1"を追加する必要があります。
13. Bootstrap でボタン グループを作成するにはどうすればよいですか?また、横ボタングループと縦ボタングループの優先順位はどうなるのでしょうか?
(1) class="btn-group"
を使用してボタン グループをラップします。class="btn-group-vertical" を使用すると、垂直方向のボタン グループを設定できます。 (2) btn-group の優先度は btn-group-vertical の優先度よりも高くなります。
14. ブートストラップでボタンのドロップダウン メニューを設定するにはどうすればよいですか?
ボタンとドロップダウン メニューを .btn グループに配置するだけです。
15. Bootstrap で入力ボックス グループを作成するにはどうすればよいですか?
(1) class="input-group" を使用して、プレフィックスまたはサフィックス要素を
に配置します。 class="input-group-addon" の 内の追加コンテンツ
(3) の前後に を配置します。
16. Bootstrap のナビゲーションとは何ですか? (1) ナビゲーション要素: class="nav nav-tabs" を使用したタブ ナビゲーションと、class="nav nav-pills" を使用したカプセル タブ ナビゲーションがあります。
(2) ) ナビゲーション バー: class="navbar navbar-default" role="navigation";
(3) ブレッドクラム ナビゲーション: class="breadcrumb"
##17 、ページング クラスを設定します。ブートストラップ?
デフォルトのページング: class="pagination"
デフォルトのページング: class="pager"
18. Bootstrap クラスでラベルを表示しますか?
class="label"
19. Bootstrap でバッジを作成するにはどうすればよいですか?
26
20. Bootstrap における超大画面の役割は何ですか?
class="jumbotron" を設定すると、タイトルのサイズを大きくし、余白を増やすことができます。
要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。
以上がブートストラップの面接でよくある質問 (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。