🔕 👨🏿‍💻 👠 初心者のウェブマスターの場合：30分でブートストラップ4の1ページを実行します 🙍 👯 👨🏿‍🍳

Bootstrapフレームワークは、サイトインターフェイスとWebアプリケーションを作成するためのツールの無料セットです。その機能は、フロントエンド開発にのみ焦点を当てています。ブートストラップは非常に人気のあるプロジェクトであり、たとえば、GitHubの星の数で（2018年3月初頭の時点で） 2位になっているという事実によって示されています。

特に最新の4番目のバージョンであるBootstrapを学習したい場合は、この資料が特に用意されています。ここでは、30分で習得できる小さな横断的な例を使用して、Bootstrapの基本を示し、このフレームワークを使用して、自分で何かを実行できることを把握します。

前提条件

この資料は、HTML、CSS、jQueryの基本を知っている初心者のWeb開発者を対象としています。

Bootstrapを使用した作成について説明する1ページのWebサイトを次に示します。

Bootstrapによって作成された準備完了プロジェクト

ブートストラップのダウンロードとインストール

Bootstrapをダウンロードして使用するには、いくつかの方法があります。まず、 npmを使用できます。ここでは、次のコマンドが必要です。

 npm install bootstrap

ブートストラップは、コンテンツ配信ネットワークを使用してページに接続できます。これを行うには、次のリンクを<head>に追加します。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Bootstrapの最新バージョンはここからダウンロードして、ローカルで使用できます。

プロジェクト構造は次の図のようになります。

プロジェクト構造

Bootstrap 4の機能について

Bootstrap 4の最初の安定バージョンは、今年の1月下旬にリリースされました。 Bootstrapには、以前のバージョンにはなかった興味深い機能が含まれています。つまり、改善と変更について話すと、次の点に注意できます。

Bootstrap 4はflexboxテクノロジーを使用して書き換えられ、Bootstrap 3はフロートテクノロジーを使用しました。フレックスボックスに慣れていない場合は、この資料をご覧ください。
Bootstrap 4では、CSSでは、 rem単位が使用されますが、以前はpx単位が使用されていました。ここで、それらの違いを確認できます。
パネルなどの一部のコンポーネントは削除されました。ここで、Bootstrap 4に加えられた変更に関する詳細を確認できます。

実際、Bootstrap 4はBootstrap 3と比較して多くの新しい機能を備えています。必要な場合は、これらの革新に慣れることができます。私たちはトレーニングプロジェクトに取り組み始めています。

ブートストラップグリッドシステム

Bootstrap Grid Systemは、ページレイアウトを作成するように設計されています。レスポンシブWebサイトの開発を簡素化します。新しいBootstrapバージョンではクラス名は変更されていません（ .xsクラスはもう存在しないことに注意して.xs ）。

グリッドは12列に分割されており、開発者が必要とするように構成されたこの構造は、ページレイアウトの基本です。

Bootstrapグリッドを使用するには、ページのメイン<div>要素に.rowクラスを追加する必要があります。ネストされた要素のサイズを調整する場合、次のクラスが使用されます（アスタリスクの代わりに、クラス名の末尾は、特定の要素が占有するベース12列グリッドの列数を示します）。

col-lg-* -ラップトップのような大画面のデバイス向けのページに使用されるクラス。
col-md-* -タブレットなど、中規模の画面を持つデバイス用に設計されたページのクラス。
col-sm-* -スマートフォンなどの小さな画面用に設計されたページのクラス。

ナビゲーションバー

Bootstrapのナビゲーションバーは、 .navbarクラスを使用して作成されます。実際、これは、ナビゲーションバーを形成する要素が配置されるラッパーです。以下は、これから作成するパネルです。ページの上部にあり、スクロールしても消えません。

ナビゲーションバー

そのため、ページにナビゲーションバーを表示するには、 .navbarクラスの<nav>を.navbarに追加します。この内部では、 .navbar-brand 、 .navbar-toggler 、 .nav-itemなどの他のクラスを使用して、サイトナビゲーションシステムの特別な要素と構造を作成します。 .fixed-topクラスを使用すると、ページ上部のナビゲーションバーをロックできます。ナビゲーションバーのレイアウトは次のとおりです。

 <nav class="navbar navbar-expand-lg fixed-top ">  <a class="navbar-brand" href="#">Home</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-4">           <li class="nav-item">        <a class="nav-link" href="#">About</a>      </li>      <li class="nav-item">        <a class="nav-link " href="#">Portfolio</a>      </li>      <li class="nav-item">        <a class="nav-link " href="#">Team</a>      </li>      <li class="nav-item">        <a class="nav-link " href="#">Post</a>      </li>      <li class="nav-item">        <a class="nav-link " href="#">Contact</a>      </li>    </ul>     </div> </nav>

次に、 main.cssファイルを作成し、 index.htmlファイルの<head>以下を配置して、ページに接続します。

 <link rel="stylesheet" type="text/css" href="css/main.css">

これにより、このファイルにCSSルールを配置して、ページ要素のスタイルをカスタマイズできます。このCSSファイルに、ナビゲーションバーの色を指定するルールを追加します。

 .navbar{ background:#F97300; } .nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer; } .nav-link{ margin-right: 1em !important; } .nav-link:hover{ background: #f4f4f4; color: #f97300; } .navbar-collapse{ justify-content: flex-end; } .navbar-toggler{ background:#fff !important; }

新しいBootstrapグリッドはflexboxに基づいているため、適切なプロパティを使用してコンテンツを揃える必要があります。たとえば、ナビゲーションバーメニューを右側に配置するには、 justify-contentプロパティを使用し、その値をflex-end設定justify-content必要があります。

 .navbar-collapse{ justify-content: flex-end; }

.bg-light （明るい背景） .bg-dark （暗い背景）、および.bg-primary （プライマリ背景色）クラスを使用して、ナビゲーションバーの背景色を調整できます。次の設定を使用します。

 .bg-dark{ background-color:#343a40!important } .bg-primary{ background-color:#343a40!important }

ページヘッダー

<header>タグは、ページの<header>を記述するために使用されます。

 <header class="header"> </header>

ページヘッダーのレイアウトを準備します。ウィンドウの高さ全体を占めるようにするため、ここでjQuery機能が役立ちます。 main.jsファイルを作成し、終了<body>前にindex.htmlに添付します。

 <script type="text/javascript" src='js/main.js'></script>

main.jsファイルに次を追加します。

 $(document).ready(function(){ $('.header').height($(window).height()); })

ページヘッダーに素敵な背景画像を配置すると便利です。次のようにやってみましょう：

 /*header style*/ .header{ background-image: url('../images/headerback.jpg'); background-attachment: fixed; background-size: cover; background-position: center; }

それが私たちがやったことです。

背景画像付きのページヘッダー

サイトヘッダーは空に見えますが、 .overlayクラスを割り当てることで<div>要素を追加します。これにより、ヘッダーの背景画像の上にブロックが作成されます。次のように、ヘッダーを記述したindex.htmlファイルの部分を変更します。

 <header class="header"> <div class="overlay"></div> </header>

次に、 main.cssに次を追加します。

 .overlay{ position: absolute; min-height: 100%; min-width: 100%; left: 0; top: 0; background: rgba(244, 244, 244, 0.79); }

次に、プロジェクトの説明をヘッダーに追加します。 .containterクラスを使用して、新しい<div>要素に配置します。これは、Bootstrapフレームワークの補助クラスであり、レスポンシブレイアウトのニーズに合わせたコンテンツに対応するように設計されています。このステップでマークアップがどのように変化するかを次に示します。

 <header class="header"> <div class="overlay"></div>  <div class="container">    </div> </header>

ここで別の<div>要素を追加し、クラス.descriptionを割り当て.description 。

 <div class="description text-center">  <h3><font color="#3AC1EF">▍   Hello ,Welcome To My officail Website   <p>   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   <button class="btn btn-outline-secondary">See more</button>  </font></h3> </div>

また、このタグに.text-centerクラスを割り当て.text-center 。これにより、コンテンツをページの中央に揃えることができます。サイトの説明の最後にボタンがあります。それを設定する方法について話しましょう。

ボタン

ブートストラップは、ボタンの多くのクラスを提供します。ここにボタンデザインの例があります。前のセクションのマークアップの例でわかるように、 <button> .btnとクラスを追加しました。 btn-outline-secondary 。

.descriptionクラスのスタイルを設定します。

 .description{   position: absolute;   top: 30%;   margin: auto;   padding: 2em; } .description h1{ color:#F97300 ; } .description p{ color:#666; font-size: 20px; width: 50%; line-height: 1.5; } .description button{ border:1px  solid #F97300; background:#F97300; color:#fff; }

上記の手順を実行した後のページヘッダーの外観は次のとおりです。

プロジェクトの説明を含むページヘッダー

セクションについて

まず、作成したいものを見てみましょう。 Web開発者情報ページのセクションを次に示します。

セクションについて

ここでは、ブートストラップグリッドを利用して、パーティションの2つの部分からなるレイアウトを作成します。 <div> .row親要素に.rowクラスを追加して始めましょう：

 <div class="row"></div>

レイアウトの最初の部分は左側にあり、写真が含まれます。右側にある2番目の部分には説明が含まれます。

このセクションの左側のレイアウトは次のとおりです。

 <div class="row"> //   <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/team-3.jpg" class="img-fluid">   <span class="text-justify">S.Web Developer</span> </div> </div>

そして、レイアウトの右側の説明がここに追加された後に起こることは次のとおりです。

 <div class="row">  <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/team-3.jpg" class="img-fluid">   <span class="text-justify">S.Web Developer</span>  </div>  <div class="col-lg-8 col-md-8 col-sm-12 desc">      <h3><font color="#3AC1EF">▍D.John</font></h3>   <p>      ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   </p>  </div> </div>

上記のcol-lg-* 、 col-md-*およびcol-sm-*クラスを使用した列幅の設定に注意してください。

すべてのスタイルは次のとおりです。

 .about{ margin: 4em 0; padding: 1em; position: relative; } .about h1{ color:#F97300; margin: 2em; } .about img{ height: 100%;   width: 100%;   border-radius: 50% } .about span{ display: block; color: #888; position: absolute; left: 115px; } .about .desc{ padding: 2em; border-left:4px solid #10828C; } .about .desc h3{ color: #10828C; } .about .desc p{ line-height:2; color:#888; }

ポートフォリオセクション

ここで、開発者のポートフォリオが表示されるセクションを取り上げます。作品のギャラリーが含まれます。

ポートフォリオセクション

このセクションのレイアウトを作成する場合、上記で検討したグリッドの操作と同じ原則が適用されます。

 <!-- portfolio --> <div class="portfolio">    <h1 class="text-center">Portfolio</h1> <div class="container"> <div class="row">  <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/portfolio/port13.png" class="img-fluid">  </div>  <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/portfolio/port1.png" class="img-fluid">  </div>  <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/portfolio/port6.png" class="img-fluid">  </div> <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/portfolio/port3.png" class="img-fluid">  </div>  <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/portfolio/port11.png" class="img-fluid">  </div>  <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/portfolio/electric.png" class="img-fluid">  </div> <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/portfolio/Classic.jpg" class="img-fluid">  </div>  <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/portfolio/port1.png" class="img-fluid">  </div>  <div class="col-lg-4 col-md-4 col-sm-12">   <img align="center" src="images/portfolio/port8.png" class="img-fluid">  </div> </div> </div> </div>

.img-fluidクラスを各画像に追加すると、応答.img-fluidが.img-fluidます。

ギャラリーの各要素は、中および大画面で4列を占有します（思い出してくださいcol-sm-12クラスは小画面のデバイスに使用され、 col-md-4クラスは中画面に使用され、 col-lg-4はデバイスに使用されます大画面で）。その結果、大画面および中画面では、1つの要素がコンテナ要素の約33.3％を占め、小さなデバイスでは各要素が画面全体（12列）を占めます。

作品ギャラリーを定型化します。

 /*Portfolio*/ .portfolio{ margin: 4em 0;   position: relative; } .portfolio h1{ color:#F97300; margin: 2em; } .portfolio img{ height: 15rem; width: 100%; margin: 1em; }

ブログとカードセクション

条件付きWeb開発者がホストするブログからの資料の発表を含むセクションの作成について話しましょう。

ブログセクション

このセクションを作成するには、いわゆるカード（ブートストラップ用語のカード）が必要です。

カードを作成するには、レイアウトに<div>要素を含め、 .cardクラスを追加する.cardがあります。次のクラスを使用して、さまざまなカード要素を構成できます。

.card-header ： .card-header
.card-body ：メインコンテンツ
.card-title ：タイトル
.card-footer ：地下室
.card-image ：画像

このセクションのHTMLマークアップは次のようになります。

 <!-- Posts section --> <div class="blog"> <div class="container"> <h1 class="text-center">Blog</h1> <div class="row">  <div class="col-md-4 col-lg-4 col-sm-12">   <div class="card">    <div class="card-img">     <img align="center" src="images/posts/polit.jpg" class="img-fluid">    </div>       <div class="card-body">    <h4 class="card-title">Post Title</h4>     <p class="card-text">           proident, sunt in culpa qui officia deserunt mollit anim id est laborum.     </p>    </div>    <div class="card-footer">     <a href="" class="card-link">Read more</a>    </div>   </div>  </div>  <div class="col-md-4 col-lg-4 col-sm-12">   <div class="card">    <div class="card-img">     <img align="center" src="images/posts/images.jpg" class="img-fluid">    </div>       <div class="card-body">       <h4 class="card-title">Post Title</h4>     <p class="card-text">           proident, sunt in culpa qui officia deserunt mollit anim id est laborum.     </p>    </div>    <div class="card-footer">     <a href="" class="card-link">Read more</a>    </div>   </div>  </div>  <div class="col-md-4 col-lg-4 col-sm-12">   <div class="card">    <div class="card-img">     <img align="center" src="images/posts/imag2.jpg" class="img-fluid">    </div>       <div class="card-body">    <h4 class="card-title">Post Title</h4>     <p class="card-text">           proident, sunt in culpa qui officia deserunt mollit anim id est laborum.     </p>    </div>    <div class="card-footer">     <a href="" class="card-link">Read more</a>    </div>   </div>  </div> </div> </div> </div>

カードのスタイルは次のとおりです。

 .blog{ margin: 4em 0; position: relative; } .blog h1{ color:#F97300; margin: 2em; } .blog .card{ box-shadow: 0 0 20px #ccc; } .blog .card img{ width: 100%; height: 12em; } .blog .card-title{ color:#F97300; } .blog .card-body{ padding: 1em; }

ブログセクションを作成すると、1ページが次のようになります。

ブログセクションを追加した後のページ

チームセクション

このセクションには、プロジェクトチームに関する情報が含まれます。

チームセクション

このセクションを形成するには、グリッドを使用して、画像間の使用可能なスペースを均等に分割します。各イメージ（大画面および中画面）は、3つのグリッド列を占有します。これは、合計スペースの25％です。

このセクションのHTMLマークアップは次のとおりです。

 <!-- Team section --> <div class="team"> <div class="container">   <h1 class="text-center">Our Team</h1> <div class="row">  <div class="col-lg-3 col-md-3 col-sm-12 item">   <img align="center" src="images/team-2.jpg" class="img-fluid" alt="team">   <div class="des">     Sara    </div>   <span class="text-muted">Manager</span>  </div>  <div class="col-lg-3 col-md-3 col-sm-12 item">   <img align="center" src="images/team-3.jpg" class="img-fluid" alt="team">   <div class="des">      Chris    </div>   <span class="text-muted">S.enginner</span>  </div>  <div class="col-lg-3 col-md-3 col-sm-12 item">   <img align="center" src="images/team-2.jpg" class="img-fluid" alt="team">   <div class="des">     Layla    </div>   <span class="text-muted">Front End Developer</span>  </div>  <div class="col-lg-3 col-md-3 col-sm-12 item">   <img align="center" src="images/team-3.jpg" class="img-fluid" alt="team">    <div class="des">     J.Jirard    </div>   <span class="text-muted">Team Manger</span>  </div> </div> </div> </div>

そして、スタイルは次のとおりです。

 .team{ margin: 4em 0; position: relative; } .team h1{ color:#F97300; margin: 2em; } .team .item{ position: relative; } .team .des{ background: #F97300; color: #fff; text-align: center; border-bottom-left-radius: 93%; transition:.3s ease-in-out; }

このセクションに、画像にカーソルを合わせたときに表示されるアニメーションを飾ります。下の画像のようになります。

画像上のホバーアニメーション

この効果を実現するには、次のスタイルをmain.cssしmain.css 。

 .team .item:hover .des{ height: 100%; background:#f973007d; position: absolute; width: 89%; padding: 5em; top: 0; border-bottom-left-radius: 0; }

フィードバックフォーム

ページのこのセクションには、サイト訪問者がサイト所有者にメッセージを送信できるフォームがあります。ここでは、通常どおり、要素を様式化し、それらの応答性を確保するために、Bootstrapの機能を使用します。

フィードバックフォーム

Bootstrap 3と同様に、Bootstrap 4は入力フィールドに.form-controlクラスを使用しますが、現在は新しいものがあります。たとえば、廃止された.input-group-addonクラスの代わりに、新しい.input-group-prependクラスが.input-group-prependれます（アイコンおよびラベル用）。この詳細については、Bootstrap 4のドキュメントを .form-groupください。この場合、各入力フィールドは.form-groupクラスが.form-groupている<div>要素に.form-groupます。

index.htmlファイルに次を追加します。

 <!-- Contact form --> <div class="contact-form"> <div class="container"> <form>  <div class="row">   <div class="col-lg-4 col-md-4 col-sm-12">     <h1>Get in Touch</h1>   </div>   <div class="col-lg-8 col-md-8 col-sm-12 right">      <div class="form-group">        <input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">      </div>      <div class="form-group">        <input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">      </div>      <div class="form-group">        <textarea class="form-control form-control-lg">                </textarea>      </div>      <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">   </div>  </div> </form> </div> </div>

main.cssファイルに配置する必要があるフィードバックフォームを含むセクションのスタイルは次のとおりです。

 .contact-form{ margin: 6em 0; position: relative; } .contact-form h1{ padding:2em 1px; color: #F97300; } .contact-form .right{ max-width: 600px; } .contact-form .right .btn-secondary{ background:  #F97300; color: #fff; border:0; } .contact-form .right .form-control::placeholder{ color: #888; font-size: 16px; }

フォント

標準フォントは万人向けではありません。 Google Font APIの機能を使用して、プロジェクトでRalewayフォントを使用します。彼はここでとてもよく似合うでしょう。フォントをインポートするには、 main.cssファイルに次のディレクティブをmain.cssます。

 @import url('https://fonts.googleapis.com/css?family=Raleway');

次に、さまざまなHTMLタグのグローバルスタイルを設定します。

 html,h1,h2,h3,h4,h5,h6,a{ font-family: "Raleway"; }

スクロール効果

以下の画像は、達成したいページの動作を示しています。

ナビゲーションバーのリンクをクリックしたときにページをスクロールする

ページのナビゲーションバーのリンクをクリックすると、目的のセクションにスムーズにスクロールするには、jQuery機能を使用する必要があります。このライブラリにあまり慣れていない場合は、ここで複雑なものは何もないことを知ってmain.jsファイルに以下のコードを追加するだけです：

 $(".navbar a").click(function(){ $("body,html").animate({  scrollTop:$("#" + $(this).data('value')).offset().top },1000) })

その後、ナビゲーションパネルの各リンクにdata-value属性を追加し、マークアップを次のフォームに移動します。

 <li class="nav-item">        <a class="nav-link" data-value="about" href="#">About</a>      </li>      <li class="nav-item">        <a class="nav-link " data-value="portfolio" href="#">Portfolio</a>      </li>      <li class="nav-item">        <a class="nav-link " data-value="blog" href="#">Blog</a>      </li>      <li class="nav-item">        <a class="nav-link " data-value="team" href="#">        Team</a>      </li>      <li class="nav-item">        <a class="nav-link " data-value="contact" href="#">Contact</a>      </li>

これらすべてが最終的に機能するためには、ページの各セクションのメイン<div>要素にid属性を追加するだけです。この場合、その値が対応するリンクのdata-value属性で指定されている値と同一であることを確認する必要があります。たとえば、Aboutセクションに対応する属性は次のとおりです。

 <div class="about" id="about"></div>

これで例は完了です。 GitHubのこのプロジェクトのコードは次のとおりです。

まとめ

Bootstrap 4は、Webアプリケーションインターフェイスを構築するための優れたツールです。これにより、開発者は構成が簡単で、連携して動作する高品質のコンポーネントを得ることができます。さらに、Bootstrapを使用すると、さまざまな画面を持つデバイスで適切に表示されるレスポンシブレイアウトを作成できます。

親愛なる読者！ Bootstrapの最初の実用的な紹介が今日行われた場合、プロジェクトでこのフレームワークを使用する予定があるかどうか教えてください。

初心者のウェブマスターの場合：30分でブートストラップ4の1ページを実行します