bootstrap-警告框中的链接

最新推荐文章于 2023-09-05 15:04:41 发布
最新推荐文章于 2023-09-05 15:04:41 发布
阅读量112 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/562418
版权

说明

用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色

示例

<!DOCTYPE html>
<html lang="zh-CN">
  	<head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    	<title>Bootstrap 101 Template</title>

    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    	<!--[if lt IE 9]>
      		<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      		<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->
  	</head>
  	<body>
  		<div class="container">
  			<div class="alert alert-success" role="alert">
			  	<strong>Well done! </strong>
			  	<a href="#" class="alert-link">You successfully read this important alert message.</a>
			</div>

			<div class="alert alert-info" role="alert">
			  	<strong>Heads up! </strong>
			  	<a href="#" class="alert-link">This alert needs your attention, but it's not super important.</a>
			</div>

			<div class="alert alert-warning" role="alert">
			  	<strong>Warning! </strong>
			  	<a href="#" class="alert-link">Better check yourself, you're not looking too good.</a>
			</div>

			<div class="alert alert-danger" role="alert">
			  	<strong>Oh snap! </strong>
			  	<a href="#" class="alert-link">Change a few things up and try submitting again.</a>
			</div>
		</div>

    	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    	<!-- Include all compiled plugins (below), or include individual files as needed -->
    	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  	</body>
</html>

输出

wKioL1ij9WPAjItFAABWTHLiDOY149.png-wh_50


本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1898041


weixin_33950035
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap实现带关闭按钮功能
08-31
主要介绍了BootStrap实现带关闭按钮功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
bootstrap-3.3.4
06-24
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。 JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含...
bootstrap的Hello World
weixin_34122604的博客
02-14 270
<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"...
Bootstrap关闭按钮
歪脖先生的博客
05-09 4170
关闭按钮 为 <button> 或 <a> 元素添加 .close 类，就会为它赋予一个象征关闭的图标，点击图标，就可以让模态框和警告框消失。如： <buttontype="button"class="close"aria-label="Close"><spanaria-hidden="true">&times;</span...
BootStrap4工具系列之关闭按钮
爱喝水的qdy的博客
12-02 547
目录官方文档地址其他中文文档地址使用整体代码 官方文档地址 https://getbootstrap.com/docs/4.4/utilities/close-icon/ 其他中文文档地址 https://getbootstrap.net https://getbootstrap.net/docs/utilities/close-icon/ https://v4.bootcss.com ...
Bootstrap带下拉的胶囊导航
歪脖先生的博客
05-18 808
带下拉的胶囊导航 下拉菜单组件（dropdown）是一个独立的组件，它可以和页面上的任何元素（如，按钮、导航等）进行组合，让相应的元素具有下拉功能。 如果把导航和下拉菜单进行组合，并让导航链接充当下拉菜单的开关，就可以制作出带下拉的导航。当用户点击导航链接时，可以显示或隐藏下拉菜单。 如果要给导航中的某个链接添加下拉菜单，只需给相应的列表项添加 .dropdown 类，再给它嵌套一个下拉菜单...
Bootstrap 第16章 弹出框和警告框插件
08-12
NULL 博文链接：https://onestopweb.iteye.com/blog/2268116
Bootstrap 第10章 巨幕页头缩略图和警告框组件
08-12
NULL 博文链接：https://onestopweb.iteye.com/blog/2267082
bootstrap.zip
04-29
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。 JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含...
bootstrap3帮助文档
01-13
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。 JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 显示代码：电脑程序输出: Sample output...
weixin_30292745的博客
05-19 188
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <meta name="viewport" content="wid...
菜鸟教程php分页,Bootstrap 分页
weixin_36352432的博客
03-17 147
Bootstrap 分页本章将讲解 Bootstrap 支持的分页特性。分页(Pagination)，是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。分页(Pagination)下表列出了 Bootstrap 提供的处理分页的 class。 Class描述示例代码.pagination添加该 class 来在页面上显示分页。«1........disabled, .active...
Bootstrap(中)
......
03-12 692
一、按钮样式Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样，都是通过类名“btn”来实现。不同的是在V3.x版本要简约很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如说文本阴影（text-shadow）、渐变背景（background-image）、边框阴影（box-shadow）等。 Bootstrap框架中的考虑了不同浏览器的解析差异，进行了比较安全的兼容
inline-block的一些理解
qq_25302061的博客
09-20 544
block：元素独占一行（默认填满父元素），可以设置宽度和高度（但还是会独占一行）； inline：多个元素占一行（直至排不下换行），设置宽度高度无效； inline-block：，此处input经过bootstrap修饰变为block类型元素，转换成inline-block后line-height才起作用。（自身实验得来，理解可能有偏差，欢迎不吝赐教！）   另：float常会影响布局，...
详细介绍 display: block（块级元素）、inline-block（行内块元素）和inline（行内元素）的差别
最新发布
qq_43532275的博客
09-05 3596
详细介绍 display: block（块级元素）、inline-block（行内块元素）和inline（行内元素）的差别
Bootstrap3 模态对话框的尺寸
歪脖先生的博客
05-26 2801
模态对话框的尺寸 Bootstrap为模态框提供了两个尺寸类 .modal-lg和.modal-sm，可以为.modal-dialog增加一个样式类，来调整模态框的尺寸。 如果模态框中的内容比较多，你希望比默认尺寸大一些，使用 .modal-lg 类；如果模态框中的内容比较少，你希望比默认尺寸小一些，使用 .modal-sm 类。如： <divclass="modal fade"t...
CSS通用样式4——工具类
qq_66198247的博客
11-08 1015
Bootstrap提供了十几个辅助工具类，包括边框、清除浮动、颜色、display、浮动、定位、文本对齐等。在开发中可以直接应用这些类，让开发更加快捷和简单。
flask-bootstrap-高亮-下划线-删除线-加粗-斜体
肥宅Sean
12-12 6232
简述 这是最基本的啦。以后肯定是可以用到的~ 核心代码 参考 https://getbootstrap.com/docs/4.1/content/typography/#inline-text-elements 效果： You can use the mark tag to highlight text. This line of text is meant to be treated as ...
对Bootstrap的css基础样式进行总结归纳
weixin_45637035的博客
04-02 1467
文章目录概览HTML5 文档类型屏幕自适应默认全局样式栅格系统布局容器布局规范栅格参数关系实例手机、平板、桌面不同布局响应式列重置列偏移嵌套列列排序文本样式标题副标题内联文本元素添加高亮被删除的文本无用文本插入文本带下划线的文本小号文本着重斜体文本对齐改变大小写缩略语地址引用直接引用命名来源列表无序列表有序列表无样式列表水平排列的列表描述性列表水平排列的描述自动截断代码内联代码用户输入代码块变量程序输出表格基本实例条纹状表格带边框的表格鼠标悬停响应紧缩表格表格颜色响应式表格表单规范实例表单使用注意事项水平排
Bootstrap-datepicker链接
07-13
你可以在以下位置找到 Bootstrap-datepicker 的链接： 1. 官方 GitHub 仓库：https://github.com/uxsolutions/bootstrap-datepicker 这是 Bootstrap-datepicker 的官方 GitHub 仓库，你可以在这里下载最新版本的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值