个人中心
gpt4 book ai didi

html - 使用 bootstrap 我该怎么做？

转载 作者：行者123 更新时间：2023-11-28 04:04:29 25 4
gpt4 key购买 nike

在 Bootstrap 的 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>

最佳答案

引用 http://bootsnipp.com 等网站上的 Bootstrap 文档和代码示例和 http://getbootstrap.com/getting-started/如果您迷失在任何 Bootstrap 代码中，将会对您有所帮助。

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

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

关于html - 使用 bootstrap 我该怎么做？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43023012/

25 4 0
文章推荐： c++ - 将 C++ 函数转换为递归函数
文章推荐： html - 开始和结束标签之间的文本术语？
文章推荐： php - 自动化出生日期选择元素
文章推荐： php - 使用 PHP 设置自定义 URL
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com