Bootstrapを使用してCarousel Image Carouselを作成すると、時間を節約できます。 Image CarouselはWebページで一般的なテクノロジーですが、直接書かれた場合、長いJavaScriptエンコードが必要であり、サイズを制御するのは簡単ではありません。
また、カルーセルという言葉の元の意味はメリーゴーランドの馬だと言っておきましょう。
1。基本的な目的
Webページに複数の写真を書くためのCarouselは、マウスの上に配置され、画像の説明は各写真の下に提供されています。
著者のコンピュータービデオ録画ソフトウェアは非常に悪いので、彼はまた、それにあまりにも多くの時間を描く必要がないと感じています。彼は、それが問題を説明できる限り、以下のGIFはより色の喪失であると考えていますが、基本的な効果はまだ示されています。
ブートストラップの画像カルーセルコンポーネントであるCarouselは、IE6および7と互換性がありません。IE6サポートが必要な場合は、BootstrapのIE6コンポーネントサポートをこのWebサイトからダウンロードする必要があります（リンクを開くにはクリックしてください）。同時に、Google Chromeの画像ファイルの説明は少し黒に浸透しますが、ブラウジングには影響しません。
さまざまなブラウザのプレゼンテーションの状況は異なります。 IE8の効果は次のようなものです。
2。基本的なアイデア
次の画像のページレイアウトを参照してください。
3。生産プロセス
1.以前の「現在のWebページで閉じることができるダイアログボックスを書くためのブートストラップの最初のステップ」（クリックしてリンクを開く）
Bootstrapを使用する必要があるため、公式Webサイトのコンポーネントをダウンロードできます（クリックしてリンクを開きます）。生産環境で使用されるブートストラップバージョンは2と互換性がありません。開発文書に従ってBootstrap3を直接使用することをお勧めします。この記事は、Bootstrap3にも基づいて作成されています。同時に、bootstrap3によって提供されるJavaScript効果をjquery 1.11でサポートする必要があります（リンクを開くにはクリックしてください）。古いブラウザーIE6と互換性がないjquery2ではなく、jQueryの公式Webサイトから古いブラウザIE6と互換性のあるjQuery 1.11をダウンロードできます。ダウンロード後、サイトディレクトリを構成します。 bootstrap3をサイトディレクトリに直接解体し、js jsディレクトリにjquery-1.11.1.js、つまりbootstrap.jsと同じディレクトリに配置します。サイトフォルダーの構造は、ほぼ次のとおりです。
2。以下はWebページの完全なコードであり、次の部分について説明します。
< 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 = 1. href = "css/bootstrap.css" rel = "styleSheet" screen "> <script type =" text/javascript "src" = "js/jquery-1.11.1.js"> </script> <スクリプトタイプ= "テキスト/javascript" src = "js/boottrap.js"> </pitter> </pitter <body> <div> <div> <h1> picture carousel </h1> </div> <div> <div id = "carousel" data-ride = "carousel" data-interval = "1000"> <ol> <li data-target = "＃carousel-example-generic" slide-to = "0" data-slide-to = "1"> </li> <li data-target = "＃carousel-example-generic" data-slide-to = "2"> </li> </ol> <div role = "listbox"> <div> "href =" images/img0.jpg "> <img src =" image/img0.jpg "> </a </h3> <p> img0 </p> </div> </div> <div> <a href = "img10.jpg"> <img src = "image/img10.jpg"> </a> <div> <h3> img10 </h3> </p> </p> href = "Images/img2.jpg"> <img src = "image/img2.jpg"> </a> <div> <h3> img2 </h3> <p> img2 </p> </div> </div> <a href = "＃carousel-example-generic" prek "> <<" butt </a> <a href = "＃carousel-example-generic" role = "button" data-slide = "next"> <span> </span> </a> </div> </div> </div> </body> </html> </html>
（1）<head>部分
<head> <！ - Webエンコーディングを宣言し、ブラウザサイズに自動的に適応します。 BootstrapのCSSを使用するには、jQueryサポートが必要です。 Bootstrapのjsを使用するには、title-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta name = "viewport" content = "width =" width = "width =" width = "width = 1.0、user-scalable = <link href =" cs/boottrapscs " media = "screen"> <script type = "text/javascript" src = "js/jquery-1.11.1.js"> </script> <script> "src =" js/bootstrap.js "> </script> <title>写真carousel> </head> </head> </head> </head>
（2）<body>部分
まず、コンテナコンテナを宣言します。コンテナは、Webページのすべての要素をWebページの中心に自動的に作成し、次にこのコンテナに要素を書き込むことができます。
最初にヘッダーを書き、ヘッダーを宣言してから、その中にテキストを書きます。
<div> <h1>画像Carousel </h1> </div>
次に、主に画像カルーセルコンポーネントの標準化に使用される名前のないレイヤーdivを定義します。 Bootstrap画像のサイズCarouselコンポーネントは、その内部の要素に指定できず、幅と高さのパラメーターが追加されています。このようにして、画像カルーセルコンポーネントが歪んでいます。同時に、このコンポーネントを中央に配置するには、マージン右：自動を使用する必要があります。マージン左：自動; divのスタイル属性で制約します。追加のAlign = "Center"はまったく効果がありません。
最後に、画像コンポーネントの各部分の詳細な説明があります。
<div> <！ - 画像のカルーセルコンポーネントの名前はカルーセルであり、データライド要素はブートストラップで必要です。データインターバルの値は、1000ミリ秒ごと、つまり1秒ごとに画像を変更することです。この値が多すぎる場合、コンポーネントが歪んでいます - > <div id = "carousel" data-ride = "carousel" data-interval = "1000"> <！ - ここに定義されたいくつかの写真があります。もう1つの写真がある場合は、以下にもう1つアイテムを追加します。データスライドの値が追加されます。最初の画像、つまり、0番目の画像にはclass = "Active"が必要です。そうしないと、コンポーネントは機能しません - > <ol> <li data-target = "＃carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "＃carousel-example-generic" data-slide-= " data-slide-to = "2"> </li> </ol> <div role = "listbox"> <！ - 以下は各画像の詳細な編集です。最初の画像のクラス値はアイテムがアクティブでなければならず、残りはアイテムです - > <div> <！ - img0.jpgのハイパーリンクを開く画像IMG0.jpgをクリックします。ハイパーリンクがない場合は、<a> tag-> <a href = "image/img0.jpg"> <img src = "images/img0.jpg"> </a> <div> <！ - 写真の下でのテキスト説明 - > <h3> img0 </h3> <p>写真href = "image/img10.jpg"> <img src = "image/img10.jpg"> </a> <div> <h3> img10 </h3> <p>写真の説明i am img10 </p> </div> </div> <div> <a href = "画像/img2.jpg"> <img src = "Images/img2.jpg"> </a> <div> <h3> img2 </h3> <p>絵の絵の説明i am img2 </p> </div> </div> </div> <！ - 左と右、右、固定フレームコードを考えるコンポーネントの2つのボタンがあります - > < <span> </span> </a> <a href = "＃carousel-example-generic" role = "button" data-slide = "next"> <span> </span> </div> </div>
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。