淘先锋技术网

首页 1 2 3 4 5 6 7

Bootstrap4 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/bootstrap4.3.1.css" />
		<title></title>
		<style>
			html,
			body {
				height: 8320px;
				background: linear-gradient(to top, #c79081 0%, #dfa579 100%);
			}
			button[type=button]{
				outline: none;
			}
		</style>
	</head>
	<body>
		<h3>导航栏</h3>
		<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
			<form class="form-inline">
				<input class="form-control" type="text" placeholder="Search">
				<button class="btn btn-info" type="button">Search</button>
			</form>
		</nav>
		<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
			<a class="navbar-brand" href="#">Logo</a>
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link" href="#">Link</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Link</a>
				</li>
			</ul>
		</nav>
		<h3>标题类</h3>
		<h1 class="display-1">Display-1</h1>
		<h1 class="display-2">Display-2</h1>
		<h1 class="display-3">Display-3</h1>
		<h1 class="display-4">Display-4</h1>
		<h3>高亮mark标签</h3>
		<p><mark>高亮</mark> 文本</p>
		<h3>dl标签</h3>
		<dl>
			<dt>Coffee</dt>
			<dd>black hot drink</dd>
			<dt>Milk</dt>
			<dd>white cold drink</dd>
		</dl>
		<h3>code标签</h3>
		<code>代码片段标签</code>
		<code><a>我是一个超链接</a></code>
		<h3>kbd标签</h3>
		Windows 10按下<kbd>Ctrl+X</kbd>显示设置菜单<br />
		Windows 10按下<kbd>Ctrl+I</kbd>显示控制面板
		<h3>pre标签</h3>
		<pre>
			我是pre标签，我 可 以 原样输出 文本，比如颜文 字
			├├├├├├░├░├├├░├├├├├├├├├├├├├├├├├├├├├░├░├├├░├░
			
			
			├├├├├├├├├░├░├░├├├░├├├├├├├░├├├├├░├├├├├├├├├├├
			
			
			├├├├├├├├├├├├├├├├├├├├██░├├├├├░├├├├├├├├├├├░├├
			
			
			├├├├├├├├├├├├├├├├├░├████░├├├├├░├├├├├░├├├├├░├
			
			
			├├├├├├├├├├├├├├├├├├██░░██├├├├├├░├├├├├├├├├░├├
			
			
			├├├├├├├├├├├├├├├├├██░░░░██├├├├├├░├├├├├├├░├├├
			
			
			░├├├├├├├├├├├├├├├░█░░░█░░█░├├░├├├├├├├├├├├├├░
			
			
			├├├├├├├├├├├├├├├░██░████░██├├├├├├├├├├├░├├├├├
			
			
			├├├├├├░├├├├├├├├░█░░█├├░█░██├├├├├├├├├├├├├├├░
			
			
			├├├├├░├├├├├░├├├██░█├├├├██░█├├├├├├├├├├├├├├├├
			
			
			├├├├├├├├├├├├├├░█░██├███├█░██├├├├░├░├├├├├├├░
			
			
			├├├├├├├├├├├├├├██░████████░██├├├├├├├├├├├├├├├
			
			
			├├├├░├├├░├├├├├█░░░██░░░██░░█░├├├░├░├├├├├├├├
			
			
			├├├░├├├├├░├░├██░░░░░░░░█░░░██├├├├├├├├░├├├├├
			
			
			├├├├├├├├├├├├├██░░░░░░░░░░░░██├├├├├├├├├├├├├░
			
			
			├├├├├░├├├├├├├█░░░░░░░░░░░░░██├├├├├├├├├├├├├├
			
			
			├├├├├├├├├├├├░█░░░░░░░░░░░░░░█░├├├├├├├├├├░├░
			
			
			├├├├├├├├├░├├░█░░░░░░░░░░░░░░█░├├├├├├├├├├├├├
			
			
			├├├├├├├├├├├├██░░░░░░░░░░░░░░██├├├├░├░├░├░├├
			
			
			├├├├├├├░├├├├██░░░░░░░░░░░░░░██├├├├├├├├├░├├├
			
			
			░├├├├├├├├├├├██░░░░░░░░░░░░░░██░├░├├├░├├├░├░
			
			
			├├├├├░├├├├├├██░░░░░░░░░░░░░░██░├├░├░├├├├├├├
			
			
			├├├├├├├├├├├├████░░░░░░░░░██████├├├├├░├░├├├├
			
			
			├├├├░█├├├░├████████████████████░├├├████░├├├
			
			
			├├├░███░├├├██████████████████░██├├██░░██░├├
			
			
			├░├██░██├├██░████████████████░░████░░░░██░├
			
			
			├├██░░░████░░█░░░░░░░░░░░░░░█░░░███░░░░░██░
			
			
			├├██░░░░██░░░██░░░░░░░░░░░░██░░░██░░░░░██░├
			
			
			░├██░░░░██░░░██░░░░░░░░░░░░██░░░██░░░░██├├├
			
			
			├├░██░░░░██░░██░░░░░░░░░░░░██░░░██░░░██├├├├
			
			
			├├░░██░░░██░░░█░░░░░░░░░░░░██░░░█░░░██├├├├├
			
			
			├├├├░██░░░█░░░██░░░░░░░░░░░█░░░██░░██░├├├├├
			
			
			├├├├├██░░░██░░██░░░░░░░░░░███░░██░░██├░├├├├
			
			
			├├├░├├██░░███████░░░░░░░░░███████░██├├├░├░├
			
			
			├├├├├├├██░░█░░├░███████████├├├├█░░█░├├├├├├├
			
			
			├├├├├├├█████├░├├███████████├├├├████├├├├├├░├
			
			
			░├├├├├░├████░├├├░█████████├├├├░████├├├├├├├├
			
			
			├├├├├├├├████├├├├├░░░░█░░░├├├├├├░██░├├├├├├├├

		</pre>
		<h3>代表指定意义的文本颜色</h3>
		<p class="text-muted">柔和的文本。</p>
		<p class="text-primary">重要的文本。</p>
		<p class="text-success">执行成功的文本。</p>
		<p class="text-info">代表一些提示信息的文本。</p>
		<p class="text-warning">警告文本。</p>
		<p class="text-danger">危险操作文本。</p>
		<p class="text-secondary">副标题。</p>
		<p class="text-dark">深灰色文字。</p>
		<h3>表格</h3>
		<p>单实线边框</p>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>Firstname</th>
					<th>Lastname</th>
					<th>Email</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>John</td>
					<td>Doe</td>
					<td>john@example.com</td>
				</tr>
				<tr>
					<td>Mary</td>
					<td>Moe</td>
					<td>mary@example.com</td>
				</tr>
				<tr>
					<td>July</td>
					<td>Dooley</td>
					<td>july@example.com</td>
				</tr>
			</tbody>
		</table>
		<p>悬停效果</p>
		<table class="table table-hover">
			<thead>
				<tr>
					<th>Firstname</th>
					<th>Lastname</th>
					<th>Email</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>John</td>
					<td>Doe</td>
					<td>john@example.com</td>
				</tr>
				<tr>
					<td>Mary</td>
					<td>Moe</td>
					<td>mary@example.com</td>
				</tr>
				<tr>
					<td>July</td>
					<td>Dooley</td>
					<td>july@example.com</td>
				</tr>
			</tbody>
		</table>
		<p>通过指定意义的颜色类设置颜色</p>
		<table class="table">
			<thead>
				<tr>
					<th>Firstname</th>
					<th>Lastname</th>
					<th>Email</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Default</td>
					<td>Defaultson</td>
					<td>def@somemail.com</td>
				</tr>
				<tr class="table-primary">
					<td>Primary</td>
					<td>Joe</td>
					<td>joe@example.com</td>
				</tr>
				<tr class="table-success">
					<td>Success</td>
					<td>Doe</td>
					<td>john@example.com</td>
				</tr>
				<tr class="table-danger">
					<td>Danger</td>
					<td>Moe</td>
					<td>mary@example.com</td>
				</tr>
				<tr class="table-info">
					<td>Info</td>
					<td>Dooley</td>
					<td>july@example.com</td>
				</tr>
				<tr class="table-warning">
					<td>Warning</td>
					<td>Refs</td>
					<td>bo@example.com</td>
				</tr>
				<tr class="table-active">
					<td>Active</td>
					<td>Activeson</td>
					<td>act@example.com</td>
				</tr>
				<tr class="table-secondary">
					<td>Secondary</td>
					<td>Secondson</td>
					<td>sec@example.com</td>
				</tr>
				<tr class="table-light">
					<td>Light</td>
					<td>Angie</td>
					<td>angie@example.com</td>
				</tr>
			</tbody>
		</table>
		<h3>提示框</h3>
		<div class="alert alert-success alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong>成功!</strong> 指定操作成功提示信息。
		</div>
		<div class="alert alert-info alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong>信息!</strong> 请注意这个信息。
		</div>
		<div class="alert alert-warning alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong>警告!</strong> 设置警告信息。
		</div>
		<div class="alert alert-danger alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong>错误!</strong> 失败的操作。
		</div>
		<div class="alert alert-primary alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong>首选!</strong> 这是一个重要的操作信息。
		</div>
		<div class="alert alert-secondary alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong>次要的!</strong> 显示一些不重要的信息。
		</div>
		<div class="alert alert-dark alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong>深灰色!</strong> 深灰色提示框。
		</div>
		<div class="alert alert-light alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong>浅灰色!</strong>浅灰色提示框。
		</div>
		<h3>按钮</h3>
		<button type="button" class="btn">默认按钮</button>
		<button type="button" class="btn btn-danger">危险按钮</button>
		<button type="button" class="btn" disabled>禁止点击的按钮</button>
		<h3>进度条</h3>
		<div class="progress">
			<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:60%"></div>
			<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:40%"></div>
		</div><br />
		<div class="progress">
			<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:60%"></div>
		</div>
		<h3>分页</h3>
		<ul class="pagination">
			<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
			<li class="page-item"><a class="page-link" href="#">1</a></li>
			<li class="page-item active"><a class="page-link" href="#">2</a></li>
			<li class="page-item"><a class="page-link" href="#">3</a></li>
			<li class="page-item"><a class="page-link" href="#">Next</a></li>
		</ul>
		<h3>列表组</h3>
		<div class="list-group">
			<a href="#" class="list-group-item active list-group-item-action">激活列表项</a>
			<a href="#" class="list-group-item list-group-item-success">成功列表项</a>
			<a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
			<a href="#" class="list-group-item list-group-item-info">信息列表项</a>
			<a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
			<a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
			<a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
			<a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
			<a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
		</div>
		<h3>手风琴</h3>
		<div id="accordion">
			<div class="card">
				<div class="card-header">
					<a class="card-link" data-toggle="collapse" href="#collapseOne">
						选项一
					</a>
				</div>
				<div id="collapseOne" class="collapse show" data-parent="#accordion">
					<div class="card-body">
						内容1
					</div>
				</div>
			</div>
			<div class="card">
				<div class="card-header">
					<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
						选项二
					</a>
				</div>
				<div id="collapseTwo" class="collapse" data-parent="#accordion">
					<div class="card-body">
						内容2
					</div>
				</div>
			</div>
			<div class="card">
				<div class="card-header">
					<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
						选项三
					</a>
				</div>
				<div id="collapseThree" class="collapse" data-parent="#accordion">
					<div class="card-body">
						内容3
					</div>
				</div>
			</div>
		</div>
		<h3>选项卡导航</h3>
		<ul class="nav nav-tabs" role="tablist">
			<li class="nav-item">
				<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
			</li>
		</ul>
		<div class="tab-content">
			<div id="home" class="container tab-pane active"><br>
				<h3>HOME</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
					magna aliqua.</p>
			</div>
			<div id="menu1" class="container tab-pane fade"><br>
				<h3>Menu 1</h3>
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</div>
			<div id="menu2" class="container tab-pane fade"><br>
				<h3>Menu 2</h3>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
					aperiam.</p>
			</div>
		</div>
		<h3>堆叠表单</h3>
		<form>
			<div class="form-group">
				<label for="email">Email:</label>
				<input type="email" class="form-control" id="email" placeholder="Enter email">
			</div>
			<div class="form-group">
				<label for="pwd">Password:</label>
				<input type="password" class="form-control" id="pwd" placeholder="Enter password">
			</div>
			<div class="form-check">
				<label class="form-check-label">
					<input class="form-check-input" type="checkbox"> Remember me
				</label>
			</div>
			<button type="submit" class="btn btn-primary">Submit</button>
		</form>
		<h3>输入框组</h3>
		<div class="input-group mb-3">
			<input type="text" class="form-control" placeholder="Something clever..">
			<div class="input-group-append">
				<button class="btn btn-primary" type="button">OK</button>
				<button class="btn btn-danger" type="button">Cancel</button>
			</div>
		</div>
		<h3>自定义表单元素</h3>
		<div class="custom-control custom-checkbox mb-3">
			<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
			<label class="custom-control-label" for="customCheck">复选框</label>
		</div>
		<div class="custom-control custom-radio custom-control-inline">
			<input type="radio" class="custom-control-input" id="customRadio1" name="example2">
			<label class="custom-control-label" for="customRadio1">同行单选框 1</label>
		</div>
		<div class="custom-control custom-radio custom-control-inline">
			<input type="radio" class="custom-control-input" id="customRadio2" name="example2">
			<label class="custom-control-label" for="customRadio2">同行单选框 2</label>
		</div>
		<input type="range" class="custom-range" id="customRange" name="points1">
		<div class="custom-file mb-3">
			<input type="file" class="custom-file-input" id="customFile" name="filename">
			<label class="custom-file-label" for="customFile">选择文件</label>
		</div>
		<h3>轮播</h3>
		<div id="demo" class="carousel slide" data-ride="carousel">
			<ul class="carousel-indicators">
				<li data-target="#demo" data-slide-to="0" class="active"></li>
				<li data-target="#demo" data-slide-to="1"></li>
				<li data-target="#demo" data-slide-to="2"></li>
			</ul>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
					<div class="carousel-caption">
						<h3>第一张图片描述标题</h3>
						<p>描述文字!</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
					<div class="carousel-caption">
						<h3>第二张图片描述标题</h3>
						<p>描述文字!</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
					<div class="carousel-caption">
						<h3>第三张图片描述标题</h3>
						<p>描述文字!</p>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#demo" data-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a class="carousel-control-next" href="#demo" data-slide="next">
				<span class="carousel-control-next-icon"></span>
			</a>
		</div>
		<h3>模态框</h3>
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
			打开模态框
		</button>
		<div class="modal fade" id="myModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">模态框头部</h4>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						模态框内容..
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					</div>

				</div>
			</div>
		</div>
		<h3>悬浮提示</h3>
		<a href="#" data-toggle="tooltip" data-placement="top" title="我是提示内容!">鼠标移动到我这</a>
		<a href="#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
		<a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>
		<a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>
		<h3>滚动监听</h3>
		<a class="card-link" href="scrollListener.html">查看</a>
		<h3>排列</h3>
		<div class="d-flex justify-content-start bg-secondary mb-3">
			<div class="p-2 bg-info">Flex item 1</div>
			<div class="p-2 bg-warning">Flex item 2</div>
			<div class="p-2 bg-primary">Flex item 3</div>
		</div>
		<div class="d-flex justify-content-end bg-secondary mb-3">
			<div class="p-2 bg-info">Flex item 1</div>
			<div class="p-2 bg-warning">Flex item 2</div>
			<div class="p-2 bg-primary">Flex item 3</div>
		</div>
		<div class="d-flex justify-content-center bg-secondary mb-3">
			<div class="p-2 bg-info">Flex item 1</div>
			<div class="p-2 bg-warning">Flex item 2</div>
			<div class="p-2 bg-primary">Flex item 3</div>
		</div>
		<div class="d-flex justify-content-between bg-secondary mb-3">
			<div class="p-2 bg-info">Flex item 1</div>
			<div class="p-2 bg-warning">Flex item 2</div>
			<div class="p-2 bg-primary">Flex item 3</div>
		</div>
		<div class="d-flex justify-content-around bg-secondary mb-3">
			<div class="p-2 bg-info">Flex item 1</div>
			<div class="p-2 bg-warning">Flex item 2</div>
			<div class="p-2 bg-primary">Flex item 3</div>
		</div>

		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/bootstrap4.3.1.js"></script>
		<script src="js/popper1.15.0.js"></script>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<style>
			body {
				position: relative;
			}

			ul.nav-pills {
				top: 20px;
				position: fixed;
			}

			div.col-8 div {
				height: 500px;
			}
		</style>
	</head>
	<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">

		<div class="container-fluid">
			<div class="row">
				<nav class="col-sm-3 col-4 bg-dark" id="myScrollspy">
					<ul class="nav nav-pills flex-column">
						<li class="nav-item">
							<a class="nav-link active" href="#section1">Section 1</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#section2">Section 2</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#section3">Section 3</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#section41">Link 1</a>
								<a class="dropdown-item" href="#section42">Link 2</a>
							</div>
						</li>
					</ul>
				</nav>
				<div class="col-sm-9 col-8">
					<div id="section1" class="bg-success">
						<h1>Section 1</h1>
						<p>Try to scroll this section and look at the navigation list while scrolling!</p>
					</div>
					<div id="section2" class="bg-warning">
						<h1>Section 2</h1>
						<p>Try to scroll this section and look at the navigation list while scrolling!</p>
					</div>
					<div id="section3" class="bg-secondary">
						<h1>Section 3</h1>
						<p>Try to scroll this section and look at the navigation list while scrolling!</p>
					</div>
					<div id="section41" class="bg-danger">
						<h1>Section 4-1</h1>
						<p>Try to scroll this section and look at the navigation list while scrolling!</p>
					</div>
					<div id="section42" class="bg-info">
						<h1>Section 4-2</h1>
						<p>Try to scroll this section and look at the navigation list while scrolling!</p>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>

在线运行源代码：https://gitnlf9527.github.io/Demo/bootstrap4_Learning.html