Bootstrap巨幕页头缩略图和警告框组件

叁歲伎倆 2022-06-12 05:14 129阅读 0赞

## 巨幕组件 ##

> 巨幕组件主要是展示网站的关键性区域

<div class="container">
        <div class="jumbotron">
            <h2>网站标题</h2>
            <p>这是一个学习性网站</p>
            <p><a href="#" class="btn btn-default">更多内容</a></p>
        </div>
    </div>
    
    <div class="jumbotron">
        <div class="container">
            <h2>网站标题</h2>
            <p>这是一个学习性网站</p>
            <p><a href="#" class="btn btn-default">更多内容</a></p>
        </div>
    </div>

![效果图][SouthEast]

## 页头组件 ##

> 可以增加一些空间

![效果图][SouthEast 1]

## 缩略图组件 ##

<div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="../img/2.jpg">
                    
                    <div class="caption">
                        <h3>图文并茂</h3>
                        <p>这是一个图片文字的缩略图</p>
                        <p><a href="#" class="btn btn-default">进入</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="../img/2.jpg">
                    
                    <div class="caption">
                        <h3>图文并茂</h3>
                        <p>这是一个图片文字的缩略图</p>
                        <p><a href="#" class="btn btn-default">进入</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="../img/2.jpg">
                    
                    <div class="caption">
                        <h3>图文并茂</h3>
                        <p>这是一个图片文字的缩略图</p>
                        <p><a href="#" class="btn btn-default">进入</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="../img/2.jpg">
                    
                    <div class="caption">
                        <h3>图文并茂</h3>
                        <p>这是一个图片文字的缩略图</p>
                        <p><a href="#" class="btn btn-default">进入</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

![中屏效果][SouthEast 2]  
![小屏效果][SouthEast 3]  
![超小屏效果][SouthEast 4]

## 警告框组件 ##

> 警告框组件式一组预定义消息

<div class="alert alert-success">Bootstrap</div>
    <div class="alert alert-info">Bootstrap</div>
    <div class="alert alert-warning">Bootstrap</div>
    <div class="alert alert-danger">Bootstrap</div>
    
    <div class="alert alert-success">
        Bootstrap
        <button type="button" class="close" data-dismiss="alert">
            <span>×</span>
        </button>
    </div>
    
    <div class="alert alert-success">
        Bootstrap,请到官网 <a href="#" class="alert-link">下载</a>
    </div>

![效果图][SouthEast 5]

[SouthEast]: /images/20220612/7212f265dffc41fa9222de3210e86df3.png
[SouthEast 1]: /images/20220612/48b508ece98e4c5e8b1142f05a509f22.png
[SouthEast 2]: /images/20220612/44b02ccbb2184003ac78fa9f6d668df0.png
[SouthEast 3]: /images/20220612/f0624d3326274e44a0ef8823bfab3682.png
[SouthEast 4]: /images/20220612/447995a8282a41659f0eb612b9b75a31.png
[SouthEast 5]: /images/20220612/7635bf81a8ab46c9b140dc2af4ce6832.png