UI设计师-UI设计模式与组件库-Bootstrap_Bootstrap组件学习：模态框、警告框与切换按钮.docx

PAGE1

PAGE1

Bootstrap组件学习：模态框、警告框与切换按钮

1Bootstrap模态框

模态框（Modal）是一种常见的UI组件，用于创建覆盖在当前页面上的对话框，通常用于显示需要用户额外注意或互动的内容。在Bootstrap中，模态框通过JavaScript插件和CSS样式实现。

1.1原理和结构

模态框主要由模态对话框（Modaldialog）和模态背景（Modalbackdrop）组成。模态对话框是可见的内容区域，而模态背景是模态框外的模糊层，用户点击背景时，模态框可以关闭。

1.1.1HTML结构

!--模态框结构--

divclass=modalfadeid=exampleModaltabindex=-1aria-labelledby=exampleModalLabelaria-hidden=true

divclass=modal-dialog

divclass=modal-content

divclass=modal-header

h5class=modal-titleid=exampleModalLabel模态框标题/h5

buttontype=buttonclass=btn-closedata-bs-dismiss=modalaria-label=关闭/button

/div

divclass=modal-body

模态框主体内容。

/div

divclass=modal-footer

buttontype=buttonclass=btnbtn-secondarydata-bs-dismiss=modal关闭/button

buttontype=buttonclass=btnbtn-primary保存变化/button

/div

/div

/div

/div

1.1.2JavaScript初始化

//初始化模态框

varmyModal=newbootstrap.Modal(document.getElementById(exampleModal));

//显示模态框

myModal.show();

//隐藏模态框

myModal.hide();

1.2代码示例

!--引入BootstrapCSS和JS--

linkhref=/npm/bootstrap@5.3.0/dist/css/bootstrap.min.cssrel=stylesheet

scriptsrc=/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js/script

!--模态框定义--

divclass=modalfadeid=myModaltabindex=-1aria-labelledby=myModalLabelaria-hidden=true

divclass=modal-dialog

divclass=modal-content

divclass=modal-header

h5class=modal-titleid=myModalLabel模态框示例/h5

buttontype=buttonclass=btn-closedata-bs-dismiss=modalaria-label=Close/button

/div

divclass=modal-body

这里是模态框的主体内容，可以放置任何HTML内容。

/div

divclass=modal-footer

buttontype=buttonclass=btnbtn-secondarydata-bs-dismiss=modal关闭/button

buttontype=buttonclass=btnbtn-primary保存/button

/div

/div

/div

/div

!--显示模态框的触发按钮--

buttontype=buttonclass=btnbtn-primarydata-bs-toggle=modaldata-bs-target=#myModal

打开模态框

/button

!--初始化和控制模态框的JavaScript代码--

script

$(docum