今日は、CSSコンポーネントの効果とより重要なクラスを見ていきます。これらのクラスは難しくありません。重要なのは、それらを熟練してマスターし、それらを組み合わせて使用し、柔軟に使用することです。最初の2つの記事のCSSスタイルとレイアウトに関する記事については、以前の記事で読むことができます。
1。ナビゲーションコンポーネント
私は自分でナビゲーションを作りました。現在、最初のレベルのメニューしかありません。次の記事では、JSプラグインを含む第2レベルのメニューが表示されるため、ここでは説明しません。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" width = bed "他のコンテンツは *それらに従う必要があります！ - > <title>セカンドレベルメニュー</title> <style> .sidebar-menu {margin：20px auto; width：180px;}/*マウススライディングのスタイルを書き直す*/。nav-pills li a：hover {background-color：＃337ab7;色：#fff;} </style> <link href = "css/bootstrap.css" rel = "styleSheet"> <link href = "css/bootstrap.min.css" rel = "styleSheet"> <link href = "css/style.cs src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/boottrap/3.3.4/js/boottrap.min.min.js"> </script> <メニュー - > <div> <ul> <liロール= "プレゼンテーション"> <a href = "＃"> </span> home </a> </li> <liロール= "プレゼンテーション"> <a href = "＃"> <span> </span>私について</a> </li> <liロール= "プレゼンテーション"役割= "プレゼンテーション"> <a href = "＃"> <span> </span>行方不明</a> </li> <liロール= "プレゼンテーション"> <a href = "> <span> </span>メッセージボード</a> </li> <liロール=" </ul> </div> </body> </html>効果は次のとおりです。
ナビゲーションでは、次のポイントに注意する必要があります。
1：ナビゲーションコンポーネントは、NAVクラスに依存します。 （つまり、他のクラスを使用する場合、このクラスを書く必要があります）
2：ナビゲーションコンポーネントのアクセシビリティを確保する（ロール属性を追加）
3：関係するクラスには、NAV-TABS、NAVピル（ナビゲーションカプセルを作成）、NAVスタッキング（垂直ナビゲーションへの水平ナビゲーションを作成）、NAVが正当化されます（ナビゲーション等幅の配置を作成します）
4：無効なクラスの場合、ナビゲーションページ（タブとナビゲーションページを含む）にリンクを追加するとき、表面上で無効になっているだけ（色が灰色になり、マウスの形状が変化します）、実際の関数はまだ存在します。
5：ドロップダウンメニューでナビゲーションを使用します。
次のサブを見てみましょう。コードを貼り付けて自分でテストすることができ、スクリーンショットを撮ることができなくなりました。
<！ - ナビゲーションはNAVクラスNAV-TABSクラスNAVクラスに依存します - > <ul> <liロール= "プレゼンテーション"> <a href = "＃"> home </a> </li> ---ロール属性<liロール= "プレゼンテーション"> <a href = "＃">プロフィール</a> </li> <li> < </ul> <！ - カプセルタブが垂直に配置されたナビタ型 - > <ul> <liロール= "プレゼンテーション"> <a href = "＃"> home </a> </li> <liロール= "プレゼンテーション"> <a href = ">プロフィール</a> </li> <liロール="プレゼンテーション " href = "＃">メッセージ</a> </li> </ul> <！ - ナビゲーション列のアライメントを達成するためにnav-rignifiedを整理します。 href = "＃">メッセージ</a> </li> </ul> <br> <br>
ドロップダウンメニューでナビゲーションステータスを見てみましょう。
<ul> <liロール= "Presention"> <a data-toggle = "ドロップダウン" href = "＃" role = "button" aria-haspopup = "aria-expanded =" false "> dropdown </span> </a> <ul> <li> <li> <a href ="＃ ">アクション<li> <a href = "＃">アクション222 </a> </li> <li> <a href = "＃"> action 333 </a> </li> </li> </li> <li> <a href = "＃">アクション333 </a> </li> </li>空のliまたはスパンを使用します。 <liロール= "プレゼンテーション"> <a href = "＃">プロフィール</a> </li> <li role = "intrestion"> <a href = "＃">メッセージ</a> </li> </ul>
実際、ドロップダウンメニュークラスのドロップダウンを使用する場合、基本形式は上記のようなものです。または、リンクAをボタンなどに変換する場合、柔軟に使用できます。
2。ナビゲーションバーコンポーネント
注記：
1：ナビゲーションバーは、すべてのコンポーネントを水平に配置し、水平ナビゲーションと同様にコンポーネントをラップすることです。
2：アクセシビリティを確保します。 <nav>タグまたは<div role = "navigation">を使用します
3：ナビゲーションバーに関係するクラスには、Navbar-inverse（背景色を黒とテキストホワイトとして実装するため）、Navbar Fixed-Top | Navbar-Fixed-Bottom（上部と下部の固定ナビゲーションバー）が含まれます。
navbar-left | navbar-right（通常は最後の要素にnavbar-rightを追加）、navbar-text、navbar-link（接続色を設定）、navbar-btn（フォームフォームに含まれていないボタンの場合、
このクラスを使用して、垂直センタリングの効果を実現します）、Navbar-form（垂直アライメントを実現するため）、Navber-Brand（セットブランドアイコン）、Navbar-Collapse（崩壊）
Navbar-Collapseの折りたたみの効果を見てみましょう。コードは次のとおりです。
<！ - ナビゲーションバーの崩壊は折り畳みを意味します - > <nav> <div> <div> - navigation bar header <ボタン= "button" data-toggle = "collapse" data-target = "＃bs-example-navbar-collapse-1" </button> <a href = "＃"> brand </a> </div> <div id = "bs-example-navbar-collapse-1"> - 折りたたみ列<ul> <li> <li> <li> <li> <li> <li> link <span> current </span> </a> </li> <li> <a href = "> </</</ data-toggle = "ドロップダウン"ロール= "ボタン" aria-haspopup = "true" aria-expanded = "false">ドロップダウン<span> </span> </a> <ul> <li> <li> <li> <li> <a href = "＃"> action </a> </li> <li> <a href = "＃"ここで</a> </li> <li> <a href = "＃">分離リンク</a> </li> <liロール= "セパレーター"> </li> <li> <a href = "＃">もう1つの分離リンク</a> type = "submit"> submit </button> </form> <ul> <li> <a href = "＃"> link </a> </li> <li> <a href = "＃" data-toggle = "ドロップダウン"ロール= "ボタンhref = "＃"> action </a> </li> <li> <a href = "＃">別のアクション</a> </li> <li> <a href = "＃">ここで何か</a> </li> <li> < type = "button" data-toggle = "collapse" data-target = "＃bs-example-navbar-collapse-1" aria-expanded = "false"> <span>トグルナビゲーション</span </span> </span> <span> </span> <span> </span </button> <
効果は次のとおりです。
つまり、ブラウザの画面が縮小すると、元のコンポーネントはブランドラインの右側にある折り畳まれた線（3つの水平線）になります。 3つの水平ボタンをクリックすると、コンポーネントが表示されます。
3。ページネーションコンポーネント
注記：
1：クラスページネーションを使用します（ページネーションLGクラスを追加して大きくする）
2：ページターンアライメントを達成し、ページターンアライメントを実装します（前面と背面はそれぞれ両端にあります）。
コードは次のとおりです。
<！ - ページネーションカテゴリ - > <nav> <ul> <li> <a href = "＃" aria-label = "aria-label =" span aria-hidden = "true">«</span> </a> </li> <li> < href = "＃"> 3 </a> </li> <li> <a href = "＃"> 4 </a> </li> <li> <a href = "＃"> 5 </a> </li> <li> <a href = "＃"> 5 </a> </li> <li> <a href = " aria-hidden = "true">»»</span> </a> </li> </ul> </nav>
ページングを実装する場合は、<ul>を追加してください。
ページターンエフェクトは次のとおりです。主にページャークラスを使用します
<！ - フリップアップ - > <nav> <ul> <li> <a href = "＃">前</a> </li> <li> <a href = "＃">次の</a> </li> </ul> </nav> <！ - アライメントリンクは、両端で以前および次のクラスが追加されました - aria-hidden = "true">←</span> land </a> </li> <li> <a href = "＃"> newer <span aria-hidden = "true">→</span> </a> </li> </ul> </nav>
上記の2つの効果は次のとおりです。
4。バッジ
機能：情報を人目を引く数字で提示します。
<！ - バッジ - > <a href = "＃"> inbox <span> 42 </span> </a> <button type = "button"> message <span> 4 </span> </button>
効果は次のとおりです。
このタイプのバッジクラスを追加すると、ナビゲーションなども使用できます。
5。サムネイルコンポーネント
ラスターシステムとサムネイルクラスで使用します。コードは次のとおりです。自分でテストできます
<！ - サムネイルサムネイル - > <div> <div> <div> <img src = "111.png"> <div> <h3>サムネイルラベル</h3> <p> <a href = "＃" button ">ボタン</a> </p> </div> src = "111.png"> <div> <h3>サムネイルラベル</h3> <p> <p> <p> <p> <p> <p> <p> "role =" button ">ボタン</a> </p> </div> </div> < href = "＃" role = "button">ボタン</a> </p> </div> </div> < </div> </div> </div> </div> </div> </div>
6。閉鎖可能な警告ボックス
クラスを使用：アラートディスビーとボタンは次のように投稿されます。
<！ - 警告ボックスに閉じるボタンを提供 - > <div role = "alert"> <button type = "button" data-dismiss = "alert" aria-label = "close"> <span aria-hidden = "true">×</span> -add aria-hidden属性</button> <strong> <strong>すべてのデバイス - >
シーンに関しては、自分で交換できます。これ以上の説明はありません。アラートリンクを設定して、現在の警告ボックスに一致する色を設定します。
7。進行中のバー
クラスを使用してください：Progress and Progress Barはアニメーションを実装します
<！ - Progress Bar - > <div> <Div Role = "Progressbar" Aria-Valuenow = "60" Aria-Valuemax = "100" Aria-Valuemin = "0"> 60％</div> </div> <！ - 最小幅 - > <div> <div div role = "progressbar" aria-valuemin = "80" ari-valuemin = " aria-valuemax = "100"> 80％</div> </div> <div> <div rofid = "progressbar" aria-valuenow = "2" aria-valuemin = "0" aria-valuemax = "100" style = "min-width：2em;"> 2％</div> </div>
Animation Effectの進行状況バーを実現するには、Progress-Barストライプでアニメーション効果を達成し、アクティブを追加します。コードは次のとおりです。スクリーンショットはもうありません
<！ - ストライプクラスで進行状況範囲を使用します - > <div> <div role = "progressbar" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100"> <span> 40％完了</span> 100％</div> </div>
また、シーンの色と組み合わせて、進行中のバーストライプの色を変更することもできます。
8。リストグループ、入力グループコンポーネント
まず、リストグループを使用してリストグループを見てみましょう。2番目に、リスト項目はリストグループで記述されています。コードは次のとおりです。
<！ - リストグループ - > <ul> <li> <span> 3 </span> 1111 </li> <li> 5 </span> 2222 </li> <li> 3333 </li> <li> 4444 </li> <li> 5555 </li> </ul> <！ href = "＃"> 2222 </a> <a href = "＃"> 33333 </a> <a href = "＃"> 44444 </a> <a href = "＃"> 55555 </a> </div> <！-リストグループとしてのボタン、div、</< type = "button"> 2222 </button> <ボタンタイプ= "ボタン"> 3333 </button> <ボタンタイプ= "ボタン"> 4444 </button> <！ - リストグループアイテム - > <div> <a href = "＃"> <h4>リストグループアイテム</h4> <p> 11111 </p> </a> <p> 22222 </p> </a> </div>
入力グループを見て、入力グループクラスを使用してコンポーネントをラップします。コードは次のとおりです。
<！ - 入力グループ - > <div> - コンポーネントはinout-group <span> <button type = "button"> go </button> </span> <入力型= "text" aria-label = "text"> </div>に含まれます。
9。レスポンシブ機能の内容を埋め込みます
それが何を意味するのか、そして埋め込まれたコンテンツとは何ですか？それを埋め込む方法は？では、どのように対応しますか？
embed：つまり、<iframe>、<embed>、<video>、<object>などのタグを使用して、外部ファイルコンテンツを導入します。誰もがHTML5の新しい属性を知っていると思います。ビデオ、ラジオなど
応答：埋め込まれた外部コンテナの幅に基づいて固定スケールを自動的に作成し、ブラウザがビデオまたはコンテンツのサイズを自動的に決定し、さまざまなデバイスでスケーリングできるようにします。
最終的なスタイルを他のプロパティと一致させる場合は、派生した.Embed-Responsive-ITEMクラスを明示的に使用することもできます。
コードは次のとおりです。
<div> <iframe src = "..."> </iframe> </div> <div> <iframe src = "..."> </iframe> </div>
それぞれ埋め込まれたResponsive-16By9およびEmbed-Responsive-4By3が何を意味するかを見てみましょう。
コンソールを見てみましょう：
.embed-responsive-4by3 {--- 4は水平を表し、3は垂直、つまりスケーリング比、つまり4：3のパディング比：75％;} .. enm-responsive-16by9 {padding-bottom：56.25％;}を表します。幅が100％で計算されている場合、アスペクト比を保持します。100％ * 3/4 = 75％です。現時点では、パディングボトムを設定してアスペクト比を設定します。ブラウザをズームインすると、
最後に、スケーリングのためにこのスケーリング比を維持します。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。