使用.img-responsive Bootstrap类生成图像元素

Generating Image Elements with .img-responsive Bootstrap Class

本文关键字：图像 图像元 元素 img-responsive Bootstrap 使用      更新时间：2023-09-26

所以我试图通过JS在页面上自动加载图像。我希望这页基本上是一个空白页，可以作为许多页。

结构:

项目主页>点击项目>项目页面

然而，我不知道如何让图像加载到我的引导列作为.img-responsive图像。

我将附加片段到页面和JS。

注意:图像目前都是相同的，计划稍后更改…

谢谢!

首页- 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Philesq</title>
        <!-- external CSS link -->
        <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>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/style.css">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
    </head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="./index.html">Philesq</a>
        </div>
        <div class="collapse navbar-collapse" id="main-navbar">
          <ul class="nav navbar-nav navbar-right">
            <li name="works"><a href="./works.html">works</a></li>
            <li name="about"><a href="./about.html">about</a></li>
            <li><a href="mailto:la@philesq.com?subject=h o l a !">contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
            <a href="./projects.html?page=praxis">
                <img src="./images/praxis.png" class="img-responsive">
                <h6>praxis studio</h6>
            </a>
        </div> 
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
            <a href="./projects.html?page=#woodbury">
                <img src="./images/woodbury.jpg" class="img-responsive">
                <h6>woodbury school or architecture</h6>
            </a>
        </div> 
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
            <a href="./projects.html?page=#mmr">
                <img src="./images/mmr.gif" class="img-responsive">
                <h6>miracle manor retreat</h6>
            </a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
            <a href="./projects.html?page=#felix">
                <img src="./images/felix.gif" class="img-responsive">
                <h6>félix beltrán</h6>
            </a>
        </div> 
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
            <a href="./projects.html?page=#wtmf">
                <img src="./images/wtmf.png" class="img-responsive">
                <h6>within the magnetic field</h6>
            </a>
        </div> 
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
            <a href="./projects.html?page=#cargo">
                <img src="./images/cargo.gif" class="img-responsive">
                <h6>cargo typeface</h6>
            </a>
        </div> 
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

项目页面——

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Philesq</title>
        <!-- external CSS link -->
        <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>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/style.css">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
    </head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="./index.html">Philesq</a>
        </div>
        <div class="collapse navbar-collapse" id="main-navbar">
          <ul class="nav navbar-nav navbar-right">
            <li name="works"><a href="./works.html">works</a></li>
            <li name="about"><a href="./about.html">about</a></li>
            <li><a href="mailto:la@philesq.com?subject=h o l a !">contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="row">
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 column text-center">
            <div id="imageContainer" class="img-responsive">
            </div>
        </div> 
    </div>
    <script src="./js/index.js"></script>
</body>
</html>
<<p> Java脚本/strong> 
$(function(){
var projects = ['praxis','woodbury','mmr','felix','wtmf','cargo'];
    var pages = {
        'praxis': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
        'woodbury': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
        'mmr': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
        'felix': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
        'wtmf': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
        'cargo': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
    }
    var page = window.location.hash.substring(1);
    page = (page) ? page:'praxis';
    console.log(page);
    for(var i = 0; i < pages[page].length; i++)
    {
        var imagePath = pages[page][i];
        console.log(imagePath);
        $('#imageContainer').append('<img src="./' + imagePath + '">');
    }
});

用img-responsive类创建它们:

$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');

img-responsive是在Bootstrap中定义的类。如果您想要附加的图像是img-responsive，您只需要在附加时在类列表中包含这个类。

只改变 

$('#imageContainer').append('<img src="./' + imagePath + '">');


$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');

如果你不想使用jQuery，你也可以用普通的JS来做这件事。

var element = document.createElement('img');
element.className = "img-responsive";
// Or
element.classList.add("img-responsive");
var container = document.getElementById('yourContainer');
container.appendChild(element);
相关文章：