Bootstrap 学习笔记(3)--Jumbotron、警报、按钮

时间:2020-07-11
本文章向大家介绍Bootstrap 学习笔记(3)--Jumbotron、警报、按钮,主要包括Bootstrap 学习笔记(3)--Jumbotron、警报、按钮使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

Jumbotron

Jumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息

效果 应用类
有圆角 .jumbotron
无圆角 .jumbotron-fluid .container 或 .container-fluid

实例

<div class="jumbotron">1</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">2</div>
</div>

警报

效果 应用类
成功警报 .alert .alert-success
注意警报 .alert .alert-info
警告警报 .alert .alert-warning
失败警报 .alert .alert-danger
重要警报 .alert .alert-primary
次要警报 .alert .alert-secondary
浅灰色警报 .alert .alert-light
深灰色警报 .alert .alert-dark
设置匹配警报颜色的链接 a:alert-link

关闭警报

在容器中引用 .alert-dismissible 类以在右上角定义一个.close关闭按钮效果
警告按钮上要增加data-dismiss="alert" 触发 JavaScript 动作,同时使用<button>元素,以确保在所有设备上都能获得正确的行为响应。
通过添加.fade.show样式以实现淡出淡入效果。

实例

<div class="container-fluid">
<div class="alert alert-success" role="alert">成功</div>
<div class="alert alert-info" role="alert">注意</div>
<div class="alert alert-warning" role="alert">警告</div>
<div class="alert alert-danger" role="alert">失败</div>
<div class="alert alert-primary" role="alert">重要</div>
<div class="alert alert-secondary" role="alert">次要</div>
<div class="alert alert-light" role="alert">浅灰色</div>
<div class="alert alert-dark" role="alert">深灰色</div>
<div class="alert alert-dark" role="alert">
	<a href="#" class="alert-link">这是个匹配色链接</a>
	<a href="#" >这是个普通链接</a>
</div>

<div class="alert alert-success alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
  	<span aria-hidden="true">&times;</span>
  </button>成功
</div>

除此以外可以使用JavaScript行为以解除警报

<script type="text/javascript">
	$(function(){
   		 $("#close").on("click",function(){
              $(this).alert("close");
		});
	});
</script>
<div class="alert alert-success " role="alert" >
警告 <button type="button" class="btn btn-danger" id="close">关闭</button> 
</div>

方法

方法 描述
$().alert() 使警报监听具有data-dismiss =“ alert”属性的子代元素上的单击事件。 (使用data-api的自动初始化时不需要。)
$().alert('close') 通过从DOM中删除警报来关闭警报。如果元素上存在.fade和.show类,则警报将在被删除之前淡出。
$().alert('dispose') 破坏元素的警报。

事件
Bootstrap警报插件提供额外的事件,可以直接取得调用方法和函式。

事件 描述
close.bs.alert 调用close实例方法时,将立即触发此事件。
closed.bs.alert 警报已关闭时将触发此事件(将等待CSS转换完成)​​。

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

按钮

效果 应用类
基本按钮 .btn
主要按钮 .btn .btn-primary
次要按钮 .btn .btn-secondary
成功按钮 .btn .btn-success
信息按钮 .btn .btn-info
警告按钮 .btn .btn-warning
危险按钮 .btn .btn-danger
黑色按钮 .btn .btn-dark
浅色按钮 .btn .btn-light
链接按钮 .btn .btn-link
	<button type="button" class="btn">基本按钮</button>
	<button type="button" class="btn btn-primary">主要按钮</button>
	<button type="button" class="btn btn-secondary">次要按钮</button>
	<button type="button" class="btn btn-success">成功按钮</button>
	<button type="button" class="btn btn-info">信息按钮</button>
	<button type="button" class="btn btn-warning">警告按钮</button>
	<button type="button" class="btn btn-danger">危险按钮</button>
	<button type="button" class="btn btn-dark">黑色按钮</button>
	<button type="button" class="btn btn-light">浅色按钮</button>
	<button type="button" class="btn btn-link">链接按钮</button>

按钮类可用于 <a>, <button>, 或 <input> 元素上:

<a href="#" class="btn btn-danger" role="button">按钮</a>
<input type="button" class="btn btn-info" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">

通过在.btn-outline-*类为以实现边框形式按钮

<button type="button" class="btn btn-outline-danger">危险按钮</button>

通过在.btn-*类为按钮设置大小

	<button type="button" class="btn btn-danger btn-lg">危险按钮</button>
	<button type="button" class="btn btn-danger">危险按钮</button>

通过添加 .btn-block 类可以设置块级按钮

	<button type="button" class="btn btn-danger btn-block">危险按钮</button>
	<button type="button" class="btn btn-danger">危险按钮</button>

通过添加 .active类 与 disabled属性以激活和禁用按钮,<a>元素不支持 disabled 属性,可以通过添加 .disabled 类来禁止链接的点击。

<button type="button" class="btn btn-danger active">危险按钮</button>
<a href="#" class="btn btn-danger disabled" >危险按钮</a>
<button type="button" class="btn btn-danger " disabled>危险按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>

$flag 上一页 下一页