会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133499个问题
Python 全系列/第六阶段:数据库与AI协同技术实战/MySQL数据库的使用 34261楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/飞机大战小项目训练 34263楼
Python 全系列/第一阶段:Python入门/面向对象 34264楼
JAVA 全系列/(旧的隐藏)第二十一阶段:百战商城项目(Spring Cloud最新架构)/百战商城项目 34265楼

<!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>

屏幕截图 2021-08-22 205717.png

屏幕截图 2021-08-22 210447.png

老师,代码里边”底部备注来源“出错:1.两行文字重合,如果取消图二画圈的部分就会显示正常。2.第三个应该显示在右边,但是他显示到了左边。

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


WEB前端全系列/第四阶段:BootStrap框架模块/BootStrap4基础 34268楼
JAVA 全系列/第七阶段:项目管理与SSM框架/Maven 34269楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/JAVA入门和背景知识 34270楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器(旧) 34273楼
Python 全系列/第一阶段:Python入门/序列 34275楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637