Question

我刚刚进入bootstrap之前我只使用普通的html，php，css代码

tbh我太害怕使用bootstrap我正在尝试创建电子商务网站，我在html上添加了所有的工作，并决定切换和传输我的php / sql代码并使用bootstrap应用它我有两个问题：

移动我的php / sql代码并将其应用于bootstrap中的其他页面是难的还是复杂的
如何将mysql中的url数据加载到我的缩略图中（图片，产品信息等等）

我很抱歉使用我尝试使用ctrl -k插入代码的代码片段，但格式很混乱

<div class="container">
  <div class="row text-center">
    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
      <div class="thumbnail">
        <img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
        <div class="caption">
          <h3>Product</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          <p><a href="#" class="btn btn-primary" role="button">  View</a>
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
      <div class="thumbnail">
        <img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
        <div class="caption">
          <h3>Product</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          <p><a href="#" class="btn btn-primary" role="button">  View</a> 
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
      <div class="thumbnail">
        <img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
        <div class="caption">
          <h3>Product</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          <p><a href="#" class="btn btn-primary" role="button">  View</a> 
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-6 hidden-lg hidden-md hidden-sm">
      <div class="thumbnail">
        <img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
        <div class="caption">
          <h3>Product</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          <p><a href="#" class="btn btn-primary" role="button">  View</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="row text-center hidden-xs">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="thumbnail">
        <img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
        <div class="caption">
          <h3>Product</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          <p><a href="#" class="btn btn-primary" role="button">  View</a> 
          </p>
        </div>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="thumbnail">
        <img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
        <div class="caption">
          <h3>Product</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          <p><a href="#" class="btn btn-primary" role="button">  View</a> 
          </p>
        </div>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="thumbnail">
        <img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
        <div class="caption">
          <h3>Product</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          <p><a href="#" class="btn btn-primary" role="button">  View</a> 
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

bootstrap只是css和javascript，虽然html标记可能比你使用的要多得多。如果您之前没有使用过bootstrap，那么您已经有了答案，因为过程是相同的。只需添加在缩略图＆＃39; img＆＃39;标签＆＃39; src＆＃39;属性

Answer 2

使用这样可能对你有用。

<div class="container">
  <div class="row text-center">

  <?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT image_path FROM tbl_name";
$result = $conn->query($sql);

while($row = $result->fetch_assoc())
{
?>

    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
      <div class="thumbnail">
        <img src="<?=$row['image_path']; ?>" alt="Thumbnail Image 1" class="img-responsive">
        <div class="caption">
          <h3>Product</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
          <p><a href="#" class="btn btn-primary" role="button">  View</a>
          </p>
        </div>
      </div>
    </div>
 <?php
}
?> 

  </div>
</div>

Answer 3

移动我的php / sql代码并将其应用到bootstrap中的其他页面是难的还是复杂的？

不，它一点也不困难或复杂。 Bootstrap是用于开发响应式站点的最流行的HTML，CSS和JavaScript框架。只是你应该学习基础知识。

如何将mysql中的url数据加载到我的缩略图（图像，产品信息等等）

希望您了解基本的选择查询。通过在img src中使用选择查询获取图像路径和显示路径。它会很完美。

如何将数据库中的图像URL加载到引导程序缩略图

3 个答案: