html - Bootstrap Typography：没有找到合适的大写和反向值的类属性

Question

问题是：使用引导程序和 html 组件创建如图所示的报纸布局（看起来与我的代码的输出相同）

图片链接：https ://drive.google.com/file/d/1KwcUdHZznQvVtKlsGVD-TZK7tWR5-d6X/view?usp=sharing

涵盖的概念：引导排版

笔记：-

布局应如图所示。
在 body 元素中创建一个父 div，其中 class 作为容器。
标题“THE NEWS”必须是 h2 标题，并且 NEWS 的缩写必须在鼠标悬停时指示为 North South East West [使用适当的引导排版组件]。
“THE NEWS”下面的文字必须具有上下文成功背景。
确保使用引导排版组件突出显示“国家新闻”和“世界新闻”。
国家新闻和世界新闻必须在两个单独的面板中。但两者都应该在同一个小组中。
国家新闻和世界新闻小组正文必须采用小字体。
版权信息必须是大写的，使用引导类应用于适当引导组件内的段落标签。

同样，警告信息必须在引导警告类中，并且引号必须是反向的，如图所示。

 <html lang="en">
 <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
  <head>
         <title>Bootstrap Example</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
         <script src="/additional_files/js/webtechnology/bootstrap/bootstrap.min.js"></script>
         <script src="/additional_files/js/webtechnology/jquery/jquery.min.js"></script>
 </head>
 <body>

     <!-- CREATE THE PAGE LAYOUT ACCORDING TO GIVEN SPECIFICATIONS  -->
     <!-- HINT :- Use PANEL,abbr,mark,small,Various helper classes and various responsive utilities concepts related to bootstrap -->
     <div class="container">
         <h2>THE <u><abbr title="North">N</abbr><abbr title="East">E</abbr><abbr title="West">W</abbr><abbr title="South">S</abbr></u></h2>
         <p class="bg-success">This is an e-paper that collates national and world news</p>

         <div class="panel-group">
             <div class="panel panel-default">
                 <div class="panel-heading"><mark>National News</mark></div>
                 <div class="panel-body text-primary"><small>This section displays all national news and events</small></div>
             </div>
             <div class="panel panel-default">
                 <div class="panel-heading"><mark>World News</mark></div>
                 <div class="panel-body"><small>This section displays all world news and events</small></div>
             </div>
         </div>
     </div>
     <div><p class="text-uppercase">COPYRIGHT:- THE NEWS INDIA COMPANY</p>
     <blockquote class="blockquote-reverse warning">
     Warning:- Do Not Reproduce
     </blockquote>
     </div>
     </body>
     </html>


 <!-- end snippet -->

此代码正确地给出了输出，但出现了我不知道如何解决的错误

显示的错误消息是：没有找到合适的大写和反向值的类属性

score 0 · Accepted Answer

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
    <h2>THE <abbr title="North South East West">NEWS</abbr></h2>
    <p class="bg-success">This is an e-paper that collatesnational and world news</p>
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading"><mark>National News</mark></div>
            <div class="panel-body text-primary">This section displays all national news and events</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading"><mark>World News</mark></div>
            <div class="panel-body">This section displays all world news and events</div>
        </div>
    </div>
    <div>
        <p class="text-uppercase">copyright :- the news india company</p>
        <blockquote class="blockquote-reverse text-warning">Warning:- Do Not Reproduce</blockquote>
    </div>
</div>

score 0 · Accepted Answer

<div class="container">
  <h2>THE <abbr title="North South East West">NEWS</abbr></h2>
  <p class="bg-success">This is an e-paper that contains national and world news</p>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading"><mark>National News</mark></div>
      <div class="panel-body text-primary"><small>This section displays all national news and events</small></div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading"><mark>World News</mark></div>
      <div class="panel-body"><small>This section displays all world news and events</small></div>
    </div>
  </div>
</div>
<blockquote>
  <p class="text-uppercase">Copyright :- The news India company</p>
</blockquote>
<blockquote class="blockquote-reverse">
  <p class="text-warning">Warning:- Do Not Reproduce</p>
</blockquote>

html - Bootstrap Typography：没有找到合适的大写和反向值的类属性

2 回答 2

Related

Reference