WEB前端第五十一课——BootStrap组件(三)dropdown、form、modal、pagination

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

1.Dropdown下拉按钮  ⑴ 基本样式    外层容器div,class=”dropdown”    button元素,在一般按钮的基础上增加“.dropdown-toggle”类和 data-toggle=”dropdown”属性、“id”

1.Dropdown下拉按钮

  ⑴ 基本样式

    外层容器div,class="dropdown"

    button元素,在一般按钮的基础上增加“.dropdown-toggle”类和 data-toggle="dropdown"属性、“id”

          “.btn-secondary”样式也可以改换成其他类,如“.btn-success”……

    下拉菜单,class="dropdown-menu"

    下拉选项,class="dropdown-item",可以用<a>,也可以是<span>、<button>、<h*>等元素

         下拉选项之间可以插入分隔,<div class="dropdown-divider"></div>

    <div class="dropdown">         <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">             Dropdown button         </button>         <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">             <a class="dropdown-item" href="#">Action</a>             <a class="dropdown-item" href="#">Another action</a>             <a class="dropdown-item" href="#">Something else here</a>         </div>     </div> 

  ⑵ 分裂按钮

    本质是将基本样式中的按钮与下拉菜单分开为两个按钮,

    因此,分裂按钮是一个按钮组,其中一个是普通按钮,另一个是下拉按钮。

    设置按钮大小、外观样式,需要针对普通按钮和下拉按钮分别设置。

    与基本样式不同的是,下拉按钮需要增加“.dropdown-toggle-split”类。

    <div class="btn-group"> <!--    普通按钮    -->         <button type="button" class="btn btn-danger">Action</button> <!--    下拉按钮    -->         <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">             <span class="sr-only">Toggle Dropdown</span>         </button> <!--    下拉菜单    -->         <div class="dropdown-menu">             <a class="dropdown-item" href="#">Action</a>             <a class="dropdown-item" href="#">Another action</a>             <a class="dropdown-item" href="#">Something else here</a> <!--       下拉选项分隔     -->             <div class="dropdown-divider"></div>             <a class="dropdown-item" href="#">Separated link</a>         </div>     </div> 

  ⑶ 菜单方向

    按钮菜单除了下拉也可以向上、向右、向左。

    下拉菜单使用的是class="dropdown"/"btn-group",

    但其他三个方向都必须使用".btn-group"和特定方向类。

      dropup,向上

      dropright,向右

      dropleft,向左

    而且,特定方向类只需要设置".btn-group"容器即可,其他内部元素样式与下拉按钮相同。

  ⑷ 菜单选项

    ".dropdown-header",用于设置菜单选项表头,将其赋予<h*>元素

    ".dropdown-item-text"类,用于将菜单选项定义为文本格式,可以使用<span>元素

    ".active"类,用于设置菜单活动选项

    ".disable"类,禁用菜单选项

    纯文本形式的菜单内容,示例如下:      

      <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
        <p>
          Some example text that's free-flowing within the dropdown menu.
        </p>
        <p class="mb-0">
          And this is more example text.
        </p>
      </div>

    另外,form表单也可以作为菜单的内容呈现。

  ⑸ 菜单容器

    ".dropdown-menu-right",赋予菜单容器,定义菜单右对齐

    响应式对齐,即符合某个条件时采用指定对齐方式,需设置<button>属性 data-display="static",

          同时,设置dropdown菜单容器特定样式类,如“.dropdown-menu-lg-right”或者

          ".dropdown-menu-right"和“.dropdown-menu-lg-left”。

  ⑹ 菜单事件    

    show.bs.dropdown
    shown.bs.dropdown
    hide.bs.dropdown
    hidden.bs.dropdown

    调用示例:

      $('#myDropdown').on('show.bs.dropdown', function () {
        // do something...
      })

2.Form表单

  除普通表单外,可以给<form>元素添加“.form-inline”定义行内表单。

  每一对<label><input>标签都被一个“.form-group”类的div包裹。

  input元素的 class样式为“.form-control”,可以添加通过“.form-control-sm/lg”定义 form控件大小。

    input元素中添加“readonly”属性,定义只读文本,

    将“.form-control”替换为“.form-control-plaintext”去掉边框背景等样式

  input type="checkbox"时,class="form-check-input",label class="form-check-label"

  ⑴ 基本表单示例:

    <form>         <div class="form-group">             <label for="exampleInputEmail1">Email address</label>             <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">             <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>         </div>         <div class="form-group">             <label for="exampleInputPassword1">Password</label>             <input type="password" class="form-control" id="exampleInputPassword1">         </div>         <div class="form-group form-check">             <input type="checkbox" class="form-check-input" id="exampleCheck1">             <label class="form-check-label" for="exampleCheck1">Check me out</label>         </div>         <button type="submit" class="btn btn-primary">Submit</button>     </form> 

    ps:<small>标签用于定义小一号字体的文本,如果字体达到模型支持的最小字号,

      则<small>标签将不起任何作用,其与<big>标签相对应。

  ⑵ 下拉菜单 form-group

    <select>可以定义“multiple”属性,同时显示多项。

    同样,可以添加通过“.form-control-sm/lg”定义 form控件大小。

        <div class="form-group">             <label for="exampleFormControlSelect">Example select</label>             <select class="form-control" id="exampleFormControlSelect">                 <option>1</option>                 <option>2</option>                 <option>3</option>                 <option>4</option>                 <option>5</option>             </select>         </div> 

  ⑶ input type="file"(文件输入框)

    此时,input class="form-control-file"

      <div class="form-group">
        <label for="exampleFormControlFile">Example file input</label>
        <input type="file" class="form-control-file" id="exampleFormControlFile">
      </div>

  ⑷ 响应式 form-group

    “.form-group”容器添加“.row”类

    将<input>元素用<div>包裹,定义为“.col-* ”

        <div class="form-group row">             <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>             <div class="col-sm-10">                 <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">             </div>         </div> 

  ⑸ input type="range"(范围输入框)

    此时,input class="form-control-range"

        <div class="form-group">             <label for="formControlRange">Example Range input</label>             <input type="range" class="form-control-range" id="formControlRange">         </div> 

  ⑹ “.form-group”改换为".form-check"

    ".form-check"类的 div容器用于定义“checkbox”和“radio”表单元素

    同时添加".form-check"类和".form-check-inline"类,表示form-check内联样式。

<!--    复选框控件    -->         <div class="form-check">             <input class="form-check-input" type="checkbox" value="" id="defaultCheck">             <label class="form-check-label" for="defaultCheck">                 Default checkbox             </label>         </div> <!--    单选按钮控件    -->         <div class="form-check">         <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios" value="option">         <label class="form-check-label" for="exampleRadios">             Second default radio         </label>         </div> 

  ⑺ 更多复杂的表单设计

    参考资料:https://v4.bootcss.com/docs/components/forms/?

3.Modal模态框

  类似于 js中的Alert对话框,但Modal功能要强大的多。

  ⑴ 基础Modal

   示例如下:

    <div class="modal" tabindex="-1" role="dialog">         <div class="modal-dialog">             <div class="modal-content">                 <div class="modal-header">                     <h5 class="modal-title">Modal title</h5>                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         <span aria-hidden="true">×</span>                     </button>                 </div>                 <div class="modal-body">                     <p>Modal body text goes here.</p>                 </div>                 <div class="modal-footer">                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                     <button type="button" class="btn btn-primary">Save changes</button>                 </div>             </div>         </div>     </div> 

   由代码结构可以看出,

    Modal容器有三层 div:

      .Modal、.Modal-dialog、.Modal-content,每一层分别预定义了不同的属性样式。

    Modal内容的三块构成:

      .Modal-header、Modal-body、Modal-footer

     Modal头部通常包括标题(<h*>)和关闭按钮(<button>):

      .Modal-title、.close

      “.close”按钮需要定义“ data-dismiss="modal" ”属性,关闭标识叉号为“&times;”实体字符

    Modal脚部通常设置关闭按钮和提交/保存按钮:

      此处关闭按钮class与头部关闭按钮不同,class="btn btn-secondary",data-dismiss属性相同。

  ⑵ 静态Modal

    非静态Modal在弹出后可以通过关闭按钮或点击弹框外部来关闭弹出对话框,

    但静态Modal在弹出后只能点击关闭按钮关闭弹出对话框。

    所有关于Modal对话框的触发和结束的相关属性或类的设置都是在最外层 div容器中设置的:

      定义静态Modal,

        <div class="modal fade" id="staticBackdrop"  data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" " aria-hidden="true">
          ...
        </div>

        其中,data-backdrop属性表示数据背景,

           data-keyboard属性表示Esc键是否生效,

           tabindex属性表示Tab键的切换顺序,负值为不在Tab序列内

      定义触发按钮,

        <button type="button" class="btn btn-primary" data-toggle="modal"  data-target="#staticBackdrop">
          Launch static backdrop modal
        </button>

        其中,data-target属性的Value是要触发的Modal的“id”。

  ⑶ 长文滚动

    当Modal对话框中的文本长度超过视口高度时,需要滚动查看内容。

    “.modal”预定义了默认滚动方式,整个对话框独立于页面本身进行上下滚动;

    还可以在“.modal-dialog”中添加“.modal-dialog-scrollable”类,创建一个“.modal-body”滚动条:

      <div class="modal-dialog  modal-dialog-scrollable">
        ...
      </div>

  ⑷ Modal垂直居中

    在“.modal-dialog”中添加“.modal-dialog-centered”类,可以使整个对话框在页面垂直居中:

      <div class="modal-dialog modal-dialog-centered">
        ...
      </div>

  ⑸ tooltips和popover

    

  ⑹ Modal大小

    通过向“.modal-dialog”中添加各种尺寸类,定义整个对话框的大小:

      <div class="modal-dialog modal-xl">...</div>
      <div class="modal-dialog modal-lg">...</div>
      <div class="modal-dialog modal-sm">...</div>

  ⑺ Modal方法和事件

    参见BootStrap官方文档:https://v4.bootcss.com/docs/components/modal/

4.分页器

  用于页面切换的页码导航连接,通常使用由<nav>标签包裹的“ul”列表。

   ⑴ 基础样式

    <nav>         <ul class="pagination">             <li class="page-item"><a class="page-link" href="#">Previous</a></li>             <li class="page-item"><a class="page-link" href="#">1</a></li>             <li class="page-item"><a class="page-link" href="#">2</a></li>             <li class="page-item"><a class="page-link" href="#">3</a></li>             <li class="page-item"><a class="page-link" href="#">Next</a></li>         </ul>     </nav> 

    其中,可以给<nav>元素添加“aria-label="Page navigatio" ”属性帮助辅助技术更好的识别内容;

  ⑵ Previous和Next按钮可以使用图标替代

    <nav aria-label="Page navigation example">         <ul class="pagination">             <li class="page-item">                 <a class="page-link" href="#" aria-label="Previous">                     <span aria-hidden="true">«</span>     <!--图标为实体字符“& laquo;”-->                 </a>             </li>             <li class="page-item"><a class="page-link" href="#">1</a></li>             <li class="page-item"><a class="page-link" href="#">2</a></li>             <li class="page-item"><a class="page-link" href="#">3</a></li>             <li class="page-item">                 <a class="page-link" href="#" aria-label="Next">                     <span aria-hidden="true">»</span>     <!--图标为实体字符“& raquo;”-->                 </a>             </li>         </ul>     </nav> 

  ⑶ 活动状态

    可以为“.page-item”元素<li>添加“.disable”类定义禁用状态,或添加“.active”类定义当前活动状态。

  ⑷ Nav大小

    可以给“.pagination”元素<ul>添加“.pagination-sm/lg”类,定义分页器小尺寸和大尺寸。

  ⑸ Nav对齐方式

    可以给“.pagination”元素<ul>添加“.justify-content-center/end”类,定义分页器居中或居右。

 

参考资料来源:BootStrap中文网(https://v3.bootcss.com/)