Bootstrap5 Jumbotron(超大屏幕)

2023-06-21 15:02 更新

Jumbotron（超大屏幕）會(huì)創(chuàng)建一個(gè)大的灰色背景框，里面可以設(shè)置一些特殊的內(nèi)容和信息。

在 Bootstrap 3 中引入了一個(gè) jumbotron 來創(chuàng)建一個(gè)大的背景框，用于顯示一些重要的信息。

在 Bootstrap 5 中，已經(jīng)不再支持 Jumbotron。但是，我們可以使用 <div> 元素添加一些輔助類與顏色類來達(dá)到相同的效果：

提示: Jumbotron 里頭可以放一些 HTML標(biāo)簽，也可以是 Bootstrap 的元素。


<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>超大屏幕實(shí)例</h2>
    <div class="mt-4 p-5 bg-primary text-white rounded">
    <h1>W3Cschool</h1> 
    <p>html教程</p> 
	<p>CSS教程</p> 
	<p>JavaScript教程</p> 
    </div>
</div>

</body>
</html>


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號