Bootstrap组件——提示、徽章、面包屑导航、按钮、按钮组

最新推荐文章于 2024-08-20 11:50:32 发布

飞羽逐星

最新推荐文章于 2024-08-20 11:50:32 发布

阅读量1.8k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 组件

本文链接：https://blog.csdn.net/xun__xing/article/details/107655546

版权

Bootstrap 专栏收录该内容

22 篇文章 6 订阅

订阅专栏

一、提示（alert）

1.颜色

警报是一组颜色控件（共八个颜色样式），可用于任何长度的文本，以及可选的关闭按钮，系统提供8个可用的正确的样式（如，.alert-success）。

role用于表示一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别
<div role="alert"></div>也即是将div元素转换为t提示功能进行使用

	<div class="alert alert-primary" role="alert">alert-primary</div>
	<div class="alert alert-secondary" role="alert">alert-secondary</div>
	<div class="alert alert-success" role="alert">alert-success</div>
	<div class="alert alert-danger" role="alert">alert-danger</div>
	<div class="alert alert-warning" role="alert">alert-warning</div>
	<div class="alert alert-info" role="alert">alert-info</div>
	<div class="alert alert-light" role="alert">alert-light</div>
	<div class="alert alert-dark" role="alert">alert-dark</div>

在这里插入图片描述

2.链接颜色

	<div class="alert alert-primary">
		这是一个<a href="#" class="alert-link">链接</a>
	</div>
	<div class="alert alert-secondary">
		这是一个<a href="#" class="alert-link">链接</a>
	</div>
	<div class="alert alert-success">
		这是一个<a href="#" class="alert-link">链接</a>
	</div>
	<div class="alert alert-danger">
		这是一个<a href="#" class="alert-link">链接</a>
	</div>
	<div class="alert alert-warning">
		这是一个<a href="#" class="alert-link">链接</a>
	</div>
	<div class="alert alert-info">
		这是一个<a href="#" class="alert-link">链接</a>
	</div>
	<div class="alert alert-light">
		这是一个<a href="#" class="alert-link">链接</a>
	</div>
	<div class="alert alert-dark">
		这是一个<a href="#" class="alert-link">链接</a>
	</div>

在这里插入图片描述

3.额外附加内容

	<div class="alert alert-success">
		<h4 class="alert-heading">这是一个标题</h4>
		<p>这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容</p>
		<hr>
		<p>下面还可以添加一个说明</p>
	</div>

在这里插入图片描述

4.关闭警告

通过按钮关闭警告框

在右上角定义一个.close关闭按钮效果，则需要在容器中引用 .alert-dismissible 类
警告按钮上要增加data-dismiss=“alert” 触发 JavaScript 动作，同时使用元素，以确保在所有设备上都能获得正确的行为响应。
要在关闭警报时生成警报提示，请确保添加.fade和.show样式。

	<div class="alert alert-warning alert-dismissible fade show">
		这是一个可以关闭的警告框，但是需要想入jquery与bottstar.js
		<button class="close" data-dismiss='alert'>&times;</button>
	</div>

在这里插入图片描述

JavaScript行为

	<div class="alert alert-danger fade show myAlert">
		通过按钮关闭警告框 
	</div>
	<button class="closeBtn">关闭警告框</button>
	<script>
		//方法
		$('.closeBtn').click(function(){
			$('.myAlert').alert('close');
		});

		//事件
		$('.myAlert').on('close.bs.alert',function(){
			alert('close方法被调用了');
		});
		$('.myAlert').on('closed.bs.alert',function(){
			alert('警告框关闭了');
		});
	</script>

二、徽章（badge）

1.徽章样式的使用

.badge徽章样式的使用、数字提示扩展样式以及小规格徽章的示例和使用文档。
徽章可用作链接或按钮的一部分，以提供统计数字样式。

	<div class="row first">
		<span class="badge">徽章</span>
		<span class="badge badge-primary">有颜色的徽章</span>
		<span class="badge badge-secondary">有颜色的徽章</span>
		<span class="badge badge-success">有颜色的徽章</span>
		<span class="badge badge-danger">有颜色的徽章</span>
		<span class="badge badge-warning">有颜色的徽章</span>
		<span class="badge badge-info">有颜色的徽章</span>
		<span class="badge badge-light">有颜色的徽章</span>
		<span class="badge badge-dark">有颜色的徽章</span>
	</div>

在这里插入图片描述

2.会继承父元素的一些属性

会继承父元素的一些属性

	<div class="row mt-5">
		<h1><span class="badge badge-primary">有颜色的徽章</span></h1>
		<h2><span class="badge badge-secondary">有颜色的徽章</span></h2>
		<h3><span class="badge badge-success">有颜色的徽章</span></h3>
		<h4><span class="badge badge-danger">有颜色的徽章</span></h4>
		<h5><span class="badge badge-warning">有颜色的徽章</span></h5>
		<h6><span class="badge badge-info">有颜色的徽章</span></h6>
		<h6><span class="badge badge-light">有颜色的徽章</span></h6>
		<h6><span class="badge badge-dark">有颜色的徽章</span></h6>
	</div>

在这里插入图片描述

3.在按钮里使用

	<div class="row mt-5">
		<button class="btn btn-primary">在按钮里使用徽章<span class="badge badge-light">5</span></button>
	</div>

在这里插入图片描述

4.胶囊徽章

	<div class="row mt-5 first">
		<span class="badge">徽章</span>
		<span class="badge badge-pill badge-primary">胶囊徽章</span>
		<span class="badge badge-pill badge-secondary">胶囊徽章</span>
		<span class="badge badge-pill badge-success">胶囊徽章</span>
		<span class="badge badge-pill badge-danger">胶囊徽章</span>
		<span class="badge badge-pill badge-warning">胶囊徽章</span>
		<span class="badge badge-pill badge-info">胶囊徽章</span>
		<span class="badge badge-pill badge-light">胶囊徽章</span>
		<span class="badge badge-pill badge-dark">胶囊徽章</span>
	</div>

在这里插入图片描述

	<div class="row mt-5 first">
		<a href="#" class="badge badge-pill badge-primary">胶囊徽章</a>
		<a href="#" class="badge badge-pill badge-secondary">胶囊徽章</a>
		<a href="#" class="badge badge-pill badge-success">胶囊徽章</a>
		<a href="#" class="badge badge-pill badge-danger">胶囊徽章</a>
		<a href="#" class="badge badge-pill badge-warning">胶囊徽章</a>
		<a href="#" class="badge badge-pill badge-info">胶囊徽章</a>
		<a href="#" class="badge badge-pill badge-light">胶囊徽章</a>
		<a href="#" class="badge badge-pill badge-dark">胶囊徽章</a>
	</div>

在这里插入图片描述

三、面包屑导航（nav）

在通过BootStrap的内置CSS样式，自动添加分隔符、并呈现导航层次和网页结构结构，从而指示当前页面的位置为访客创造优秀用户体验。

	<div class="row d-block">
		<nav>
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="#">首页</a></li>
				<li class="breadcrumb-item"><a href="#">关于我们</a></li>
				<li class="breadcrumb-item active">联系我们</li>
			</ol>
		</nav>
		<nav>
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="#">Home</a></li>
				<li class="breadcrumb-item"><a href="#">Library</a></li>
				<li class="breadcrumb-item active" aria-current="page">Data</li>
			</ol>
		</nav>
		//aria-label="breadcrumb"描述<nav>元素中提供的导航类型，
		//并将该元素应用于aria-current="page"该集合的最后一项，以表示它代表当前页面。
	</div>

在这里插入图片描述

四、按钮（btn）

1.正常样式颜色

	<div class="row d-block mt-5">
		<button class="btn btn-primary">按钮</button>
		<button class="btn btn-secondary">按钮</button>
		<button class="btn btn-success">按钮</button>
		<button class="btn btn-danger">按钮</button>
		<button class="btn btn-warning">按钮</button>
		<button class="btn btn-info">按钮</button>
		<button class="btn btn-light">按钮</button>
		<button class="btn btn-dark">按钮</button>
		<button class="btn btn-link">按钮</button>
	</div>

在这里插入图片描述

2.其它类型的按钮

	<div class="row mt-5 d-block">
		<a href="#" class="btn btn-primary">a标签按钮</a>
		<button type="submit" class="btn btn-secondary">button标签按钮</button>
		<input type="button" value="input标签" class="btn btn-success">
		<input type="submit" value="input标签" class="btn btn-danger">
		<input type="reset" value="input标签" class="btn btn-warning">
	</div>

在这里插入图片描述

3.带边框的按钮

	<div class="row d-block mt-5">
		<button class="btn btn-outline-primary">按钮</button>
		<button class="btn btn-outline-secondary">按钮</button>
		<button class="btn btn-outline-success">按钮</button>
		<button class="btn btn-outline-danger">按钮</button>
		<button class="btn btn-outline-warning">按钮</button>
		<button class="btn btn-outline-info">按钮</button>
		<button class="btn btn-outline-light text-dark">按钮</button>
		<button class="btn btn-outline-dark">按钮</button>
	</div>

在这里插入图片描述

4.大小不同的按钮

	<div class="row d-block mt-5">
		<button class="btn btn-primary btn-lg">大按钮</button>
		<button class="btn btn-secondary">正常按钮</button>
		<button class="btn btn-success btn-sm">小按钮</button>
	</div>

在这里插入图片描述

5.block类型的按钮

	<div class="row d-block mt-5">
		<button class="btn btn-primary btn-lg btn-block">块级按钮</button>
		<button class="btn btn-secondary btn-block">块级按钮</button>
	</div>

在这里插入图片描述

6.启用与停用状态的按钮

可以增加.active样式，并包括aria-pressed=“true” 属性

	<div class="row d-block mt-5">
		<button class="btn btn-primary active">启用状态</button>
		<a href="#" class="btn btn-secondary active">启用状态</a>

		<button class="btn btn-primary" disabled>停用状态</button>
		<a href="#" class="btn btn-secondary disabled">停用状态</a>
	</div>

在这里插入图片描述

7.切换按钮的active状态

添加 data-toggle=“button” 属性，可以切换按钮的 active 状态，如果你预先需要切换按钮，必须将.active 样式、 aria-pressed="true"属性到 <button>标签中。

	<div class="row d-block mt-5">
		<button class="btn btn-primary active" data-toggle='button'>点击切换状态</button>
	</div>

在这里插入图片描述

8.选项卡的效果

	<div class="row mt-5">
		//btn-group-toggle隐藏了部分按钮选中样式
		<div class="btn-group btn-group-toggle" data-toggle="buttons">
			<label class="btn btn-secondary active">
				<input type="radio" name="options" checked>Active
			</label>
			<label class="btn btn-secondary">
				<input type="radio" name="options">Active
			</label>
			<label class="btn btn-secondary">
				<input type="radio" name="options">Active
			</label>
		</div>
	</div>

在这里插入图片描述

	<div class="row d-block mt-5">
		<button id="btn" class="btn btn-primary">点击切换状态</button>
	</div>
$().button('toggle')	切换状态，给予按钮已经启用的外观。
$().button('dispose')	销毁元素按钮的状态。

在这里插入图片描述

五、按钮组（btn-group）

使用按钮组合，可以把一系列按钮编组在一行里，并通过可选的JavaScript插件(方法)赋予按钮单选、复选等强化行为。

1.基本按钮组

	<div class="row mt-5 d-block">
		<div class="btn-group">
			<button class="btn btn-primary">Left</button>
			<button class="btn btn-primary">Center</button>
			<button class="btn btn-primary">Right</button>
		</div>
	</div>

在这里插入图片描述

2.按钮工具栏

根据需要使用样式定义，对按钮进行群组、间隔等定义，将按钮组的组合组合成为更复杂组件的按钮工具栏。

	<div class="row mt-5 btn-toolbar">
		<div class="btn-group mr-2">
			<button class="btn btn-success">1</button>
			<button class="btn btn-success">2</button>
			<button class="btn btn-success">3</button>
		</div>
		<div class="btn-group mr-2">
			<button class="btn btn-success">5</button>
			<button class="btn btn-success">6</button>
			<button class="btn btn-success">7</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-success">9</button>
		</div>
	</div>

在这里插入图片描述

	<div class="row btn-toolbar mt-5">
		<div class="btn-group mr-2">
			<button class="btn btn-secondary">1</button>
			<button class="btn btn-secondary">2</button>
			<button class="btn btn-secondary">3</button>
			<button class="btn btn-secondary">4</button>
		</div>
		<div class="input-group">
			<div class="input-group-prepend">
				<div class="input-group-text">@</div>
			</div>
			<input type="text" class="form-control" placeholder="Input group example">
		</div>
	</div>

在这里插入图片描述

3.大小规格和尺寸缩放

	<div class="row mt-5">
		<div class="btn-group btn-group-lg">
			<button class="btn btn-primary">Left</button>
			<button class="btn btn-primary">Center</button>
			<button class="btn btn-primary">Right</button>
		</div>
	</div>
	<div class="row mt-1">
		<div class="btn-group">
			<button class="btn btn-primary">Left</button>
			<button class="btn btn-primary">Center</button>
			<button class="btn btn-primary">Right</button>
		</div>
	</div>
	<div class="row mt-1 ">
		<div class="btn-group btn-group-sm">
			<button class="btn btn-primary">Left</button>
			<button class="btn btn-primary">Center</button>
			<button class="btn btn-primary">Right</button>
		</div>
	</div>

4.嵌套

将.btn-group 放在另一个 .btn-group 里，可以实现按钮组与下拉菜单的组合。

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

在这里插入图片描述

5.垂直排列

将一组按钮垂直排列，而不是水平排列，不支持分割式下拉菜单的定义。

	<div class="row mt-5">
		<div class="btn-group-vertical">
			<button class="btn btn-warning">北京</button>
			<button class="btn btn-warning">上海</button>
			<button class="btn btn-warning">广州</button>
		</div>
	</div>

	<div class="row mt-5">
		<div class="btn-group-vertical">
			<button class="btn btn-warning">北京</button>
			<button class="btn btn-warning">上海</button>
			<div class="btn-group">
				<button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button>
				<div class="dropdown-menu">
					<a href="#" class="dropdown-item">北京</a>
					<a href="#" class="dropdown-item">上海</a>
				</div>
			</div>
		</div>
	</div>