Bootstrap の採用 -- 大画面でのスライドショー カルーセル_html/css_WEB-ITnose

固定記事: 「シルバーの MacBook Air を作成するための純粋な CSS (完全版)」 前の記事: 「Bootstrap を採用? ナビゲーション バーの記事」

著者: myvin

前に書いてあります

このブログ記事では、まだ自分自身を組み合わせています 話しましょう私が作成したランドスケープ Web ページでの Bootstrap の使用については、次のとおりです。 Web ページのスクリーンショットは次のとおりです。

ここをクリックして完全な Web ページの効果とコードを表示するか、CodePen にアクセスして表示することができます。このウェブページが達成したい主な効果のいくつかをここで繰り返しましょう。前のブログ投稿を読んだイケメンや美女は、このセクションを直接スキップしてください:

1. ナビゲーション バーにログインし、登録ボタンをクリックするとログインが表示されます。 、モーダルボックスを登録すると、ログインウィンドウと登録ウィンドウを切り替えることができます

2. ナビゲーションバーの風景オプションをドロップダウンでクリックします。下に移動して、対応するタブを見つけます

3. 大画面スライド ショー カルーセル

4. クリックしてタブ ページを切り替えます

前回のブログ投稿で、ナビゲーション バーの関連コンテンツについて簡単に説明しました。詳細を確認したり確認したりするには、ここをクリックして前の投稿を表示してください。今日は、大画面のスライドのカルーセルについて説明します。まず大画面のカルーセル効果を確認したい場合は、ここをクリックして表示できます。

スライドショーの大画面カルーセル

まず、大画面カルーセルの準完全コードが与えられます:

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">          <!-- Indicators -->          <ol class="carousel-indicators">            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>            <li data-target="#carousel-example-generic" data-slide-to="1"></li>            <li data-target="#carousel-example-generic" data-slide-to="2"></li>          </ol>        <div class="carousel-inner" role="listbox">            <div class="item active">              <img src="C:/Users/Lenovo/Desktop/Test/bootstrap/images/pic1.jpg" alt="九寨沟">              <div class="carousel-caption">                <h1>九寨沟</h1>                <p>九寨沟国家级自然保护区位于四川省阿坝藏族羌族自治州九寨沟县境内，是中国第一个以保护自然风景为主要目的的自然保护区，同时，也是中国著名风景名胜区和全国文明风景旅游区示范点。</p>              </div>            </div>            <div class="item">              <img src="C:/Users/Lenovo/Desktop/Test/bootstrap/images/pic1.jpg" alt="丽江">              <div class="carousel-caption">                <h1>丽江</h1>                <p>丽江古城，又名“大研古镇”，海拔2,400米（旅游要防内源氧缺乏症），是丽江纳西族自治县的中心城市，是中国历史文化名城之一，世界文化遗产，国家5A级旅游景区，全国文明风景旅游区示范点。</p>              </div>            </div>            <div class="item">              <img src="C:/Users/Lenovo/Desktop/Test/bootstrap/images/pic1.jpg" alt="水帘洞">              <div class="carousel-caption">                <h1>水帘洞</h1>                <p>桐柏山水帘洞位于河南省南阳市桐柏县城西5公里处，是国家级风景名胜区桐柏山淮源风景名胜区著名景点之一。</p>              </div>            </div>          </div>          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>            <span class="sr-only">Previous</span>          </a>          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>            <span class="sr-only">Next</span>          </a>        </div>

その中で、このコードセクションは、カルーセル画像の下で素早く切り替わる 3 つの小さな点です:

          <ol class="carousel-indicators">            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>            <li data-target="#carousel-example-generic" data-slide-to="1"></li>            <li data-target="#carousel-example-generic" data-slide-to="2"></li>          </ol>

このセクションのコードは、カルーセル スイッチの前後の 2 つの矢印です:

          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>            <span class="sr-only">Previous</span>          </a>          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>            <span class="sr-only">Next</span>          </a>

大画面カルーセルの下には、横向きの円の写真を含む 3 つの序文があります:

        <div class="container col-md-10 col-md-offset-1" id="container-produce">          <div class="row" id="threecols">            <div class="col-md-4">              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_jiuzhaigou.jpg" alt="scenery1" class="img-circle">              <h1>九寨沟</h1>              <p>九寨沟国家级自然保护区位于四川省阿坝藏族羌族自治州九寨沟县境内，是中国第一个以保护自然风景为主要目的的自然保护区。</p>              <a type="button" class="btn btn-default">更多..</a>            </div>            <div class="col-md-4">              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_lijiang.jpg" alt="scenery2" class="img-circle">              <h1>丽江</h1>              <p>丽江古城，又名“大研古镇”，海拔2,400米（旅游要防内源氧缺乏症），是丽江纳西族自治县的中心城市，是中国历史文化名城之一，世界文化遗产。</p>              <a type="button" class="btn btn-default">更多..</a>            </div>            <div class="col-md-4">              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_shuiliandong.jpg" alt="scenery3" class="img-circle">              <h1>水帘洞</h1>              <p>桐柏山水帘洞位于河南省南阳市桐柏县城西5公里处，风景宜人，是国家级风景名胜区桐柏山淮源风景名胜区著名景点之一。</p>              <a type="button" class="btn btn-default">更多..</a>            </div>          </div>

その中で、col-md-10 カテゴリは 3 つの段落を作成します。以下の紹介の段落は合計 10 列を占め、col-md-4 タイプでは各紹介が 4 列を占めます。

上記のコードを実行した後、私たちが直面しているのは、実際に望む効果ではありません。カルーセル画像は、紹介の 3 つの段落の隣にあります。画像は大きく、若干変形しており、塗りつぶされていないエッジがあります。これは正確なコードなので、改善するにはまだいくつかのコードを埋める必要があります。

まず、カルーセル クラスにコードを追加し、視覚的な美しさのためにカルーセル領域全体のサイズを制限し、以下の 3 つの導入段落から 70 ピクセルの間隔をあけます:

      .carousel{        height:500px;        margin-bottom: 70px;      }

同時に、アイテム クラスにスタイルを追加します。カルーセルクラスの下に:

      .carousel .item{        height:500px;      }

最後に、横の空白スペースを埋めるために、カルーセルの画像がブラウザの幅の 100% を占めるようにする:

      .carousel .item img{        width:100%;      }

この 3 つのコードを追加して自分で実行する があるようです。バグはありませんが、ブラウザを縮小してからズームアウトすると、最終的に「安心できる」状況が表示されます。

以下の過剰な白黒のストリップを見てみましょう。カルーセル画像コンテナの高さを 500 ピクセルに制限しているため、ページが縮小して適応すると、コンテナの高さの 500 ピクセル制限により、画像は縮小してもコンテナは変更されません。理由は理解できたので、もちろん変更方法も非常に簡単です。 height 属性を max-height 属性に置き換えることができます。

      .carousel .item{        max-height:500px;      }

この方法で、画像コンテナもそれに応じて適応できます。

3 段落の簡単な紹介については、簡単に読むことができます。

これで終わりです

次回はタブ切り替えについてお話しましょう。

ご多幸をお祈り申し上げます。

転載する場合は必ず著者と出典を明記してください -.-
著者: myvin
出典:

前の記事: 「Bootstrap を採用?? ナビゲーション バー」 トップ記事: 「シルバーの MacBook Air を作成するための純粋な CSS (フルバージョン)》