Question

在12网格引导系统之后，我如何将图像代码放在中间的jumbotron text-centre类下面的示例一中？我如何使用媒体查询来确保图像具有响应性并适合所有设备和浏览器？

示例1

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" target="_blank">
          <img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="picture of me" style="width:100%">
        </a>
      </div>
</div>

完整网站代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Liam Docherty Digital Portfolio</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<style>
.body {
  font-family: "Lato", sans-serif
}

.img {
    width: 100%;
    height: auto;
}

.thumbmail {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
</style>

<body>
<div class="container">
  <div class="jumbotron text-center">
    <h1>About Me</h1>
    <p>Find out more about me!</p>
  </div>
  <div class="row">
  <div class="col-md-4">
      <div class="thumbnail">
          <img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="Nature" style="width:100%">
        </a>
      </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="well">
        <h3>Who am I?</h3>
        <p>My name is Liam Docherty and I'm 17 years old, currently studying at BLANK. In 2016 when I was taking my GCSE exams, I found my passion which was IT. My favourite topic within IT is software development. The reason how I found out this was my main passion with IT is because, I was assigned a task which was to create a website advertising myself to potential employees and really enjoyed learning multiple programming languages.</p>
        <p>Overall, I have multiple experience within a range of different sectors within IT. For example, I have knowledge of installing and maintaining hardware and software in a technology system. Moreover, I have experience using application software such as Adobe Photoshop CS6, Adobe Premier Pro CS6 and Adobe Illustrator CS6.</P>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="well">
        <h3>Skills I can offer</h3>
        <p>Front-end Development
          <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
          </ul>
        </p>
        <p>Installing and maintaining hardware such as
          <ul>
            <li>Upgrading RAM</li>
            <li>Installing network card</li>
            <li>Using air duster to reduce dust build up in fan component</li>
          </ul>
        </p>
        <p>Installing and maintaining software such as
          <ul>
            <li>Upgrading operating system</li>
            <li>Installing anti-virus application software</li>
            <li>Doing a defragment on hard drive</li>
          </ul>
        </p>
        <p>Experience using application software such as...
          <ul>
            <li>Adobe Photoshop CS6</li>
            <li>Adobe Premier Pro CS6</li>
            <li>Adobe Illustrator CS6</li>
          </ul>
        </p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="well">
        <h3>Future goals within IT</h3>
        <p><ul>
          <li>Improve my skills on using programming language javascript</li>
          <li>Learn how to use Adobe After Effects to improve editing skills</li>
          <li>Expand my knowledge on bootstrap</li>
        </ul></p>
      </div>
    </div>
    </div>
    </div>
</body>
</html>

Answer 1

只要您的图片具有100％宽度属性和高度自动，您的图像就会缩放到它的父元素。因此，图像大小取决于.thumbnail parent，它继承了它的父元素的大小，它是元素的子元素，具有.col-sm-4类（该类定义它的大小）。

Answer 2

在http://bootsnipp.com和http://getbootstrap.com/getting-started/等网站上重新引导自举文档和代码示例可以帮助您防止任何引导代码丢失。

但要在所有浏览器上生成图像，您需要将class="img-responsive"类添加到<img src tag，这与添加style="width: 100%" height: "auto";相同

为了使其具有响应性，您可以选择主要断点，并按照您希望的方式设置样式。但是我的建议是利用所有引导标签和类，它可以简化你创建多个断点的工作，例如在中型设备上使用col-md-12，在小型设备上使用col-sm-12 col-lg-12 on large设备

使用bootstrap我该怎么做？

2 个答案: