最新的Web開發教程
 

Bootstrap Jumbotron and Page Header


創建一個超大屏幕

一個超大屏幕指示呼籲加倍注意一些特殊的內容或信息的大箱子。

一個超大屏幕顯示為帶圓角的灰色框。 它還擴大它裡面的文本的字體大小。

提示:在一個超大屏幕,你可以把幾乎任何有效的HTML,包括其他Bootstrap要素/班。

使用<div>元素和類.jumbotron創建一個超大屏幕:

Bootstrap教程

Bootstrap是最流行的HTML,CSS和JS在網絡上開發反應靈敏,移動第一批項目的框架。


超大屏幕集裝箱內

將內部的超大屏幕<div class="container">如果您希望以超大屏幕不延伸到屏幕邊緣:

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>
試一試»

超大屏幕外容器

將外面的超大屏幕<div class="container">如果你想在超大屏幕延伸到屏幕邊緣:

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>
試一試»

創建頁眉

頁面標題就像一個節分隔符。

.page-header類添加一條水平線的標題下(+加元周圍的一些額外的空間):

使用<div>與類元素.page-header創建一個網頁標題:

<div class="page-header">
  <h1>Example Page Header</h1>
</div>
試一試»