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

  • A+
所属分类:Web前端
摘要

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

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”等。

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

   ② 按钮或链接中添加徽章

    将设置有“.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/)