有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<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

老师，当我点击游戏的时候，怎么做才可以让它收起时是显示游戏，而不是娱乐

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap组件 2楼

这span是干啥的写不写好像没区别，页面也没显示span里面的内容

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap组件 3楼

老师，这段代码 $ 的用法，前面讲到过吗？怎么用的？

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap组件 4楼

你好，老师，这个我解决不了这个报错

模态框.rar

捕获.PNG

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap JavaScript插件 5楼

这节课的最后说错了吧?

动画效果的class 应该是 active 吧

progress-bar-striped 这个是条纹属性吧

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap组件 6楼

老师这章的资料没有了吗

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap实战 7楼

微电影.zip

为什么导航栏显示不出来呢？
轮播图没有效果
选项卡点击切换没有用

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4实战 8楼

微电影.zip

为什么我的导航部分文字搜索框不会显示

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4实战 9楼

<!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.第三个应该显示在右边，但是他显示到了左边。

我是从文档里直接粘贴过来的，其他样式显示出来效果了。视频里老师说这是预定义样式，不能修改，不知道哪里出错了。。

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 10楼

<!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" style="width: 500px">
    <div class="row">
        <!--one-->
        <div id="carouselExampleControls" class="carousel slide" 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="#carouselExampleControls" 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="#carouselExampleControls" 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="row">
        <!--        two-->
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                        aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                        aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                        aria-label="Slide 3"></button>
            </div>
            <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/3.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>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

老师，第二个例子是复制的bootstrap官网上的轮播图，但是效果并没有达到，第一个是文档中的，二者并没有差距，但实现效果为何不同呢？而且官网很多都实现不了，是什么原因？

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4实战 11楼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

问题1，JS那个引入不了

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 12楼

我比较想知道这个课程主要是为了做啥，就一直在念文档，代码都没看清楚，整个课程就在复制黏贴复制黏贴，重点要点一个没有。。那还不如不要这个课程，直接叫大家去看官网解释文档就好了

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4组件 13楼

老师，我重新下载了浏览器，还是不行，还有什么办法解决啊？

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 14楼

4.1.1BootStrap布局.zip

bootstrap-5.0.0-beta2-dist.zip

老师，我在官方下载的，在移动端不是100%，怎么回事？

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 15楼

同学您好