bootstrap-警告框中的链接

说明

用 .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>

输出

时间: 2024-10-19 18:52:00

bootstrap-警告框中的链接的相关文章

Bootstrap入门(二十)组件14:警告框

警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3.带链接的可关闭警告框 首先我们要引入CSS文件和JS文件(bootstrap的JS是需要jQuery支持的) <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" ty

bootstrap 警告

本章将讲解警告(Alerts)以及Bootstrap所提供的用于警告的class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框.请使用警告(Alerts)Jquery插件. 你可以通过创建一个div并向其添加一个.alert class 和四个上下文class (即.alert-success,alert-info,alert-warning,alert-danger)之

Selenium 警告框处理

警告框分三种类型: alert:显示带有一条指定消息和一个 OK 按钮的警告框. confirm:显示一个带有指定消息和 OK 及取消按钮的对话框. prompt:显示可提示用户进行输入的对话框. 我们就来一一认识他们的形状 alert: confirm: prompt: 警告框操作 主要操作方法有: text:获取警告框中的文字信息 accept():接受警告框,相当于点击"确认" dismiss():解散警告框,相当于点击"取消"或叉掉警告框 send_keys

selenium基础(警告框的处理)

selenium基础(警告框的处理) 在webdriver中处理JavaScript所产生的的警告框有三种类型 alert confirm prompt 划转到警告框的方法是:driver.switch_to.alert 然后使用text.accept.dismiss.send_keys等方法进行操作 text:返回(获取)alert/confirm/prompt中的文字信息 accpet():接受现有的警告框 dismiss():解散现有的警告框 send_keys(keysToSend):发

Bootstrap组件之警告框

.alert--指明div元素为警告框组件: .alert-info..alert-danger..alert-warning..alert-success--给警告框设置情景效果: .alert-dismissible--提示该警告框组件为可关闭的: .close--设置按钮为可关闭: .alert-link--可以为链接设置与当前警告框相符的颜色: <!DOCTYPE html> <html lang="en"> <head> <meta

第二百四十六节,Bootstrap弹出框和警告框插件

Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. 基本用法 注意:必须在js结合popover()方法使用 data-toggle="popover"弹出框事件绑定,写在触发弹出框的元素里,执行弹出框事件点击弹出或隐藏(Bootstrap)title=""设置弹出框标题,写在弹出框元素里,(Bootstrap)

selenium+webdriver+python 中警告框的处理方法

在自动化测试过程中,经常会遇到弹出警告框的情况,如图所示: 在 WebDriver 中处理 JavaScript 所生成的 alert.confirm 以及 prompt 是很简单的.具体做法是使用 switch_to_alert()方法定位到 alert/confirm/prompt.然后使用 text/accept/dismiss/send_keys 按需进行操做.1. 获取警告框的text消息 2. 接受消息框(确定) 3. 取消 4. 输入值 text 返回 alert/confirm/

Bootstrap历练实例:带链接的警告

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:带链接的警告</title> <meta charset="utf-8" /> <meta name="viewpo

Bootstrap(9) 巨幕页头缩略图和警告框组件

一.巨幕组件巨幕组件主要是展示网站的关键性区域.//在固定的范围内,有圆角 <div class="container"> <div class="jumbotron"> <h2>网站标题</h2> <p>这是一个学习性的网站!</p> <p> <a href="#" class="btn btn-default">更多内容<