ホームページ > 記事 > ウェブフロントエンド > Bootstrap 画像カルーセルコンポーネント Carousel の使い方を詳しく解説

Bootstrap 画像カルーセルコンポーネント Carousel の使い方を詳しく解説

不言オリジナル: 2018-05-05 16:18:384682ブラウズ

この記事では、主に Bootstrap 画像カルーセルコンポーネントの使用方法を詳しく紹介します。興味のある方は参考にしてください。

Bootstrap は、Twitter によって開始されたフロントエンド開発用のツールです。これは Twitter デザイナーの Mark Otto と Jacob Thornton によって開発された CSS/HTML フレームワークです。 Bootstrap は、動的 CSS 言語 Less で記述されたエレガントな HTML および CSS 仕様を提供します。 Bootstrap は発売以来非常に人気があり、NASA の MSNBC (Microsoft National Broadcasting Company) Breaking News など、GitHub 上の人気のオープンソースプロジェクトとなっています。

画像カルーセルコンポーネントは Web ページでは非常に一般的なテクノロジーですが、直接記述すると、長い JavaScript コーディングが必要となり、サイズの制御が困難になります。

Bootstrap を使用して画像カルーセルコンポーネント Carousel を作成すると、時間を大幅に節約できます。

同時に、カルーセルという言葉の本来の意味はメリーゴーランドです。

1. 基本的な目標

Web ページ上に複数の画像用のカルーセルコンポーネントを作成します。その上にマウスを置くと、ホバー効果が表示され、各画像の下に画像の説明が表示されます。

作者のPC動画録画ソフトは貧弱なので、あまり時間をかけて描く必要はないと思いますが、問題が説明できれば十分だと思うので、以下のGIFはかなり色褪せています。ただし、基本的な効果は引き続き表示されます。

この Bootstrap 画像カルーセルコンポーネント Carousel は、IE6 および 7 と互換性がありません。IE6 サポートが必要な場合は、Web サイトにアクセスして Bootstrap の IE6 コンポーネントサポートをダウンロードしてください (クリックしてリンクを開きます)。同時に、Google Chrome の画像ファイルの説明が少し黒く見えますが、ブラウジングには影響しません:

ブラウザごとに表示状況が異なります。 IE8 の場合、次の効果があります:

2. 基本的な考え方

以下の Web ページのレイアウトを参照してください:

3. 制作プロセス

1. 前と同じ「[JavaScript] ] Bootstrap を使用して、現在の Web ページにポップアップするダイアログボックスを作成する最初のステップです。このダイアログボックスはジャンプせずに閉じることができ、ポップアップウィンドウではありません

Bootstrap を使用する必要があるため、コンポーネントをダウンロードできます本番環境で使用する Bootstrap バージョンは、Bootstrap3 2 とは互換性がありません。開発ドキュメントに従って、Bootstrap 3 を直接使用することをお勧めします。この記事も Bootstrap3 をベースにしています。同時に、Bootstrap 3 によって提供される JavaScript エフェクトが jQuery 1.11 でサポートされている必要があります。jQuery 公式 Web サイトにアクセスして、古いブラウザ IE6 と互換性のある jQuery 1.11 をダウンロードすることができます (クリックしてリンクを開きます)。 jQuery2は古いブラウザIE6と互換性がありません。ダウンロード後、サイトのディレクトリを設定します。 Bootstrap3 をサイトディレクトリに直接解凍し、jquery-1.11.1.js を bootstrap.js と同じディレクトリである js ディレクトリに置きます。サイトフォルダーの構造はおおよそ次のとおりです。以下は Web ページです。完全なコードは以下で部分ごとに説明されています。まずコンテナを宣言します。このコンテナは、Web ページのすべての要素を Web ページの中央に自動的に配置し、このコンテナに要素を書き込みます。

まずページヘッダーを記述し、ページヘッダーを宣言して、その中にテキストを記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <title>图片轮播Carousel</title>
 </head>

 <body>

 <p class="container">
 
 <p class="page-header">
 <h1>
 图片轮播Carousel
 </h1>
 </p>

 <p style="width: 640px; height: 480px; margin-right: auto; margin-left: auto;">

 <p id="carousel" class="carousel slide" data-ride="carousel" data-interval="1000">

 <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>

 <p class="carousel-inner" role="listbox">
   
 <p class="item active">
 <a href="images/img0.jpg"><img src="images/img0.jpg" alt="img0"></a>
 <p class="carousel-caption">
 <h3>
  img0
 </h3>
 <p>
  我是img0的图片说明
 </p>
 </p>
 </p>
   
 <p class="item">
 <a href="images/img10.jpg"><img src="images/img10.jpg" alt="img10"></a>
 <p class="carousel-caption">
 <h3>
  img10
 </h3>
    <p>
  我是img10的图片说明
    </p>
 </p>
 </p>

 <p class="item">
 <a href="images/img2.jpg"><img src="images/img2.jpg" alt="img2"></a>
 <p class="carousel-caption">
 <h3>
  img2
 </h3>
 <p>
  我是img2的图片说明
 </p>
 </p>
 </p>

 </p>

 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
   <span class="glyphicon glyphicon-chevron-left"></span> </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
   <span class="glyphicon glyphicon-chevron-right"></span> </a>

 </p>
 </p>
 </p>
 </body>
</html>

次に、名前のないレイヤー p を定義します。これは主に画像カルーセルコンポーネントを標準化するために使用されます。ブートストラップの画像カルーセルコンポーネントのサイズは、その内部の要素に幅と高さのパラメーターを追加することで指定できません。このようにして、画像カルーセルコンポーネントが歪んでしまいます。同時に、このコンポーネントを中央に配置するには、p の style 属性で margin-right: auto; margin-left: auto; を使用して制約する必要があります。

最後に、画像コンポーネントの各部分の詳細な説明:

<head>
 <!--声明网页编码，自动适应浏览器的尺寸，要使用bootstrap的css，需要jquery支持，要使用bootstrap的js，标题-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <title>图片轮播Carousel</title>
 </head>

Bootstrap 画像カルーセルコンポーネント Carousel の使い方を詳しく解説

関連記事