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-info、vbadge-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="width:XX"来设置卡片宽度或者指定父级元素的宽度来限定卡片宽度。
• 卡片内容默认居左显示，可以通过.text-center、text-right来设置居中或居右显示。

<div class="card text-center">
</div>

• 卡片页头可以设置为导航样式，修改类标识为：nav nav-tabs card-header-tabs为选项卡样式，nav nav-pills card-header-pills为按钮样式

<div class="card" style="width: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="width: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="width: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时卡片间存在间隔。

6. Carousel

用来将一些元素循环显示，类似于旋转木马。

循环显示的最基本结构,图片自动循环显示。

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