ブートストラップフレームワークを使用したカルーセルの作成

カルーセルについて考えるとき、通常頭に浮かぶのは、子供の頃に乗った可能性のある遊園地の乗り物です。乗り物が進むにつれて、カラフルなメリーゴーランドの馬が上下に回転する大きなプラットフォームです。

ブートストラップカルーセルは、私たちが子供の頃に知った楽しいフェアの種類ではありませんが、概念には類似点があります。この記事では、Bootstrapの使用を開始する方法、カルーセルUI要素とは何か、いつ使用するのがよいか、およびBootstrapフレームワークを使用してカルーセルUI要素を構築する方法について説明します。

はじめに

ブートストラップカルーセルを設定するために最初に行う必要があるのは、適切な依存関係があることを確認することです。このためには、Bootstrap、PopperJS、およびjQueryが必要です。依存関係をプロジェクトに追加するための支援については、Bootstrapのクイックスタートページをご覧ください。

依存関係の要件をどのように処理するかはあなたの決定ですが、最も簡単で初心者に優しい方法は、jQuery、Popper.js、およびBootstrapにコンテンツ配信ネットワーク（CDN）を使用することです。 <script>の順序に注意してくださいタグ–ここでは順序が重要です。

これで、開始する準備が整いました。

ブートストラップドキュメントを使用したカルーセルの作成

Introduction/Getting Startedの左側にありますページには、さまざまなものにリンクするサイドバーが表示されます。 Componentsを探してくださいリンクしてクリックします。これにより、Bootstrapで利用可能な多くのコンポーネントの最初のAlertsに移動します。。サイドバーをもう一度見てみると、利用可能なすべての異なるコンポーネントへの異なるリンクが表示されています。

Carouselをクリックします開始するコンポーネント。これには、必要な情報が含まれます。

仕組み

Bootstrapは、CSS変換プロパティとJavaScriptを利用して、カルーセルが1つのスライドから次のスライドに移動するときにカルーセルを操作します。最も基本的なカルーセルは、設定された時間が経過すると次の画像または次の画像に移動する一連の画像またはマークアップです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

基本構造

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Navbar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</a>
     </li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </div>
 </nav>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
   <div class="carousel-inner">
     <div class="carousel-item active">
         <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item"><img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
     </div>
   </div>
 </div>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

これがあなたがあなたにとって新しいかもしれない上記のいくつかの属性とそれらの意味です：

属性	意味
data-ride =“ carousel”	ページの読み込み時にアニメーション化します。
data-interval =“ false \| [ミリ秒単位の数値]」	falseに設定すると、カルーセルは自動的に循環しません。それ以外の場合は、ミリ秒単位の数値に基づいて循環します。
data-pause =“ hover”	ユーザーがカルーセルにカーソルを合わせると、カルーセルは現在アクティブな画像で一時停止します。マウスリーブ時に、カルーセルはサイクリングプロセスを再開します。
class =“ active”	表示する画像を知るにはアクティブが必要です。
class =“ d-block”	表示：ブロック;
class =“ w-100”	幅：100％;

コントロール付き

この基本的なサイクリング構造に加えて、Bootstrapはコンポーネントのカルーセルコントロールを提供します。ここでJavaScriptの大部分が機能します。 Bootstrapは、JavaScript util関数を使用して、ユーザーがコントロールをクリックしたときにカルーセルを動作させます。

以下のこのコードスニペットでは、画像の両側に前の矢印と次の矢印が表示されます。以前と同じように（タイマーで）操作することに加えて、ユーザーが矢印の1つをクリックすると、画像が変化します。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Navbar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</a>
     </li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </div>
 </nav>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
 <div class="carousel-inner">
   <div class="carousel-item active">
         <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
   </div>
 </div>
 <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
 </a>
</div>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

コントロールの動作方法について理解しておくべき重要なことは、hrefがカルーセルの全体的なdivの一意のIDと一致する必要があるということです。

次のコントロール：

<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

カルーセルの最も外側のコンテナ：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

リンクが機能するためには、強調表示された領域が一致している必要があります。

インジケーター付き

コントロールを使用してカルーセルのサイクリングを操作することに加えて、カルーセルにあるブロック要素の数を表示することで、どの画像を表示しているかを示すことができます。これらは、コントロールと組み合わせて使用できます。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Navbar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">lid
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</a>
     </li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </div>
 </nav>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
 <ol class="carousel-indicators">
   <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
   <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
   <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
   <div class="carousel-item active">
         <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
   </div>
 </div>
 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
 </a>
</div>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

上記のコードスニペットの順序付きリストは、インジケーターを表示するものです。 .activeクラスは、carousel-itemsのアクティブクラスと一致します。

結論

これは、最初は消化する情報がたくさんあるように見えるかもしれません。覚えておくべき主なことは、ドキュメントに従うことです。ドキュメントが非常によく書かれていて詳細である場合、これを行う方法を必ずしも覚えておく必要はありません。

Bootstrap側ですべてがどのように機能するかを知っておくことは間違いなく良い考えです。Bootstrapで要素のスタイルとスクリプトがどのように設定されているかを確認する時間があれば、縮小されたCSSファイルとJSファイルを確認してください。また、サンプルコードで少なくともすべての属性が何を意味するかを知っておくと、ニーズに合わせて属性を調整し、プロジェクトで使用できます。

最後に、カルーセルコンポーネントは、アクセシビリティの観点から使用するのに最適ではない可能性があることに注意してください。可能な限りページにアクセスできるようにし、他の場所でも見つからないカルーセル内の情報を使用しないようにしてください。

Bootstrapを使用するための旅を続けて、頑張ってください！

CSS太字：フォントの太さを使用するためのガイド

ブートストラップフレームワークを使用したテーブルの作成

Windowsでコマンドプロンプトを使用して復元ポイントを作成する方法
Windows PCに問題がある場合は、問題なく動作していたときに、コンピューターを以前の復元ポイントに復元できます。 Windows11および10の[システムの復元]ダイアログを使用して復元ポイントを作成するのは簡単です。ただし、定期的に作成する場合は、より迅速な方法があります。ここでは、コマンドプロンプトとPowerShellを使用して復元ポイントを作成して使用する方法を示します。 Windowsでシステムの復元ポイントを有効にする方法システムの復元は、WindowsOSブートドライブに対してデフォルトで有効になっています。保護設定にアクセスすると、PCでシステムの復元が有効にな
TkinterのOptionMenuウィジェットを使用して関数を呼び出す方法は？
例を見て、TkinterのOptionMenuウィジェットを使用して関数を呼び出す方法を見てみましょう。この例では、 StringVarを使用しますオブジェクトを作成し、そのget（）メソッドを呼び出します。 StringVar Tkinterのオブジェクトは、ウィジェットの値を管理するのに役立ちます。 OptionMenuウィジェットを作成し、文字列のリストを入力します。ユーザーがオプションを選択すると、関数が呼び出され、選択したオプションがラベルとして出力されます。ステップ- tkinterライブラリをインポートし、tkinterフレームのインスタンスを作成します。