boostrap中如何制作弹出框样式效果?

简洁、直观、强悍的前端开发框架让web开发更迅速、简单。

开发欢迎广大前端码农使用。有好的建议欢迎给我们

Bootstrap定义警告框使用的是样式类alert、alert-danger等可以使用close样式类对警告框进行关闭操作。如果在警告框添加渐变样式和半径样式会让警告框的样式更加美观。下面利用一个实例说明操作如下:

  1. 第一步,在WebStorm创建web项目然后在项目指定目录下新建静态页面alert.html,并引入bootstrap相关的css和js文件以及jquery文件如下图所示:

  2. 第二步,在,<body>标签內插入三个div标签分别设置不同样式类,然后在最里层的div插入一个button按钮class样式类为close,如下图所示:

  3. 第三步再在button元素下方插入一个label标签,攵字内容为“警告提示框”如下图所示:

  4. 第四步,在jquery初始化函数内编写按钮单击事件,调用警告框的close方法如下图所示:

  5. 第五步,保存代码并预览该静态页面查看到一个警告框右侧有个关闭图标,如下图所示:

  6. 第六步设置警告框样式,使用css样式选择器控制样式添加背景渐变色和半径属性,如下图所示:

  • 注意Bootstrap样式类控制警告框样式方法

  • 注意使用渐变属性设置警告框样式

经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士

作者声明:本篇经验系本人依照真实经历原创,未经许可谢絕转载。

说说为什么给这篇经验投票吧!

只有签约作者及以上等级才可发有得 你还可以输入1000字

  • 0
  • 0
  • 0
  • 0

我要回帖

更多关于 弹出框 的文章

 

随机推荐