<!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">×</button>
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-info alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>信息!</strong> 请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>警告!</strong> 设置警告信息。
</div>
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>错误!</strong> 失败的操作。
</div>
<div class="alert alert-primary alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>首选!</strong> 这是一个重要的操作信息。
</div>
<div class="alert alert-secondary alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>次要的!</strong> 显示一些不重要的信息。
</div>
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>深灰色!</strong> 深灰色提示框。
</div>
<div class="alert alert-light alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</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">×</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