ホームページ > 記事 > ウェブフロントエンド > Bootstrap でのフォームとナビゲーションバーの使用方法の分析

Bootstrap でのフォームとナビゲーションバーの使用方法の分析

不言オリジナル: 2018-06-25 10:55:092087ブラウズ

この記事では主にBootstrapのフォームとナビゲーションバーの使い方を詳しく説明しますので、興味のある方は参考にしてください

1.フォーム(Form)

ソースコードファイル:
_form.scss
mixins/ _form.scss

1. 階層構造に従って: form-group -> form-control/input-group/form-static-control -> などのコンテナinput-group/form-static-control は、block と inline-block の 2 つの表示モードに分かれています。テーブルセルは、入力グループレベルを実装するために使用されます。

.input-group {
  display: inline-table;
  vertical-align: middle;
  .input-group-addon,
  .input-group-btn,
  .form-control {
  width: auto;
  }
}

3. 入力グループアドオン: Web ページのテキストアイコンがクラスに挿入されると、1 ピクセルずれます

解決策: glyphicon は他のスタイルとは使用できません。一緒に使用しますが、glyphicon には上部に 1 ピクセルの設定があるため、内部で使用します:

.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: &#39;Glyphicons Halflings&#39;;
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

2. ナビゲーションバー (navbar)

ソースコードファイル:

_navbar.scss 1. ヘッド、その他の領域、ナビゲーションバーの位置など、主に分割された内部領域

2. 代わりに、フォルダーの実装 (4.0 で削除)これは折りたたみであり、非表示のレイヤーがボタン上にポップアップします

2.1. Navbar-collapse: ブレークポイントよりも大きい場合、強制的に表示されます (デフォルトでは折りたたみが非表示になっているため)
3. コンテンツはナビゲーションをサポートしています。ブランド、フォーム、トグラー
4. Navbar-toggler (4.0 で削除): 画面がブレークポイント値 (768) より小さい場合に表示されるように設定されています。4.0 では、このボタンを直接表示するために折りたたみが使用されます。 navbar-toggle のアプリケーションは、collapse と組み合わせて使用する必要があります
5. Navbar-static-top: zIndex を追加し、丸い角、境界線の幅、その他のコンテンツを削除するだけです。
6. Navbar-fixed-top/bottom: フローティング効果付きで上下に配置されます
7. Navbar-brand: ブランド、Web ページ名、会社のロゴ、その他のコンテンツを配置できます
8. Navbar-toggle: 使用されます。縮小用クリックされた画像は、ブレークポイントより小さい場合に表示され、この値より大きい場合は非表示になります (トグル表示は右側にフローティングされ、相対位置決め要素として使用されます):

.navbar-toggle {
 position: relative;
 float: right;
 margin-right: $navbar-padding-horizontal;
 padding: 9px 10px;
 @include navbar-vertical-align(34px);
 background-color: transparent;
 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
 border: 1px solid transparent;
 border-radius: $border-radius-base;

 // We remove the `outline` here, but later compensate by attaching `:hover`
 // styles to `:focus`.
 &:focus {
 outline: 0;
 }

 // Bars
 .icon-bar {
 display: block;
 width: 22px;
 height: 2px;
 border-radius: 1px;
 }
 .icon-bar + .icon-bar {
 margin-top: 4px;
 }

 @media (min-width: $grid-float-breakpoint) {
 display: none;
 }
}

9. Navbar-nav: オリジナル nav に基づいていくつかの互換性設定が行われています。主な設定は、breakpoint-max でのスタイル調整、breakpointg でのスタイル調整、またはデフォルトの背景色、影の削除です。など。

10. Navbar-form: 主にすべてのフォームを調整します。インライン要素については

11、Navbar-text、navbar-btn: すべてデフォルトとインバースの 2 つのテーマがあり、それぞれのテーマには互換性のある設定があります。対応するスタイル互換処理
13. ナビゲーションバー自体には多くのスタイルはありません。主に 2 つのテーマと、ドロップダウン、折りたたみ、フォームの組み合わせです。ナビ。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

Bootstrap でのフォームとナビゲーションバーの使用方法の分析

関連記事