有文档吗。怎么资料里没有bootstrap视频中老师讲的文档
老师，视频老师的这个配套课程文档有木有呀？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" href="4.2.8%20bootstrap组件第二部分/css/bootstrap.min.css"> <link rel="stylesheet" href="4.2.8%20bootstrap组件第二部分/css/index.css"> <script src="4.2.8%20bootstrap组件第二部分/js/bootstrap.min.js"></script> <script src="4.2.8%20bootstrap组件第二部分/js/jquery-3.5.1.js"></script> </head> <body> <div class="container"> <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http://code.z01.com/img/2016instbg_01.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="http://code.z01.com/img/2016instbg_02.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="http://code.z01.com/img/2016instbg_03.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html>
老师，我的轮播图出不来效果呀
<div class="container"> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div>
老师，我点那个x怎么消失不了呀
老师有没有老师讲的PPT文档呀，方便以后看和记笔记
4.1.1bootStrap布局.rar
老师 我换了bootstrap版本，换成4.5.0版本的还是无法实现布局的效果，帮我看一下是哪儿出现问题了呢？
bootstrap-4.5.0-dist.zip
老师 我更改了bootstrap的版本还是无法实现布局的效果，引入老师您给版本在移动端小屏时占比不是100%。bootstrap的版本有些什么注意的地方吗
老师：请问一下我这个代码怎么无法实现布局效果呢，总是占100%
老师我想早点找到工作，学习路线应该怎么规划呢。请老师帮我制定一下，谢谢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/练习专用.css"> </head> <body> <div class="container"><div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div> <div class="alert alert-info" role="alert"> A simple info alert—check it out! </div> <div class="alert alert-light" role="alert"> A simple light alert—check it out! </div> <div class="alert alert-dark" role="alert"> A simple dark alert—check it out! </div> </div> <div class="alert alert-primary" role="alert"> A simple primary alert with<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert with<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success" role="alert"> A simple success alert with<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-danger" role="alert"> A simple danger alert with<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-warning" role="alert"> A simple warning alert with<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-info" role="alert"> A simple info alert with<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-light" role="alert"> A simple light alert with<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-dark" role="alert"> A simple dark alert with<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="container"> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>
老师，我有两个问题想问下——1.这里面2:40里的呈现效果跟视频不一样，它占满了整个宽度。
2.视频中3:40秒的时候呈现出来的效果，这边是一段空白。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/练习专用.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-3"></div> <div class="col-9"></div> </div> </div> <script src="js/jquery-1.12.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
老师我按照视频的演示做了一遍，在4:33秒的时候怎么跟视频中的不一样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm">三分之一</div> <div class="col-sm">三分之一</div> <div class="col-sm">三分之一</div> </div> </div> <script src="js/jquery-1.12.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
老师，视频中4:30秒的那个布局跟我的这个不一样，是引入文件不同的缘故嘛。视频中老师引入的文件我没有，都是自己找的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实战</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/index.css" /> </head> <body> <!--导航条--> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand"> <img src="images/footer_logo.png" width="100" height="40" class="d-inline-block align-top" alt="" /> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">全国</a> </li> <li class="nav-item"> <a class="nav-link" href="#">游戏</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 演出 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">喜剧</a> <a class="dropdown-item" href="#">话剧</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">想象</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"> 不被选中 <span class="badge badge-danger">new</span> </a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button> </form> </div> </nav> <!--轮播图--> <div class="banner"> <div class="container"> <div class="row"> <div class="col-md-8"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> <li data-target="#carouselExampleIndicators" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/1.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/2.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/3.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/4.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-md-4"> <div class="box"> <img src="images/img1.jpg" class="img-fluid" alt="..." /> <ul> <li><a href="#">音乐节</a></li> <li><a href="#">音乐节</a></li> <li><a href="#">音乐节</a></li> <li><a href="#">音乐节</a></li> </ul> </div> </div> </div> </div> </div> <!--内容区域--> <div class="container"> <div class="row content-one"> <div class="col-md-9"> <div class="row"> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/5.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/6.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/7.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/8.jpg" /> <div class="card-body"> 12345 </div> </div> </div> </div> </div> <div class="col-md-3"> <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">首页</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">其他</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <img src="images/img2.jpg" class="img-fluid" alt="..." /> 123456 </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <img src="images/img3.jpg" class="img-fluid" alt="..." /> 12345 </div> </div> </div> </div> <img src="images/ad1.jpg" class="img-fluid" alt=".." /> <div class="row content-three"> <div class="col-md-9"> <nav> <div class="nav nav-tabs" id="nav-tab1" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab1" data-toggle="tab" href="#nav-home1" role="tab" aria-controls="nav-home1" aria-selected="true">演唱会</a> <a class="nav-item nav-link" id="nav-profile-tab1" data-toggle="tab" href="#nav-profile1" role="tab" aria-controls="nav-profile1" aria-selected="false">舞台</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">话剧</a> <a class="nav-item nav-link" id="nav-contact-tab1" data-toggle="tab" href="#nav-contact1" role="tab" aria-controls="nav-contact1" aria-selected="false">综艺</a> </div> </nav> <div class="tab-content" id="nav-tabContent1"> <div class="tab-pane fade show active" id="nav-home1" role="tabpanel" aria-labelledby="nav-home-tab"> <div class="row"> <div class="col-md-3 col-sm-6 tab-list"> <div class="card"> <img class="card-img-top" src="images/9.jpg" alt=""> <p>[上海]百老汇经典音乐剧《狮子王》</p> </div> </div> <div class="col-md-3 col-sm-6 tab-list"> <div class="card"> <img class="card-img-top" src="images/10.jpg" alt=""> <p>[上海]百老汇经典音乐剧《狮子王》</p> </div> </div> <div class="col-md-3 col-sm-6 tab-list"> <div class="card"> <img class="card-img-top" src="images/11.jpg" alt=""> <p>[上海]百老汇经典音乐剧《狮子王》</p> </div> </div> <div class="col-md-3 col-sm-6 tab-list"> <div class="card"> <img class="card-img-top" src="images/12.jpg" alt=""> <p>[上海]百老汇经典音乐剧《狮子王》</p> </div> </div> <div class="col-md-3 col-sm-6 tab-list"> <div class="card"> <img class="card-img-top" src="images/9.jpg" alt=""> <p>[上海]百老汇经典音乐剧《狮子王》</p> </div> </div> <div class="col-md-3 col-sm-6 tab-list"> <div class="card"> <img class="card-img-top" src="images/10.jpg" alt=""> <p>[上海]百老汇经典音乐剧《狮子王》</p> </div> </div> <div class="col-md-3 col-sm-6 tab-list"> <div class="card"> <img class="card-img-top" src="images/11.jpg" alt=""> <p>[上海]百老汇经典音乐剧《狮子王》</p> </div> </div> <div class="col-md-3 col-sm-6 tab-list"> <div class="card"> <img class="card-img-top" src="images/12.jpg" alt=""> <p>[上海]百老汇经典音乐剧《狮子王》</p> </div> </div> </div> </div> <div class="tab-pane fade" id="nav-profile1" role="tabpanel" aria-labelledby="nav-profile-tab"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="card"> <img class="card-img-top" src="images/5.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="card"> <img class="card-img-top" src="images/6.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="card"> <img class="card-img-top" src="images/7.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="card"> <img class="card-img-top" src="images/8.jpg" /> <div class="card-body"> 12345 </div> </div> </div> </div> </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> <div class="row"> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/5.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/6.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/7.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/8.jpg" /> <div class="card-body"> 12345 </div> </div> </div> </div> </div> <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact-tab"> <div class="row"> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/5.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/6.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/7.jpg" /> <div class="card-body"> 12345 </div> </div> </div> <div class="col-6 col-md-3"> <div class="card"> <img class="card-img-top" src="images/8.jpg" /> <div class="card-body"> 12345 </div> </div> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="content-right"> <div class="item"> 内容1 </div> <div class="item"> 内容2 </div> <div class="item"> 内容3 </div> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-md-4 clearfix"> <img class="pull-left" src="images/footer_logo.png" alt=".." /> <div class="info pull-right"> <p class="footer-title">电影官网</p> <p class="small">占座</p> </div> </div> <div class="col-md-4 clearfix"> <img class="pull-left" src="images/phoneIcon.png" alt=".." /> <div class="info pull-right"> <p class="footer-title">电影官网</p> <p class="small">占座</p> </div> </div> <div class="col-md-4 clearfix"> <img class="pull-left" src="images/f_wx.png" alt=".." /> <img class="pull-left" src="images/f_wpr.png" alt=".." /> <div class="info pull-right"> <p class="footer-title">电影官网</p> <p class="small">占座</p> </div> </div> <p class="address">@2015北京微影时代科技有限公司版权所有 京ICP备14034406号-2</p> </div> </div> </div> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
和视频里老师写的代码还是有点区别的，不过效果基本上都达到了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>第一部分</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="js/bootstrap.min.js"></script> <script src="js/jquery-1.12.4.min.js"></script> </head> <body> <div class="card" style="width: 18rem;"> <img src="img/壁纸5.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-header"> Featured </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul> <div class="card-body"> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="container"> <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" data-interval="10000"> <img src="img/壁纸2.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item" data-interval="2000"> <img src="img/壁纸3.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/壁纸5.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script> $('.carousel').carousel(); </script> </body> </html>
想问下我的轮播图出不来效果，是哪里有问题的呢
想问下有bootstrap.bundle.min.js文件吗，我官网上下载老是失败
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
和视频里老师写的代码还是有点区别的，不过效果基本上都达到了
京公网安备 11011402011233号