モバイルデバイス用の標準のブートストラップナビゲーションバーとボタンを作成する方法
公開: 2022-02-16
Bootstrapは、HTML、CSS、およびJavaScriptフレームワークです。 これを使用すると、モバイルファーストのレスポンシブWebサイトを簡単に構築できます。 ナビゲーションバーなど、Web要素用に事前設定されたCSSスタイルを豊富に提供します。
このチュートリアルでは、基本的なBootstrapレスポンシブナビゲーションバーを簡単に作成する方法を学習します。 次に、モバイルデバイスでBootstrap Standard NavbarButtonを使用する方法を学習します。
Bootstrapを使用できるようにするには、最初にBootstrapをインストールする必要があります。 このチュートリアルでは、ローカルPCのどこにでもインストールできます。Webサーバーである必要はありません。 一緒にやってみましょう。
ステップ1。 Bootstrapをダウンロードする
- getboostrap.comに進み、[ブートストラップのダウンロード]ボタンをクリックします。
- 次の「はじめに」ページで、別の「ブートストラップのダウンロード」ボタンをクリックします。
- このファイルをハードドライブの任意の場所に保存します。
ステップ2。 ローカルPCにブートストラップをインストールします
- このファイルを解凍します
- 結果のフォルダの名前をブートストラップに変更します
ステップ3。 基本的なindex.htmlファイルを作成します
- ブートストラップフォルダに、次のコードを使用してindex.htmlファイルを作成します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- 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="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>
ステップ4。 レスポンシブナビゲーションバーを作成する
- オープニングボディdivのすぐ下で、コンテナBootstrapクラスを使用して新しいdivを作成します。
<div class="container"><!-- Start navbar container div -->

- Enterキーを数回押してスペースを作成し、この新しいdivを閉じます。
</div><!-- Finish navbar container div -->
- 新しいコンテナdiv内に、新しいナビゲーションバーのnavタグを作成します。
<nav class="navbar navbar-default">
- キーボードで、Enterキーを数回押して、タグを閉じます。
- navタグ内に、別のコンテナdivを作成し、navbarの実際のコンテンツの作成を開始します。
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- <h1>タグとその内容を削除します。
- navbar-header divが閉じている場所を見つけ、その真下にクラスがまだない別のdivを作成します。
- このdiv内で、レスポンシブナビゲーションバーの実際の要素を含む順序付けされていないリストを開始します。
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
- index.htmlファイルを保存します。
- このファイルをブラウザで開きます。 これで、レスポンシブナビゲーションバーが表示されます。 これで、標準のモバイルナビゲーションバーを作成する準備がほぼ整いました。 ただし、その前に、少し改善しましょう。
- index.htmlファイルに戻ってください。
- navタグで、デフォルトをinverseに変更して、次のコードを取得します。
<nav class="navbar navbar-inverse">
- ファイルを保存します。
- サイトに戻り、ページを更新します。 あなたのナビゲーションバーはもう少し良く見えます:
素晴らしい! これで、レスポンシブナビゲーションバーでさらに作業する準備が整いました。
作成したナビゲーションバーをモバイルユーザー向けの標準のブートストラップメニューボタンに置き換える方法については、以下のビデオをご覧ください。