ブートストラップの navbar ナビゲーションバーに関する簡単な説明-ブートストラップのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

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

ブートストラップの navbar ナビゲーションバーに関する簡単な説明

青灯夜游

Jun 03, 2021 am 11:38 AM

bootstrap

この記事では、bootstrap の navbar ナビゲーションバーについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

ブートストラップの navbar ナビゲーションバーに関する簡単な説明

[関連する推奨事項: "bootstrap チュートリアル "]

コンテナ: 幅は 960 ピクセルに固定 (レスポンシブスタイルが導入されている場合は、たとえば、1600*900 の場合は 1200px が表示されます)

container-fluid: 適応型画面幅、つまり全画面表示です。

行と列を参照できます: https://blog.csdn.net/yzy85/article/details/53021385?locationNum=2&fps=1 および http://v3.bootcss.com/css/

特に http://v3.bootcss.com/css/ で非常にわかりやすく説明されています

例:

単一グループを使用します .col-md- * Grid クラスでは、基本的なグリッドシステムを作成できます。これは、最初は携帯電話やタブレットデバイス (超小型画面から小型画面まで) にスタックされ、デスクトップ (中) 画面デバイスでは水平配置に変更されます。すべての「列」は「 .row 内に配置する必要があります。」

.navbar—nav 要素をナビゲーションバーコンポーネントとして設定します;

.navbar-default—ナビゲーションバーコンポーネントをデフォルトのテーマとして指定します;

.navbar-inverse—ナビゲーションバーコンポーネントを黒のテーマとして指定します;

.navbar-fixed-top—ナビゲーションバーコンポーネントを上部に固定するように設定します;

.navbar-fixed-bottom - ナビゲーションバーコンポーネントを下部に固定するように設定します;

.container-fluid - 親要素を埋める幅を 100% に設定します;

.navbar-header - 主に p 要素を指定しますブランドアイコンとナビゲーションバーコンポーネントのトグルボタンを囲みます;

.navbar-toggle—button 要素をナビゲーションバーコンポーネントのトグルボタンとして設定しますナビゲーションバーコンポーネント;

.collapsed——ボタン要素を可視として設定します。サイズが 768px より小さい場合にのみ表示されます。

.navbar-brand——ブランドアイコンを設定します。ナビゲーションバーコンポーネント内;

navbar-brand のデフォルトはテキストであり、画像を配置することもできますが、それは小さい画像である必要があります。画像が大きすぎると、位置が低くなります。

例:

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img  src="/static/imghwm/default1.png"  data-src="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}"  class="lazy"     style="max-width:90%" alt="ブートストラップの navbar ナビゲーション バーに関する簡単な説明" > STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

コードを実行すると、スタイルは次のようになります:

アイコンとフォントがずれていました。追加する必要があるのは、display: inline; だけです。追加されたコードは次のとおりです:

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img  src="/static/imghwm/default1.png"  data-src="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}"  class="lazy"     style="max-width:90%" alt="ブートストラップの navbar ナビゲーション バーに関する簡単な説明" > STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

コードが実行されると、スタイルは次のようになり、希望どおりになりました。

##次のように書くこともできます:

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
<style>
    .navbar-brand>img {
        display: inline;
    }
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img  src="/static/imghwm/default1.png"  data-src="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}"  class="lazy"     style="max-width:90%" alt="ブートストラップの navbar ナビゲーション バーに関する簡単な説明" > STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

効果は同じです:

説明:

display:inline の機能は、表示するオブジェクトをインライン要素として設定することです。つまり、縦方向の配置を横方向の配置に変更できます。

.collapse—ビューポートが 768px より大きい場合に表示される p 要素を設定します;

.navbar-collapse—p 要素を各リスト項目の親要素に設定しますナビゲーションバーコンポーネントの;

ここで言われていることは少し不明瞭です。説明させてください。折りたたみの機能は、ブラウザウィンドウの表示時に、スタイルを折りたたむように設定された p 要素内の他のすべての要素をリストに折りたたむことです。幅が768px未満です。フォームに表示されます。

例:

現在のサイズでは折り畳まれていないことがわかりますが、再度縮小すると折り畳まれます。

##.navbar-nav—ナビゲーションバーコンポーネントのリスト要素として ul を設定します;

.navbar-left—ナビゲーションバーの要素を左揃えに設定します;

.navbar-right—ナビゲーションバーの要素を右揃えに設定します;

navbar-right が表示されるとき:

<div class="navbar-collapse collapse">
    <form class="navbar-form">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a ><span class="glyphicon glyphicon-log-in"></span> 登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
        </li>
    </ul>
</div>

実行結果は次のとおりです:

form と ul が同じ行にないことがわかります。は navbar-right を使用して右側に表示するかどうかを指定しますが、form は左側に表示するか右側に表示するかを指定しません。フォームは左側に表示されるように指定する必要があります。つまり、スタイルを navbar-left

<div class="navbar-collapse collapse">
    <form class="navbar-form navbar-left">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a ><span class="glyphicon glyphicon-log-in"></span> 登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
        </li>
    </ul>
</div>

に設定する必要があります。実行ソリューションは次のとおりです。

navbar-nav スタイルが使用されます。 ul タグ内。これが使用されない場合:

<ul class="nav  navbar-right">
    <li>
        <a ><span class="glyphicon glyphicon-log-in"></span> 登录</a>
    </li>
    <li>
        <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
    </li>
</ul>

により、2 つの li タグが別の行に表示されます。navbar-nav を追加すると、2 つの li タグを同じ行に表示できます。ライン。

.navbar-form—ナビゲーションバーコンポーネント内のフォームコンポーネントの場合;

navbar-form: 主にすべてのフォームをインライン要素になるように調整します

.navbar-btn——为导航条组件内部的按钮样式；

.navbar-text——为导航条组件内部的文本样式；

.navbar-link——在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；

.breadcrumb——设置列表元素显示为路径导航组件；

form-goup和input-goup参考：https://blog.csdn.net/qq_15267341/article/details/54016811写的很好哦。

<span class="glyphicon glyphicon-search"></span>通常用户放在搜索字体的前面，显示一个小小的搜索图标，如下图：

.btn 是按钮的基础，主要是调整盒模型的，.btn-default 以及其他 .btn-* 系列则是视觉样式的调整，如颜色、大小等等。

例子：

<a ><span class="glyphicon glyphicon-search"></span>搜索</a>

运行效果是：

非常难看，鼠标放上去的时候，字体下面还会出现一根横线。如果将a元素的样式设置成btn btn-default时，就好看多了，代码如下：

鼠标放上去的时候，也没有横线的，只是由白色编程灰色了：

input-group-btn的作用：

例子:

<form class="navbar-form">
    <div class="form-group input-group">
        <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
        <span><a class="btn btn-default"><span
                class="glyphicon glyphicon-search"></span>搜索</a></span>
    </div>
</form>

运行效果如下：

想要将搜索放在文本框后面，只需要将入input-group-btn样式就可以了：

<div class="navbar-collapse collapse">
    <form class="navbar-form">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
</div>

运行结果如下：

如果将input-group-btn换成input-group-addon后，就会变成如下的样子：

是不是很难看？

更多编程相关知识，请访问：编程视频！！

以上がブートストラップの navbar ナビゲーションバーに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

応答性の高いWebデザインのためのブートストラップグリッドシステムを理解するMay 14, 2025 am 12:07 AM

bootstrap'sgridsystemisefectiveduetoits12-columnlayoutandresponsiveclasses、forflexibleandmaintainedigns.toleverageit：1）userows andcolumnswithclasslikecol-md、col-sm、andcol-lgfordifforderentscreensizes.2）simplylaysexccceaviediveideaidiveideaveaveaviediveideaveidexccediveideaidiveidexccrediveideの

ブートストラップグリッドシステム：レスポンシブレイアウトの包括的なガイドMay 13, 2025 pm 04:17 PM

BootstrapGridSystemisessentialforcreatingresponsivelayouts.1)Itusescontainers,rows,andcolumnsbasedona12-columnlayout.2)CSSflexboxandmediaqueriesensureflexibilityacrossscreensizes.3)Classeslikecol-xs,col-sm,col-md,andcol-lgcontrollayoutchanges.4)Avoid

Bootstrap：アプリケーションと利点が説明されていますMay 10, 2025 am 12:18 AM

Bootstrapは、レスポンシブWebサイトをすばやく構築するためのフロントエンドフレームワークです。その利点には次のものが含まれます。1。迅速な開発：事前定義されたスタイルとコンポーネントを活用します。 2。一貫性：統一されたデザインスタイルを提供します。 3。レスポンシブ設計：組み込みのグリッドシステムは、さまざまなデバイスに適合しています。 Bootstrapは、CSSクラスとJavaScriptプラグインを通じてWeb開発プロセスを簡素化します。

ブートストラップ：レスポンシブWeb開発の簡素化May 09, 2025 am 12:13 AM

Bootstrapは、主にラスターシステム、事前定義されたコンポーネント、JavaScriptプラグインを介して開発プロセスを簡素化します。 1.グリッドシステムでは、柔軟なレイアウトを可能にします。2。ボタンやナビゲーションバーなどの事前定義されたコンポーネントは、スタイル設計を簡素化します。

ブートストラップ：レスポンシブWebデザインの鍵May 08, 2025 am 12:24 AM

Bootstrapは、Twitterが開発したオープンソースのフロントエンドフレームワークであり、豊富なCSSとJavaScriptコンポーネントを提供し、レスポンシブWebサイトの構築を簡素化します。 1）そのグリッドシステムは12列のレイアウトに基づいており、異なる画面サイズの下の要素の表示はクラス名を介して制御されます。 2）コンポーネントライブラリには、カスタマイズと使用が簡単なボタン、ナビゲーションバーなどが含まれています。 3）作業原則はCSSおよびJavaScriptファイルに依存しており、依存関係とスタイルの対立の処理に注意する必要があります。 4）使用例は、カスタム機能の重要性を強調し、基本的および高度な使用法を示しています。 5）一般的なエラーには、開発者ツールを使用したデバッグが必要なグリッドシステムの計算エラーとスタイルカバレッジが含まれます。 6）パフォーマンスの最適化の推奨事項は、必要なコンポーネントを導入し、プリプロセッサを使用してサンプルをカスタマイズするだけです

ブートストラップ：Webデザインの強力なフレームワークMay 07, 2025 am 12:05 AM

Bootstrapは、Web開発プロセスを簡素化して高速化するために、Twitterチームが開発したオープンソースのフロントエンドフレームワークです。 1.BootStrapはHTML、CSS、およびJavaScriptに基づいており、最新のユーザーインターフェイスを作成するための豊富なコンポーネントとツールを提供します。 2。そのコアは、レスポンシブデザインにあり、事前定義されたクラスとコンポーネントを通じてさまざまなレイアウトとスタイルを実装しています。 3.BootStrapは、ナビゲーションバー、ボタン、フォームなどの事前定義されたUIコンポーネントを提供します。これらは使いやすく調整します。 4.使用の例には、シンプルなナビゲーションバーと高度な折りたたみ式サイドバーの作成が含まれます。 5.一般的なエラーには、バージョンの競合、CSS上書き、JavaScriptエラーが含まれます。これは、バージョン管理ツールを介して使用できます。

Reactのブートストラップの力：詳細な外観May 06, 2025 am 12:06 AM

ブートストラップは、2つの方法でReactに統合できます。1）CSSおよびJavaScriptファイルをBootStrapを使用して。 2）React-Bootstrapライブラリを使用します。 React-Bootstrapは、カプセル化された反応成分を提供し、Reactでより自然で効率的にブートストラップを使用します。

Reactでブートストラップコンポーネントを使用：ステップバイステップチュートリアルMay 05, 2025 am 12:09 AM

Reactプロジェクトでブートストラップコンポーネントを使用するには2つの方法があります。1）元のブートストラップのCSSとJavaScript。 2）React-BootstrapやReactStrapなどのReact専用に設計されたライブラリを使用します。 1）npmにブートストラップをインストールし、エントリファイルにCSSファイルを導入し、Reactコンポーネントでブートストラップクラス名を使用します。 2）React-BootstrapまたはReactStrapをインストールした後、提供するReactコンポーネントを直接使用します。これらの方法を使用してレスポンシブUIをすばやく構築しますが、スタイルの読み込みとJavaScriptに注意してください

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

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

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

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。