この記事では、Bootstrapの実践について説明し、Bootstrap のレスポンシブ レイアウトについて紹介します。
#レスポンシブ レイアウトとは、Web サイトが端末ごとに特定のバージョンを作成するのではなく、複数の端末と互換性があることを意味します。このコンセプトは、モバイル インターネット ブラウジングを解決するために生まれました。
ナビゲーション バーとカルーセルは、ほとんどの Web サイトのヘッダーで高い割合を占めており、特にナビゲーション バーはサイト マップの役割を果たします。
レスポンシブ レイアウトでは、端末の画面サイズに応じてさまざまなスタイルを表示するナビゲーション バーが必要です。
公式説明: ナビゲーション バーはアプリケーションまたは Web サイトにあります。ナビゲーション ページ ヘッダーの応答性の高い基本コンポーネント。モバイル デバイスでは折りたたまれ (開閉可能)、ビューポートの幅が増加するにつれて徐々に水平方向に拡張されます。
Bootstrap を使用する前は、
レンダリング:
Bootstrap を使用している場合は、これについてよくご存知でしょう。構造にいくつかの変更を加えます。まず、 レンダリング: これは、最外層に追加された 一部の公式 Web サイトを閲覧すると、最初に目に入るのは、左上隅にある特徴的な企業ロゴと誇張されたカルーセルです。 , Bootstrap は、ナビゲーション内のロゴの位置を予約します。使用方法は、外側の レンダリング: 第 1 レベルのナビゲーションでは不十分な場合があり、より多くのコンテンツを表示するには、第 2 レベルのナビゲーションと組み合わせる必要があります。 。使用方法: まず、セカンダリ ナビゲーションを追加する必要がある ##新しい属性がここに表示されます false 使用方法：新建一个 Glyphicons 字体图标使用示例： 效果图： 注意： 另外这里的箭头也可以使用 Bootstrap 自带的样式 在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个移动设备优先也是支持这样的需求的，响应式导航的使用的方法比较固定，首先在导航标题 效果图： 图片轮播是网站的重要组成部分之一，常用来放活动广告或企业宣传图，有时也叫做“幻灯片”，Bootstrap 中的轮播效果是由 JavaScript 插件 Carousel 来实现的。 轮播的使用方法也是相对固定的，特殊场景按需求修改即可。需要注意的是需要给最外层 效果图： 一个完整的轮播应具有自动播放、点击切换、悬浮停止、外加说明文字功能，别担心，这些 Bootstrap 通通都有！ 最外层 在轮播图片 在轮播图片下面放置两个 轮播代码示例： 效果图： 试着组合栅格系统 + 导航栏 + 轮播布局一个响应式页面。 电脑端效果图： 移动端效果图： 其实实现这样一个效果很简单，首先看一下栅格参数如何在多种屏幕设备上工作的。 スタイル デモ アドレス: https://mazey.cn/bootstrap-blueprints/lesson-second-navigation/index.html ソース コード アドレス: https://github.com /mazeyqian/bootstrap-blueprints/tree/master/lesson-second-navigation。 ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 ！ 以上がBootstrap のレスポンシブ レイアウトに関する関連知識ポイントの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。のレイヤーをnavbar navbar-default; を追加してから、を指定します。 < inside ;ul>スタイルnav navbar-navを追加します。 最後に、選択した部分にスタイルactiveを追加します。最も基本的なブートストラップ ナビゲーションが完了しました。
ログイン後にコピー
role="navigation"属性です。これは HTML5 の目的ですタグ属性の目的は、タグをセマンティックにして、スクリーン リーダーがタグを識別しやすくすることと、特別なグループの人々によるブラウジングを容易にすることです。1.1.2 高度なナビゲーション バー
内にスタイルnavbar-headerを持つを追加することです。このnavbar-brandを持つ要素を内部に追加します。
ログイン後にコピー
要素にスタイルdropdownを追加し、次にスタイルを# に追加します。 ## 要素。dropdown-toggleと属性data-toggle="dropdown"; 次に、# 内のの下に # を置きます。#組み合わせ、dropdown-menuを追加しました。<!--代码部分--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="#" class="navbar-brand">LOGO</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Navigation First</a></li> <li><a href="#">Navigation Second</a></li> <li><a href="#">Navigation Third</a></li> <li><a href="#">Navigation Fourth</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Navigation Fifth <ul class="dropdown-menu"> <li><a href="#">Sub-Navigation First</a></li> <li><a href="#">Sub-Navigation Second</a></li> <li><a href="#">Sub-Navigation Third</a></li> </ul> </a> </li> </ul> </div>
ログイン後にコピー
aria-haspopup="true" aria-expanded="false"aria-haspopup: trueは、ポップアップがないことを意味します効果。aria-expanded:展開状態を示します。デフォルトは未定義で、現在の拡張ステータスが不明であることを意味します。その他のオプション値:trueは要素が展開されていることを示し、falseは要素が展開されていないことを示します。通常表示されるドロップダウン ボックスには、下向きの矢印記号 ▼ が付いています。同様に、この効果は Bootstrap でもサポートされていますが、独自のフォント ライブラリである Glyphicons フォント アイコンを導入する必要があります。元素，然后在里面加上样式glyphicon glyphicon-triangle-bottom。
padding）的正确显示。caret来实现，这里的箭头是用 CSS 实现了，使用方法：。1.1.3 响应式导航栏
内加上一段固定写法的代码；然后在需要在小屏时折叠的
collapse navbar-collapse的元素，并给这个元素加上任意名称的 ID，例如：
id="navigation-collapse"；最后在响应式按钮元素上加上data-target属性指向要折叠的内容id，例如：data-target="#navigation-collapse"。
ログイン後にコピー
1.2 轮播
1.2.1 基础轮播
元素加上一个
id，并在小圆点出指向这个id。
ログイン後にコピー
1.2.2 进阶的轮播
1.2.2.1 自动播发
元素添加属性
data-ride="carousel"和样式slide（使轮播播放更平滑），如：
。此时轮播的自动播放时间为 5 秒（默认），如想改变此值设置属性
data-interval="你想要的值"，如我想要 3 秒（3000 ms）轮播一次则设置
data-interval="3000"。另外轮播是默认悬浮停止播放的（
data-pause="hover"），如想禁止悬浮播放设置属性
data-pause="false"即可。
1.2.2.2 添加文字
carousel-caption的，里面存放文字便可正确显示在轮播上面。
夜里总是下雨
ログイン後にコピー
1.2.2.3 点击切换
元素，href指向轮播id，添加属性data-slide="prev/next 向前/向后"。
二、实战
col-xs-*、col-sm-*、およびをニュース ボックスと情報ボックスに同時に追加します時間col-md-*、画面が小さい場合(画面幅col-xs-*、col-sm-*が有効になり、col-md- *無効; 画面が大きい場合 (画面幅 ≥ 992px)col-md-*が有効、col-xs-*、Col-sm-*無効です。例:
関連ラベル：
ソース：cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
2023-04-26 17:59:18
2023-04-26 17:47:48
2023-04-26 17:41:42
2023-04-26 17:37:05
2023-04-26 17:31:25
2023-04-26 17:27:32
2023-04-25 19:57:58
2023-04-25 19:53:11
2023-04-25 19:49:11
2023-04-25 19:41:54
最新の問題
Nuxt.js に jQuery をインストールする手順
プロジェクトに jQuery を追加しようとしましたが、定義されていないというエラーが表示されます。 plugins:[{src:'~/plugins/js/svgSprite.j...
から 2023-11-06 16:41:50
0
1
225
ヘッダー画像、テキスト、ボタンをレスポンシブにする方法
Bootstrap5を使ってWebサイトを作っています。ウェブサイトのヘッダーでは、Bootstrap のカルーセルをヘッダーに使用しています。カルーセル画像では、テキストやボタン...
から 2023-09-17 09:51:15
0
1
283
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
