• 首页
• 服务器租用
• 企业邮箱
• 虚拟主机
• 网站程序
• 营销推广
• 网站建设
• 域名注册
• 前端开发
• 网站备案

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> bootstrap教程 >> 网站建设中Bootstrap 警告弹出框（Alerts）

网站建设中Bootstrap 警告弹出框（Alerts）

• 作者：创新互联 文章来源：网页前端技术 点击数： 更新时间：2017-07-30
• 传统的网页弹出框是用js的alert弹出，美观性和可控制性不高。但网站建设中使用频率却很高，今天我们为大家介绍一个实用性强简单易操作的Bootstrap警告弹出框css类。
  为什么说它是个类呢？原因是它是在div 上加了已写好的类样式，alert类是基类少不了，表示是弹出框。为我们确定好4类种成功的类alert-success；信息提示类alert-info；bootstrap警告类alert-warning；还有一个错误类alert-danger
  下面创新互联直接把Bootstrap 警告弹出框4种类代码粘贴现来
  

  <div class="alert alert-success">成功！很好地完成了提交。</div>
  <div class="alert alert-info">信息！请注意这个信息。</div>
  <div class="alert alert-warning">警告！请不要提交。</div>
  <div class="alert alert-danger">错误！请进行一些更改。</div>
  

  
  上面bootstrap警告弹出框4种类都可以加个取消(关闭)的小叉，只要在div 中加上下面代码就可以了。例：
  

  <div class="alert alert-success">
  	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>  
  	//重点就是这句好，其他3种类div的可以加哟！
  	成功！很好地完成了提交。
  </div>
  

  
  Bootstrap警告弹出框中的内容还可以加链接类，这也是bootstrap为我们写好的，可以直接拿来用class="alert-link"。例：
  

  <div class="alert alert-success">
  	提交成功！<a href="#" class="alert-link">进入查看</a>
  </div>
  

• 没有了! :上一篇
  bootstrap缩略图thumbnail元素 :下一篇