前に書いてください
この記事では、私が作ったランドスケープのウェブページに基づいて、ブートストラップの使用について説明します。 Webページのスクリーンショットは次のとおりです。
完全なWebページの効果とコードは、ここで表示するか、Codepenで表示できます。 Webページが達成する必要がある主な効果には、以下が含まれます。
1.ログインと登録モーダルボックスをクリックした後、ナビゲーションバーのログインと登録ボタンがポップアップし、ログインと登録ウィンドウを切り替えることができます。メニューバーは応答性があります
2。ナビゲーションバーのランドスケープオプションを引き下げることができます。ドロップダウンにある柔術の水の水カーテン洞窟をクリックして、対応するタブを見つけます。
3。大画面スライドショーカルーセル
4.クリックしてタブページをオンにします
今、私たちはブートストラップを受け入れ始めます。
友達はブートストラップを聞いたり、使用したりしたと思います。このWebページでは、CDN Bootstrap v3.3.4を使用しています。ここをクリックしてBootstrap v3.3.5の最新バージョンをダウンロードするか、ここをクリックして公式Webサイトでダウンロードしてください。私はあなたに合ったものが常にあると信じています~~~~~~
この記事では、最初にナビゲーションバーについて説明しましょう。
ナビゲーションバー
BSを使用する前に、最初にCSSやJSを含むBSを参照する必要があります。参照方法は非常に単純で、通常の外部ファイルを参照するのと同じです。 CDNリンクを使用したり、ローカル参照に配置したりできます。コードを以下に示します。
<html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width = device-width、inverational-scale = 1" link> <titl> <titl> <titl> href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <！ - html5 shim and respons.js for html5要素とメディアクエリのサポート - > <！ <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcss.com/respond.js/1.4.2.2/respond.min.js <！[endif] - > </head> <！ - jquery（bootstrapのjavascriptプラグインに必要） - > <スクリプトsrc = "http://cdn.bootcss.com/1.11.2/jquery.min.js"> </script> <！ src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
このランドスケープWebページの例では、CDNリンクを使用します。
同時に、BSプラグインはJQに基づいているため、JQも導入する必要があります。
最初にナビゲーションバーの完全なコードを与えます
<nav> <div> <！ - ブランドとトグルがグループ化されます。より良いモバイルディスプレイのために - > <div> <ボタンタイプ= "button" data-toggle = "collapse" data-target = "自分自身の商標</a> </div> <！ - 左上隅のナビゲーション - > <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "＃"> homepage <span>（current）</span> </a> </li> <a href = " Aria-Expanded = "false">景色<span> </span> </a> <ul role = "menu"> <li> <a href = "＃jiuzhaigou"> jiuzhaigou </a> </li> <li> <a href = "＃lijiang"> lijiang </a> </li> <洞窟</a> </li> <li> </li> <li> <a href = "＃shuilianandong"> shuijian cave </a> </li> <li> </li> <li> <a href = "＃"> more .. </a> </li> </li> href = "＃"> bout </a> </li> </ul> <form role = "search"> <div> <input type = "text" placeholder = "search for agrations .."> <button type = "button"> go </button> </form> <ul> <ul> <li dat-toggle = "modal" data-tab = " href = "＃"> login </a> </li> <li data-toggle = "modal" data-target = "＃signin-signup-tab" = "signup-button"> <a href = "＃">登録</a> </li> </ul> </div> </div> </nav>
BSのナビゲーションコンポーネントはすべて同じ.NAVクラスに依存しており、コードは個別に説明されています。最初にこの段落を見てみましょう：
<button type = "button" data-toggle = "collapse" data-target = "＃bs-example-navbar-collapse-1"> <span>トグルナビゲーション</span> <span> </span> <span> </span> </span> </button>
このコードの目的は、ビューポートを減らすこと、ナビゲーションバーのメニューオプションが崩壊し、崩壊アイコンをクリックし、ナビゲーションバーのメニューオプションが垂直に配置されます。 NAVの.Navbar逆クラスは逆色です。友人は、効果を観察するために.navbarの逆クラスを削除できます。私は黒いコントロールなので、ここで逆色を使用しています。あなたが他の色、豊かな金を使用したい場合、友人は自分の好みに応じてそれらに合うことができます。 .navbar-brandクラスを使用して、独自のWebサイトの商標を定義できます。テキストを使用して、ここで自分で商標を定義します。興味のある友達は自分のロゴを追加できます。 .dropdown-toggleクラスはプルダウンを実装でき、 .dividerクラスは明るく暗い分割線を実装できます。
名前が示すように、検索ボックスとログインと登録の.navbar-rightクラスは正しいです。
データ属性
ここでは、BSのデータ属性について話す必要があります。 BSでは、開発者はデータ属性を介してBSのすべてのJSプラグインを使用できます。これはBSのファーストクラスAPIであり、多くの場合、JSプラグインを使用するための好ましい方法です。たとえば、上記のコードのdata-toggle = "collapse"とdata-toggle = "ドロップダウン"は、 BSでJSプラグインを使用する方法です。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。誰もがブートストラップナビゲーションバーを学ぶことが役立つことを願っています。