pageshow不触发

转载

mob64ca14085c24 2024-10-29 06:06:29

文章标签 pageshow不触发 bootstrap 组件警告框 sed 文章分类 架构后端开发

组件

一、提示（alert）

1.颜色
2.链接颜色
3.额外附加内容
4.关闭警告

二、徽章（badge）

1.徽章样式的使用
2.会继承父元素的一些属性
3.在按钮里使用
4.胶囊徽章

三、面包屑导航（nav）
四、按钮（btn）

1.正常样式颜色
2.其它类型的按钮
3.带边框的按钮
4.大小不同的按钮
5.block类型的按钮
6.启用与停用状态的按钮
7.切换按钮的active状态
8.选项卡的效果

五、按钮组（btn-group）

1.基本按钮组
2.按钮工具栏
3.大小规格和尺寸缩放
4.嵌套
5.垂直排列

一、提示（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>

pageshow不触发_组件

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>

pageshow不触发_pageshow不触发_02

3.额外附加内容

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

pageshow不触发_pageshow不触发_03

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'>×</button>
	</div>

pageshow不触发_组件_04

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>

pageshow不触发_警告框_05

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>

pageshow不触发_sed_06

3.在按钮里使用

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

pageshow不触发_警告框_07

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>

pageshow不触发_sed_08

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

pageshow不触发_sed_09

三、面包屑导航（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>

pageshow不触发_sed_10

四、按钮（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>

pageshow不触发_bootstrap_11

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>

pageshow不触发_sed_12

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>

pageshow不触发_pageshow不触发_13

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>

pageshow不触发_bootstrap_14

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>

pageshow不触发_pageshow不触发_15

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>

pageshow不触发_bootstrap_16

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>

pageshow不触发_pageshow不触发_17

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>

pageshow不触发_pageshow不触发_18

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

pageshow不触发_pageshow不触发_19

五、按钮组（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>

pageshow不触发_bootstrap_20

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>

pageshow不触发_sed_21

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

pageshow不触发_警告框_22

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>

pageshow不触发_sed_23

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>

pageshow不触发_pageshow不触发_24