• Bootstrap学习记录-3.Badge、Breadcrumb、Buttons、 Button Group、Card、Carousel


    1. Badge

    Badge作为数值标记组件,它能作为链接或按钮的一部分来提供计数作用,而且它通过使用相对字体大小来适应父级元素的大小。它的最基本的修饰符为.badge .badge-*

    <button type="button" class="btn btn-primary">
        Notifications <span class="badge badge-light">4</span>
    </button>
    <a href="#">DB Alarm<span class="badge badge-secondary">5</span></a>
    

    通过badge-*类来改变其外观:.badge-primary.badge-secondary.badge-success.badge-danger.badge-warning.badge-infovbadge-light.badge-dark
    通过.badge-pill类来设置显示区域的圆角。

    2. Breadcrumb

    用来显示导航层级结构内的当前位置信息,并通过CSS样式添加分隔符。

    <nav>
        <!-- Home/Library/Data -->
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Library</a></li>
            <li class="breadcrumb-item active"><a href="#">Data</a></li>
        </ol>
    </nav>
    

    3. Buttons

    Bootstrap提供预定义的按钮样式,用于不同的目的.btn-primary.btn-secondary.btn-success.btn-danger.btn-warning.btn-info.btn-light.btn-dark.btn-link
    当在<a>元素上应用.button类时,它的目的仅仅是触发页内的方法,而不是链接到新页面或当前页的其他部分,而且这个链接应该添加role="button"来明确其目的。
    当需要一个仅有按钮边框没有背景色的按钮时,可以使用.btn-outline-*来修饰元素。按钮样式与普通按钮样式相同。

    • 按钮的大小也可以通过以下类来装饰,.btn-lg表示小按钮,.btn-sm表示大按钮。使用.btn-block来得到占据父级元素全部宽度的块级按钮。
    • .active类表示按钮呈现出被按下的外观(背景色和边框深一些,并插入阴影)。
    • .disable类表示按钮可不用。

    4. Button Group

    .btn-group类修饰div元素来表示该元素下所有的button都是一个组内。

    • 组内的按钮之间没有间隔,组间按钮之间存在间隔。
    • 使用.btn-group-*来表示按钮大小,.btn-group-lg表示大按钮,.btn-group-sm表示小按钮。
    • 可以嵌套使用。
    • btn-group-vertical表示组内按钮纵向排列。

    5. Card

    卡片作为Bootstrap中灵活可扩展的内容容器,提供页头、页尾、多样的内容形式,背景色和可选的显示样式。

    • .card-header类表示卡片页头。
    • .card-footer类表示卡片页尾。
    • .card-body类表示卡片主体。
    • .card-title.card-subtitle类表示卡片标题和副标题,一般用来装饰<h*>标签。
    • .card-link类表示链接信息,一般用来装饰<h*>标签。
    • .card-text类用来设置卡片内容,内容仍可以使用标准的HTML标签定义。
    • .list-group.list-group-item类定义列表及其列表项。list-group-flush类表示列表宽度与卡片宽度相同。
    • 不指定卡片宽度的情况,默认与父级元素的宽度相同。可以通过设置.card装饰的元素的style="XX"来设置卡片宽度或者指定父级元素的宽度来限定卡片宽度。
    • 卡片内容默认居左显示,可以通过.text-centertext-right来设置居中或居右显示。
    <div class="card text-center">
    </div>
    
    • 卡片页头可以设置为导航样式,修改类标识为:nav nav-tabs card-header-tabs为选项卡样式,nav nav-pills card-header-pills为按钮样式
    <div class="card" style="18rem">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Tab1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Tab2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Tab3</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                Body
            </div>
            <div class="card-footer">
                Footer
            </div>
        </div>
        <div class="card" style="18rem">
            <div class="card-header">
                <ul class="nav nav-pills card-header-pills">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Tab1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Tab2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Tab3</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                Body
            </div>
            <div class="card-footer">
                Footer
            </div>
        </div>
    
    • .card-img-top.card-img-bottom类用来设置卡片顶部和底部图片。图片也可以作为整个卡片的背景图,设置方式如下
        <div class="card" style="18rem">
            <img class="card-img" src="./1.png" alt="Card Image">
            <div class="card-img-overlay">
                <div class="card-header">
                </div>
                <div class="card-body">
                    Body
                </div>
                <div class="card-footer">
                    Footer
                </div>
            </div>
        </div>
    
    • 可以使用.text-*.bg-*来设置卡片的字体颜色和背景色.
      .text-*:.text-primary.text-secondary.text-success.text-danger.text-warning.text-info.text-light.text-dark.text-muted.text-white
      .bg-*.bg-primary.bg-secondary.bg-success.bg-danger.bg-warning.bg-info.bg-light.bg-dark.bg-white
    • .border-*来设置卡片边框的颜色
      .border-*:.border-primary.border-secondary.border-success.border-danger.border-warning.border-info.border-light.border-dark
    • .card-group.card-deck用来对卡片进行分组,区别是group时卡片间没有间隔,deck时卡片间存在间隔。

    用来将一些元素循环显示,类似于旋转木马。
    循环显示的最基本结构,图片自动循环显示。

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="..." alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="..." alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="..." alt="Third slide">
            </div>
        </div>
    </div>
    
    • 在最基本的结构基础上,可以在每个图片的左右两边,添加向左、向右的控件来主动控制显示。
      在原来的代码中,.carouse-inner修饰的div下面添加以下代码即可
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    
    • 在上面的基础上,还可以在图片的底部添加切换图标,
      在原来的代码中,.carouse-inner修饰的div上面添加以下代码即可
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    
  • 相关阅读:
    复杂网络常用数据集网站
    01单人决策问题
    《无线网络安全技术》阅读笔记
    最优化理论基础
    测试layer控件,除了ie报错其它浏览器都生效
    Native App、Web App、Hybrid App
    有些效果在IE下运行时,IE下开调试模式才显示正常是什么原因?
    关于Content-Type中application/x-www-form-urlencoded 和 multipart/form-data的区别及用法
    js表单提交的三种方式
    前端涉及的所有知识体系
  • 原文地址:https://www.cnblogs.com/DreamOfLife/p/9413675.html
Copyright © 2020-2023  润新知