Bootstrap のレスポンシブ レイアウトに関する関連知識ポイントの簡単な分析

この記事では、Bootstrap の実践について説明し、Bootstrap のレスポンシブ レイアウトについて紹介します。

#レスポンシブ レイアウトとは、Web サイトが端末ごとに特定のバージョンを作成するのではなく、複数の端末と互換性があることを意味します。このコンセプトは、モバイル インターネット ブラウジングを解決するために生まれました。

ナビゲーション バーとカルーセルは、ほとんどの Web サイトのヘッダーで高い割合を占めており、特にナビゲーション バーはサイト マップの役割を果たします。

レスポンシブ レイアウトでは、端末の画面サイズに応じてさまざまなスタイルを表示するナビゲーション バーが必要です。

1. 知識ポイント

1.1 ナビゲーション バー

公式説明: ナビゲーション バーはアプリケーションまたは Web サイトにあります。ナビゲーション ページ ヘッダーの応答性の高い基本コンポーネント。モバイル デバイスでは折りたたまれ (開閉可能)、ビューポートの幅が増加するにつれて徐々に水平方向に拡張されます。

1.1.1 基本ナビゲーション バー

Bootstrap を使用する前は、<ul> <li> を使用することに慣れていました。 ナビゲーション バーを構築します。 [関連する推奨事項: "bootstrap チュートリアル "]

<!--代码部分-->
<style>
.navigation-past{
    list-style: none;
}
.navigation-past>li{
    float: left;
    padding: 8px;
}
.navigation-past>li>a{
    text-decoration: none;
    color: #000;
}
.active-past{
    background: #E7E7E7;
}
</style>
<ul class="navigation-past">
	   <!--选中-->
    <li class="active-past"><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><a href="#">Navigation Fifth</a></li>
</ul>

レンダリング:

Bootstrap を使用している場合は、これについてよくご存知でしょう。構造にいくつかの変更を加えます。まず、<div> のレイヤーを <ul> の外側に配置し、スタイル navbar navbar-default; を追加してから、 を指定します。 &lt inside ;ul> スタイル nav navbar-nav を追加します。 最後に、選択した部分にスタイル active を追加します。最も基本的なブートストラップ ナビゲーションが完了しました。

<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
    <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><a href="#">Navigation Fifth</a></li>
    </ul>
</div>

レンダリング:

これは、最外層に追加された role="navigation" 属性です。これは HTML5 の目的ですタグ属性の目的は、タグをセマンティックにして、スクリーン リーダーがタグを識別しやすくすることと、特別なグループの人々によるブラウジングを容易にすることです。

1.1.2 高度なナビゲーション バー

一部の公式 Web サイトを閲覧すると、最初に目に入るのは、左上隅にある特徴的な企業ロゴと誇張されたカルーセルです。 , Bootstrap は、ナビゲーション内のロゴの位置を予約します。使用方法は、外側の <div> 内にスタイル navbar-header を持つ <div> を追加することです。この <div&gt ; スタイル navbar-brand を持つ <a> 要素を内部に追加します。

<!--代码部分-->
<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><a href="#">Navigation Fifth</a></li>
    </ul>
</div>

レンダリング:

第 1 レベルのナビゲーションでは不十分な場合があり、より多くのコンテンツを表示するには、第 2 レベルのナビゲーションと組み合わせる必要があります。 。使用方法: まず、セカンダリ ナビゲーションを追加する必要がある <li> 要素にスタイル dropdown を追加し、次にスタイル を <a># に追加します。 ## 要素。dropdown-toggle と属性 data-toggle="dropdown"; 次に、<a># 内の <li> の下に # を置きます。 #<ul> <li> 組み合わせ、<ul> ラベルはスタイル dropdown-menu を追加しました。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;!--代码部分--&gt; &lt;div class=&quot;navbar navbar-default&quot; role=&quot;navigation&quot;&gt; &lt;div class=&quot;navbar-header&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;navbar-brand&quot;&gt;LOGO&lt;/a&gt; &lt;/div&gt;     &lt;ul class=&quot;nav navbar-nav&quot;&gt;         &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Navigation First&lt;/a&gt;&lt;/li&gt;         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Navigation Second&lt;/a&gt;&lt;/li&gt;         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Navigation Third&lt;/a&gt;&lt;/li&gt;         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Navigation Fourth&lt;/a&gt;&lt;/li&gt;         &lt;li class=&quot;dropdown&quot;&gt;             &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;                 Navigation Fifth                 &lt;ul class=&quot;dropdown-menu&quot;&gt;                     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub-Navigation First&lt;/a&gt;&lt;/li&gt;                     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub-Navigation Second&lt;/a&gt;&lt;/li&gt;                     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub-Navigation Third&lt;/a&gt;&lt;/li&gt;                 &lt;/ul&gt;             &lt;/a&gt;         &lt;/li&gt;     &lt;/ul&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>レンダリング:

##新しい属性がここに表示されますaria-haspopup="true" aria-expanded="false"

、同様に、これは HTML5 の新しく追加された属性でもあり、Segmentfault コミュニティの Jiang Zhongqiu からの回答は次のとおりです。

aria-haspopup: true

は、クリックするとメニューまたはフローティング要素が表示されることを意味します;

false は、ポップアップがないことを意味します効果。 aria-expanded: 展開状態を示します。デフォルトは 未定義 で、現在の拡張ステータスが不明であることを意味します。その他のオプション値: true は要素が展開されていることを示し、false は要素が展開されていないことを示します。 通常表示されるドロップダウン ボックスには、下向きの矢印記号 ▼ が付いています。同様に、この効果は Bootstrap でもサポートされていますが、独自のフォント ライブラリである Glyphicons フォント アイコンを導入する必要があります。

公式紹介: Bootstrap には、Glyphicon Halflings の 250 以上のフォント アイコンが含まれています。グリフィコン ハーフリングは通常有料ですが、その作成者は Bootstrap に無料で使用することを許可しています。感謝の気持ちを込めて、Glyphiconsをご利用の際はフレンドリーリンクを貼っていただければ幸いです。

使用方法：新建一个 <span> 元素，然后在里面加上样式 glyphicon glyphicon-triangle-bottom。

Glyphicons 字体图标使用示例：

<!--代码部分-->
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Navigation Fifth <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
        <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> <li>Glyphicons 字体图标和文本之间添加一个空格，不然会影响样式（padding）的正确显示。 <li>服务器需要正确添加相应的 MIME 类型，否则加载字体会报 404 错误。

另外这里的箭头也可以使用 Bootstrap 自带的样式 caret 来实现，这里的箭头是用 CSS 实现了，使用方法：<span class="caret"></span>。

1.1.3 响应式导航栏

在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个移动设备优先也是支持这样的需求的，响应式导航的使用的方法比较固定，首先在导航标题 <div class="navbar-header"> 内加上一段固定写法的代码；然后在需要在小屏时折叠的 <ul> 元素外包一层样式 collapse navbar-collapse 的 <div> 元素，并给这个元素加上任意名称的 ID，例如：id="navigation-collapse"；最后在响应式按钮 <button> 元素上加上 data-target 属性指向要折叠的内容 id，例如：data-target="#navigation-collapse"。

<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
						<!--以下为固定写法，用到的时候复制粘贴即可-->
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navigation-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <div class="collapse navbar-collapse" id="navigation-collapse">
        <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 <span class="caret"></span>
                    <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>
</div>

效果图：

1.2 轮播

图片轮播是网站的重要组成部分之一，常用来放活动广告或企业宣传图，有时也叫做“幻灯片”，Bootstrap 中的轮播效果是由 JavaScript 插件 Carousel 来实现的。

1.2.1 基础轮播

轮播的使用方法也是相对固定的，特殊场景按需求修改即可。需要注意的是需要给最外层 <div> 元素加上一个 id，并在小圆点出指向这个 id。

<!--代码部分-->
<div id="my-banner" class="carousel">
    <!--放置小圆点，点击可以切换轮播-->
    <ol class="carousel-indicators">
        <!--加上样式active表示默认显示的轮播，data-slide-to="0"属性表示显示轮播的顺序-->
        <li data-target="#my-banner" data-slide-to="0" class="active"></li>
        <li data-target="#my-banner" data-slide-to="1"></li>
    </ol>
    <!--这里放置轮播显示的图片-->
    <div class="carousel-inner">
        <!--加上样式active表示默认显示的图片-->
        <div class="item active">
            <img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="轮播">
        </div>
        <div class="item">
            <img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="轮播">
        </div>
    </div>
</div>

效果图：

1.2.2 进阶的轮播

一个完整的轮播应具有自动播放、点击切换、悬浮停止、外加说明文字功能，别担心，这些 Bootstrap 通通都有！

1.2.2.1 自动播发

最外层 <div> 元素添加属性 data-ride="carousel" 和样式 slide（使轮播播放更平滑），如：

。此时轮播的自动播放时间为 5 秒（默认），如想改变此值设置属性 data-interval="你想要的值"，如我想要 3 秒（3000 ms）轮播一次则设置 data-interval="3000"。另外轮播是默认悬浮停止播放的（data-pause="hover"），如想禁止悬浮播放设置属性 data-pause="false" 即可。

1.2.2.2 添加文字

在轮播图片 <img> 元素下面添加样式 carousel-caption 的 <div>，里面存放文字便可正确显示在轮播上面。

<!--代码部分-->
<div class="carousel-caption">
    <h5>夜里总是下雨</h5>
</div>

1.2.2.3 点击切换

在轮播图片下面放置两个 <a> 元素，href 指向轮播 id，添加属性 data-slide="prev/next 向前/向后"。

<!--代码部分-->
<!--<a>元素的href指向轮播id-->
<a class="left carousel-control" href="#my-banner" data-slide="prev" role="button">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my-banner"  data-slide="next" role="button">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

轮播代码示例：

<!--代码部分-->
<div id="my-banner" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
    <!--放置小圆点，点击可以切换轮播-->
    <ol class="carousel-indicators">
        <!--加上样式active表示默认显示的轮播，data-slide-to="0"属性表示显示轮播的顺序-->
        <li data-target="#my-banner" data-slide-to="0" class="active"></li>
        <li data-target="#my-banner" data-slide-to="1"></li>
    </ol>
    <!--这里放置轮播显示的图片-->
    <div class="carousel-inner">
        <!--加上样式active表示默认显示的图片-->
        <div class="item active">
            <img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="轮播">
            <div class="carousel-caption">
                <h5>夜里总是下雨</h5>
            </div>
        </div>
        <div class="item">
            <img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="轮播">
            <div class="carousel-caption">
                <h5>后除提醒君の世界</h5>
            </div>
        </div>
    </div>
    <!--<a>元素的href指向轮播id-->
    <a class="left carousel-control" href="#my-banner" data-slide="prev" role="button">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#my-banner"  data-slide="next" role="button">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

效果图：

二、实战

试着组合栅格系统 + 导航栏 + 轮播布局一个响应式页面。

电脑端效果图：

移动端效果图：

其实实现这样一个效果很简单，首先看一下栅格参数如何在多种屏幕设备上工作的。

スタイル col-xs-*、col-sm-*、および をニュース ボックスと情報ボックスに同時に追加します時間col-md-*、画面が小さい場合(画面幅col-xs-*、col-sm-*が有効になり、 col-md- * 無効; 画面が大きい場合 (画面幅 ≥ 992px) col-md-* が有効、col-xs-*、 Col-sm-* 無効です。例: <div class="col-xs-12col-sm-12col-md-6">ニュース</div><div class="col-xs-12col-sm- 12col-md-6">情報</div>。

デモ アドレス: https://mazey.cn/bootstrap-blueprints/lesson-second-navigation/index.html

ソース コード アドレス: https://github.com /mazeyqian/bootstrap-blueprints/tree/master/lesson-second-navigation。

ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 ！

以上がBootstrap のレスポンシブ レイアウトに関する関連知識ポイントの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。