<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> </head> <body> <!-- 标题 两种写法 推荐使用第一种 --> <div class="container"> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> </div> <div class="container"> <p class="h1">h1. Bootstrap heading</p> <p class="h2">h2. Bootstrap heading</p> <p class="h3">h3. Bootstrap heading</p> <p class="h4">h4. Bootstrap heading</p> <p class="h5">h5. Bootstrap heading</p> <p class="h6">h6. Bootstrap heading</p> </div> <!-- 相当于标题注释 --> <h3> Fancy display heading <small class="text-muted">With faded secondary text</small> </h3> <!-- 显示标题 --> <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> <!-- 文本内联元素 --> <p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p> <!-- Blockquote 来源备注与引用 --> <blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> <!-- 底部备注来源 --> <blockquote class="blockquote"> <p class="mb-0">爱上一个地方,就应该背上包去旅游,走得更远。</p> <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer> </blockquote> <blockquote class="blockquote text-center"> <p class="mb-0">爱上一个地方,就应该背上包去旅行,走得更远。</p> <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer> </blockquote> <blockquote class="blockquote text-right"> <p class="mb-0">爱上一个地方,就应该背上包去旅行,走得更远。</p> <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer> </blockquote> <!-- 列表 直接去掉样式 --> <ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul> <!-- 分行或单行多列并排 --> <ul class="list-inline"> <li class="list-inline">列表之一</li> <li class="list-inline">列表之二</li> <li class="list-inline">列表之三</li> </ul> <ul class="list-inline"> <li class="list-inline-item">列表之一</li> <li class="list-inline-item">列表之二</li> <li class="list-inline-item">列表之三</li> </ul> <script src="js/jquery.min.1.12.4.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>
老师,代码里边”底部备注来源“出错:1.两行文字重合,如果取消图二画圈的部分就会显示正常。2.第三个应该显示在右边,但是他显示到了左边。
我是从文档里直接粘贴过来的,其他样式显示出来效果了。视频里老师说这是预定义样式,不能修改,不知道哪里出错了。。
想问下有bootstrap.bundle.min.js文件吗,我官网上下载老是失败
<!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>
想问下我的轮播图出不来效果,是哪里有问题的呢
<!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秒的时候呈现出来的效果,这边是一段空白。
老师这章的资料没有了吗
<div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 娱乐 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">影视</a></li> <li><a href="#">游戏</a></li> <li><a href="#">新闻</a></li> </ul> </div> </div>
屏幕截图 2023-01-09 201546.png
老师,当我点击游戏的时候,怎么做才可以让它收起时是显示游戏,而不是娱乐
老师,我重新下载了浏览器,还是不行,还有什么办法解决啊?
非常抱歉给您带来不好的体验!为了更深入的了解您的学习情况以及遇到的问题,您可以直接拨打投诉热线:
我们将在第一时间处理好您的问题!
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护:百战汇智(北京)科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证:京B2-20212637