Bootstrap 頁(yè)面標(biāo)題

2018-03-03 16:36 更新

Bootstrap創(chuàng)建了一個(gè)HTML組件用作頁(yè)面標(biāo)題。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="container">
        <div class="page-header">
            <h1>Chapter 3</h1>
        </div>
    </div>

  </body>
</html>

頁(yè)面副標(biāo)題

要在頁(yè)面標(biāo)題旁邊添加一個(gè)副標(biāo)題，我們可以將它放在同一個(gè)<h1>包裹在<small> </small>標(biāo)簽內(nèi)。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="container">
        <div class="page-header">
            <h1>Chapter 3 <small>Exploring Bootstrap Components </small></h1>
        </div>
    </div>

  </body>
</html>

標(biāo)題中的較小文本

我們可以使用帶有.small類的<small>標(biāo)簽或<span>標(biāo)簽來(lái)顯示任何標(biāo)題的次要文本中的更小、更輕的變體。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
    <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
    <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
    <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
    <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
    <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
    <hr>
    <h1>h1. Bootstrap heading <span class="small">Secondary text</span></h1>
    <h2>h2. Bootstrap heading <span class="small">Secondary text</span></h2>
    <h3>h3. Bootstrap heading <span class="small">Secondary text</span></h3>
    <h4>h4. Bootstrap heading <span class="small">Secondary text</span></h4>
    <h5>h5. Bootstrap heading <span class="small">Secondary text</span></h5>
    <h6>h6. Bootstrap heading <span class="small">Secondary text</span></h6>
</div>
</body>
</html>

Bootstrap標(biāo)題樣式

我們可以按照在簡(jiǎn)單HTML文檔中定義的相同方式定義所有HTML標(biāo)題，從<h1>到<h6>。

我們可以使用其他元素上的標(biāo)題類 .h1 到 .h6 以將元素文本上的樣式應(yīng)用于標(biāo)題。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">

    <h1>h1. Bootstrap heading</h1>
    <h2>h2. Bootstrap heading</h2>
    <h3>h3. Bootstrap heading</h3>
    <h4>h4. Bootstrap heading</h4>
    <h5>h5. Bootstrap heading</h5>
    <h6>h6. Bootstrap heading</h6>
    <hr>
    <div class="h1">h1. Bootstrap heading</div>
    <div class="h2">h2. Bootstrap heading</div>
    <div class="h3">h3. Bootstrap heading</div>
    <div class="h4">h4. Bootstrap heading</div>
    <div class="h5">h5. Bootstrap heading</div>
    <div class="h6">h6. Bootstrap heading</div>
        
</body>
</html>
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)