BootStrap是一款优秀的前端框架，使前端开发更加快捷、方便。
官网下载https://getbootstrap.com/
下载Compiled CSS and JS版本，此版本是编译压缩过的，适用于生产环境。
解压后将bootstrap.min.css、bootstrap.min.js复制到项目文件中，
随后网上下载jquery-3.2.1.slim.min.js和popper-1.12.9.min.js一并复制到项目文件中。下载链接 提取码：elg8
将四个文件引入到页面中。如下：
1 <link rel="stylesheet" href="/css/bootstrap.min.css"> 2 <script src="/others/jquery-3.2.1.slim.min.js"></script> 3 <script src="/others/popper-1.12.9.min.js"></script> 4 <script src="/js/bootstrap.min.js"></script>
以下是Demo，供查阅。
1. alert
1 <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show"> 2 欢迎来到这里啊 3 <button class="close" data-dismiss="alert">×</button> 4 </div>
1 <div class="container"> 2 3 <div class="container"> 4 <div class="alert alert-primary">This is a primary alert.</div> 5 <div class="alert alert-secondary">This is a secondary alert.</div> 6 <div class="alert alert-success">This is a success alert.</div> 7 <div class="alert alert-danger">This is a danger alert.</div> 8 <div class="alert alert-info">This is a info alert.</div> 9 <div class="alert alert-warning">This is a warning alert.</div> 10 <div class="alert alert-success"> 11 <h4 class="alert-heading">Well Done!</h4> 12 <p>Believe yourself!</p> 13 <hr> 14 <p class="mb-0">Your are the best for ever!</p> 15 </div> 16 </div> 17 18 <div class="alert alert-danger alert-dismissible fade show"> 19 <strong>Login Failed</strong> 20 <button type="button" class="close" data-dismiss="alert">×</button> 21 </div> 22 </div>
2. anchor
1 <div id="a"> 2 <p>你来到了a处</p> 3 </div> 4 <div id="b"> 5 <p>你来到了b处</p> 6 </div> 7 <div class="container"> 8 <ul> 9 <li><a href="#a">去a处</a></li> 10 <li><a href="#b">去b处</a></li> 11 </ul> 12 </div>
3. badge
1 <div class="container"> 2 <span class="badge badge-pill badge-primary">primary</span> 3 <span class="badge badge-secondary">secondary</span> 4 <span class="badge badge-danger">danger</span> 5 <span class="badge badge-success">success</span> 6 <span class="badge badge-warning">warning</span> 7 <span class="badge badge-light">light</span> 8 <span class="badge badge-dark">dark</span> 9 </div> 10 <div class="container"> 11 <h1>新品上架<span class="badge badge-pill badge-secondary">New</span></h1> 12 <h2>新品上架<span class="badge badge-secondary">New</span></h2> 13 <h3>新品上架<span class="badge badge-secondary">New</span></h3> 14 <h4>新品上架<span class="badge badge-secondary">New</span></h4> 15 <h5>新品上架<span class="badge badge-secondary">New</span></h5> 16 <h6>新品上架<span class="badge badge-secondary">New</span></h6> 17 </div>
4. border
1 <style> 2 span { 3 display: inline-block; 4 width: 75px; 5 height: 75px; 6 margin: 5px; 7 border: 1px solid; 8 background: #F5F5F5; 9 } 10 11 img { 12 width: 75px; 13 height: 75px; 14 margin: 5px; 15 } 16 <style>
1 <div class="container"> 2 <span class="border"></span> 3 <span class="border-top"></span> 4 <span class="border-left"></span> 5 <span class="border-right"></span> 6 <span class="border-bottom"></span> 7 <hr> 8 <span class="border-0"></span> 9 <span class="border-top-0"></span> 10 <span class="border-left-0"></span> 11 <span class="border-right-0"></span> 12 <span class="border-bottom-0"></span> 13 <hr> 14 <span class="border border-primary rounded"></span> 15 <span class="border border-secondary"></span> 16 <span class="border border-success"></span> 17 <span class="border border-warning"></span> 18 <span class="border border-info"></span> 19 <span class="border border-danger"></span> 20 <span class="border border-light"></span> 21 <span class="border border-dark"></span> 22 </div>
5. breadcrumb
1 <div class="container"> 2 <ol class="breadcrumb"> 3 <li class="breadcrumb-item"><a href="">首页</a></li> 4 <li class="breadcrumb-item"><a href="">数码</a></li> 5 <li class="breadcrumb-item active">手机</li> 6 </ol> 7 </div>
6. button_menu
1 <div class="container"> 2 <div class="dropdown pull-right"> 3 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 4 下拉菜单 5 <span class="caret"></span> 6 </button> 7 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> 8 <li role="presentation" class="dropdown-header">大写</li> 9 <li><a href="#" role="menuitem">一</a></li> 10 <li><a href="#" role="menuitem">二</a></li> 11 <li><a href="#" role="menuitem">三</a></li> 12 <li><a href="#" role="menuitem">四</a></li> 13 <li role="presentation" class="divider"></li> 14 <li><a href="#" role="menuitem">你</a></li> 15 <li class="disabled"><a href="#" role="menuitem">好</a></li> 16 <li><a href="#" role="menuitem">啊</a></li> 17 <li><a href="#" role="menuitem">蛤</a></li> 18 </ul> 19 </div> 20 </div> 21 <div class="container"> 22 <div class="btn-group"> 23 <button type="button" class="btn btn-info">分列式下拉菜单</button> 24 <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> 25 <span class="caret"></span> 26 </button> 27 <ul class="dropdown-menu" role="menu"> 28 <li><a href="#">1</a></li> 29 <li><a href="#">2</a></li> 30 <li><a href="#">3</a></li> 31 <li><a href="#">4</a></li> 32 </ul> 33 </div> 34 </div>
7. button
1 <div class="container"> 2 <button>默认按钮</button> 3 <button class="btn">无色按钮</button> 4 <button class="btn btn-primary">主题色按钮</button> 5 <button class="btn btn-danger btn-sm">警告小按钮</button> 6 <button class="btn btn-success btn-lg">成功大按钮</button> 7 </div> 8 <div class="container"><br> 9 <button class="btn btn-primary" data-toggle="tooltip" data-placement="right" data-offset="10,10" 10 data-delay='{"show":500,"hide":3000}' data-animation="true" data-html="true" 11 title="<em>标题</em>内容">button</button> 12 </div> 13 <hr> 14 <div class="container"> 15 <button class="btn btn-primary" data-toggle="tooltip" title="内容" id="myTooltip">test</button> 16 </div> 17 <button id="btn1">show</button> 18 <button id="btn2">hide</button> 19 <button id="btn3">toggle</button> 20 <hr> 21 <div class="container"><br> 22 <button class="btn btn-primary" data-toggle="popover" style="height:100px;" data-offset="100" 23 data-animation="true" title="内容">button</button> 24 </div>
1 <script> 2 $('[data-toggle="tooltip"]').tooltip() 3 $('[data-toggle="popover"]').popover() 4 var myTooltip = $('#myTooltip'); 5 $('#btn1').click(function () { 6 myTooltip.tooltip('show') 7 }) 8 $('#btn2').click(function () { 9 myTooltip.tooltip('hide') 10 }) 11 $('#btn3').click(function () { 12 myTooltip.tooltip('toggle') 13 }) 14 </script>
8. card
1 <div class="container"> 2 <div class="card" style="20rem;"> 3 <img src="./bootstrap-4.0.0-dist/images/5.png" alt="" class="card-img-bottom"> 4 <div class="card-body"> 5 <h5 class="card-title">标题</h5> 6 <h6 class="card-subtitle mb-2 text-muted">子标题</h6> 7 <p class="card-text">主体主体主体主体主体主体主体主体主体主体</p> 8 <a href="" class="card-link">了解更多</a> 9 <a href="" class="card-link">立即下载</a> 10 </div> 11 </div> 12 </div> 13 <hr> 14 <div class="container"> 15 <div class="card" style="20rem;"> 16 <img src="./bootstrap-4.0.0-dist/images/5.png" alt="" class="card-img-bottom rounded"> 17 <div class="card-img-overlay"> 18 <h5 class="card-title">标题</h5> 19 <h6 class="card-subtitle mb-2 text-muted">子标题</h6> 20 <p class="card-text">主体主体主体主体主体主体主体主体主体主体</p> 21 <a href="" class="card-link">了解更多</a> 22 <a href="" class="card-link">立即下载</a> 23 </div> 24 </div> 25 </div>
9. carousel
1 <div class="container"> 2 <div class="carousel slide carousel-fade" data-ride="carousel" data-interval="3000" data-wrap="true" id="myCarousel"> 3 <ol class="carousel-indicators"> 4 <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 5 <li data-target="#myCarousel" data-slide-to="1"></li> 6 <li data-target="#myCarousel" data-slide-to="2"></li> 7 </ol> 8 <div class="carousel-inner"> 9 <div class="carousel-item active"> 10 <img src="bootstrap-4.0.0-dist/images/1.jpg" alt="" class="d-block w-100"> 11 <div class="carousel-caption d-none d-sm-block"> 12 <h5>第一张图</h5> 13 <p>第一张图描述</p> 14 </div> 15 </div> 16 <div class="carousel-item"> 17 <img src="bootstrap-4.0.0-dist/images/2.jpg" alt="" class="d-block w-100"> 18 <div class="carousel-caption d-none d-sm-block"> 19 <h5>第二张图</h5> 20 <p>第二张图描述</p> 21 </div> 22 </div> 23 <div class="carousel-item"> 24 <img src="bootstrap-4.0.0-dist/images/3.jpg" alt="" class="d-block w-100"> 25 <div class="carousel-caption d-none d-sm-block"> 26 <h5>第三张图</h5> 27 <p>第三张图描述</p> 28 </div> 29 </div> 30 <a class="carousel-control-prev" href="#myCarousel" data-slide="prev"> 31 <span class="carousel-control-prev-icon"></span> 32 </a> 33 <a class="carousel-control-next" href="#myCarousel" data-slide="next"> 34 <span class="carousel-control-next-icon"></span> 35 </a> 36 </div> 37 </div> 38 </div>
10. code
1 <div class="container"> 2 <code>String str; 3 <!--代码段--> 4 for(int i=0;i<10;i++){ 5 System.out.println("Hello World"); 6 } 7 </code><br> 8 键入<kbd>quit</kbd>退出程序<br> 9 <pre><!--定义预格式化文本--> 10 Sample here 11 </pre> 12 <var>x</var> = <var>y</var>+<var>z</var> 13 <!--变量--> 14 <samp>output</samp> 15 <!--程序输出--> 16 </div>
11. collapseBox
1 <div class="container"> 2 <p> 3 <a href="#myCollapse" class="btn btn-primary" data-toggle="collapse">btn1</a> 4 </p> 5 <div class="collapse" id="myCollapse"> 6 <div class="card card-body"> 7 aaaaaa 8 </div> 9 </div> 10 </div> 11 <div class="container"> 12 <div id="collapseBox"> 13 <div class="card"> 14 <div class="card-header"> 15 <h5 class="mb-0"> 16 <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">选项一</button> 17 </h5> 18 </div> 19 <div class="collapse show" id="collapseOne" data-parent="#collapseBox"> 20 <div class="card-body"> 21 aaaaa 22 </div> 23 </div> 24 </div> 25 <div class="card"> 26 <div class="card-header"> 27 <h5 class="mb-0"> 28 <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo">选项二</button> 29 </h5> 30 </div> 31 <div class="collapse" id="collapseTwo" data-parent="#collapseBox"> 32 <div class="card-body"> 33 bbbbbb 34 </div> 35 </div> 36 </div> 37 <div class="card"> 38 <div class="card-header"> 39 <h5 class="mb-0"> 40 <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree">选项三</button> 41 </h5> 42 </div> 43 <div class="collapse" id="collapseThree" data-parent="#collapseBox"> 44 <div class="card-body"> 45 cccccc 46 </div> 47 </div> 48 </div> 49 </div> 50 </div>
12. container
1 <div class="container"> 2 <div style="height:200px;400px;background-color:gray"> 3 <!--尺寸width height -25 -50 -75 -100--> 4 <div class="w-25 h-75 bg-primary">宽占父容器的25%，高占父容器的75%</div> 5 </div> 6 </p> 7 <div class="pt-5 pl-2" style="200px;height:200px;background: red;"> 8 <!--内外边距[p|m][location] -[size] p:padding m:margin location:l/r/t/b x/y x:lr y:rb size:0/1/2/3/4/5/auto--> 9 <div class="bg-primary w-50 h-50">padding pt-5 pl-2与margin</div> 10 </div> 11 </div>
13. dropdown
1 <div class="container"> 2 <div class="dropdown"> 3 <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button> 4 <div class="dropdown-menu"> 5 <a href="" class="dropdown-item">1</a> 6 <a href="" class="dropdown-item">2</a> 7 <a href="" class="dropdown-item">3</a> 8 </div> 9 </div> 10 </div>
14. font
1 <div class="container"> 2 <!--字体--> 3 <div class="bg-light text-black">Strap</div> 4 <div class="text-center bg-info font-weight-bold">Strap</div> 5 <div class="text-left bg-light">Strap</div> 6 <div class="text-right bg-light text-black">strap</div> 7 <div class="text-lowercase">Strap</div> 8 <div class="text-uppercase">strap</div> 9 <div class="text-capitalize">strap</div> 10 </div> 11 <div class="container"> 12 <p class="text-primary">text-primary</p> 13 <p class="text-secondary">text-secondary</p> 14 <p class="text-success">text-success</p> 15 <p class="text-danger">text-danger</p> 16 <p class="text-warning">text-warning</p> 17 <p class="text-info">text-info</p> 18 <p class="text-light bg-dark">text-light</p> 19 <p class="text-dark">text-dark</p> 20 <p class="text-muted">text-muted</p> 21 <p class="text-white bg-dark">text-white</p> 22 </div> 23 <div class="container"> 24 <p class="text-left">left</p> 25 <p class="text-right">right</p> 26 <p class="text-justify">You are the best!You are the best!You are the best!You are the best!You are the 27 best!You are the best!You are the best!You are the best!You are the best!You are the best!You are the 28 best!</p> 29 <p>You are the best!You are the best!You are the best!You are the best!You are the best!You are the best!You 30 are the best!You are the best!You are the best!You are the best!You are the best!You are the best!</p> 31 <div class="border border-success text-nowrap" style="8rem"> 32 This text should overflow the parent. 33 </div> 34 <div class="border border-success text-truncate" style="8rem"> 35 This text should overflow the parent. 36 </div> 37 </div>
15. image
1 <style> 2 img { 3 width: 75px; 4 height: 75px; 5 margin: 5px; 6 } 7 </style>
1 <div class="container"> 2 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="rounded"> 3 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="rounded-top"> 4 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="rounded-bottom"> 5 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="rounded-left"> 6 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="rounded-right"> 7 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="rounded-circle"> 8 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="rounded-pill" style="140px;border-radius: 5px;"> 9 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="rounded-0" style="border-radius: 5px;"> 10 <hr> 11 <div style="border:1px solid #F00;" class="clearfix"> 12 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="float-xl-left"> 13 <img src="bootstrap-4.0.0-dist/images/4.jpg" alt="" class="float-xl-right"> 14 </div> 15 </div>
16. input
1 <div class="container"> 2 <form role="form" class="form-inline"> 3 <div class="form-group"> 4 <label class="sr-only">邮箱</label> 5 <input type="email" class="form-control" placeholder="请输入邮箱地址"> 6 <label>选择文件</label> 7 <input type="file"> 8 <p class="help-block">选择文件啊</p> 9 </div> 10 </form> 11 </div> 12 <div class="container"> 13 <form class="form-horizontal" role="form"> 14 <div class="form-group"> 15 <label class="col-xl-2 control-label">邮箱</label> 16 <div class="col-xl-10"> 17 <input type="email" class="form-control" placeholder="请输入邮箱地址"> 18 </div> 19 </div> 20 <div class="form-group"> 21 <label class="col-xl-2 control-label">密码</label> 22 <div class="col-xl-10"> 23 <input type="password" class="form-control" placeholder="请输入密码"> 24 </div> 25 </div> 26 <div class="form-group"> 27 <div class="col-xl-offset-2 col-xl-10"> 28 <div class="checkbox"> 29 <input type="checkbox">记住密码 30 </div> 31 </div> 32 </div> 33 <div class="form-group"> 34 <div class="col-xl-offset-2 col-xl-10"> 35 <button type="submit" class="btn">登录</button> 36 </div> 37 </div> 38 </form> 39 40 <form role="form"> 41 <input type="text" class="form-control"> 42 <textarea class="form-control" rows="5">hello</textarea> 43 <div class="checkbox"> 44 <label> 45 <input type="checkbox">橘子 46 </label> 47 </div> 48 <div class="checkbox"> 49 <label> 50 <input type="checkbox">苹果 51 </label> 52 </div> 53 <div class="radio"> 54 <input type="radio" name="options" checked>男</input> 55 </div> 56 <div class="radio"> 57 <input type="radio" name="options">女</input> 58 </div> 59 <select class="form-control"> 60 <option>1</option> 61 <option>2</option> 62 <option>3</option> 63 <option>4</option> 64 <option>5</option> 65 </select> 66 </form> 67 </div> 68 69 <div class="container"> 70 <div class="input-group"> 71 <span class="input-group-addon">@</span> 72 <input type="text" class="form-control" placeholder="xxxxxxxxx"> 73 </div> 74 <div class="input-group"> 75 <input class="text" class="form-control"> 76 <span class="input-group-addon">.00</span> 77 </div> 78 <div class="input-group"> 79 <span class="input-group-addon">$</span> 80 <input type="text" class="form-control"> 81 <span class="input-group-addon">.00</span> 82 </div> 83 <div class="row"> 84 <div class="col-lg-6"> 85 <div class="input-group"> 86 <span class="input-group-btn"> 87 <button class="btn btn-default" type="button">Go</button> 88 </span> 89 <input type="text" class="form-control"> 90 </div> 91 </div> 92 </div> 93 <div class="row"> 94 <div class="col-lg-6"> 95 <div class="input-group"> 96 <div class="input-group-btn"> 97 <button type="button" class="btn btn-default dropdown-toggle">Action<span class="caret"></span></button> 98 <ul class="dropdown-menu" role="menu"> 99 <li><a href="#">Hello</a></li> 100 <li><a href="#">Hello</a></li> 101 <li><a href="#">Hello</a></li> 102 <li><a href="#">Hello</a></li> 103 </ul> 104 </div> 105 <input type="text" class="form-control"> 106 </div> 107 </div> 108 </div> 109 </div>
17. jumbotron
1 <div class="container"> 2 <div class="jumbotron"> 3 <h1 class="display-3">BootStrap4</h1> 4 <p class="lead">BootStrap是一种前端框架</p> 5 <hr class="my-4"> 6 <p>快速开发响应式页面</p> 7 <p class="lead"> 8 <a href="" class="btn btn-primary btn-lg">了解更多</a> 9 </p> 10 </div> 11 </div> 12 <div class="jumbotron"> 13 <div class="container"> 14 <h1 class="display-3">BootStrap4</h1> 15 <p class="lead">BootStrap是一种前端框架</p> 16 <hr class="my-4"> 17 <p>快速开发响应式页面</p> 18 <p class="lead"> 19 <a href="" class="btn btn-primary btn-lg">了解更多</a> 20 </p> 21 </div> 22 </div>
18. list_group
1 <div class="container"> 2 <ul class="list-group"> 3 <li class="list-group-item list-group-item-action active">111</li> 4 <li class="list-group-item list-group-item-action disabled">222</li> 5 <li class="list-group-item list-group-item-action">333</li> 6 </ul> 7 <hr> 8 <div class="list-group list-group-flush"> 9 <button class="list-group-item list-group-item-action active">111</button> 10 <button class="list-group-item list-group-item-action" disabled>222</button> 11 <button class="list-group-item list-group-item-action">333</button> 12 </div> 13 </div> 14 15 <div class="container"> 16 <ul class="list-group"> 17 <li class="list-group-item d-flex justify-content-between align-items-center"> 18 消息 19 <span class="badge badge-primary badge-pill">2</span> 20 </li> 21 <li class="list-group-item d-flex justify-content-between align-items-center"> 22 与我相关 23 <span class="badge badge-primary badge-pill">3</span> 24 </li> 25 <li class="list-group-item d-flex justify-content-between align-items-center"> 26 通知 27 <span class="badge badge-primary badge-pill">5</span> 28 </li> 29 </ul> 30 </div> 31 32 <div class="container"> 33 <div class="row"> 34 <div class="col-3"> 35 <div class="list-group"> 36 <a href="#home" class="list-group-item list-group-item-action active" data-toggle="list">Home</a> 37 <a href="#profile" class="list-group-item list-group-item-action" data-toggle="list">Profile</a> 38 <a href="#messages" class="list-group-item list-group-item-action" data-toggle="list">Messages</a> 39 <a href="#settings" class="list-group-item list-group-item-action" data-toggle="list">Settings</a> 40 </div> 41 </div> 42 <div class="col-9"> 43 <div class="tab-content"> 44 <div class="tab-pane fade show active" id="home">my home</div> 45 <div class="tab-pane fade" id="profile">my profile</div> 46 <div class="tab-pane fade" id="messages">my messages</div> 47 <div class="tab-pane fade" id="settings">my settings</div> 48 </div> 49 </div> 50 </div> 51 </div>
19. media
1 <div class="container"> 2 <div class="media"> 3 <a href="" class="pr-3"> 4 <img src="bootstrap-4.0.0-dist/images/4.jpg" class="mr-3 align-self-center" width="100px"> 5 </a> 6 <div class="media-body"> 7 <h5 class="mt-0">赖美云1</h5> 8 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 9 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 10 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 11 <div class="media mt-5"> 12 <a href="" class="pr-3"> 13 <img src="bootstrap-4.0.0-dist/images/4.jpg" width="100px"> 14 </a> 15 <div class="media-body"> 16 <h5 class="mt-0">赖美云2</h5> 17 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 18 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 19 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 花栗鼠大王 赖小七 20 </div> 21 </div> 22 </div> 23 </div> 24 </div>
20. modal
1 <div class="container"> 2 <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button> 3 </div> 4 5 <div class="modal fade" id="myModal" tabindex="-1" data-backdrop="static" keyword="true"> 6 <div class="modal-dialog modal-dialog-centered"> 7 <div class="modal-content"> 8 <div class="modal-header"> 9 <h5 class="modal-title">标题</h5> 10 <button class="close" data-dismiss="modal">×</button> 11 </div> 12 <div class="modal-body"> 13 <h5>Tooltip工具提示</h5> 14 <p><a href="" data-toggle="tooltip" title="标题内容">Tooltip</a>工具提示</p> 15 <hr> 16 <h5>Popover弹出提示框</h5> 17 <p>这个是<button class="btn btn-primary" data-toggle="popover" title="标题" data-content="内容">Popover</button></p> 18 </div> 19 <div class="modal-footer"> 20 <button class="btn btn-primary">确定</button> 21 <button class="btn btn-secondary" data-dismiss="modal">取消</button> 22 </div> 23 </div> 24 </div> 25 </div>
1 <script> 2 $('[data-toggle="tooltip"]').tooltip() 3 $('[data-toggle="popover"]').popover() 4 </script>
21. navbar
1 <section> 2 <h2 class="text-center">导航条</h2> 3 <nav class="navbar navbar-expand navbar-light"> 4 <a href="#" class="navbar-brand">导航条</a> 5 <ul class="navbar-nav"> 6 <li class="navbar-item"><a href="#" class="nav-link">导航项1</a></li> 7 <li class="navbar-item"><a href="#" class="nav-link">导航项2</a></li> 8 <li class="navbar-item"><a href="#" class="nav-link">导航项3</a></li> 9 </ul> 10 </nav> 11 </section> 12 13 <section> 14 <h2 class="text-center">汉堡菜单</h2> 15 <div class="container"> 16 <nav class="navbar navbar-expand-sm navbar-light"> 17 <a href="#" class="navbar-brand">汉堡菜单</a> 18 <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> 19 <span class="navbar-toggler-icon"></span> 20 </button> 21 <div id="menu" class="collapse navbar-collapse"> 22 <ul class="navbar-nav"> 23 <li class="navbar-item"><a href="#" class="nav-link">导航项1</a></li> 24 <li class="navbar-item"><a href="#" class="nav-link">导航项2</a></li> 25 <li class="navbar-item"><a href="#" class="nav-link">导航项3</a></li> 26 </ul> 27 </div> 28 </nav> 29 </div> 30 </section> 31 32 <div class="container"> 33 <ul class="nav justify-content-center"> 34 <li class="nav-item"> 35 <a href="" class="nav-link active">选项一</a> 36 </li> 37 <li class="nav-item"> 38 <a href="" class="nav-link">选项二</a> 39 </li> 40 <li class="nav-item"> 41 <a href="" class="nav-link">选项三</a> 42 </li> 43 <li class="nav-item"> 44 <a href="" class="nav-link disabled">选项四</a> 45 </li> 46 </ul> 47 <hr> 48 <nav class="nav justify-content-end"> 49 <a href="" class="nav-link active">选项一</a> 50 <a href="" class="nav-link">选项二</a> 51 <a href="" class="nav-link">选项三</a> 52 <a href="" class="nav-link disabled">选项四</a> 53 </nav> 54 <hr> 55 <nav class="nav flex-column"> 56 <a href="" class="nav-link active">选项一</a> 57 <a href="" class="nav-link">选项二</a> 58 <a href="" class="nav-link">选项三</a> 59 <a href="" class="nav-link disabled">选项四</a> 60 </nav> 61 <hr> 62 <nav class="nav nav-tabs"> 63 <a href="" class="nav-item nav-link active">选项一</a> 64 <a href="" class="nav-item nav-link">选项二</a> 65 <a href="" class="nav-item nav-link">选项三</a> 66 <a href="" class="nav-item nav-link disabled">选项四</a> 67 </nav> 68 <hr> 69 <nav class="nav nav-pills nav-fill"> 70 <a href="" class="nav-item nav-link active">选项一选项一选项一</a> 71 <a href="" class="nav-item nav-link">选项二</a> 72 <a href="" class="nav-item nav-link">选项三</a> 73 <a href="" class="nav-item nav-link disabled">选项四</a> 74 </nav> 75 <hr> 76 <nav class="nav nav-pills nav-justified"> 77 <a href="" class="nav-item nav-link active">选项一选项一选项一</a> 78 <a href="" class="nav-item nav-link">选项二</a> 79 <a href="" class="nav-item nav-link">选项三</a> 80 <a href="" class="nav-item nav-link disabled">选项四</a> 81 </nav> 82 <hr> 83 <nav class="nav nav-pills flex-column flex-sm-row"> 84 <a href="" class="nav-item nav-link flex-sm-fill text-sm-center active">选项一选项一选项一</a> 85 <a href="" class="nav-item nav-link flex-sm-fill text-sm-center">选项二</a> 86 <a href="" class="nav-item nav-link flex-sm-fill text-sm-center">选项三</a> 87 <a href="" class="nav-item nav-link flex-sm-fill text-sm-center disabled">选项四</a> 88 </nav> 89 <hr> 90 <ul class="nav nav-tabs"> 91 <li class="nav-item"> 92 <a href="" class="nav-link active">选项一</a> 93 </li> 94 <li class="nav-item"> 95 <a href="" class="nav-link">选项二</a> 96 </li> 97 <li class="nav-item dropdown"> 98 <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">选项三</a> 99 <div class="dropdown-menu"> 100 <a href="" class="dropdown-item">111</a> 101 <a href="" class="dropdown-item">222</a> 102 <a href="" class="dropdown-item">333</a> 103 </div> 104 </li> 105 <li class="nav-item"> 106 <a href="" class="nav-link disabled">选项四</a> 107 </li> 108 </ul> 109 </div>
22. pagination
1 <div class="container"> 2 <nav> 3 <ul class="pagination justify-content-center"> 4 <li class="page-item disabled"> 5 <a href="javasrcipt:void(0);" class="page-link">Prev</a> 6 </li> 7 <li class="page-item active"> 8 <a href="javasrcipt:void(0);" class="page-link">1</a> 9 </li> 10 <li class="page-item"> 11 <a href="" class="page-link">2</a> 12 </li> 13 <li class="page-item"> 14 <a href="" class="page-link">3</a> 15 </li> 16 <li class="page-item"> 17 <a href="" class="page-link">Next</a> 18 </li> 19 </ul> 20 </nav> 21 </div>
1 <script> 2 $(function () { 3 'use strict'; 4 $('[data-toggle="tooltip"]').tooltip(); 5 }); 6 </script>
23. progress
1 <div class="container"> 2 <br> 3 <div class="progress"> 4 <div class="progress-bar" style="1%;min-2em;">1%</div> 5 </div> 6 <br> 7 <div class="progress"> 8 <div class="progress-bar progress-bar-striped w-50 progress-bar-animated">加载中50%</div> 9 </div> 10 </div>
24. tab
1 <div class="container"> 2 <ul class="nav nav-tabs"> 3 <li class="nav-item"> 4 <a href="#c" class="nav-link active" data-toggle="tab">你好</a> 5 </li> 6 <li class="nav-item"> 7 <a href="#d" class="nav-link " data-toggle="tab">再见</a> 8 </li> 9 </ul> 10 </div> 11 <div class="tab-content py-3"> 12 <div id="c" class="tab-pane active"> 13 <p>第一次来吧<span class="font-weight-bold text-success" title="什么" data-toggle="tooltip" data-placement="top">点击</span></p> 14 </div> 15 <div id="d" class="tab-pane"> 16 <p>第二次来吧</p> 17 </div> 18 </div>
1 <script> 2 $(function () { 3 'use strict'; 4 $('[data-toggle="tooltip"]').tooltip(); 5 }); 6 </script>
25. table
1 <div class="container"> 2 <table class="table table-hover table-striped table-bordered"> 3 <thead> 4 <tr> 5 <th class="text-center">表格头1</th> 6 <th class="text-center">表格头2</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <th>第一行第一列</th> 12 <th>第一行第二列</th> 13 </tr> 14 <tr> 15 <th>第二行第一列</th> 16 <th>第二行第二列</th> 17 </tr> 18 <tr> 19 <th>第三行第一列</th> 20 <th>第三行第二列</th> 21 </tr> 22 <tr> 23 ltth>第四行第一列</th> 24 <th>第四行第二列</th> 25 </tr> 26 </tbody> 27 </table>
26. theme
1 <div class="container"> 2 <!--色调 bootstrap自带默认主题的--> 3 <div class="bg-primary text-white">主色调</div> 4 <div class="bg-secondary text-white">次色调</div> 5 <div class="bg-success text-white">成功色调</div> 6 <div class="bg-warning text-white">警告色调</div> 7 <div class="bg-light text-white">亮色调</div> 8 </div>
27. toast
1 <div class="container"> 2 <div class="toast-show"> 3 <div class="toast-header"> 4 <img src="bootstrap-4.0.0-dist/images/5.png" alt="" width="20" class="rounded mr-2"> 5 <strong class="mr-auto">标题</strong> 6 <small>1分钟前</small> 7 <button class="close mb-1">×</button> 8 </div> 9 <div class="toast-body"> 10 您有新的好友请求。 11 </div> 12 </div> 13 </div> 14 <!--存在问题待解决-->