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


    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>

  • 相关阅读:
    二维数组
    找一个数组的最大和的连续子数组(时间复杂度 O(n))(二)
    第一阶段SCRUM冲刺 01
    统计单词
    软件工程--第九周学习进度
    《人件》阅读笔记03
    用户模板和用户场景分析
    软件工程--第八周学习进度
    一维数组代码实现可视化
    《人件》阅读笔记02
  • 原文地址:https://www.cnblogs.com/adc8868/p/6790047.html
Copyright © 2020-2023  润新知