第二百四十节，Bootstrap巨幕页头缩略图和警告框组件

2022-12-05 13:56:38

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

学习要点：

　　1.巨幕组件

　　2.页头组件

　　3.缩略图组件

　　4.警告框组件

本节课我们主要学习一下 Bootstrap 的四个组件功能：巨幕组件、页头组件、缩略图组件和警告框组件。

一．巨幕组件

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

在固定的范围内，有圆角，整个巨幕以最大宽度为1140px显示

container样式class类，写在<div>里，设置固定布局div最大宽度为1140px(Bootstrap)
jumbotron样式class类，写在<div>里，设置巨幕组件div样式,展示网站的关键性区域(Bootstrap)

<div class="container">

    <div class="jumbotron">

        <h2>网站标题</h2>

        <p>这是一个学习性的网站！</p>

        <p><a href="#" class="btn btn-default">更多内容</a></p>

    </div>

</div>

100%全屏，没有圆角，巨幕最外层以100%宽度显示，巨幕内区域以最大宽度为1140px显示【最流行做法】

<div class="jumbotron">

    <div class="container">

        <h2>网站标题</h2>

        <p>这是一个学习性的网站！</p>

        <p><a href="#" class="btn btn-default">更多内容</a></p>

    </div>

</div>

二．页头组件

增加一些空间

page-header样式class类，写在页头区域元素里，设置页头区域样式(Bootstrap)

<div class="page-header">

    <h1>大标题

        <small>小标题</small>

    </h1>

</div>

三．缩略图组件

缩略图配合响应式

thumbnail样式class类，写在<img>外层<div>元素里，设置响应式图片区域(Bootstrap)

<div class="container">                                 <!--布局固定宽度样式，最大宽度1140-->

    <div class="row">                                   <!--设置一行响应式删格行，为12列删格-->

        <div class="col-xs-6 col-md-3 col-sm-4">        <!--col-xs-6(手机)表示屏幕小于768所占6列删格，也就是一行的一半，就会显示两列图片-->

            <div class="thumbnail">

                <img src="img/pic.png" alt="">

            </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4">        <!--col-md-3(中等屏幕)表示屏幕大于或等于992所占3列删格，也就是显示4列图片-->

            <div class="thumbnail">

                <img src="img/pic.png" alt="">

            </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4">        <!--col-sm-4(平板)表示屏幕大于或等于768所占4列删格，也就是显示3列图片-->

            <div class="thumbnail">

                <img src="img/pic.png" alt="">

            </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4">

            <div class="thumbnail">

                <img src="img/pic.png" alt="">

            </div>

        </div>

    </div>

</div>

屏幕大于或等于992

屏幕大于或等于768

屏幕小于768

响应式微缩图，图文并茂自定义内容

caption样式class类，写在响应式图片区域<div>里面与img同级的<div>元素里，设置响应式图片区域里的图文内容样式(Bootstrap)

<div class="container">

    <div class="row">

        <div class="col-xs-6 col-md-3 col-sm-4">

            <div class="thumbnail">

                <img src="img/pic.png" alt="">

                <div class="caption">

                    <h3>图文并茂</h3>

                    <p>这是一个图片结合文字的缩略图</p>

                    <p><a href="#" class="btn btn-default">进入</a></p>

                </div>

            </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4">

            <div class="thumbnail">

                <img src="img/pic.png" alt="">

                <div class="caption">

                    <h3>图文并茂</h3>

                    <p>这是一个图片结合文字的缩略图</p>

                    <p><a href="#" class="btn btn-default">进入</a></p>

                </div>

            </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4">

            <div class="thumbnail">

                <img src="img/pic.png" alt="">

                <div class="caption">

                    <h3>图文并茂</h3>

                    <p>这是一个图片结合文字的缩略图</p>

                    <p><a href="#" class="btn btn-default">进入</a></p>

                </div>

            </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4">

            <div class="thumbnail">

                <img src="img/pic.png" alt="">

                <div class="caption">

                    <h3>图文并茂</h3>

                    <p>这是一个图片结合文字的缩略图</p>

                    <p><a href="#" class="btn btn-default">进入</a></p>

                </div>

            </div>

        </div>

    </div>

</div>

屏幕大于或等于992

屏幕大于或等于768

屏幕小于768

四．警告框组件

警告框组件是一组预定义消息。

alert样式class类，写在<div>元素里，声明一个警告信息框(Bootstrap)
alert-success样式class类，写在<div>元素里，设置警告信息框绿色(Bootstrap)
alert-info样式class类，写在<div>元素里，设置警告信息框蓝色(Bootstrap)
alert-warning样式class类，写在<div>元素里，设置警告信息框橙色(Bootstrap)
alert-danger样式class类，写在<div>元素里，设置警告信息框红色(Bootstrap)

<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>

带关闭的警告框

close样式class类，写在警告信息框里的<button>元素里，给警告信息框设置一个按钮关闭样式(Bootstrap)
data-dismiss="alert"事件，写在警告信息框里的<button>元素里，点击按钮关闭警告信息框(Bootstrap)

<div class="alert alert-success">

    Bootstrap

    <button type="button" class="close" data-dismiss="alert">

        <span>&times;</span>

    </button>

</div>

警告框自动适配的超链接

alert-link样式class类，写在警告信息框里的<a>元素里，设置警告框里的超链接样式，自动适配警告框(Bootstrap)

<div class="alert alert-success">

    Bootstrap，请到官网 <a href="#" class="alert-link">下载</a>

    <button type="button" class="close" data-dismiss="alert">

        <span>&times;</span>

    </button>

</div>

码农公寓

相关文章