Bootstrap组件_巨幕，页头，缩略图
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap组件_巨幕，页头，缩略图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>巨幕</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container-fluid"> <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" href="#" role="button">Learn More</a></p></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>頁頭</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="page-header"><h1>BootStrap學習<small>頁頭的學習</small></h1><h4>BootStrap學習<small>頁頭的學習</small></h4></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>縮略圖</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><div class="row"><div class="col-md-3 col-xs-12 col-sm-6"><a class="thumbnail" href="#"><img src="001.jpg" alt="...."></a></div><div class="col-md-3"><a class="thumbnail" href="#"><img src="001.jpg" alt="...."></a></div><div class="col-md-3"><a class="thumbnail" href="#"><img src="001.jpg" alt="...."></a></div><div class="col-md-3"><a class="thumbnail" href="#"><img src="001.jpg" alt="...."></a></div></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>縮略圖</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><div class="row"><div class="col-md-3 col-xs-12 col-sm-6"><a class="thumbnail" href="#"><img src="001.jpg" alt="...."></a></div><div class="col-md-3"><a class="thumbnail" href="#"><img src="001.jpg" alt="...."></a></div><div class="col-md-3"><a class="thumbnail" href="#"><img src="001.jpg" alt="...."></a></div><div class="col-md-3"><a class="thumbnail" href="#"><img src="001.jpg" alt="...."></a></div></div><div class="row"><div class="col-md-3"><div class="thumbnail"><img src="001.jpg" alt="...."><div class="caption"><h4>Thumbnail label</h4><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 class="btn btn-primary" role="button" href="#">button</a><a class="btn btn-primary" role="button" href="#">button</a></p></div></div></div></div></div>
</body>
</html>
?
總結
以上是生活随笔為你收集整理的Bootstrap组件_巨幕，页头，缩略图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap组件_路径导航，标签，
- 下一篇： Bootstrap组件_警告框