ホームページ > 記事 > ウェブフロントエンド > ブートストラップの採用 - ナビゲーション バー_html/css_WEB-ITnose
ブートストラップの採用 - ナビゲーション バー_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:39:231451ブラウズ
前の記事: 「JavaScript のすべてがオブジェクトであるわけではない」
著者: myvin
前に書いてありますタイトルの通り、前に書いてあるので、これらはナンセンスであるに違いありません、読みたい場合はこのアンカーをクリックすると、このナンセンスを直接スキップできます。
ふと見てみると二週間もブログを更新していなかったことに気づきました。出張に行って、出張に行って、出張に行って、今までも旅をしてきましたし、今も旅を続けています。
出張は怖くない、怖いのは食中毒になったことだ。さあ、笑ってください~。~
外の空気はまだ少し暖かく、空にはまだ星がなく、部屋のエアコンはまだ風が吹いていました。トイレにしゃがみ込んで、携帯電話でゲイの友達と話していて、「私は下痢をしている」と自慢していましたが、突然、トイレから出た後、地面に座って嘔吐し始めました。暗くて、嘔吐物は乾いた岩の海のようなもので、私は腹痛を止めることができず、翌日の青春のほとんどをトイレに座ることに捧げました。
この食中毒の後、私は多くの人が理解しているのに無視されている問題に気づきました。それは次のとおりです。 die
追伸: 私は白くて完璧だったが、無数の人々の血で赤く染まったホテルのベッドシーツに座っていた。もちろん、このテキストの上下の文字をタイプした。
ここに来るまでにナンセンスをスキップしたとしても、ここまで来たからには、読み続けてください。 前に書いています
このブログ投稿では、私が作成した横向きの Web ページに基づいて Bootstrap の使用について説明します。 Web ページのスクリーンショットは次のとおりです。
完全な Web ページの効果とコードを表示できます。ここまたはCodePenで。 Web ページによって達成される主な効果には次の点が含まれます:
ナビゲーション バーのログインおよび登録ボタンをクリックすると、ログインおよび登録のモーダル ボックスがポップアップ表示され、ログイン ウィンドウと登録ウィンドウを切り替えることができます。メニューバーは反応します
ナビゲーションバー ドロップダウンリストの風景オプションをプルダウンして、ドロップダウンリストの九寨溝「麗江」ウォーターカーテン洞窟をクリックして、対応するタブを見つけます。
大画面のスライドのカルーセル クリックしてタブ ページを切り替えます- 次に、Bootstrap を腕に抱えて手を動かし始めます。
Bootstrap について聞いたことがある、または使用したことがあるはずです。Bootstrap の過去と現在についてはここでは紹介しません。詳しく知りたい人は、ここをクリックして百科事典を参照するか、ここをクリックして Bootstrap の公式 Web サイトを参照してください。この Web ページでは cdn Bootstrap v3.3.4 を使用しています。ここをクリックして Bootstrap v3.3.5 の最新バージョンをダウンロードするか、ここをクリックして公式 Web サイトからダウンロードしてください。 ~ - この この記事では、まずナビゲーション バーについて説明します。
ナビゲーション バー
bs を使用する前に、css と js を含む bs を引用する必要があります。引用方法は非常に簡単で、通常の外部ファイルを参照するのと同じで、cdn リンクを使用するか、ローカル参照を配置できます。コードを以下に示します。 - この横長の Web ページの例では、CDN リンクを使用しました。
同時に、bs プラグインは jq をベースにしているため、jq も導入する必要があります。 - まずナビゲーション バーの完全なコードを与えてください
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">自己定义一个商标</a> </div> <!-- 左上角的导航 --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" > <li ><a href="#">主页<span class="sr-only">(current)</span></a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">山水 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#jiuzhaigou">九寨沟</a></li> <li><a href="#lijiang">丽江</a></li> <li><a href="#shuiliandong">水帘洞</a></li> <li class="divider"></li> <li><a href="#">更多..</a></li> </ul> </li> <li data-toggle="modal" data-target="#about"><a href="#" >关于</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="搜索景点.."> <button type="button" class="btn btn-default">Go</button> </div> </form> <ul class="nav navbar-nav navbar-right"> <li data-toggle="modal" data-target="#signin-signup-tab" id="signin-button"><a href="#" >登陆</a></li> <li data-toggle="modal" data-target="#signin-signup-tab" id="signup-button"><a href="#" >注册</a></li> </ul> </div> </div> </nav>
bs のナビゲーション コンポーネントはすべて同じ .nav クラスに依存しており、コードは個別に説明されます。まずこの段落を見てみましょう:
<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, initial-scale=1"><title>myvin's山水</title><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <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/respond.min.js"></script> <![endif]--></head><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
検索ボックス、ログイン、登録の .navbar-right クラスは、名前が示すように、右側に設定されます。
data属性
ここでbsのdata属性について話す必要があります。 bs では、開発者は data 属性だけで bs 内のすべての js プラグインを使用できます。これは bs のファーストクラス API であり、多くの場合、js プラグインを使用する場合に好まれる方法です。たとえば、上記のコードの data-toggle="collapse"、data-toggle="dropdown" などは、bs で js プラグインを使用する方法です。以上です
次回は大画面スライドショーについてお話しましょう。ところで、注意ですが、夏の食事には注意してください。特に屋台の肉はできるだけ食べず、食べたい場合は清潔な食べ物を見つける必要があります。
最後に、皆さんが夏に下痢にならないことを祈ります~~~
転載の際は必ず作者と出典を明記してください -.-
著者: myvin
出典:前の記事: 「JavaScript とは」 「すべて」ではありません オブジェクト》
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。