Bootstrap3.0學習第十五輪(大屏幕介紹、頁面標題、縮略圖、警示框、Well)

本文主要來講解以下內容

1.大屏幕介紹

2.頁面標題

3.縮略圖

4.警示框

5.Well

6.總結

大屏幕介紹

 輕量，靈活的可選組件，擴展整個視角，展示您站點上的關鍵內容。要讓大屏幕介紹是屏幕寬度，請別把它包括在.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

如果需要讓大屏幕介紹（jumbotron）佔據全部寬度並且去掉圓角，只需將其放到所有.container外面，並在其內部添加一個.container。

<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>

這兩種效果差不多，但是還有是有區別的。

頁面標題

 簡單的h1樣式，可以適當地分出空間且分開頁面中的章節。像其它組件一樣，它可以使用h1的默認small元素（添加了一些額外的樣式）。

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

 

縮略圖

 用縮略圖組件擴展Bootstrap的柵格系統，可以簡單地顯示柵格樣式的圖像，視頻，文本，等等。

 默認案例

Boostrap的縮略圖的默認設計僅需最小的標記，就能展示帶鏈接的圖片。

<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>

當頁面放縮到一定程度會變成

定製內容

用一點點額外的標記，可以把任何種類的HTML內容像標題，段落或按鈕加入縮略圖。

<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和四種有意義的類中（例如，.alert-success）。

沒有默認類

警告框沒有默認類，只有基類和修飾類。默認的灰色警告框並沒有多少意義。所以您要使用一種內容類。從成功，消息，警告或危險中任選其一。

 

    <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>

可關閉的警告框

可以用一個可選的.alert-dismissable和關閉按鈕。

    <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>

確定在所有設備上的正確行爲

一定要給data-dismiss="alert"屬性用上<button>。

警告框中的鏈接

用.alert-link工具類，可以快速提供在任何警告框中相符的顏色。

    <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>

 

Well 

默認效果

把Well用在元素上，能有嵌入(inset)的的簡單效果。

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

可選類

用這兩種可選修飾類，可以控制內補（padding）和圓角。

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

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

總結

通過本文的學習，繼續對Bootstrap Component其他組件的深入瞭解。