Bootstrap3.0学習ラウンド15（大画面導入、ページタイトル、サムネイル、警告ボックス、ウェル）_html/css_WEB-ITnose

まえがき

お読みになる前に、Bootstrap3.0 入門学習シリーズのナビゲーション http://www.cnblogs.com/aehyok/p/3404867.html もご覧ください

この記事では主に以下の内容について説明しています

1 .大画面の紹介

2.ページタイトル

3.サムネイル

4.アラートボックス

5.さて

6.概要

大画面の紹介

軽量で柔軟なオプションコンポーネントにより、全体の視点を拡張しますサイト上の重要なコンテンツを紹介します。大画面プレゼンテーションを画面の幅にするには、それを .container に含めないでください。

すごいです

ジャンボトロンを幅全体に広げて角の丸い部分を取り除く必要がある場合は、ジャンボトロンをすべての .container の外側に配置し、その中に .container を追加します。

<div class="jumbotron">  <h1>Hello, world!</h1>  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p></div

2 つの効果は似ていますが、違いがあります。

ページタイトル

ページ上のスペースを適切に区切り、章を区切ることができるシンプルな h1 スタイル。他のコンポーネントと同様に、h1 のデフォルトの小さな要素を使用できます (追加のスタイルが追加されています)。

<div class="jumbotron">    <div class="container">      <h1>Hello, world!</h1>      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>      <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>    </div></div>

サムネイル

Bootstrap のグリッド システムをサムネイル コンポーネントで拡張して、グリッド スタイルの画像、ビデオ、テキストなどを簡単に表示します。

デフォルトのケース

Boostrap のデフォルトのサムネイル デザインでは、リンクされた画像を表示するために最小限のマークアップのみが必要です。

<div class="page-header">  <h1>Example page header <small>Subtext for header</small></h1></div>

ページをある程度ズームすると、

カスタマイズされたコンテンツ

追加のマークアップを使用すると、タイトル、段落、ボタンなどのあらゆる種類の HTML コンテンツをサムネイルに追加できます。

<div class="row">  <div class="col-sm-6 col-md-3">    <a href="#" class="thumbnail">      <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="...">    </a>  </div>    <div class="col-sm-6 col-md-3">    <a href="#" class="thumbnail">      <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="...">    </a>  </div>    <div class="col-sm-6 col-md-3">    <a href="#" class="thumbnail">      <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="...">    </a>  </div>    <div class="col-sm-6 col-md-3">    <a href="#" class="thumbnail">      <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="...">    </a>  </div></div>

アラート ボックス

一般的なユーザー アクションに対して、利用可能な柔軟なフィードバック メッセージをいくつか提供します。

例

基本的な警告メッセージを取得するには、任意のテキストとオプションの閉じるボタンを .alert と 4 つの意味のあるクラス (.alert-success など) に配置します。

デフォルト クラスはありません

アラート ボックスにはデフォルト クラスはなく、基本クラスと変更されたクラスのみがあります。デフォルトの灰色の警告ボックスはあまり意味がありません。したがって、コンテンツクラスを使用する必要があります。成功、メッセージ、警告、または危険から選択します。

<div class="row">  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="...">      <div class="caption">        <h3>Thumbnail label</h3>        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>      </div>    </div>  </div>  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="...">      <div class="caption">        <h3>Thumbnail label</h3>        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>      </div>    </div>  </div>  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="...">      <div class="caption">        <h3>Thumbnail label</h3>        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>      </div>    </div>  </div></div>

消去可能なアラート ボックス

オプションの .alert-dismissable および閉じるボタンと併用できます。

    <div class="alert alert-success">Well done! You successfully read this important alert message.</div>    <div class="alert alert-info">Well done! You successfully read this important alert message.</div>    <div class="alert alert-warning">Well done! You successfully read this important alert message.</div>    <div class="alert alert-danger">Well done! You successfully read this important alert message.</div>

すべてのデバイスで正しい動作を確認してください

data-dismiss="alert" 属性には必ず bb9345e55eb71822850ff156dfde57c8 を使用してください。

アラート ボックス内のリンク

.alert-link ツール クラスを使用して、アラート ボックスに一致する色をすばやく提供します。

    <div class="alert alert-warning alert-dismissable">      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>      <strong>Warning!</strong> Best check yo self, you're not looking too good.    </div>

Well

デフォルト効果

要素上で Well を使用すると、単純なインセット効果が得られます。

    <div class="alert alert-success">Well done!         <a href="#" class="alert-link">You successfully read this important alert message.</a></div>    <div class="alert alert-info">Well done!         <a href="#" class="alert-link">You successfully read this important alert message.</a></div>    <div class="alert alert-warning">Well done!         <a href="#" class="alert-link">You successfully read this important alert message.</a></div>    <div class="alert alert-danger">Well done!        <a href="#" class="alert-link">You successfully read this important alert message.</a></div>

オプションのクラス

これら 2 つのオプションの変更クラスを使用すると、パディングと丸めを制御できます。

 <div class="well">Look, I'm in a well!</div>

<div class="well well-lg">...</div>

概要

この記事の学習を通じて、Bootstrap コンポーネントの他のコンポーネントについて引き続き深く理解してください。

この記事は、BootStrap3.0 入門学習シリーズ ナビゲーション http://www.cnblogs.com/aehyok/p/3404867.html

に更新されました。