22.導航欄
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
body {
height: 4000px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<a href="#" class="navbar-brand">
<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
class="align-top"> Bootstrap
</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">入門</a></li>
<li class="nav-item"><a href="#" class="nav-link">佈局</a></li>
<li class="nav-item"><a href="#" class="nav-link">內容</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">城市</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">廣州</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">深圳</a>
</div>
</li>
</ul>
<!-- <div class="navbar-nav">
<a href="#" class="nav-item nav-link">入門</a>
<a href="#" class="nav-item nav-link">佈局</a>
<a href="#" class="nav-item nav-link">內容</a>
<a href="#" class="nav-item nav-link">組件</a>
</div> -->
</nav>
<!-- 表單 -->
<nav class="navbar bg-light mt-5">
<a href="#" class="navbar-brand">
<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
class="align-top"> Bootstrap
</a>
<form action="#" class="form-inline">
<!-- <input type="search" class="form-control mr-sm-2" placeholder="Search">
<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button> -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="search" class="form-control mr-sm-2" placeholder="Search">
</div>
<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
</form>
</nav>
<!-- 添加文本 -->
<nav class="navbar navbar-expand-lg bg-light mt-5">
<a href="#" class="navbar-brand">
<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
class="align-top"> Bootstrap
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">入門</a></li>
<li class="nav-item"><a href="#" class="nav-link">佈局</a></li>
<li class="nav-item"><a href="#" class="nav-link">內容</a></li>
</ul>
<span class="navbar-text">這是導航當中的文本</span>
</nav>
<!-- 顏色 -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark mt-5">
<a href="#" class="navbar-brand">
<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
class="align-top"> Bootstrap
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">入門</a></li>
<li class="nav-item"><a href="#" class="nav-link">佈局</a></li>
<li class="nav-item"><a href="#" class="nav-link">內容</a></li>
</ul>
<form action="#" class="form-inline">
<input type="search" class="form-control mr-sm-2" placeholder="Search">
<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
</form>
</nav>
<!-- 居中容器 -->
<div class="container">
<nav class="navbar navbar-expand-lg bg-dark navbar-dark mt-5">
<a href="#" class="navbar-brand">
<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
class="align-top"> Bootstrap
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">入門</a></li>
<li class="nav-item"><a href="#" class="nav-link">佈局</a></li>
<li class="nav-item"><a href="#" class="nav-link">內容</a></li>
</ul>
<form action="#" class="form-inline">
<input type="search" class="form-control mr-sm-2" placeholder="Search">
<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
</form>
</nav>
</div>
<!-- 定位 -->
<!-- <nav class="navbar navbar-light bg-light fixed-top">
<a href="#" class="navbar-brand">因定在頂部</a>
</nav> -->
<nav class="navbar navbar-light bg-light fixed-bottom">
<a href="#" class="navbar-brand">因定在底部</a>
</nav>
<nav class="navbar navbar-light bg-light sticky-top">
<a href="#" class="navbar-brand">粘性定位在瀏覽器的頂部</a>
</nav>
<!-- 響應式 -->
<nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<a href="#" class="navbar-brand">
<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
class="align-top"> Bootstrap
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">入門</a></li>
<li class="nav-item"><a href="#" class="nav-link">佈局</a></li>
<li class="nav-item"><a href="#" class="nav-link">內容</a></li>
</ul>
<form action="#" class="form-inline">
<input type="search" class="form-control mr-sm-2" placeholder="Search">
<button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
</form>
</div>
</nav>
<!-- 左側是logo，右側是按鈕 -->
<nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
<a href="#" class="navbar-brand">
<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
class="align-top"> Bootstrap
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">入門</a></li>
<li class="nav-item"><a href="#" class="nav-link">佈局</a></li>
<li class="nav-item"><a href="#" class="nav-link">內容</a></li>
</ul>
<form action="#" class="form-inline">
<input type="search" class="form-control mr-sm-2" placeholder="Search">
<button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
</form>
</div>
</nav>
<!-- 左側是按鈕，右側是logo -->
<nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">
<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
class="align-top"> Bootstrap
</a>
<div class="collapse navbar-collapse" id="navbar2">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">入門</a></li>
<li class="nav-item"><a href="#" class="nav-link">佈局</a></li>
<li class="nav-item"><a href="#" class="nav-link">內容</a></li>
</ul>
<form action="#" class="form-inline">
<input type="search" class="form-control mr-sm-2" placeholder="Search">
<button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
24.分頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<ul class="pagination">
<!-- <li class="page-item"><a href="#" class="page-link">上一頁</a></li> -->
<li class="page-item"><a href="#" class="page-link"><span>«</span></a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<!-- <li class="page-item"><a href="#" class="page-link">下一頁</a></li> -->
<li class="page-item"><a href="#" class="page-link"><span>»</span></a></li>
</ul>
</div>
<!-- span標籤代替a標籤，激活以及禁用狀態 -->
<div class="col">
<ul class="pagination">
<li class="page-item disabled"><span class="page-link">上一頁</span></li>
<li class="page-item"><span class="page-link">1</span></li>
<li class="page-item active"><span class="page-link">2</span></li>
<li class="page-item"><span class="page-link">3</span></li>
<li class="page-item"><span class="page-link">下一頁</span></li>
</ul>
</div>
</div>
<!-- 尺寸 -->
<div class="row mt-5">
<div class="col">
<ul class="pagination pagination-lg">
<li class="page-item"><a href="#" class="page-link">上一頁</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">下一頁</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link">上一頁</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">下一頁</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<ul class="pagination pagination-sm">
<li class="page-item"><a href="#" class="page-link">上一頁</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">下一頁</a></li>
</ul>
</div>
</div>
<!-- 對齊方式 -->
<div class="row mt-5">
<div class="col">
<ul class="pagination justify-content-end">
<li class="page-item"><a href="#" class="page-link">上一頁</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">下一頁</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
25.提示框與提示工具
提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-danger" data-toggle="popover" title="這裏放的是提示框的標題" data-content="這裏放的是提示框的內容">提示框</button>
<!-- 4個彈出方向 -->
<button class="btn btn-secondary" data-toggle="popover" title="這個提示框沒有標題，並且是在上面顯示" data-placement="top">上面顯示提示框</button>
<button class="btn btn-info" data-toggle="popover" title="這個提示框沒有標題，並且是在右側顯示" data-placement="right">右側顯示提示框</button>
<button class="btn btn-primary" data-toggle="popover" title="這個提示框沒有標題，並且是在下面顯示" data-placement="bottom">下面顯示提示框</button>
<button class="btn btn-warning" data-toggle="popover" title="這個提示框沒有標題，並且是在左側顯示" data-placement="left">左側顯示提示框</button>
<button class="btn btn-dark" data-toggle="popover" title="這個提示框當焦點失去的時候就會隱藏" data-trigger="focus">失去焦點隱藏</button>
<!-- 禁用元素彈出提示框 -->
<span class="d-inline-block" data-toggle="popover" data-trigger="hover" data-content="禁用的元素想要彈出提示框，需要在外面添加一層，把交互的功能都加到這個層上">
<button class="btn btn-primary" style="pointer-events: none;" disabled>禁用的按鈕彈出提示框</button>
</span>
</div>
</div>
<div id="box"></div>
<div class="row mt-5">
<div class="col">
<button class="btn btn-success" data-toggle="popover" title="這是<b>標題<b>" data-content="這是內容"
data-animation="true"
data-container='body'
data-delay='{ "show": 1000, "hide": 2000 }'
data-html='true'
data-placement='top'
data-template='<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
data-trigger='hover'
data-offset='120'
>data-屬性</button>
</div>
<!-- 方法與事件 -->
<div class="col">
<button class="btn btn-info" title="方法與事件" id="myPopover">方法與事件</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
//初始化提示框，必需要寫這一步
$(function(){
$('[data-toggle="popover"]').popover();
});
//方法
//$('#myPopover').popover('show'); //顯示提示框
/* setTimeout(function(){
$('#myPopover').popover('hide'); //隱藏提示框
},1000); */
/* $('#myPopover').popover('hide');
$('#myPopover').popover('toggle'); //切換提示框 */
//$('#myPopover').popover('enable'); //添加提示框功能
$('#myPopover').popover('disable'); //取消提示框功能
$('#myPopover').popover('toggleEnabled') //切換（enable與disable的功能）
//事件
$('#myPopover').on('show.bs.popover',function(){
console.log('提示框要顯示了');
});
$('#myPopover').on('shown.bs.popover',function(){
console.log('提示框已經完全顯示了');
});
$('#myPopover').on('hide.bs.popover',function(){
console.log('提示框要隱藏了');
});
$('#myPopover').on('hidden.bs.popover',function(){
console.log('提示框已經完全隱藏了');
});
$('#myPopover').on('inserted.bs.popover',function(){
console.log('提示框DOM已經插入到頁面裏了');
});
</script>
</body>
</html>
提示工具
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-secondary" data-toggle="tooltip" title="這個提示工具在上面顯示" data-placement="top">上面彈出提示工具</button>
<button class="btn btn-info" data-toggle="tooltip" title="這個提示工具在右側顯示" data-placement="right">右側彈出提示工具</button>
<button class="btn btn-primary" data-toggle="tooltip" title="這個提示工具在下面顯示" data-placement="bottom">下面彈出提示工具</button>
<button class="btn btn-warning" data-toggle="tooltip" title="這個提示工具在左側顯示" data-placement="left">左側彈出提示工具</button>
</div>
</div>
<div class="row mt-5">
<p>Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.</p>
</div>
<div id="box"></div>
<div class="row mt-5">
<!-- 自定義HTML -->
<div class="col">
<button class="btn btn-success" data-toggle="tooltip" data-html="true" title="自<em>定</em>義<b>html</b>">自定義HTML</button>
</div>
<div class="col">
<span class="d-inline-block" data-toggle="tooltip" title="禁用的元素彈出提示工具，需要在外面添加一個層，把交互的功能添加到這個層上">
<button class="btn btn-primary" style="pointer-events: none;" disabled>禁用的按鈕彈出提示工具</button>
</span>
</div>
<div class="col">
<button class="btn btn-success" data-toggle="tooltip" title="這是<em>標題</em>"
data-animation='true'
data-container='body'
data-delay='{ "show": 1000, "hide": 2000 }'
data-html="true"
>data-屬性</button>
</div>
<!-- 方法與事件 -->
<div class="col">
<button class="btn btn-info" title="方法與事件" id="myTooltip">方法與事件</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
//初始化提示框，必需要寫這一步
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
//方法
/* $('#myTooltip').tooltip('show'); //顯示提示框
setTimeout(function(){
$('#myTooltip').tooltip('hide'); //隱藏提示框
},1000); */
/* $('#myTooltip').tooltip('hide');
$('#myTooltip').tooltip('toggle'); //切換提示框 */
$('#myTooltip').tooltip('enable'); //添加提示框功能
$('#myTooltip').tooltip('disable'); //取消提示框功能
$('#myTooltip').tooltip('toggleEnabled') //切換（enable與disable的功能）
//事件
$('#myTooltip').on('show.bs.tooltip',function(){
console.log('提示工具要顯示了');
});
$('#myTooltip').on('shown.bs.tooltip',function(){
console.log('提示工具已經完全顯示了');
});
$('#myTooltip').on('hide.bs.tooltip',function(){
console.log('提示工具要隱藏了');
});
$('#myTooltip').on('hidden.bs.tooltip',function(){
console.log('提示工具已經完全隱藏了');
});
$('#myTooltip').on('inserted.bs.tooltip',function(){
console.log('提示工具DOM已經插入到頁面裏了');
});
</script>
</body>
</html>
進度條與滾動監聽
進度條
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<!-- 基礎class，變成了flex，並且給了高度1rem，背景，圓角 -->
<div class="progress">
<!--
.progress-bar 當前的進度
1、彈性盒模型。還添加了過渡效果。需要給它指定一個寬度。通過行間樣式或者預定義class都行
-->
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress mt-2">
<div class="progress-bar w-50"></div>
</div>
<!-- 通過父級添加高度後，子級也會繼承使用 -->
<div class="progress mt-2" style="height: 50px;">
<div class="progress-bar" style="width: 75%"></div>
</div>
<!-- 通過背景預定義class去修改顏色 -->
<div class="progress mt-2">
<div class="progress-bar bg-success" style="width: 90%"></div>
</div>
<div class="progress mt-2">
<div class="progress-bar bg-danger" style="width: 90%"></div>
</div>
<!-- 多個進度條 -->
<div class="progress mt-2" style="height: 50px;">
<div class="progress-bar" style="width: 15%"></div>
<div class="progress-bar bg-warning" style="width: 30%"></div>
<div class="progress-bar bg-info" style="width: 20%"></div>
</div>
<!-- 條紋進度條 -->
<div class="progress mt-5">
<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress mt-2">
<div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress mt-2">
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<div class="progress mt-2">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress mt-2">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>
<!-- 動畫條紋進度條 -->
<div class="progress mt-5">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>
<div class="progress mt-2">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 55%"></div>
</div>
</div>
</div>
</div>
</body>
</html>
滾動監聽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
.scrollBody {
position: relative;
height: 200px;
margin-top: .5rem;
overflow-y: scroll;
}
.scrollBody2{
position: relative;
height: 350px;
overflow-y: scroll;
}
.scrollBody3{
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto; /* auto也是可以的 */
}
</style>
</head>
<body>
<!--
1、滾動條組件只能用在導航與列表組當中
2、如果滾動的是body以外的元素，需要給它身上添加height與overflow-y: scroll的樣式
3、需要用到js
-->
<div class="container">
<div class="row mt-5">
<div class="col">
<!-- 在導航當中的滾動 -->
<nav class="navbar navbar-light bg-light" id="scroll1"> <!-- 這個id是要與下面的內容相對應 -->
<a href="#" class="navbar-brand">Navbar</a>
<ul class="nav nav-pills"> <!-- 膠囊式導航 -->
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<!--
滾動元素
1、它不是body元素，所以身上要添加兩條樣式，heigh與overflow-y
2、data-spy="scroll"。讓這個元素具有滾動監聽的js功能
3、data-target="#scroll1" 監聽的那個導航的id
4、data-offset="0" 計算滾動位置時的偏移量。值爲0，就表示從0的位置就開始計算
5、上面結構中每一個導航都有一個#id。那在這塊的內容區域就需要有一個標題具有一個id，與上面的值一一對應的
-->
<div class="scrollBody" data-spy="scroll" data-target="#scroll1" data-offset="0">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold
out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit
seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg
hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes
anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
consequat.</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua
cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby
sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles
non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
</p>
<h4 id="one">one</h4>
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights
adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam.
High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est
adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus
consectetur fanny pack iphone.</p>
<h4 id="two">two</h4>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats
sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer.
Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse.
Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan
tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf
voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk
brooklyn nesciunt.</p>
<h4 id="three">three</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold
out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit
seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg
hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes
anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
consequat.</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id
assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them
consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry
richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan.
Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit
minim commodo ullamco thundercats.</p>
</div>
</div>
</div>
<!-- 寫完第1個後，演示一下。按鈕點擊後內容滾動到相應位置。滾動的時候，按鈕會自動被選中。可以把下拉菜單打開，並滾動看看效果 -->
<!-- 嵌套的導航 -->
<div class="row mt-5">
<div class="col-4">
<nav class="navbar navbar-light bg-light flex-column" id="scroll2">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item2</a>
<a class="nav-link" href="#item-3">Item3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div class="scrollBody2" data-spy="scroll" data-target="#scroll2" data-offset="0">
<h4 id="item-1">Item 1</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.</p>
<h4 id="item-2">Item 2</h4>
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
<h4 id="item-3">Item 3</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.</p>
</div>
</div>
</div>
<!-- 列表組 -->
<div class="row mt-5">
<div class="col-4">
<div class="list-group" id="list-example">
<!-- .list-group-item-action，這個是提供了鏈接的顏色以及hover時的顏色 -->
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
</div>
<div class="col-8">
<div class="scrollBody3" data-spy="scroll" data-target="#list-example" data-offset="0">
<h4 id="list-item-1">Item 1</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
<h4 id="list-item-2">Item 2</h4>
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
<h4 id="list-item-3">Item 3</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
<h4 id="list-item-4">Item 4</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
//事件
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// 每當滾動到一項的時候，就會觸發
console.log(1);
})
</script>
</body>
</html>
27.旋轉加載與推送消息框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<div class="spinner-border"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-light"></div>
<div class="spinner-border text-dark"></div>
</div>
<div class="col">
<div class="spinner-grow"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-light"></div>
<div class="spinner-grow text-dark"></div>
</div>
<div class="col">
<!-- 小尺寸 -->
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
<!-- 大尺寸，通過行間樣式設置 -->
<div class="spinner-border text-info" style="width: 3rem; height: 3rem;"></div>
<div class="spinner-grow text-info" style="width: 3rem; height: 3rem;"></div>
</div>
</div>
<div class="row mt-5">
<div class="col">
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary ml-2" disabled>
<span class="spinner-border spinner-border-sm"></span>
loadding...
</button>
<button class="btn btn-primary ml-2" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
</button>
<button class="btn btn-primary ml-2" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
loadding...
</button>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="bg-danger">
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button class="close ml-2 mb-1" data-dismiss="toast">
<span>×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button class="close ml-2 mb-1" data-dismiss="toast">
<span>×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
<!-- 位置 -->
<div class="d-flex mt-5 bg-dark p-5 justify-content-center">
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button class="close ml-2 mb-1" data-dismiss="toast">
<span>×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
<!-- data-選項 -->
<div class="toast mt-5" data-autohide="true" data-animation="true" data-delay="5000">
<div class="toast-header">
<strong class="mr-auto">data-選項</strong>
<small>11 mins ago</small>
<button class="close ml-2 mb-1" data-dismiss="toast">
<span>×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<!-- 方法與事件 -->
<div class="toast mt-5" data-autohide="false" id="myToast">
<div class="toast-header">
<strong class="mr-auto">方法與事件</strong>
<small>11 mins ago</small>
<button class="close ml-2 mb-1" data-dismiss="toast">
<span>×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
//初始化推送消息框，必需要寫這一步
/* $(function () {
$('.toast').toast('show');
}); */
//方法
$(function () {
$('#myToast').toast('show');
setTimeout(function(){
$('#myToast').toast('hide');
},3000);
});
//事件
$('#myToast').on('show.bs.toast', function () {
console.log('消息框要顯示了');
});
$('#myToast').on('shown.bs.toast', function () {
console.log('消息框已經顯示了');
});
$('#myToast').on('hide.bs.toast', function () {
console.log('消息框要隱藏了');
});
$('#myToast').on('hidden.bs.toast', function () {
console.log('消息框已經隱藏了');
});
</script>
</body>
</html>
29.buttons庫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/buttons.css">
<title></title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="container">
<!-- 形狀 -->
<div class="row mt-5">
<div class="col">
<button class="button">默認形狀</button>
<button class="button button-rounded">長形圓角</button>
<button class="button button-pill">膠囊</button>
<button class="button button-square">方形</button>
<button class="button button-box">圓角</button> <!-- 方形圓角 -->
<button class="button button-circle">圓形</button>
</div>
</div>
<!-- 微小尺寸，默認顏色(灰色) -->
<div class="row mt-5">
<div class="col">
<button class="button button-tiny">Go</button>
<button class="button button-tiny button-rounded">Go</button>
<button class="button button-tiny button-pill">Go</button>
<button class="button button-tiny button-square">Go</button>
<button class="button button-tiny button-box">Go</button>
<button class="button button-tiny button-circle">Go</button>
</div>
</div>
<!-- 小尺寸，藍色背景 -->
<div class="row">
<div class="col">
<button class="button button-small button-primary">Go</button>
<button class="button button-small button-primary button-rounded">Go</button>
<button class="button button-small button-primary button-pill">Go</button>
<button class="button button-small button-primary button-square">Go</button>
<button class="button button-small button-primary button-box">Go</button>
<button class="button button-small button-primary button-circle">Go</button>
</div>
</div>
<!-- 正常尺寸，綠色背景 -->
<div class="row">
<div class="col">
<button class="button button-action">Go</button>
<button class="button button-action button-rounded">Go</button>
<button class="button button-action button-pill">Go</button>
<button class="button button-action button-square">Go</button>
<button class="button button-action button-box">Go</button>
<button class="button button-action button-circle">Go</button>
</div>
</div>
<!-- 大尺寸，黃色背景 -->
<div class="row">
<div class="col">
<button class="button button-large button-highlight">Go</button>
<button class="button button-large button-highlight button-rounded">Go</button>
<button class="button button-large button-highlight button-pill">Go</button>
<button class="button button-large button-highlight button-square">Go</button>
<button class="button button-large button-highlight button-box">Go</button>
<button class="button button-large button-highlight button-circle">Go</button>
</div>
</div>
<!-- 特大尺寸，紅色背景 -->
<div class="row">
<div class="col">
<button class="button button-jumbo button-caution">Go</button>
<button class="button button-jumbo button-caution button-rounded">Go</button>
<button class="button button-jumbo button-caution button-pill">Go</button>
<button class="button button-jumbo button-caution button-square">Go</button>
<button class="button button-jumbo button-caution button-box">Go</button>
<button class="button button-jumbo button-caution button-circle">Go</button>
</div>
</div>
<!-- 巨大尺寸，深藍色背景 -->
<div class="row">
<div class="col">
<button class="button button-giant button-royal">Go</button>
<button class="button button-giant button-royal button-rounded">Go</button>
<button class="button button-giant button-royal button-pill">Go</button>
<button class="button button-giant button-royal button-square">Go</button>
<button class="button button-giant button-royal button-box">Go</button>
<button class="button button-giant button-royal button-circle">Go</button>
</div>
</div>
<!-- 邊框按鈕 -->
<div class="row mt-5">
<div class="col">
<button class="button button-circle button-large button-border button-primary">Go</button>
<button class="button button-box button-large button-border button-primary">Go</button>
</div>
</div>
<!-- 3D 按鈕 -->
<div class="row mt-5">
<div class="col">
<button class="button button-3d">Go</button>
<button class="button button-3d button-primary button-rounded">Go</button>
<button class="button button-3d button-action button-pill">Go</button>
<button class="button button-3d button-highlight button-square">Go</button>
<button class="button button-3d button-caution button-box">Go</button>
<button class="button button-3d button-royal button-circle">Go</button>
</div>
</div>
<!-- 突起樣式的按鈕 -->
<div class="row mt-5">
<div class="col">
<button class="button button-raised">Go</button>
<button class="button button-raised button-primary button-rounded">Go</button>
<button class="button button-raised button-action button-pill">Go</button>
<button class="button button-raised button-highlight button-square">Go</button>
<button class="button button-raised button-caution button-box">Go</button>
<button class="button button-raised button-royal button-circle">Go</button>
</div>
</div>
<!-- 長陰影 -->
<div class="row mt-5">
<div class="col">
<button class="button button-longshadow-right">Go</button>
<button class="button button-longshadow-right button-primary button-rounded">Go</button>
<button class="button button-longshadow-right button-action button-pill">Go</button>
<button class="button button-longshadow-right button-highlight button-square">Go</button>
<button class="button button-longshadow-right button-caution button-box">Go</button>
<button class="button button-longshadow-right button-royal button-circle">Go</button>
</div>
</div>
<!-- 光暈效果 -->
<div class="row mt-5">
<div class="col">
<button class="button button-glow">Go</button>
<button class="button button-glow button-primary button-rounded">Go</button>
<button class="button button-glow button-action button-pill">Go</button>
<button class="button button-glow button-highlight button-square">Go</button>
<button class="button button-glow button-caution button-box">Go</button>
<button class="button button-glow button-royal button-circle">Go</button>
</div>
</div>
<!-- 帶下拉菜單的按鈕 -->
<div class="row mt-5">
<div class="col">
<div class="button-dropdown" data-buttons='dropdown'>
<button class="button button-rounded button-royal button-giant">城市</button>
<ul class="button-dropdown-list">
<li><a href="#">北京</a></li>
<li><a href="#">上海</a></li>
<li class="button-dropdown-divider"><a href="#">廣州</a></li>
</ul>
</div>
</div>
</div>
<!-- 按鈕組 -->
<div class="row mt-5">
<div class="col">
<div class="button-group">
<button class="button button-primary">首頁</button>
<button class="button button-primary">關於我們</button>
<button class="button button-primary">聯繫我們</button>
<div class="button-dropdown" data-buttons='dropdown'>
<button class="button button-primary">城市</button>
<ul class="button-dropdown-list">
<li><a href="#">北京</a></li>
<li><a href="#">上海</a></li>
<li class="button-dropdown-divider"><a href="#">廣州</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="button-group">
<button class="button button-pill button-action">首頁</button>
<button class="button button-pill button-action">關於我們</button>
<button class="button button-pill button-action">聯繫我們</button>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="button-group">
<button class="button button-raised button-highlight">首頁</button>
<button class="button button-raised button-highlight">關於我們</button>
<button class="button button-raised button-highlight">聯繫我們</button>
</div>
</div>
</div>
<!-- 堆疊按鈕 -->
<div class="row mt-5">
<div class="col">
<a href="#" class="button button-block mt-1 button-large button-rounded">Go</a>
<a href="#" class="button button-block mt-1 button-large button-rounded button-primary">Go</a>
<a href="#" class="button button-block mt-1 button-large button-rounded button-action">Go</a>
<a href="#" class="button button-block mt-1 button-large button-rounded button-highlight">Go</a>
<a href="#" class="button button-block mt-1 button-large button-rounded button-caution">Go</a>
<a href="#" class="button button-block mt-1 button-large button-rounded button-royal">Go</a>
</div>
</div>
<!-- 額外的環繞效果 -->
<div class="row mt-5">
<div class="col">
<span class="button-wrap">
<button class="button button-circle m-2"></button>
</span>
<span class="button-wrap">
<button class="button button-circle m-2 button-primary"></button>
</span>
<span class="button-wrap">
<button class="button button-pill m-2"></button>
</span>
<span class="button-wrap">
<button class="button button-pill m-2 button-primary"></button>
</span>
</div>
</div>
<!-- 表單按鈕 -->
<div class="row mt-5">
<div class="col">
<input type="submit" class="button button-pill button-primary" value="Go">
<button type="submit" class="button button-pill button-primary">Go</button>
<a href="#" class="button button-pill button-primary">Go</a>
<input type="submit" disabled class="button button-pill button-primary" value="Go">
<button type="submit" disabled class="button button-pill button-primary">Go</button>
<a href="#" class="button button-pill button-primary disabled">Go</a>
</div>
</div>
<!-- 文字樣式 -->
<div class="row mt-5">
<div class="col">
<a href="#" class="button button-primary button-uppercase">uppercase</a> <!-- 轉大寫 -->
<a href="#" class="button button-primary button-lowercase">LOWERCASE</a> <!-- 轉小寫 -->
<a href="#" class="button button-primary button-capitalize">capitalize</a> <!-- 首字母轉大小 -->
<a href="#" class="button button-primary button-small-caps">small caps</a> <!-- 轉大寫，但字號會變小 -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="js/buttons.js"></script>
</body>
</html>
30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css">
<title></title>
</head>
<body>
<!--
官網：https://www.malot.fr/bootstrap-datetimepicker/
中文翻譯：https://www.bootcss.com/p/bootstrap-datetimepicker/
-->
<div class="container">
<div class="row">
<div class="col">
<div class="form-group form-inline">
<label for="datetime">日期：</label>
<input type="text" class="form-control datetime" id="datetime">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="js/bootstrap-datetimepicker.js"></script>
<script>
; (function ($) {
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["週日", "週一", "週二", "週三", "週四", "週五", "週六", "週日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
suffix: [],
meridiem: ["上午", "下午"]
};
}(jQuery));
$('.datetime').datetimepicker({
//格式化日期
format: 'yyyy-mm-dd',
format: 'yyyy-mm-dd hh:ii',
format: 'yyyy-mm-ddThh:ii',
format: 'yyyy-mm-dd hh:ii:ss',
format: 'yyyy-mm-dd hh:ii:ssZ',
format: 'yyyy-mm-dd hh:ii:ss P',
format: 'yyyy-mm-dd H:ii:ss p',
format: 'yyyy-mm-dd',
weekStart: 1, //一週從哪一天開始，0-6（週日-週六）
/* startDate:new Date(), //能夠選擇到的開始日期
endDate:new Date(2020,1,1), //能夠選擇到的結束日期 */
daysOfWeekDisabled: [1, 3, 5], //一週裏周幾不能選擇到
daysOfWeekDisabled: [], //一週裏周幾不能選擇到
autoclose: true, //當選擇到一個日期後，是否自動關閉日期選擇器
startView: 0, //0或者'hour'：從小時視圖開始，選分
startView: 1, //1或者'day'：從天視圖開始，選小時
startView: 2, //2或者'month'：從月視圖開始，選天（這是默認的）
startView: 3, //3或者'year'：從年視圖開始，選月
startView: 4, //4或者'decade'：從十年視圖開始，選年
startView: 2, //還原
//日期時間選擇器最低能夠選擇到的日期類型
minView: 0, //0或者'hour'：能選擇到分（這是默認的）
minView: 1, //1或者'day'：能選擇到小時
minView: 2, //2或者'month'：能選擇到天
minView: 3, //3或者'year'：能選擇到月
minView: 4, //4或者'decade'：能選擇到年
minView: 0, //還原
//最大能夠選擇到的日期類型。是通過點擊頭部的日期來選擇。演示234就夠了，最大的值權限爲2了
maxView: 0, //0或者'hour'：能選擇到分
maxView: 1, //1或者'day'：能選擇到小時
maxView: 2, //2或者'month'：能選擇到天
maxView: 3, //3或者'year'：能選擇到月
maxView: 4, //4或者'decade'：能選擇到年（這是默認的）
todayBtn: true, //是否顯示回到今天的按鈕
keyboardNavigation: true, //是否可以通過鍵盤選擇日期
language: 'zh-CN', //語言選擇
minuteStep: 10, //最小分鐘間隔數，默認爲5
pickerPosition: 'bottom-right', //日期組件顯示的位置
showMeridian: true, //在日期界面上是否顯示上下午
});
//方法
/* $('.datetime').datetimepicker('remove'); //移除日期時間選擇器組件
$('.datetime').datetimepicker('show'); //顯示日期時間選擇器組件
setTimeout(function(){
$('.datetime').datetimepicker('hide'); //隱藏日期時間選擇器組件
},5000); */
$('.datetime').datetimepicker('setStartDate', '2019-10-01');//設置日期選擇器的起始日期
$('.datetime').datetimepicker('setEndDate', '2020-10-01');//設置日期選擇器的結束日期
$('.datetime').datetimepicker('setDaysOfWeekDisabled', [0, 6]);//設置不可選的星期
//事件
$('.datetime').datetimepicker()
//日期選擇器顯示事件
.on('show', function () {
console.log('日期選擇器組件顯示了');
})
//日期選擇器隱藏事件
.on('hide', function () {
console.log('日期選擇器組件隱藏了');
})
//日期變動事件
.on('changeDate', function () {
console.log('日期變動了');
})
//年份變動事件
.on('changeYear', function () {
console.log('年份變動了')
})
//月份變動事件
.on('changeMonth', function () {
console.log('月份變動了')
})
//超出選擇日期範圍事件
.on('outOfRange', function () {
console.log('你選擇的日期超出範圍了')
})
</script>
</body>
</html>
31.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<!--
https://www.layui.com/laydate/
-->
<div class="container">
<div class="row mt-5">
<div class="col">
<div class="form-group form-inline">
<label for="date">日期：</label>
<div type="text" class="form-control w-50" placeholder="請選擇日期" id="date"></div>
</div>
</div>
</div>
</div>
<script src="laydate/laydate.js"></script>
<script>
var layDemo=laydate.render({ //初始化方法
//綁定元素
elem: '#date',
//控件選擇類型
type: 'year',
type: 'month',
type: 'date',
type: 'time',
type: 'datetime',
//開啓左右面板範圍選擇
//range:'*',
//自定義格式
format: 'yyyy-MM-dd HH:mm:ss',
format: 'yyyy年MM月dd日 HH時mm分ss秒',
format: 'yyyyMMdd',
format: 'dd/MM/yyyy',
format: 'yyyy年M月',
format: 'M月d日',
format: '北京時間：HH點mm分',
format: 'yyyy年的M月某天晚上，大概H點',
format: '親，還記得yyyy年的M月d號那一天麼？',
format: 'yyyy-MM-dd',
//初始值
/* value:'2008-08-08',
value:new Date(2008,7,8),
isInitValue :false, */
//最小/大範圍內的日期時間值
/* min: '2019-1-1',
max: '2019-12-31',
min: '2019-12-11 12:30:00',
max: '2019-12-18 12:30:00',
min: -7,
max: 7,
min: '09:30:00',
max: '17:30:00', */
//自定義彈出控件的事件
trigger :'focus',
//默認顯示
show:false,
//定位方式
position:'abolute',
//層疊順序
zIndex:66666666,
//是否顯示底部欄
showBottom :true,
//工具按鈕
btns :['now', 'clear', 'confirm'],
//語言
lang:'cn',
//主題
theme :'default',
theme :'molv',
theme :'#f00',
theme :'grid',
theme :'kaivon',
// 是否顯示公曆節日
calendar:true,
//標註重要日子
mark :{
'0-5-3':'生日',
'0-9-1':'開學',
'0-0-10':'工資',
'2019-12-6':'入職',
},
//方法
//控件初始打開的回調
ready:function(date){
console.log(date);
},
//日期時間被切換後的回調
change:function(value,date,endDate){
console.log(value);
console.log(date);
console.log(endDate);
layDemo.hint(value);
},
//控件選擇完畢後的回調
done:function(value,date,endDate){
console.log(value);
console.log(date);
console.log(endDate);
},
});
console.log(layDemo);
var endDay=laydate.getEndDate();
var endDay=laydate.getEndDate(2,2035);
console.log(endDay);
</script>
</body>
</html>