Bootstrap チュートリアル6〜ページタイトル部分(jumbotron, well)〜

今回は、BootStrapのチュートリアルにある「Jumbotron」と「Well」についてやります。

前提

テンプレートを使用してその中に組み込むような形で使用します。テンプレートは下のようなものを使用しています。

f:id:Takunoji:20191013194657p:plain — BootStrap Templates

AngularJSと併用して実装するのに調査した結果です。

Jumbotron

上記のテンプレートにある「8 col」と表示されている部分にJumbotronを適用して見ます。

これから適用しようとしているのは下のようなHTMLコードです。そして赤い部分はAngularJSでバインドしたものです。そして、CSSクラスを追加とある部分に「jumbotron」「well well-sm」とCSSクラスを追加して表示結果を比較します。

ベースになるHTML

    <div ng-controller="topController" class="container-fluid text-center">
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left [CSSクラスを追加]">
      <h1>{{welcomeMessage}}</h1>
      <p>{{firstMessage}}</p>
      <p></p>
      <hr>
      <h3>{{secondMessage}}</h3>
      <p>{{thirdMessage}}</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

そしてこれを表示すると下のようになりました。