Question

https://codepen.io/anon/pen/QgaRpz?editors=1000

我复制了此codepen的HTML CSS代码但它没有给出相同的输出。灰色背景的划分什么都没有，我很困惑2个相同的代码可以给出不同的输出。

我的HTML代码：

<html>

<style>
h1 {
  color: #DC2827;
  font-size: 40px;
  font-weight: 700;
}

h3 {
  font-size: 30px;
}

h1, h2, h3 {
  font-family: 'Roboto Condensed', sans-serif;
}

.title {
  margin-top: 20px;
}

.main-img {
  width: 100%;
}

ul {
  list-style: none;
}
.time {
  color: #DC2827;
  font-size: 20px;
}

li, p {
  font-size: 18px;
  margin: 10px;
}

.nav-tabs {
   text-align:center;
   float:none;
   display:inline-block;
   margin-bottom: 30px;
}


</style>
<div class="container">
  <div class="well title text-center">
    <h1 class="heading">Ruby On Rails</h1>
    <h2>A  Web Aplication Framework</h2>
    <p>Ruby on Rails, or simply Rails, is a web application framework written in Ruby under MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates
  the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention
  over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.</p>
  </div>

   <div class="well">
    <img src="https://udemy-images.udemy.com/course/750x422/531360_06c4.jpg" alt="Ruby on Rails Image" class="responsive main-img" />
  </div>


  <div class="well text-center">
    <h3>History</h3>
    <hr />

    <ul class="list-group">
      <li class="list-group-item"><span class="time">July 2004 - </span>David Heinemeier Hansson first released Rails as open source.</li>

      <li class="list-group-item"><span class="time">February 2005 - </span>Commit rights to the project has been shared.</li>
      <li class="list-group-item"><span class="time">August 2006 - </span>Apple announced that it would ship Ruby on Rails with Mac OS X v10.5 "Leopard".</li>
      <li class="list-group-item"><span class="time">March 2009 - </span>Rails version 2.3 was released.</li>
      <li class="list-group-item"><span class="time">December 2008 - </span>Ruby on Rails announced it would work with the Merb project to bring "the best ideas of Merb" into Rails 3, ending the "unnecessary duplication" across both communities. Merb was merged with Rails as part
        of the Rails 3.0 release.</li>
      <li class="list-group-item"><span class="time">August 2011 - </span>Rails 3.1 was released featuring Reversible Database Migrations, Asset Pipeline, Streaming, jQuery as default JavaScript library and newly introduced CoffeeScript and Sass into the stack.</li>
      <li class="list-group-item"><span class="time">January 2012 - </span>Rails 3.2 was released with a faster development mode and routing engine (also known as Journey engine), Automatic Query Explain and Tagged Logging. Rails 3.2.x is the last version that supports Ruby 1.8.7.
        Rails 3.2.12 supports Ruby 2.0</li>
      <li class="list-group-item"><span class="time">June 2013 - </span>Rails 4.0 was released introducing Russian Doll Caching, Turbolinks, Live Streaming as well as making Active Resource, Active Record Observer and other components optional by splitting them as gems.</li>
      <li class="list-group-item"><span class="time">April 2014 - </span>Rails 4.1 was released introducing Spring, Variants, Enums, Mailer previews, and secrets.yml.</li>
      <li class="list-group-item"><span class="time">December 2014 - </span>Rails 4.2 was released introducing Active Job, asynchronous emails, Adequate Record, Web Console, and foreign keys.</li>
      <li class="list-group-item"><span class="time">Early 2016 - </span>Rails 5.0 is set to release. Notable additions in Rails 5.0 include an option for an API-only application suitable for use as a backend to JavaScript or mobile applications. Also Action Cable for live features such as chat and notifications. </li>
    </ul>

    </div>

    <div class="well">
    <h3 class="text-center">Links</h3>
    <hr />
    <div class="text-center">

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#wiki" aria-controls="wiki" role="tab" data-toggle="tab">Wiki</a></li>
        <li role="presentation"><a href="#web" aria-controls="web" role="tab" data-toggle="tab">Web</a></li>
        <li role="presentation"><a href="#api" aria-controls="api" role="tab" data-toggle="tab">API</a></li>
        <li role="presentation"><a href="#github" aria-controls="github" role="tab" data-toggle="tab">Github</a></li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="wiki"><a href="https://en.wikipedia.org/wiki/Ruby_on_Rails" target="_blank">https://en.wikipedia.org/wiki/Ruby_on_Rails</a></div>
        <div role="tabpanel" class="tab-pane" id="web"><a href="http://rubyonrails.org/" target="_blank">http://rubyonrails.org/</a></div>
        <div role="tabpanel" class="tab-pane" id="api"><a href="http://api.rubyonrails.org/" target="_blank">http://api.rubyonrails.org/</a></div>
        <div role="tabpanel" class="tab-pane" id="github"><a href="https://github.com/rails/rails" target="_blank">https://github.com/rails/rails</a></div>
      </div>

    </div>
  </div>

  <div class="well text-center">
    <p> Copyrights &copy; none.</p>
  </div>
</div>
</html>

Answer 1

您需要在代码中注入bootstrap外部库。

将此链接添加到您的<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

以及此<script> <{1}}

<body>

使用bootstrap：

https://jsfiddle.net/DTcHh/34298/

没有引导程序：

https://jsfiddle.net/suunyz3e/1437/

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   <html>
  <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  </head>
  <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

的CSS：

<div class="container">
  <div class="well title text-center">
    <h1 class="heading">Ruby On Rails</h1>
    <h2>A  Web Aplication Framework</h2>
    <p>Ruby on Rails, or simply Rails, is a web application framework written in Ruby under MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates
  the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention
  over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.</p>
  </div>
  <div class="well">
    <img src="https://udemy-images.udemy.com/course/750x422/531360_06c4.jpg" alt="Ruby on Rails Image" class="responsive main-img" />
  </div>


  <div class="well text-center">
    <h3>History</h3>
    <hr />

    <ul class="list-group">
      <li class="list-group-item"><span class="time">July 2004 - </span>David Heinemeier Hansson first released Rails as open source.</li>

      <li class="list-group-item"><span class="time">February 2005 - </span>Commit rights to the project has been shared.</li>
      <li class="list-group-item"><span class="time">August 2006 - </span>Apple announced that it would ship Ruby on Rails with Mac OS X v10.5 "Leopard".</li>
      <li class="list-group-item"><span class="time">March 2009 - </span>Rails version 2.3 was released.</li>
      <li class="list-group-item"><span class="time">December 2008 - </span>Ruby on Rails announced it would work with the Merb project to bring "the best ideas of Merb" into Rails 3, ending the "unnecessary duplication" across both communities. Merb was merged with Rails as part
        of the Rails 3.0 release.</li>
      <li class="list-group-item"><span class="time">August 2011 - </span>Rails 3.1 was released featuring Reversible Database Migrations, Asset Pipeline, Streaming, jQuery as default JavaScript library and newly introduced CoffeeScript and Sass into the stack.</li>
      <li class="list-group-item"><span class="time">January 2012 - </span>Rails 3.2 was released with a faster development mode and routing engine (also known as Journey engine), Automatic Query Explain and Tagged Logging. Rails 3.2.x is the last version that supports Ruby 1.8.7.
        Rails 3.2.12 supports Ruby 2.0</li>
      <li class="list-group-item"><span class="time">June 2013 - </span>Rails 4.0 was released introducing Russian Doll Caching, Turbolinks, Live Streaming as well as making Active Resource, Active Record Observer and other components optional by splitting them as gems.</li>
      <li class="list-group-item"><span class="time">April 2014 - </span>Rails 4.1 was released introducing Spring, Variants, Enums, Mailer previews, and secrets.yml.</li>
      <li class="list-group-item"><span class="time">December 2014 - </span>Rails 4.2 was released introducing Active Job, asynchronous emails, Adequate Record, Web Console, and foreign keys.</li>
      <li class="list-group-item"><span class="time">Early 2016 - </span>Rails 5.0 is set to release. Notable additions in Rails 5.0 include an option for an API-only application suitable for use as a backend to JavaScript or mobile applications. Also Action Cable for live features such as chat and notifications. </li>
    </ul>


  </div>

  <div class="well">
    <h3 class="text-center">Links</h3>
    <hr />
    <div class="text-center">

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#wiki" aria-controls="wiki" role="tab" data-toggle="tab">Wiki</a></li>
        <li role="presentation"><a href="#web" aria-controls="web" role="tab" data-toggle="tab">Web</a></li>
        <li role="presentation"><a href="#api" aria-controls="api" role="tab" data-toggle="tab">API</a></li>
        <li role="presentation"><a href="#github" aria-controls="github" role="tab" data-toggle="tab">Github</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="wiki"><a href="https://en.wikipedia.org/wiki/Ruby_on_Rails" target="_blank">https://en.wikipedia.org/wiki/Ruby_on_Rails</a></div>
        <div role="tabpanel" class="tab-pane" id="web"><a href="http://rubyonrails.org/" target="_blank">http://rubyonrails.org/</a></div>
        <div role="tabpanel" class="tab-pane" id="api"><a href="http://api.rubyonrails.org/" target="_blank">http://api.rubyonrails.org/</a></div>
        <div role="tabpanel" class="tab-pane" id="github"><a href="https://github.com/rails/rails" target="_blank">https://github.com/rails/rails</a></div>
      </div>

    </div>
  </div>

  <div class="well text-center">
    <p> Copyrights &copy; none.</p>
  </div>
</div>
  </body>
</html>

Answer 2

实际上你需要在代码笔中加入css和js。Docs

Answer 3

您需要在代码中注入bootstrap外部库。

将此链接添加到您的

   <link rel="stylesheet" 





href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

这是你的

    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>

使用bootstrap：

https://jsfiddle.net/DTcHh/34298/

没有引导程序：

https://jsfiddle.net/suunyz3e/1437/

并添加jquery

从代码笔给出的HTML css代码

3 个答案: