WEB前端第四十九课——BootStrap组件（一）Alert、Badge、Breadcrumb、Button

1.Alert警告提示框

　　将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框。

　　常用提示框样式：　　　　

　　　　<div class="alert alert-success" role="alert">成功提示</div>
　　　　<div class="alert alert-info" role="alert">消息提示</div>
　　　　<div class="alert alert-warning" role="alert">警告提示</div>
　　　　<div class="alert alert-danger" role="alert">危险提示</div>

　　　　除此之外，还有如四种：

　　　　.alert-primary  .alert-secondary  .alert-light  .alert-dark

　　每种提示框都是通过“.alert”类（必须设置）和一个特定意义的类（如 .alert-info）来实现的。

　　“role”属性通常用于增强语义，对一些非标准的组件进行用途描述，便于其他辅助工具更好地判别当前元素的实际作用。

　　另外，还可以添加标题“alert”，如：<h3 class="alert-heading">…</h3>

2.可关闭的提示框

　　如要为提示框添加关闭按钮，则需要添加一个“.alert-dismissible”类，

　　同时，关闭按钮设置“ data-dismiss="alert" ”属性。

<!--定义警告提示框div，并增加“.alert-dismissible”类，还可以添加fade/show效果-->
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
<!--    设置关闭按钮“button”，定义“.close”类，并增加“data-dismiss”属性    -->
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<!--    定义关闭按钮图标,"x"必须使用实体字符(×)替换!     -->
            <span aria-hidden="true">×</span>
        </button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>

　　说明事项：

　　　　属性“ aria-* ”主要用于辅助工具（如屏幕阅读器）识别当前内容，便于其判断是否将当前内容输出视觉效果或声音效果。

　　　　aria-hidden="true" 属性，表示当前元素内容不需要屏幕识读设备抓取，忽略跳过处理

　　　　aria-label="Close"属性，表示对当前<button>的用途描述，辅助设备在识别内容时可以明确这个空间的意图并输出。

　　　　aria-label="Close"扩展：正常情况下，form表单的input组件都有对应的label，当input获取到焦点时，

　　　　　　　　　　　　　　　屏幕阅读器会读出对应label里的文本。但是如果没有给输入框设置label，

　　　　　　　　　　　　　　　当其获得焦点时，屏幕阅读器会读出aria-label属性的值，aria-label不会在视觉上呈现效果。

　　除此之外，

　　　　也可以将关闭按钮封装为JavaScript触发器进行调用，

　　　　通过“$().alert();”等方法触发提示框关闭，该方法用于侦听具有“ data-dismiss="alert" ”属性的敲击事件。

　　　　　　示例：$(".alert").alert("close");

3.警告框中的链接

 　　通过给“.alert”元素包裹之中的链接（<a>标签）定义“.alert-link”类，具有突出显示匹配颜色链接。

　　　　示例：<div class="alert alert-info" role="alert">

　　　　　　　　消息提示，<a href="#" class="alert-link">点击查看</a>

　　　　　　　</div>
4.Badge徽章

　　可以理解为用于突出显示元素内容的文本样式。

　　要设置元素的徽章样式，类似 Alert样式需要定义“.badge”和“.badge-* ”至少两个类名。

　　① 基本样式：

　　　　<h1>Example heading <span class="badge badge-primary">New</span></h1>
　　　　<h2>Example heading <span class="badge badge-secondary">New</span></h2>
　　　　<h3>Example heading <span class="badge badge-success">New</span></h3>
　　　　<h4>Example heading <span class="badge badge-info">New</span></h4>
　　　　<h5>Example heading <span class="badge badge-warning">New</span></h5>
　　　　<h6>Example heading <span class="badge badge-danger">New</span></h6>

　　　　还有“badge-dark、badge-light”等。

　　　　

 　　② 按钮或链接中添加徽章

　　　　将设置有“.badge”类的<span>标签包裹在<button>标签或<a>标签中。

　　　　<button type="button" class="btn btn-primary">
　　　　　　Profile <span class="badge badge-light">9</span>
　　　　　　<span class="sr-only">unread messages</span>
　　　　</button>

　　　　class="sr-only"，用于为屏幕阅读器（screen reader）添加描述文本，且不会显示给正常使用者。

　　③ 药丸徽章

　　　　在基本样式的基础上增加“badge-pill”（修饰类）样式。示例如下：

　　　　<span class="badge badge-danger badge-pill">Danger</span>

　　④ 徽章链接

　　　　给<a>标签赋予“.badge”类，使得超链接拥有徽章样式。示例如下：

　　　　<a href="#" class="badge badge-success">Success</a>

5.Breadcrumb面包屑（导航）

　　主要用于创建有层次结构的位置信息，如菜单、目录、索引等，在用户界面实现导航辅助。

　　实现面包屑的三个主要类：

　　　　breadcrumb，定义面包屑的区域

　　　　breadcrumb-item，定义面包屑的内容项

　　　　active，定义活动页（当前页）

　　注意：对于非活动页通常需要嵌套<a>标签进行跳转链接。

　　构建面包屑导航的常用方式是使用“无序列表”，示例如下：

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

　　也可以不使用无序列表的方式，示例如下：

　　　　<nav class="breadcrumb" aria-label="breadcrumb">
　　　　　　<a class="breadcrumb-item" href="#">Home</a>
　　　　　　<a class="breadcrumb-item" href="#">Library</a>
　　　　　　<a class="breadcrumb-item" href="#">Data</a>
　　　　　　<span class="breadcrumb-item active">Bootstrap</span>
　　　　</nav>

　　其他说明：

　　　　<nav>标签用于定义导航连接，作为标注一个导航连接的区域（不是必须使用）。

　　　　还可以在<nav>中添加屏幕属性，用于规定导航是否显示，以适应不同设备屏幕需求。

6.Button按钮

　　BootStrap通过“.btn”类和其他“.btn-*”特定意义的类定义了很多按钮样式

 　　① 基本样式

　　　　<button type="button" class="btn  btn-primary">Primary</button>
　　　　<button type="button" class="btn btn-secondary">Secondary</button>
　　　　<button type="button" class="btn btn-success">Success</button>
　　　　<button type="button" class="btn btn-danger">Danger</button>
　　　　<button type="button" class="btn btn-warning">Warning</button>
　　　　<button type="button" class="btn btn-info">Info</button>
　　　　<button type="button" class="btn btn-light">Light</button>
　　　　<button type="button" class="btn btn-dark">Dark</button>

　　　　<button type="button" class="btn btn-link">Link</button>（链接样式的按钮）

　　② ".btn"类还可以应用在<a>和<input>标签上，示例如下：

　　　　<a class="btn btn-primary" href="#" role="button">Link</a>
　　　　<button class="btn btn-primary" type="submit">Button</button>
　　　　<input class="btn btn-primary" type="button" value="Input">
　　　　<input class="btn btn-primary" type="submit" value="Submit">
　　　　<input class="btn btn-primary" type="reset" value="Reset">

　　③ 轮廓按钮

　　　　与基本样式不同的是，没有内部背景颜色，而是突出了按钮轮廓和字体样式

　　　　类名的差异也是在特定类的名称中加入了“outline”，示例如下：

　　　　　　<button type="button" class="btn btn-outline-success">Success</button>
　　　　　　<button type="button" class="btn btn-outline-danger">Danger</button>
　　　　　　<button type="button" class="btn btn-outline-warning">Warning</button>
　　　　　　<button type="button" class="btn btn-outline-* ">Info</button>

　　④ 按钮大小

　　　“.btn-lg”（大尺寸按钮）、“.btn-sm”（小尺寸按钮）、“.btn-block”（全部宽度按钮），示例如下：

　　　　　　<button type="button" class="btn btn-primary btn-lg">Large button</button>
　　　　　　<button type="button" class="btn btn-secondary btn-sm">Small button</button>

　　　　　　<button type="button" class="btn btn-info btn-lg btn-block">Large button</button>

　　⑤ 活动状态和禁用状态

　　　　“.active”，表示活动状态，用于突出显示按钮被按下时的样式

　　　　“.disable”，表示禁用状态，按钮无法点击

　　　　<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Link</a>
　　　　<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
　　　　<a href="#" class="btn btn-info btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

　　　　说明事项：

　　　　　　“.disable”类与html中<button>的“disable”属性效果相同，

　　　　　　所以对于<button>标签添加“.disable”类和“disable”属性都可以。

　　　　　　但是对于<a>标签不支持“disable”属性，因此只能使用“.disable”类的方式。

　　　　“tabindex”扩展：

　　　　　　用于设置键盘中的TAB键在控件中的移动顺序，即焦点的顺序。

　　　　　　把控件的tabIndex属性设成1到32767某个值，就可以将其加入TAB键的序列中。

　　　　　　使用TAB键在网页中切换时，焦点将按照tabIndex的属性值从小到大的顺序移动。

　　　　　　默认的tabIndex属性值为 0 ，将排列在所有指定tabIndex的控件之后。

　　　　　　若tabIndex属性为负值（如tabIndex="-1"），那么将被排除在TAB键的序列之外。

　　　　　　如果两个控件的tabIndex属性相同，则以控件在html代码中出现的顺序为准。

　　　　　　如果tabIndex属性值使用-1时，onfocus与onblur事件仍会被启动。

　　⑥ 复选框按钮和单选按钮

　　　　针对<input>标签的“checkbox”和“radio”两个属性的按钮样式。

　　　　input type=“checkbox”时，示例：

　　　　　　<div class="btn-group-toggle" data-toggle="buttons">

　　　　　　　　<label class="btn btn-secondary active">

　　　　　　　　　　<input type="checkbox" checked> Checked

　　　　　　　　</label>

　　　　　　</div>

　　　　input type=“radio”时，示例：

　　　　　　<div class="btn-group  btn-group-toggle" data-toggle="buttons">

　　　　　　　　<label class="btn btn-secondary active">

　　　　　　　　　　<input type="radio" name="options" id="option1" checked> Active

　　　　　　　　</label>

　　　　　　　　<label class="btn btn-secondary">

　　　　　　　　　　<input type="radio" name="options" id="option2"> Radio

　　　　　　　　</label>

　　　　　　　　<label class="btn btn-secondary">

　　　　　　　　　　<input type="radio" name="options" id="option3"> Radio

　　　　　　　　</label>

　　　　　　</div>

　　注意：两种样式都是通过将<label>和<input>元素包裹在一个容器内，

　　　　　然后给外层容器赋予 class类和 data-toggle属性，实现 input按钮（组）的转换。

　　⑦ 按钮组

　　　　多个按钮包裹在一个容器中，形成按钮拼接摆放的效果。

　　　　普通按钮组（Button group），示例：

<!--  按钮组 div容器添加“.btn-group”类  -->
        <div class="btn-group" role="group" aria-label="First group">
<!--    按钮 button元素定义 type类型等于“button”，添加“.btn”类和“btn-*”类    -->
            <button type="button" class="btn btn-secondary">Left</button>
            <button type="button" class="btn btn-secondary">Middle</button>
            <button type="button" class="btn btn-secondary">Right</button>
        </div>

　　　　按钮工具栏（Button toolbar），多个按钮组封装在一个容器中，示例：

<!--最外层 div容器赋予“.btn-toolbar”类，内部按钮组的类样式与单个按钮组相同-->
    <div class="btn-toolbar role="toolbar" aria-label="Toolbar with button groups">

<!--  按钮组 div容器添加“.btn-group”类  -->
        <div class="btn-group" role="group" aria-label="First group">
<!--    按钮 button元素定义 type类型等于“button”，添加“.btn”类和“btn-*”类    -->
            <button type="button" class="btn btn-secondary">Left</button>
            <button type="button" class="btn btn-secondary">Middle</button>
            <button type="button" class="btn btn-secondary">Right</button>
        </div>
        <div class="btn-group" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary">Left</button>
            <button type="button" class="btn btn-secondary">Right</button>
        </div>
        <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-secondary">Middle</button>
        </div>
    </div>

　　　　嵌套按钮组（Nesting），将一个按钮组包裹在另一个按钮组内部，示例：

<!--外层按钮组与一般按钮组样式相同-->
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>

<!--  内部按钮组由“按钮组容器、下拉按钮、下拉菜单”三部分构成  -->
        <div class="btn-group" role="group">
<!--    下来按钮需要在一般按钮的样式基础上，添加“.dropdown-toggle”类        -->
            <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
            </button>
<!--        下拉菜单由“下拉容器和下拉选项”两部分构成    -->
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <a class="dropdown-item" href="#">Dropdown link</a>
                <a class="dropdown-item" href="#">Dropdown link</a>
            </div>
        </div>
    </div>

　　　　垂直按钮组，

　　　　　　为按钮组的外部容器添加“.btn-group-vertical”类，则按钮组将垂直方向排列。

　　　　　　语法示例：

　　　　　　　　<div class="btn-group-vertical">
　　　　　　　　　　...
　　　　　　　　</div>

 　　　　按钮组大小，

　　　　　　按钮组中的按钮大小不需要针对具体某一个进行设置，只需要对按钮组容器设置即可，

　　　　　　包括多个按钮组嵌套。

　　　　　　示例：

　　　　　　　　<div class="btn-group btn-group-lg" role="group">...</div>
　　　　　　　　<div class="btn-group" role="group">...</div>
　　　　　　　　<div class="btn-group btn-group-sm" role="group">...</div>

参考资料来源：BootStrap中文网（https://v3.bootcss.com/）