検索
ホームページウェブフロントエンドブートストラップのチュートリアルBootstrap のナビゲーション バーについて話しましょう

Bootstrap のナビゲーション バーについて話しましょう

Mar 31, 2021 am 09:49 AM
bootstrapナビゲーションバー

Bootstrap のナビゲーション バーについて話しましょう

ナビゲーション バー (navbar) とナビゲーション (nav) は 1 語異なり、「bar」という語が追加されています。実際、Bootstrap フレームワークでは依然として明らかに異なります。ナビゲーション バー (navbar) には背景色があり、ナビゲーション バーは純粋なリンク (ナビゲーションと同様)、フォーム、またはフォームとナビゲーションの組み合わせにすることができます。この記事では、Bootstrap ナビゲーション バーについて詳しく紹介します。

基本的なナビゲーション バー

Bootstrap フレームワークでは、ナビゲーション バーとナビゲーションの外観に大きな違いはありませんが、実際の使用では、ナビゲーションバーはナビゲーションよりもはるかに複雑です。

ナビゲーション バーは、アプリケーションまたは Web サイトのナビゲーション ヘッダーとして使用される応答性の高い基本コンポーネントです。モバイル デバイス上で折りたたむ (開いたり閉じたりする) ことができ、ビューポート (ビューポート) の幅が増加すると徐々に水平拡張モードに変わります。

基本的なナビゲーション バーを作成する場合、主に次の手順があります。 : :

1. まず、ナビゲーションリスト(

    )の作成をベースにクラス名「navbar-nav」を追加します# 2. 追加します。リストコンテナ(p)の外側に新しいコンテナを作成し、クラス名「navbar」と「navbar-default」を使用します。<p></p>[原理分析]<p></p> 「.navbar」のメイン関数スタイルは左右のパディングや角丸などの効果を設定するものですが、その色関連のスタイルはまったく設定されていません<p></p>
.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
ナビゲーション バーの色は「.navbar-default」によって制御されます"<p></p>
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
navbar-nav スタイルは、navigation.nav に基づいて、メニュー項目のフローティングおよび内側と外側のマージンが再調整されています。また、色やその他のスタイルの設定は含まれておらず、色やその他のスタイルは親コンテナ「navbar-default」と一緒に実装されます。 <p></p> [注意]

Bootstrap のナビゲーション バーについて話しましょう##関連する推奨事項: 「

ブートストラップ チュートリアル

ナビゲーションバーコンポーネント

[タイトル]

Webページ制作ではメニューの前にタイトルが入ることが多いです(文字サイズは若干異なります)実際、この側面はブートストラップ フレームワークでも考慮されており、「navbar-header」と「navbar-brand」を通じて実装されています。

#[ブランド アイコン]<p></p>

ナビゲーション バーのブランド ロゴが配置されている場所を Bootstrap のナビゲーション バーについて話しましょうBootstrap のナビゲーション バーについて話しましょう

要素に置き換えて、独自のブランド アイコンを表示します。

.navbar-brand にはパディングと高さが設定されているため、独自の状況に応じて CSS コードを追加して、デフォルト設定をオーバーライドする必要があります

<div>
   <div>
       <a>小火柴的蓝色理想</a>
   </div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
       <li><a>Bootstrap</a></li>
       <li><a>jQuery</a></li>
     </ul>
</div>

[第 2 レベルのメニュー] 基本ナビゲーション バーは、メニューの現在の状態、無効な状態、一時停止状態、およびその他の効果を提供します。また、二次メニューを備えたナビゲーション バーを含めることもできます

<div>
   <div>
      <a>
        <img  src="/static/imghwm/default1.png" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC" class="lazy" alt="Bootstrap のナビゲーション バーについて話しましょう" >
      </a>
    </div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
       <li><a>Bootstrap</a></li>
       <li><a>jQuery</a></li>
     </ul>
</div>

Bootstrap のナビゲーション バーについて話しましょう

【パーツ配置】<p></p>

.navbar-left および .navbar-right ツールクラスを追加することで、ナビゲーション リンク、フォームを作成できます、ボタン、またはテキストの配置。どちらのクラスも、CSS を通じて特定の方向に float スタイルを設定します。たとえば、ナビゲーション リンクを整列するには、ユーティリティ クラスが適用された個別の

    タグに配置します。Bootstrap のナビゲーション バーについて話しましょう これらのクラスは .pull-left および .pull-right のミックスイン バージョンですが、メディア クエリに限定されます。を使用すると、さまざまな画面サイズでナビゲーション バー コンポーネントを簡単に処理できるようになります。

    [注意] ナビゲーション バーは現在、multiple.navbar-right

    クラスをサポートしていません。コンテンツ間に適切なスペースを確保するために、最後の

    .navbar-right

    要素では負のマージンが使用されます。このクラスを使用する要素が複数ある場合、その余白が正常に表示されません。 <p></p>

    [フォーム] 一部のナビゲーション バーには検索フォームがあります。 Bootstrap フレームワークは「navbar-form」を提供します。使用方法は非常に簡単です。navbar コンテナに navbar-form クラス名のフォームを配置するだけです。

    navbar-left は left float 、 navbar- を実装します。 right は right float を実装します<p></p>
<div>
    <ul>
         <li><a>网站首页</a></li>
        <li>
          <a>系列教程<span></span></a>
          <ul>
            <li><a>CSS3</a></li>
            <li><a>JavaScript</a></li>
            <li><a>PHP</a></li>
          </ul>
       </li>
       <li><a>关于我们</a></li>
    </ul>
</div>

【按钮】

  对于不包含在 <form></form> 中的 <button></button> 元素,加上 .navbar-btn 后,可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法,例如, aria-labelaria-labelledby 或者 title 属性。如果这些方法都没有,屏幕阅读器将使用 placeholder 属性(如果这个属性存在的话),但是请注意,使用 placeholder 代替其他识别标签的方式是不推荐的

  [注意]就像标准的 按钮类 一样,.navbar-btn 可以被用在 <a></a> 和 <input> 元素上。然而,在 .navbar-nav 内,.navbar-btn 和标准的按钮类都不应该被用在 <a></a> 元素上。

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <button>Sign in</button>
</div>

Bootstrap のナビゲーション バーについて話しましょう【文本】

  把文本包裹在 .navbar-text中时,为了有正确的行距和颜色,通常使用 <p></p> 标签

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <p>Signed in as huochai</p>
</div>

Bootstrap のナビゲーション バーについて話しましょう

【非导航链接】

  可以在标准的导航组件之外添加标准链接,使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <p>Signed in as <a>huochai</a></p>
</div>

Bootstrap のナビゲーション バーについて話しましょう

导航条位置

  很多情况下,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了g两种固定导航条的方式:

   ☑  .navbar-fixed-top:导航条固定在浏览器窗口顶部

   ☑  .navbar-fixed-bottom:导航条固定在浏览器窗口底部

  使用方法很简单,只需要在制作导航条最外部容器navbar上追加对应的类名即可

  这个固定的导航条会遮住页面上的其它内容,除非给  元素底部设置了 padding。提示:导航条的默认高度是 50px

body { padding-top: 70px; }
body { padding-bottom: 70px; }
<nav>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</nav>
<p>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容</p>
<nav>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</nav>

【静止在顶部】

  通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条,它会随着页面向下滚动而消失

<nav>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</nav>
<p>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容</p>

响应式导航条

  Bootstrap的响应式导航条实现如下:

  1、保证在窄屏时需要折叠的内容必须包裹在带一个p内,并且为这个p加入collapse、navbar-collapse两个类名。最后为这个p添加一个class类名或者id名

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</div>

  或者

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</div>

  2、保证在窄屏时要显示的图标样式(固定写法):

<button>
  <span>Toggle Navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>

  3、并为button添加data-target=".类名/#id名",究竞是类名还是id名呢?由需要折叠的p来决定。如

<button>
  <span>Toggle Navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>

  或者,对应class="example"

<button>
  <span>Toggle Navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>
<div>
  <div>
       <button>
         <span>Toggle Navigation</span>
         <span></span>
         <span></span>
         <span></span>
       </button>
  </div>
  <div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
  </div>
</div>

反色导航条

  反色导航条其实是Bootstrap框架提供的第二种风格的导航条,与默认的导航条相比,使用方法并无区别,只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</div>

1Bootstrap のナビゲーション バーについて話しましょう

更多编程相关知识,请访问:编程视频!!

以上がBootstrap のナビゲーション バーについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
Bootstrapの影響:Web開発の加速Bootstrapの影響:Web開発の加速Apr 12, 2025 am 12:05 AM

BootstrapはWeb開発を加速し、事前に定義されたスタイルとコンポーネントを提供することにより、開発者は迅速にレスポンシブWebサイトを構築できます。 1)プロジェクトの数日以内に基本的なレイアウトを完了するなど、開発時間を短縮します。 2)SASS変数とミキシンを通じて、ブートストラップにより、カスタムスタイルが特定のニーズを満たすことができます。 3)CDNバージョンを使用すると、パフォーマンスを最適化し、負荷速度を向上させることができます。

ブートストラップの理解:コアの概念と機能ブートストラップの理解:コアの概念と機能Apr 11, 2025 am 12:01 AM

Bootstrapはオープンソースのフロントエンドフレームワークであり、その主な機能は、開発者がレスポンシブWebサイトを迅速に構築できるようにすることです。 1)複雑なUI効果の実装を容易にするために、事前定義されたCSSクラスとJavaScriptプラグインを提供します。 2)ブートストラップの作業原則は、メディアクエリを通じてレスポンシブデザインを実現するために、そのCSSおよびJavaScriptコンポーネントに依存しています。 3)使用の例には、ボタンの作成などの基本的な使用法や、カスタムスタイルなどの高度な使用法が含まれます。 4)一般的なエラーには、クラス名のスペルミスやファイルの導入が誤っています。ブラウザ開発者ツールを使用してデバッグすることをお勧めします。 5)パフォーマンスの最適化は、カスタムビルドツールを通じて実現できます。

ブートストラップディープダイブ:レスポンシブデザインと高度なレイアウト技術ブートストラップディープダイブ:レスポンシブデザインと高度なレイアウト技術Apr 10, 2025 am 09:35 AM

ブートストラップは、グリッドシステムとメディアクエリを介してレスポンシブデザインを実装し、さまざまなデバイスにウェブサイトを適合させます。 1.事前定義されたクラス(COL-SM-6など)を使用して、列の幅を定義します。 2。グリッドシステムは12列に基づいており、合計が12。3を超えないことに注意する必要があります。ブレークポイント(SM、MD、LGなど)を使用して、異なる画面サイズの下のレイアウトを定義します。

ブートストラップインタビューの質問:夢のフロントエンドの仕事を着陸させますブートストラップインタビューの質問:夢のフロントエンドの仕事を着陸させますApr 09, 2025 am 12:14 AM

Bootstrapは、レスポンシブWebサイトとアプリケーションを迅速に開発するためのオープンソースのフロントエンドフレームワークです。 1.レスポンシブ設計、一貫したUIコンポーネント、迅速な発展の利点を提供します。 2。グリッドシステムは、12列構造に基づいてフレックスボックスレイアウトを使用し、.container、.row、.col-sm-6などのクラスを通じて実装されています。 3.カスタムスタイルは、SASS変数を変更するか、CSSを上書きすることで実装できます。 4.一般的に使用されるJavaScriptコンポーネントには、モーダルボックス、カルーセル図、折りたたみが含まれます。 5.最適化パフォーマンスは、必要なコンポーネントのみをロードし、CDNを使用し、マージファイルを圧縮することで実現できます。

Bootstrap&JavaScriptの統合:動的な機能と機能Bootstrap&JavaScriptの統合:動的な機能と機能Apr 08, 2025 am 12:10 AM

BootstrapとJavaScriptをシームレスに統合して、Webページに動的な機能を与えることができます。 1)JavaScriptを使用して、モーダルボックスやナビゲーションバーなどのブートストラップコンポーネントを操作します。 2)jQueryが正しくロードされていることを確認し、一般的な統合の問題を回避します。 3)イベント監視とDOM操作を通じて、複雑なユーザーの相互作用と動的効果を実現します。

ブートストラップ検索バーを取得する方法ブートストラップ検索バーを取得する方法Apr 07, 2025 pm 03:33 PM

ブートストラップを使用して検索バーの値を取得する方法:検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

ブートストラップに写真を挿入する方法ブートストラップに写真を挿入する方法Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法ブートストラップのフレームワークをセットアップする方法Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター